/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
@font-face {
  font-family: "Inter";
  src: url("/modules/stthemeeditor/views/css/Inter-VariableFont_opsz,wght.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  --brand-color: #6ac9bb;
  --brand-color-hover: #45bdab;
  --brand-color-active: #26a18f;
  --brand-color-disabled: #f4f4f5;
  --brand-color-disabled-border: #e4e4e7;
  --brand-color-disabled-text: #a1a1aa;
}
/* Estilos generales */
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
a,
button,
div {
  font-family: "Inter";
}
.btn {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 16px;
  gap: 6px;
  border-radius: 6px;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  border: none !important;
  text-transform: none !important;
  &:active {
    scale: 0.97;
    transition: 0.2s ease-in-out;
  }
  &:hover {
    scale: 1.02;
    transition: 0.2s ease-in-out;
  }
}
.btn-primary {
  color: #fff !important;
  background-color: var(--brand-color) !important;
  box-shadow: 0px 1px 2px rgba(13, 183, 158, 0.4), 0px 0px 0px 1px #0db79e,
    inset 0px 0.75px 0px rgba(255, 255, 255, 0.2);
  &:hover {
    color: #fff;
    background-color: var(--brand-color-hover) !important;
    box-shadow: 0px 1px 2px rgba(13, 183, 158, 0.4), 0px 0px 0px 1px #0db79e,
      inset 0px 0.75px 0px rgba(255, 255, 255, 0.2);
  }
  &:focus {
    color: #fff;
    background-color: #6ac9bb;
    box-shadow: 0px 1px 2px rgba(13, 183, 158, 0.4), 0px 0px 0px 1px #0db79e,
      0px 0px 0px 2px #ffffff, 0px 0px 0px 4px rgba(59, 130, 246, 0.6),
      inset 0px 0.75px 0px rgba(255, 255, 255, 0.2);
  }
  &:disabled {
    background-color: var(--brand-color-disabled) !important;
    border: 1px solid var(--brand-color-disabled-border) !important;
    box-shadow: none;
    color: var(--brand-color-disabled-text) !important;
  }
  &:active {
    color: #fff;
    background-color: var(--brand-color-active);
    box-shadow: 0px 1px 2px rgba(13, 183, 158, 0.4), 0px 0px 0px 1px #0db79e,
      inset 0px 0.75px 0px rgba(255, 255, 255, 0.2);
  }
  & svg {
    width: 15px;
    height: 15px;
  }
  & i {
    font-size: 15px;
  }
}
.btn-default,
.btn.ajax_add_to_cart_button,
.btn.add-to-cart {
  background-color: #27272a !important;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px #18181b,
    inset 0px 0.75px 0px rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.88) !important;
  &:hover {
    background-color: #3f3f46 !important;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px #18181b,
      inset 0px 0.75px 0px rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.88);
  }
  &:focus {
    background-color: #27272a !important;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px #18181b,
      0px 0px 0px 2px #ffffff, 0px 0px 0px 4px rgba(59, 130, 246, 0.6),
      inset 0px 0.75px 0px rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.88);
  }
  &:disabled {
    background-color: #f4f4f5 !important;
    border: 1px solid #e4e4e7 !important;
    color: #a1a1aa !important;
  }
  &:active {
    background-color: #52525b !important;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px #18181b,
      inset 0px 0.75px 0px rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.88);
  }
  & i {
    font-size: 15px;
  }
}

.btn-secondary {
  color: #18181b !important;
  background-color: #f4f4f5 !important;
  border: 1px solid #e4e4e7 !important;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05),
    0px 0px 0px 1px rgba(0, 0, 0, 0.05);
  &:hover {
    color: #18181b;
    background-color: #e4e4e7 !important;
    border-color: #d4d4d8 !important;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08),
      0px 0px 0px 1px rgba(0, 0, 0, 0.08);
  }
  &:focus {
    color: #18181b;
    background-color: #f4f4f5 !important;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05),
      0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 0px 0px 2px #ffffff,
      0px 0px 0px 4px rgba(59, 130, 246, 0.6);
  }
  &:disabled {
    background-color: #fafafa !important;
    border-color: #e4e4e7 !important;
    color: #a1a1aa !important;
    cursor: not-allowed;
  }
  &:active {
    color: #18181b;
    background-color: #d4d4d8 !important;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05),
      0px 0px 0px 1px rgba(0, 0, 0, 0.05);
  }
}

/* Global Form Inputs Styles */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select {
  width: 100%;
  height: 32px;
  background: #fafafa;
  border: none;
  border-radius: 6px;
  padding: 0 8px;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: #18181b;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12),
    0px 0px 0px 1px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  box-sizing: border-box;

  &:focus {
    outline: none;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12),
      0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 0px 0px 2px #ffffff,
      0px 0px 0px 4px rgba(59, 130, 246, 0.6);
  }

  &::placeholder {
    color: #a1a1aa;
  }

  &:disabled {
    background-color: #f4f4f5;
    color: #a1a1aa;
    cursor: not-allowed;
  }
}

textarea {
  height: auto;
  min-height: 80px;
  padding: 8px;
  resize: vertical;
}

select {
  cursor: pointer;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2318181b' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  appearance: none;
}

/* Form Group Styles */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;

  & label {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #18181b;
    margin-bottom: 4px;
  }

  & .input-group {
    display: flex !important;
    align-items: stretch;
    padding: 0 !important;
    margin: 0 !important;
    border: none;
    box-sizing: border-box;

    & input {
      flex: 1;
      width: 100% !important;
      max-width: 100% !important;
      border-radius: 6px;
      margin: 0 !important;
      box-sizing: border-box;
    }

    & .input-group-btn {
      display: flex;
      align-items: center;
      max-height: 32px;
      padding: 0;
      margin: 0;

      & button,
      & .btn {
        height: 32px;
        border-radius: 6px;
        margin: 0;
        padding: 0 12px;
      }
    }
  }
}

/* Checkbox and Radio Styles */
input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  cursor: pointer;
}

.js-product-miniature {
  background: #ffffff;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  & .st_sticker_1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2px 4px;
    gap: 10px;
    position: absolute;
    left: 10px;
    top: 10px;
    background: #d0021b;
    border-radius: 4px;
    font-family: "Karla";
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    color: #ffffff;
  }
  & .nombre-producto {
    padding: 0 16px;
    text-align: left;
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #27272a;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: auto;
    margin-bottom: 6px;
  }
  & .pro_second_box {
    padding: 0 16px !important;
    & .product-price-and-shipping {
      text-align: left;
      & .price {
        font-family: "Inter";
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        color: #6ac9bb;
      }
      & .st_sticker_text {
        padding-left: 0;
      }
    }
  }
}
.list_grid_switcher {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  & .grid,
  & .list {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8.5px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: #18181b;
    &:active {
      scale: 0.97;
      transition: 0.2s ease-in-out;
    }
    & i {
      font-size: 15px;
    }
    & svg {
      width: 15px;
      height: 15px;
    }
  }
  & .selected {
    background: #ffffff !important;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12),
      0px 0px 0px 1px rgba(0, 0, 0, 0.08);
    color: #18181b !important;
  }
}

#search_filters {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  gap: 16px;
  background: #ffffff !important;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  color: #3f3f46 !important;
  & .feds_block_content {
    padding: 24px;
    & .feds_facet {
      display: flex;
      gap: 10;
      flex-direction: column;
      & .facet_title {
        padding: 16px 0;
        border-color: #e4e4e7;
        & .facet_title_text {
          font-family: "Inter";
          font-style: normal;
          font-weight: 600;
          font-size: 16px;
          line-height: 24px;
          color: #3f3f46;
        }
      }
      &:first-child .facet_title {
        padding-top: 0;
      }
      &:last-child .facet_title {
        border: none;
        padding-bottom: 0;
      }

      & i {
        color: var(--brand-color) !important;
      }
    }
    & .feds_link {
      font-family: "Inter";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: #27272a;
    }
    & .facet_colexp_block {
      gap: 6px;
      & .feds_custom-input-color {
        border: 2px solid #e4e4e7;
        border-radius: 999px;
      }
    }
  }
}

.category-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  & .category-header-left {
    width: 50%;
    & .category_page_heading {
      font-family: "Inter";
      font-style: normal;
      font-weight: 600;
      font-size: 30px;
      line-height: 38px;
      color: #181d27;
    }
    & .category-description {
      font-family: "Inter";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #18181b;

      & .st_read_more_box {
        & p {
          margin-bottom: 0;
        }
        & a {
          margin-top: 10px;
        }
      }
    }
  }
  & .category-header-right {
    width: 50%;
    & .category-cover {
      max-height: 502px;
      overflow: hidden;
      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

/* Subcategories Swiper Styles */
.subcategories-swiper-container {
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  gap: 30px;

  & .subcategories-title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #18181b;
    margin: 0;
  }

  & .subcategories-swiper-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 30px;
  }

  & .subcategories-swiper {
    flex: 1;
    overflow: hidden;
  }

  & .swiper-slide {
    display: flex;
    justify-content: center;
  }

  & .subcategory-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  & .subcategory-image-wrapper {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 100px;
    overflow: hidden;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
      0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease-in-out;

    &:hover {
      transform: scale(1.05);
    }

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  & .subcategory-name {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #18181b;
    margin: 0;

    & a {
      color: #18181b;
      text-decoration: none;

      &:hover {
        color: var(--brand-color);
      }
    }
  }

  /* Navigation Arrows */
  & .swiper-button-prev,
  & .swiper-button-next {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #18181b;
    transition: opacity 0.3s ease;

    &:after {
      display: none;
    }

    & svg {
      width: 25px;
      height: 25px;
    }

    &:hover {
      opacity: 0.7;
    }

    &.swiper-button-disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }
  }
}

/* Mobile Responsive */
@media (max-width: 767px) {
  .category-header {
    & .category-header-right {
      display: none;
    }
    & .category-header-left {
      width: 100%;
      padding-top: 24px;
      padding-bottom: 24px;
    }
  }

  .subcategories-swiper-container {
    padding: 24px 16px;

    & .subcategories-title {
      font-size: 16px;
      line-height: 24px;
    }

    & .subcategories-swiper-wrapper {
      gap: 16px;
    }

    & .swiper-button-prev,
    & .swiper-button-next {
      & svg {
        width: 20px;
        height: 20px;
      }
    }
  }
}

#banner_container_5,
#banner_container_14 {
  margin: 0 !important;
  & h2 {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 48px;
    line-height: 60px;
    text-align: center;
    letter-spacing: -0.02em;
    color: #ffffff;
  }
}

#home #center_colum,
#cms #center_column {
  padding: 0;
}

#category {
  & #columns {
    padding: 0;
    & .category-header-left {
      padding-left: 15px;
      padding-right: 15px;
    }
    & #subcategories {
      padding-left: 15px;
      padding-right: 15px;
    }
    & > .row {
      padding-left: 15px;
      padding-right: 15px;
    }
  }
}
#product .container {
  & > .row.product_page_container {
    width: 100%;
    margin-top: 24px;
  }
}
.category_blogs_container {
  background: #fafafa;
  padding: 40px 24px;
  border-top: 1px solid #e5e8eb;
  border-bottom: 1px solid #e5e8eb;

  & .title_block {
    display: none;
  }
  & .st_posts {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 10px;
    & .product_list_item {
      width: 100%;
      max-width: 100%;
      padding: 0 !important;
      & .block_blog {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        background: #ffffff;
        overflow: hidden;
        box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
          0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04);
        border-radius: 8px;
        & .pro_outer_box {
          padding: 0;
          width: 100%;
          & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
          }
          & .pro_second_box {
            padding: 12px;
            & .s_title_block a {
              font-family: "Inter";
              font-style: normal;
              font-weight: 600;
              font-size: 16px;
              line-height: 24px;
              color: #18181b;
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            }
            & .blok_blog_short_content {
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              font-family: "Inter";
              font-style: normal;
              font-weight: 500;
              font-size: 13px;
              line-height: 20px;
              color: #18181b;
            }
            & .btn.btn-default {
              display: inline-flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              padding: 6px 10px;
              gap: 6px;
              background-color: #ffffff !important;
              box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12),
                0px 0px 0px 1px rgba(0, 0, 0, 0.08);
              border-radius: 6px;
              font-family: "Inter";
              font-style: normal;
              font-weight: 400;
              font-size: 14px;
              line-height: 20px;
              color: #18181b !important;
            }
          }
        }
      }
    }
  }
}

.title_blog_home {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  & h2 {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #18181b;
    max-width: 75%;
  }
  & p {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #18181b;
    max-width: 75%;
  }
}

/* Blog Module Styles */
#module-stblog-default {
  & .st_posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;

    & .title_blog_home {
      grid-column: 1 / -1;
    }

    & .product_list_item {
      width: 100%;
      max-width: 100%;
      padding: 0 !important;
      border: none !important;

      & .block_blog {
        background: #ffffff;
        border: none !important;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
          0px 1px 2px -1px rgba(0, 0, 0, 0.08),
          0px 2px 4px 0px rgba(0, 0, 0, 0.04);
        transition: transform 0.2s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
            0px 2px 4px -1px rgba(0, 0, 0, 0.08),
            0px 4px 8px 0px rgba(0, 0, 0, 0.08);
        }

        & .pro_outer_box {
          padding: 0;
          width: 100%;

          & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
          }

          & .pro_second_box {
            padding: 12px;

            & .s_title_block a {
              font-family: "Inter";
              font-style: normal;
              font-weight: 600;
              font-size: 16px;
              line-height: 24px;
              color: #18181b;
              text-decoration: none;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;

              &:hover {
                color: var(--brand-color);
              }
            }

            & .blok_blog_short_content {
              font-family: "Inter";
              font-style: normal;
              font-weight: 400;
              font-size: 14px;
              line-height: 20px;
              color: #18181b;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
              margin: 8px 0;
            }

            & .btn {
              margin-top: 8px;
            }
          }
        }
      }
    }
  }
}

/* Blog Module Responsive - Tablet */
@media (max-width: 991px) {
  #module-stblog-default {
    & .st_posts {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
  }
}

/* Blog Module Responsive - Mobile */
@media (max-width: 767px) {
  #module-stblog-default {
    & .st_posts {
      grid-template-columns: 1fr;
      gap: 10px;
    }
  }
}

@media (max-width: 768px) {
  .st_posts {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .title_blog_home {
    & h2 {
      font-size: 20px;
      line-height: 28px;
      max-width: 100%;
    }
    & p {
      font-size: 14px;
      line-height: 20px;
      max-width: 100%;
    }
  }
}

#easycontent_386 {
  padding: 40px 24px;
  & .title_block_inner {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    color: #18181b;
  }
  & .easy_brother_block p {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #18181b;
  }
}

#header_right_top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  & .login,
  & .stsearchbar_link,
  & .userinfo_mod_top {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    gap: 8px;
    border: 1px solid #e4e4e7;
    border-radius: 100px;
    & .header_icon_btn_text {
      font-family: "Inter";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: #18181b;
    }
    & .header_icon_btn_icon {
      color: #18181b;
      font-size: 15px;
    }
  }
  & .userinfo_mod_top {
    position: relative;
    & .dropdown_tri {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: #18181b;
      & .arrow {
        font-size: 12px;
        color: #18181b;
      }
    }
  }
  & .blockcart {
    & .header_icon_btn_icon {
      & i {
        color: #18181b;
        font-size: 15px;
      }
      & .ajax_cart_quantity {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0px 2px;
        gap: 10px;

        background: #6ac9bb;
        border-radius: 100px;
        color: #18181b;
      }
    }
  }
}

/* Pre-Footer Styles */
.pre-footer {
  border-top: 1px solid #e5e8eb;

  & .pre-footer-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 40px 24px;
    width: 100%;
    box-sizing: border-box;
  }
}

/* Pre-Footer Text Styles */
.pre-footer-container {
  & h2,
  & .text-lg-semibold {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #18181b;
  }

  & h3,
  & .text-md-semibold {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #18181b;
  }

  & p,
  & .text-sm-regular {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #18181b;
  }
}

/* Customer Service Section */
.customer-service-section {
  width: 100%;

  & .customer-service-title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #18181b;
    margin: 0 0 24px 0;
  }

  & .customer-service-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
  }
}

/* Service Card */
.service-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px;
  gap: 12px;
  background: #fafafa;
  border-radius: 8px;
  transition: transform 0.2s ease-in-out;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
      0px 2px 4px -1px rgba(0, 0, 0, 0.08), 0px 4px 8px rgba(0, 0, 0, 0.08);
  }

  & .service-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #18181b;

    & svg {
      width: 24px;
      height: 24px;
    }
  }

  & .service-card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }

  & .service-card-title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #18181b;
    margin: 0;
  }

  & .service-card-description {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #3f3f46;
    margin: 0;
  }
}

/* Responsive - Tablet */
@media (max-width: 991px) {
  .customer-service-section {
    & .customer-service-cards {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
  }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
  .customer-service-section {
    & .customer-service-title {
      font-size: 16px;
      line-height: 24px;
      margin: 0 0 16px 0;
    }

    & .customer-service-cards {
      grid-template-columns: 1fr;
      gap: 12px;
    }
  }

  .service-card {
    padding: 12px;
    gap: 10px;
  }
}

#footer {
  & .title_block_inner {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #18181b;
    text-transform: none;
  }
  & .footer_block_content {
    & li {
      & a {
        font-family: "Inter";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #18181b;
        & i {
          display: none;
        }
      }
    }
  }
}

.product_middle_column {
  background: #ffffff;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  padding: 24px;
  & .product_name_wrap {
    & .flex_child {
      display: flex;
      justify-content: space-between;

      & .product_name {
        font-family: "Inter";
        font-style: normal;
        font-weight: 600;
        font-size: 30px;
        line-height: 38px;
        color: #27272a;
      }
      & .product-manufacturer {
        & .pro_extra_info_label {
          display: none;
        }
        & img {
          border: none;
          max-height: 60px;
          width: auto;
        }
      }
    }
  }
  & .product-description-short p {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #18181b;
  }
  & .current-price {
    & .price {
      font-family: "Inter";
      font-style: normal;
      font-weight: 500;
      font-size: 24px;
      line-height: 20px;
      leading-trim: both;
      text-edge: cap;
      text-align: center;
      color: #6ac9bb;
    }
    & .regular-price {
      font-family: "Inter";
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      line-height: 20px;
      leading-trim: both;
      text-edge: cap;
      text-align: center;
      text-decoration-line: line-through;
      color: #27272a;
    }
  }
}

/* Colors Swiper Styles */
.colors-swiper-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0;

  & .colors-swiper {
    flex: 1;
    overflow: hidden;
  }

  & .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & .swiper-slide {
    width: auto !important;
    flex-shrink: 0;
  }

  & .input-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  & .color-item-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    cursor: pointer;
  }

  & .input-container input.input-color {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  & .input-container .color {
    width: 64px !important;
    height: 32px !important;
    border-radius: 6px !important;
    border: 2px solid #e4e4e7;
    transition: all 0.2s ease;
    cursor: pointer;
    display: block;
  }

  & .input-container input.input-color:checked ~ .color {
    border-color: var(--brand-color);
    box-shadow: 0px 0px 0px 2px rgba(106, 201, 187, 0.2);
  }

  & .color-item-wrapper:hover .color {
    transform: scale(1.05);
    border-color: var(--brand-color);
  }

  & .color-name {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #18181b;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }

  & .input-container input.input-color:checked ~ .color-name {
    font-weight: 600;
    color: var(--brand-color);
  }

  & .colors-swiper-prev,
  & .colors-swiper-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex-shrink: 0;
    cursor: pointer;
    color: #18181b;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12),
      0px 0px 0px 1px rgba(0, 0, 0, 0.08);
    transition: opacity 0.3s ease, transform 0.2s ease;
    z-index: 10;
    position: relative;
    user-select: none;

    & svg {
      width: 20px;
      height: 20px;
      pointer-events: none;
    }

    &:hover:not(.swiper-button-disabled) {
      opacity: 0.7;
      transform: scale(0.97);
    }

    &.swiper-button-disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    &:active:not(.swiper-button-disabled) {
      transform: scale(0.95);
    }
  }
}

.cSeleccion {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #18181b;
  margin-top: 12px;

  & #nombre-color {
    font-weight: 600;
    color: var(--brand-color);
  }
}

/* Mobile Responsive for Colors Swiper */
@media (max-width: 767px) {
  .colors-swiper-wrapper {
    gap: 8px;

    & .color-item-wrapper {
      gap: 6px;
    }

    & .input-container .color {
      width: 56px !important;
      height: 28px !important;
    }

    & .color-name {
      font-size: 11px;
      line-height: 14px;
      max-width: 70px;
    }

    & .colors-swiper-prev,
    & .colors-swiper-next {
      width: 28px;
      height: 28px;

      & svg {
        width: 16px;
        height: 16px;
      }
    }
  }
}
.product-variants {
  & .control-label {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
  }
}
.product-add-to-cart {
  margin-bottom: 0 !important;
  & .product-quantity {
    & .qty_wrap.qty_wrap_big {
      width: auto;
    }
    & .input-group {
      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12),
        0px 0px 0px 1px rgba(0, 0, 0, 0.08);
      border-radius: 6px;
      overflow: hidden;
      & .input-group-btn {
        width: 32px;
        & button {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
        }
      }
      & #quantity_wanted {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px;
        background: #ffffff;
        border: none;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12),
          0px 0px 0px 1px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        z-index: 10;
        width: 32px;
      }
    }
  }
}
.product-reference {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #000000;
  margin-bottom: 16px;
  & .pro_extra_info_label {
    font-weight: bold;
  }
  & .pro_extra_info_content {
    font-weight: 400;
  }
}

/* Customer Support Section */
.customer-support-section {
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 8px;
  overflow: hidden;

  & .support-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;

    & .support-avatars {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: -8px;

      & .avatar-img {
        width: 40px;
        height: 40px;
        border-radius: 100px;
        object-fit: cover;
        margin-left: -8px;

        &:first-child {
          margin-left: 0;
        }
        &:hover {
          transform: translateY(-2px);
          transition-property: transform;
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-duration: 0.15s;
        }
      }
    }

    & .support-text {
      display: flex;
      flex-direction: column;
      gap: 2px;

      & .support-title {
        font-family: "Inter";
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        color: #18181b;
        margin: 0;
      }

      & .support-subtitle {
        font-family: "Inter";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #a1a1aa;
        margin: 0;
      }
    }
  }

  & .support-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;

    & .support-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 16px;
      gap: 12px;
      background: #ffffff;
      border: 1px solid #e4e4e7;
      border-radius: 8px;

      &:first-child {
        margin-right: 5px;
      }

      &:last-child {
        margin-left: 5px;
      }

      & .support-card-title {
        font-family: "Inter";
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 20px;
        color: #18181b;
        margin: 0;
      }

      & .contact-info {
        display: flex;
        flex-direction: row;
        gap: 8px;
        width: 100%;

        & .contact-item {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 8px;

          & svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
          }

          & span {
            font-family: "Inter";
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #18181b;
          }
        }
      }

      & .support-hours,
      & .shipping-info {
        font-family: "Inter";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #18181b;
        margin: 0;
      }
    }
  }
}

/* Mobile Responsive for Customer Support Section */
@media (max-width: 767px) {
  .customer-support-section {
    margin: 16px 0;

    & .support-header {
      flex-direction: row;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;

      & .support-avatars {
        & .avatar-img {
          width: 36px;
          height: 36px;
        }
      }

      & .support-text {
        & .support-title {
          font-size: 14px;
          line-height: 20px;
        }

        & .support-subtitle {
          font-size: 13px;
          line-height: 18px;
        }
      }
    }

    & .support-cards {
      grid-template-columns: 1fr;
      gap: 10px;
      padding: 0 16px 16px 16px;

      & .support-card {
        padding: 12px;
        gap: 10px;

        &:first-child {
          margin-right: 0;
        }

        &:last-child {
          margin-left: 0;
        }

        & .support-card-title {
          font-size: 13px;
          line-height: 18px;
        }

        & .contact-info {
          gap: 6px;

          & .contact-item {
            & span {
              font-size: 13px;
              line-height: 18px;
            }
          }
        }

        & .support-hours,
        & .shipping-info {
          font-size: 13px;
          line-height: 18px;
        }
      }
    }
  }
}

.product_info_tabs {
  & .nav-tabs {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0px;
    border: none;
    padding: 1px;
    & .nav-item {
      margin: 0;
      box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
        0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04);
      overflow: hidden;
      & .nav-link {
        background: #ffffff;
        padding: 8px 16px;
        font-family: "Inter";
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        color: #18181b;
        border: none;
        text-transform: none;
        &.active {
          color: #ffffff !important;
          background: #18181b;
          border: none;
        }
      }
      &:first-child {
        border-radius: 8px 0 0 0;
      }
      &:last-child {
        border-radius: 0 8px 0 0;
      }
    }
  }
}

.tab-pane-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px !important;
  background: #ffffff;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04);
  border-radius: 0px 8px 8px 8px;
  & p,
  & a,
  & span {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #18181b;
  }
  & h2,
  & h3 {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 20px !important;
    line-height: 24px;
    color: #18181b;
  }
}
.product_third_section {
  & .title_block {
    & .title_flex_left {
      display: none;
    }
    & .title_flex_right {
      display: none;
    }
    & .title_block_inner {
      font-family: "Inter";
      font-style: normal;
      font-weight: 500 !important;
      font-size: 18px !important;
      line-height: 160%;
      color: #27272a !important;
      text-transform: none;
    }
  }
}

.product-variants {
  & .control-label {
    margin-bottom: 12px;
  }
  & ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    & .input-container {
      padding: 0 !important;
      margin: 0 !important;
      & .input-radio + .radio-label {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 6px 10px;
        gap: 6px;
        background: #ffffff;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12),
          0px 0px 0px 1px rgba(0, 0, 0, 0.08);
        border-radius: 6px;
        font-family: "Inter";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #18181b;
        overflow: hidden;
        border: none;
      }
      & .input-radio[checked] + .radio-label {
        background: #27272a;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px #18181b,
          inset 0px 0.75px 0px rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.88);
      }
    }
  }
}
.product-actions form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  & .product-discounts {
    display: contents;
  }
}
.pro_price_block {
  padding-bottom: 16px;
  padding-top: 16px;
  margin-bottom: 0 !important;
  border-top: 1px solid #e5e8eb;
}
.product-information {
  & .steasy_divider {
    display: none;
  }
}

.clicked_thumb .pro_gallery_thumb_box {
  border: 2px solid #6ac9bb;
}

.pro_gallery_thumb_box {
  border-radius: 4px;
  overflow: hidden;
}
#top_bar_container {
  padding: 12px 24px;
}
.category_blogs_container,
#easycontent_386 {
  margin-bottom: 0 !important;
}
#index .category_blogs_container {
  border-bottom: none !important;
}

#page_wrapper {
  & .breadcrumb_spacing {
    display: none;
  }
}

/* CMS Pages Styles */

/* General CMS */
#cms {
  & .breadcrumb_wrapper {
    display: none;
  }
  & .title_block_inner {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #27272a;
    text-transform: none;
  }
}
/* CMS Pintura y decoracionID: 10 */
/* CMS Bellas artes ID: 11 */
#cms.cms-id-10,
#cms.cms-id-11 {
  & .owl_images_slider {
    margin-bottom: 0;
    & .st_owl_carousel_image {
      width: 100%;
    }
  }
  & .cms_content {
    & > div {
      padding: 40px 24px;
    }
    & > div:nth-child(2) {
      background: #fafafa;
    }
    & > div:nth-child(4) {
      background: #fafafa;
      & .sttext_item_text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        & .title_block {
          font-family: "Inter";
          font-style: normal;
          font-weight: 600;
          font-size: 24px;
          line-height: 32px;
          color: #18181b;
        }
        & .sttext_item_content {
          font-family: "Inter";
          font-style: normal;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #18181b;
        }
      }
    }

    & > div:nth-child(5) {
      & .sttext_item_text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        & .title_block {
          font-family: "Inter";
          font-style: normal;
          font-weight: 600;
          font-size: 24px;
          line-height: 32px;
          color: #18181b;
        }
        & .sttext_item_content {
          font-family: "Inter";
          font-style: normal;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #18181b;
        }
      }
      & .sttext_item_image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
        overflow: hidden;
      }
    }
  }
}

/* CMS Soluciones industriales ID: 12 */
#cms.cms-id-12 {
  & .cms_content {
    padding: 0;
  }
}

/* Industrial Solutions CMS Styles */
.cms-industrial-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #ffffff;

  & .cms-industrial-header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 96px 32px;
  }

  & .cms-industrial-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 640px;
    padding-right: 32px;
  }

  & .cms-industrial-title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 38px;
    color: #181d27;
    margin: 0;
  }

  & .cms-industrial-description {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #18181b;
    margin: 0;
  }

  & .cms-industrial-header-image {
    flex: 1;
    position: relative;
    min-height: 400px;
    background: #fafafa;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
}

.cms-industrial-divider {
  width: 100%;
  height: 1px;
  background: #e5e8eb;
}

.cms-industrial-benefits {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 40px 24px;
  background: #fafafa;
  width: 100%;

  & .cms-industrial-benefits-title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #18181b;
    margin: 0;
  }
}

.cms-industrial-cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  width: 100%;
}

.cms-industrial-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04);

  & .cms-industrial-card-image {
    width: 100%;
    height: 106px;
    overflow: hidden;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  & .cms-industrial-card-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    width: 100%;
  }

  & .cms-industrial-card-title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #18181b;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & .cms-industrial-card-description {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #18181b;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }

  & .cms-industrial-card-button {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 10px;
    gap: 6px;
    background-color: #ffffff !important;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12),
      0px 0px 0px 1px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #18181b !important;
    text-decoration: none;
    transition: transform 0.2s ease-in-out;

    &:hover {
      transform: scale(0.97);
      color: #18181b;
    }
  }
}

.cms-industrial-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: #fafafa;
  width: 100%;

  & .cms-industrial-cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 610px;
    text-align: center;
  }

  & .cms-industrial-cta-title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    color: #18181b;
    margin: 0;
  }

  & .cms-industrial-cta-description {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #18181b;
    margin: 0;
  }

  & .cms-industrial-cta-button {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 10px;
    gap: 6px;
    background-color: #27272a !important;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px #18181b,
      inset 0px 0.75px 0px rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.88) !important;
    text-decoration: none;
    transition: all 0.2s ease-in-out;

    &:hover {
      background-color: #3f3f46 !important;
      transform: scale(0.97);
      color: rgba(255, 255, 255, 0.88);
    }

    &:active {
      background-color: #52525b !important;
    }
  }
}

/* Responsive - Tablet */
@media (max-width: 991px) {
  .cms-industrial-header {
    flex-direction: column;

    & .cms-industrial-header-content {
      padding: 48px 24px;
    }

    & .cms-industrial-text {
      padding-right: 0;
      max-width: 100%;
    }

    & .cms-industrial-header-image {
      width: 100%;
      min-height: 300px;
    }
  }

  .cms-industrial-cards-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
  .cms-industrial-header {
    & .cms-industrial-header-content {
      padding: 32px 16px;
    }

    & .cms-industrial-title {
      font-size: 24px;
      line-height: 32px;
    }

    & .cms-industrial-description {
      font-size: 14px;
      line-height: 20px;
    }

    & .cms-industrial-header-image {
      min-height: 200px;
    }
  }

  .cms-industrial-benefits {
    padding: 24px 16px;
    gap: 24px;

    & .cms-industrial-benefits-title {
      font-size: 16px;
      line-height: 24px;
    }
  }

  .cms-industrial-cards-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cms-industrial-card {
    & .cms-industrial-card-title {
      white-space: normal;
    }
  }

  .cms-industrial-cta {
    padding: 32px 16px;

    & .cms-industrial-cta-title {
      font-size: 18px;
      line-height: 28px;
    }

    & .cms-industrial-cta-description {
      font-size: 13px;
      line-height: 18px;
    }
  }
}

/* CMS Automoción ID: 13 */
#cms.cms-id-13 {
  & .cms_content {
    padding: 0;
  }
}

/* Automotive CMS Styles */
.cms-automotive-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #ffffff;

  & .cms-automotive-header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 96px 32px;
  }

  & .cms-automotive-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 640px;
    padding-right: 32px;
  }

  & .cms-automotive-title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 38px;
    color: #181d27;
    margin: 0;
  }

  & .cms-automotive-description {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #18181b;
    margin: 0;
  }

  & .cms-automotive-header-image {
    flex: 1;
    position: relative;
    min-height: 400px;
    background: #fafafa;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
}

.cms-automotive-divider {
  width: 100%;
  height: 1px;
  background: #e5e8eb;
}

/* Brands Section */
.cms-automotive-brands {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 40px 24px;
  background: #fafafa;
  width: 100%;

  & .cms-automotive-brands-title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #18181b;
    margin: 0;
  }
}

/* Brands Slider */
.cms-automotive-brands-slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  width: 100%;
}

.cms-automotive-brands-swiper {
  flex: 1;
  overflow: hidden;
  padding: 10px 0;

  & .swiper-wrapper {
    display: flex;
    align-items: center;
  }

  & .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;

    & img {
      height: 67px;
      max-width: 184px;
      width: auto;
      object-fit: contain;
      transition: transform 0.2s ease-in-out;

      &:hover {
        transform: scale(1.05);
      }
    }
  }
}

/* Brands Navigation Arrows */
.brands-swiper-button-prev,
.brands-swiper-button-next {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #18181b;
  transition: opacity 0.3s ease;
  flex-shrink: 0;

  & svg {
    width: 25px;
    height: 25px;
  }

  &:hover {
    opacity: 0.7;
  }

  &.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
}

/* Benefits Section */
.cms-automotive-benefits {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 40px 24px;
  background: #ffffff;
  width: 100%;

  & .cms-automotive-benefits-title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #18181b;
    margin: 0;
  }
}

.cms-automotive-benefits-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  width: 100%;
}

.cms-automotive-benefit-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04);

  & .cms-automotive-benefit-card-image {
    width: 100%;
    height: 106px;
    overflow: hidden;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  & .cms-automotive-benefit-card-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    width: 100%;
  }

  & .cms-automotive-benefit-card-title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #18181b;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & .cms-automotive-benefit-card-description {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #18181b;
    margin: 0;
  }
}

/* Moonwalk Repainting Section */
.cms-automotive-moonwalk {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 40px 24px;
  background: #fafafa;
  width: 100%;
  align-items: center;

  & .cms-automotive-moonwalk-video {
    position: relative;
    width: 580px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #000;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    & .cms-automotive-moonwalk-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 72px;
      height: 51px;
      cursor: pointer;
      transition: transform 0.2s ease-in-out;

      &:hover {
        transform: translate(-50%, -50%) scale(1.1);
      }

      & img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }

  & .cms-automotive-moonwalk-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 30px;
  }

  & .cms-automotive-moonwalk-title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #18181b;
    margin: 0;
  }

  & .cms-automotive-moonwalk-description {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #18181b;
    margin: 0;
  }

  & .cms-automotive-moonwalk-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
  }
}

.cms-automotive-moonwalk-feature {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04);

  & .cms-automotive-moonwalk-feature-title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 20px;
    color: #18181b;
    margin: 0 0 12px 0;
  }

  & .cms-automotive-moonwalk-feature-text {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #18181b;
    margin: 0;
  }
}

/* Large Cards Section */
.cms-automotive-large-cards {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 48px;
  padding: 40px 24px;
  background: #ffffff;
  width: 100%;
}

.cms-automotive-large-card {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  padding: 0;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 65%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 8px;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04);
  color: #18181b;
  overflow: hidden;
}

.cms-automotive-large-card-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  justify-content: center;
  max-width: 360px;
  padding: 24px;
}

.cms-automotive-large-card-title {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #18181b;
  margin: 0;
}

.cms-automotive-large-card-description {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #18181b;
  margin: 0;
}

.cms-automotive-large-card-image {
  flex: 0 0 336px;
  min-height: 208px;
  height: 100%;
  overflow: hidden;
}

.cms-automotive-large-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Responsive - Tablet */
@media (max-width: 991px) {
  .cms-automotive-header {
    flex-direction: column;

    & .cms-automotive-header-content {
      padding: 48px 24px;
    }

    & .cms-automotive-text {
      padding-right: 0;
      max-width: 100%;
    }

    & .cms-automotive-header-image {
      width: 100%;
      min-height: 300px;
    }
  }

  .cms-automotive-brands-slider-wrapper {
    gap: 16px;
  }

  .brands-swiper-button-prev,
  .brands-swiper-button-next {
    & svg {
      width: 20px;
      height: 20px;
    }
  }

  .cms-automotive-benefits-cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cms-automotive-moonwalk {
    flex-direction: column;
    gap: 24px;

    & .cms-automotive-moonwalk-video {
      width: 100%;
      height: 300px;
    }

    & .cms-automotive-moonwalk-content {
      padding: 0;
    }
  }

  .cms-automotive-large-cards {
    flex-direction: column;
    gap: 24px;
  }

  .cms-automotive-large-card {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
  }

  .cms-automotive-large-card-content {
    max-width: 100%;
    padding: 24px;
  }

  .cms-automotive-large-card-image {
    width: 100%;
    flex: 0 0 auto;
    height: 240px;
    min-height: 240px;
  }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
  .cms-automotive-header {
    & .cms-automotive-header-content {
      padding: 32px 16px;
    }

    & .cms-automotive-title {
      font-size: 24px;
      line-height: 32px;
    }

    & .cms-automotive-description {
      font-size: 14px;
      line-height: 20px;
    }

    & .cms-automotive-header-image {
      min-height: 200px;
    }
  }

  .cms-automotive-brands {
    padding: 24px 16px;
    gap: 24px;

    & .cms-automotive-brands-title {
      font-size: 16px;
      line-height: 24px;
    }
  }

  .cms-automotive-brands-slider-wrapper {
    gap: 12px;
  }

  .cms-automotive-brands-swiper {
    & .swiper-slide {
      & img {
        height: 50px;
        max-width: 140px;
      }
    }
  }

  .brands-swiper-button-prev,
  .brands-swiper-button-next {
    & svg {
      width: 18px;
      height: 18px;
    }
  }

  .cms-automotive-benefits {
    padding: 24px 16px;
    gap: 24px;

    & .cms-automotive-benefits-title {
      font-size: 16px;
      line-height: 24px;
    }
  }

  .cms-automotive-benefits-cards {
    gap: 16px;
  }

  .cms-automotive-benefit-card {
    & .cms-automotive-benefit-card-title {
      white-space: normal;
    }
  }

  .cms-automotive-moonwalk {
    padding: 24px 16px;
    gap: 16px;

    & .cms-automotive-moonwalk-video {
      height: 200px;
    }

    & .cms-automotive-moonwalk-title {
      font-size: 16px;
      line-height: 24px;
    }

    & .cms-automotive-moonwalk-description {
      font-size: 13px;
      line-height: 18px;
    }

    & .cms-automotive-moonwalk-features {
      grid-template-columns: 1fr;
      gap: 12px;
    }
  }

  .cms-automotive-large-cards {
    padding: 24px 16px;
    gap: 16px;
  }

  .cms-automotive-large-card {
    gap: 0;
  }

  .cms-automotive-large-card-title {
    font-size: 16px;
    line-height: 24px;
  }

  .cms-automotive-large-card-description {
    font-size: 13px;
    line-height: 18px;
  }

  .cms-automotive-large-card-content {
    padding: 20px;
  }

  .cms-automotive-large-card-image {
    height: 200px;
    min-height: 200px;
  }
}

/* Registration Form Block Styles */
#register_form_block {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;
  border: none;

  & .page_heading {
    font-family: "Inter" !important;
    font-style: normal;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #18181b !important;
    margin: 0 0 20px 0 !important;
    text-transform: none !important;
    text-align: left !important;
    padding: 0 !important;
  }

  & .form-group {
    margin-bottom: 20px;
  }

  & .form-footer {
    padding: 0;
    margin-top: 20px;

    & .btn {
      width: 100%;
    }
  }
}

/* Mobile Responsive for Registration Form */
@media (max-width: 767px) {
  #register_form_block {
    padding: 12px;

    & .page_heading {
      font-size: 14px !important;
      line-height: 20px !important;
      margin-bottom: 16px !important;
    }
  }
}

/* Authentication Page Styles */
.login_page {
  & #main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 24px;
    width: 100%;
    margin: 0 auto;
  }

  & #content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  & .page_heading_title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 38px;
    color: #18181b;
    margin: 0 0 20px 0;
    width: 100%;
  }

  & .row {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  & .create_account_column,
  & .login_form_column {
    flex: 1 1 0% !important;
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 16px !important;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
      0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
    display: flex !important;
    flex-direction: column !important;
  }

  & .login_form_column {
    & .from_blcok {
      display: flex;
      flex-direction: column;
      gap: 20px;
      border: none;
      height: 100%;
      flex: 1;
      margin-bottom: 0;
      padding: 0 !important;
      width: 100%;
    }

    & #content,
    & .login-form,
    & form {
      padding: 0 !important;
      margin: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    & .js-customer-form {
      padding: 0 !important;
      margin: 0 !important;
      width: 100% !important;
    }

    & section,
    & footer {
      width: 100% !important;
      padding: 0 !important;
    }
  }

  & .create_account_column {
    & .from_blcok {
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      flex: 1 !important;
      justify-content: space-between !important;
      border: none;
      margin-bottom: 0;
    }

    & .form_content {
      flex: 0 0 auto;
      margin-bottom: 0;
    }

    & .form-footer {
      margin-top: auto !important;
      flex-shrink: 0;
    }
  }

  & .login_form_heading,
  & h3.page_heading {
    font-family: "Inter" !important;
    font-style: normal;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #18181b !important;
    margin: 0 0 5px 0 !important;
    text-transform: none !important;
    text-align: left !important;
    padding: 0 !important;
  }

  & .form_content {
    margin: 0 0 16px 0;
    min-height: auto !important;
    padding: 0 !important;
    width: 100%;

    & .form_content_inner {
      font-family: "Inter";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: #18181b;
      margin: 0;
      padding: 0 !important;

      & .p-b-1 {
        padding-bottom: 0;
        margin: 0;
      }
    }
  }

  & .form-footer {
    padding: 0 !important;
    width: 100%;
    margin: 0 !important;

    & .btn,
    & .btn-primary,
    & .btn-default,
    & a.btn {
      width: 100% !important;
      margin: 0 !important;
      white-space: normal !important;
    }
  }

  /* Form fields styling */
  & .form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px;
    margin-bottom: 20px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;

    & label {
      font-family: "Inter";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: #18181b;
      margin: 0 0 4px 0 !important;
      padding: 0 !important;
      width: 100%;
    }

    & .input-group {
      border: none;
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
      box-sizing: border-box;
      display: flex !important;

      & .input-group-btn {
        max-height: 32px;
      }
    }

    & input[type="text"],
    & input[type="email"],
    & input[type="password"] {
      width: 100% !important;
      max-width: 100% !important;
      height: 32px;
      background: #fafafa;
      border: none;
      border-radius: 6px;
      padding: 0 8px !important;
      margin: 0 !important;
      font-family: "Inter";
      font-style: normal;
      font-weight: 400;
      font-size: 13px;
      line-height: 20px;
      color: #18181b;
      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12),
        0px 0px 0px 1px rgba(0, 0, 0, 0.08);
      transition: all 0.2s ease;
      box-sizing: border-box;

      &:focus {
        outline: none;
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12),
          0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 0px 0px 2px #ffffff,
          0px 0px 0px 4px rgba(59, 130, 246, 0.6);
      }

      &::placeholder {
        color: #a1a1aa;
      }
    }
  }

  & .forgot-password,
  & a.forgot-password {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #18181b;
    text-decoration: none;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    display: inline-block;
    text-align: left;

    &:hover {
      color: var(--brand-color);
    }
  }

  /* Back button section */
  & .display_after_login_form,
  & [data-name="back"] {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: flex-start;

    & .btn-default {
      width: auto;
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      gap: 6px;
      background-color: #ffffff !important;
      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12),
        0px 0px 0px 1px rgba(0, 0, 0, 0.08);
      color: #18181b !important;
      padding: 6px 10px;

      &:hover {
        background-color: #fafafa !important;
      }
    }
  }
}

/* Responsive - Tablet */
@media (max-width: 991px) {
  .login_page {
    & .row {
      flex-direction: column !important;
    }

    & .create_account_column,
    & .login_form_column {
      width: 100% !important;
      max-width: 100% !important;
    }
  }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
  .login_page {
    & #main {
      padding: 16px !important;
    }

    & .page_heading_title {
      font-size: 24px !important;
      line-height: 32px !important;
      margin-bottom: 16px !important;
    }

    & .row {
      gap: 16px !important;
      flex-direction: column !important;
    }

    & .create_account_column,
    & .login_form_column {
      padding: 12px !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    & .create_account_column {
      & .form_content {
        margin-bottom: 24px !important;
      }
    }

    & .login_form_heading,
    & h3.page_heading {
      font-size: 14px !important;
      line-height: 20px !important;
      margin-bottom: 12px !important;
    }

    & .form_content {
      & .form_content_inner {
        font-size: 13px !important;
        line-height: 18px !important;
      }
    }
  }
}

/* CMS Placeholder Template Styles */
/* This is a generic template that can be used for any CMS page */

.cms-placeholder-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #ffffff;

  & .cms-placeholder-header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 96px 32px;
  }

  & .cms-placeholder-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 640px;
    padding-right: 32px;
  }

  & .cms-placeholder-title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 38px;
    color: #181d27;
    margin: 0;
  }

  & .cms-placeholder-description {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #18181b;
    margin: 0;
  }

  & .cms-placeholder-header-image {
    flex: 1;
    position: relative;
    min-height: 400px;
    background: #fafafa;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
}

/* Rich Text Section */
.cms-placeholder-rich-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 96px 0;
  background: #fafafa;
  width: 100%;

  & .cms-placeholder-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 32px;
    max-width: 1280px;
    width: 100%;
  }

  & .cms-placeholder-content {
    display: flex;
    flex-direction: column;
    gap: 48px;
    max-width: 720px;
    width: 100%;
  }
}

.cms-placeholder-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;

  & p {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #18181b;
    margin: 0 0 14px 0;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.cms-placeholder-section-title {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #18181b;
  margin: 0;
}

/* CTA Section */
.cms-placeholder-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: #fafafa;
  width: 100%;

  & .cms-placeholder-cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 610px;
    text-align: center;
  }

  & .cms-placeholder-cta-title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    color: #18181b;
    margin: 0;
  }

  & .cms-placeholder-cta-description {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #18181b;
    margin: 0;
  }

  & .cms-placeholder-cta-button {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 10px;
    gap: 6px;
    background-color: #27272a !important;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px #18181b,
      inset 0px 0.75px 0px rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.88) !important;
    text-decoration: none;
    transition: all 0.2s ease-in-out;

    &:hover {
      background-color: #3f3f46 !important;
      transform: scale(0.97);
      color: rgba(255, 255, 255, 0.88);
    }

    &:active {
      background-color: #52525b !important;
    }
  }
}

/* Responsive - Tablet */
@media (max-width: 991px) {
  .cms-placeholder-header {
    flex-direction: column;

    & .cms-placeholder-header-content {
      padding: 48px 24px;
    }

    & .cms-placeholder-text {
      padding-right: 0;
      max-width: 100%;
    }

    & .cms-placeholder-header-image {
      width: 100%;
      min-height: 300px;
    }
  }

  .cms-placeholder-rich-text {
    padding: 64px 0;

    & .cms-placeholder-content-wrapper {
      padding: 0 24px;
    }
  }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
  .cms-placeholder-header {
    & .cms-placeholder-header-content {
      padding: 32px 16px;
    }

    & .cms-placeholder-title {
      font-size: 24px;
      line-height: 32px;
    }

    & .cms-placeholder-description {
      font-size: 14px;
      line-height: 20px;
    }

    & .cms-placeholder-header-image {
      min-height: 200px;
    }
  }

  .cms-placeholder-rich-text {
    padding: 48px 0;

    & .cms-placeholder-content-wrapper {
      padding: 0 16px;
    }

    & .cms-placeholder-content {
      gap: 32px;
    }
  }

  .cms-placeholder-section-title {
    font-size: 16px;
    line-height: 24px;
  }

  .cms-placeholder-cta {
    padding: 32px 16px;

    & .cms-placeholder-cta-title {
      font-size: 18px;
      line-height: 28px;
    }

    & .cms-placeholder-cta-description {
      font-size: 13px;
      line-height: 18px;
    }
  }
}

/* My Account Navigation Styles - From Figma */
.my-account-nav-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  width: 256px;
  display: flex;
  flex-direction: column;
}

.my-account-nav-header {
  padding: 16px;
}

.my-account-nav-title {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  color: #18181b;
  margin: 0;
  white-space: pre;
}

.my-account-nav-divider {
  width: 100%;
  height: 1px;
  background: #e4e4e7;
  flex-shrink: 0;
}

.my-account-nav-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: #18181b;
}

.my-account-nav-link {
  color: #18181b;
  text-decoration: none;
  white-space: nowrap;
  display: block;
  transition: opacity 0.2s ease;
}

.my-account-nav-link:hover {
  opacity: 0.7;
  color: #18181b;
}

.my-account-nav-footer {
  padding: 16px;
}

.my-account-nav-footer .my-account-nav-link {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: #18181b;
}

/* Normalize module-injected links to match native style */
.my-account-nav-links .list-group-item {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  margin-bottom: 0;
}

.my-account-nav-links .list-group-item:not(:last-child) {
  margin-bottom: 0;
}

/* Style all links inside my-account-nav-links regardless of their classes */
.my-account-nav-links a,
.my-account-nav-links .list-group-item a {
  color: #18181b;
  text-decoration: none;
  white-space: nowrap;
  display: block;
  transition: opacity 0.2s ease;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
}

.my-account-nav-links a:hover,
.my-account-nav-links .list-group-item a:hover {
  opacity: 0.7;
  color: #18181b;
}

/* Hide or style icons in module links to match design */
.my-account-nav-links a i,
.my-account-nav-links .list-group-item a i,
.my-account-nav-links a .material-icons,
.my-account-nav-links .list-group-item a .material-icons {
  display: none;
}

/* Handle links with different structures (like cookie settings) */
.my-account-nav-links a[class*="col-"],
.my-account-nav-links .link-item {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
}

.my-account-nav-links a[class*="col-"] .link-item,
.my-account-nav-links .link-item {
  color: #18181b;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
}

.my-account-nav-links a[class*="col-"] .link-item i,
.my-account-nav-links .link-item i,
.my-account-nav-links a[class*="col-"] .link-item .material-icons,
.my-account-nav-links .link-item .material-icons {
  display: none;
}

/* Ensure any nested structures are properly styled */
.my-account-nav-links > * {
  margin-bottom: 0;
}

.my-account-nav-links > *:not(:last-child) {
  margin-bottom: 0;
}

/* My Account Dashboard List - Card Grid Style - From Figma */
.myacount_dashbord_list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 -15px;
}

.myacount_dashbord_list .list-group-item,
.myacount_dashbord_list a.col-lg-4,
.myacount_dashbord_list a[class*="col-"] {
  padding: 16px;
  background: #ffffff;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04);
  border-radius: 8px !important;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 0 1 calc(33.333% - 16px);
  min-width: 200px;
  margin: 0;
  transition: all 0.2s ease;
  text-decoration: none;
  color: #18181b;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
}

.myacount_dashbord_list .list-group-item:hover,
.myacount_dashbord_list a.col-lg-4:hover,
.myacount_dashbord_list a[class*="col-"]:hover {
  opacity: 0.7;
  color: #18181b;
  transform: translateY(-2px);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 2px 4px -1px rgba(0, 0, 0, 0.08), 0px 4px 8px rgba(0, 0, 0, 0.06);
}

.myacount_dashbord_list .list-group-item a {
  padding: 0;
  color: #18181b;
  text-decoration: none;
  display: block;
  width: 100%;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
}

/* Hide icons in dashboard cards */
.myacount_dashbord_list a i,
.myacount_dashbord_list .list-group-item a i,
.myacount_dashbord_list a .material-icons,
.myacount_dashbord_list .list-group-item a .material-icons {
  display: none;
}

/* Handle link-item structure in dashboard */
.myacount_dashbord_list .link-item {
  color: #18181b;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
}

.myacount_dashbord_list .link-item i,
.myacount_dashbord_list .link-item .material-icons {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .myacount_dashbord_list .list-group-item,
  .myacount_dashbord_list a.col-lg-4,
  .myacount_dashbord_list a[class*="col-"] {
    flex: 0 1 calc(50% - 16px);
  }
}

@media (max-width: 575px) {
  .myacount_dashbord_list {
    gap: 12px;
  }

  .myacount_dashbord_list .list-group-item,
  .myacount_dashbord_list a.col-lg-4,
  .myacount_dashbord_list a[class*="col-"] {
    flex: 0 1 100%;
    min-width: unset;
  }
}

/* Floating Professional CTA */
.floating-professional {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.floating-professional.align-end {
  right: 0;
  margin-right: 0;
}

.floating-professional__button {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: #ffffff;
  background: #de3083;
  border: 1px solid #c11366;
  border-radius: 18px 6px 6px 18px;
  box-shadow: 0 1px 2px rgba(193, 19, 102, 0.4),
    0 4px 12px rgba(193, 19, 102, 0.18);
  cursor: pointer;
  min-height: 104px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: left;
  padding: 0;
  isolation: isolate;
  text-decoration: none;
}

.floating-professional__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(193, 19, 102, 0.24),
    0 0 0 2px rgba(255, 255, 255, 0.06) inset;
}

.floating-professional__button:focus-visible {
  outline: 3px solid rgba(222, 48, 131, 0.35);
  outline-offset: 3px;
}

.floating-professional__button-media {
  flex: 0 0 100px;
  width: 100px;
  position: relative;
  display: block;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 18px 0 0 18px;
  margin: 0;
  overflow: hidden;
}

.floating-professional__button-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.floating-professional__button-body {
  flex: 1;
  padding: 24px 28px;
  display: flex;
  align-items: center;
}

.floating-professional__button-text {
  display: block;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  max-width: 173px;
  white-space: normal;
}

.floating-professional__button-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0.75px 0 rgba(255, 255, 255, 0.2);
  border-radius: inherit;
}

.floating-professional__modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
  z-index: 1050;
}

.floating-professional__modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

.floating-professional__overlay {
  position: absolute;
  inset: 0;
  background: rgba(24, 24, 27, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.floating-professional__dialog {
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(24, 24, 27, 0.16);
  max-width: 960px;
  width: calc(100% - 48px);
  overflow: hidden;
  transform: translateY(32px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 1;
}

.floating-professional__modal.is-open .floating-professional__dialog {
  transform: translateY(0);
  opacity: 1;
}

.floating-professional__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(24, 24, 27, 0.08);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #18181b;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
}

.floating-professional__close:hover {
  background: rgba(24, 24, 27, 0.16);
  transform: rotate(90deg);
}

.floating-professional__close:focus-visible {
  outline: 2px solid rgba(14, 165, 233, 0.8);
  outline-offset: 2px;
}

.floating-professional__layout {
  display: flex;
  min-height: 420px;
}

.floating-professional__media {
  flex: 1 1 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #fde7f2;
  position: relative;
  overflow: hidden;
}

.floating-professional__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.floating-professional__content {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 48px 40px;
}

.floating-professional__text-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.floating-professional__title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  color: #0f172a;
  margin: 0;
}

.floating-professional__subtitle {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #535862;
  margin: 0;
}

.floating-professional__form-placeholder {
  margin-top: 16px;
  border-radius: 12px;
  padding: 20px;
  text-align: left;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: #535862;
  background: #f4f4f5;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.floating-professional__description,
.floating-professional__form-slot {
  display: none;
}

body.floating-professional-modal-open {
  overflow: hidden;
}

@media (max-width: 1199px) {
  .floating-professional__dialog {
    max-width: 860px;
  }

  .floating-professional__content {
    padding: 40px 36px;
  }
}

@media (max-width: 991px) {
  .floating-professional {
    right: 24px;
    bottom: 24px;
  }

  .floating-professional__dialog {
    max-width: 760px;
  }

  .floating-professional__layout {
    flex-direction: column;
  }

  .floating-professional__content {
    padding: 32px 28px 40px;
  }
}

@media (max-width: 767px) {
  .floating-professional {
    right: 16px;
    bottom: 16px;
  }

  .floating-professional__button {
    min-height: 96px;
  }

  .floating-professional__button-body {
    padding: 18px 20px;
  }

  .floating-professional__button-text {
    font-size: 14px;
    max-width: 165px;
  }

  .floating-professional__dialog {
    width: calc(100% - 32px);
    border-radius: 20px;
  }

  .floating-professional__media {
    max-height: 120px;
    min-height: auto;
  }

  .floating-professional__title {
    font-size: 24px;
  }

  .floating-professional__subtitle {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .floating-professional__button {
    width: 100%;
    justify-content: space-between;
  }

  .floating-professional__button-media {
    flex-basis: 92px;
    width: 92px;
  }

  .floating-professional__button-text {
    max-width: 150px;
  }

  .floating-professional__dialog {
    width: calc(100% - 24px);
    border-radius: 18px;
  }

  .floating-professional__content {
    padding: 28px 20px 36px;
    gap: 20px;
  }

  .floating-professional__media {
    max-height: 100px;
    min-height: auto;
  }
}

.product-line-grid-body {
  padding: 12px 0;
}

.product-line-grid-body > .product-line-info > .label {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #18181b;
}

.product-line-grid-right {
  align-content: center;
}
#cart .card-header {
  background: none;
  border: none;
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-size: 30px;
  line-height: 38px;
  color: #18181b;
  margin: 0;
  padding: 20px 0 20px 0;
}

#cart .cart-grid-body .card {
  border: none;
  & ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    & .cart-item {
      padding: 0px 16px;
      background: #ffffff;
      box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
        0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04);
      border-radius: 8px;
    }
  }
}

#cart .cart-grid-right {
  & .cart-summary-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;

    background: #ffffff;

    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
      0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    & .cart-summary-card__inner {
      width: 100%;
      & .cart-summary-card__title {
        font-family: "Inter";
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        color: #18181b;
        padding: 1.25rem 1.25rem 0 1.25rem;
      }
      & .cart-summary-card__totals {
        color: #18181b !important;
        & .cart-summary-line .value {
          color: #18181b !important;
        }
      }
      & .cart-voucher {
        & .promo-code-button {
          color: #18181b !important;
        }
      }
    }
  }
}

.qty_wrap {
  width: auto;
  min-width: 96px;
  & .input-group {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    background: #ffffff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12),
      0px 0px 0px 1px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    & .input-group-btn {
      width: 32px !important;
      height: 32px;
      & button {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    & .cart_quantity {
      width: 32px;
      border: none;
      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12),
        0px 0px 0px 1px rgba(0, 0, 0, 0.08);
      background: #ffffff;
      z-index: 10;
    }
  }
}

.checkout_wrapper {
  background: #ffffff;
  & .checkout_left_column,
  & #js-checkout-summary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0px;
    gap: 16px;
    background: #ffffff;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
      0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
  }
}

#checkout #header_primary {
  padding: 12px 0;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04);
}

#module-stblog-category .product_list.grid .product_list_item {
  max-width: 33%;
}

#module-stblog-category .st_posts.product_list.row.grid {
  width: 100%;
  margin: 0;
}

@media (max-width: 767px) {
  #module-stblog-category .product_list.grid .product_list_item {
    max-width: 100%;
  }
}

#module-stblog-category #wrapper {
  padding: 20px 0;
  & .page-heading,
  & .title_block_inner {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 38px;
    color: #18181b;
  }
}

#category_blogs_container_2 {
  background: #ffffff;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  border: none;
}

.st-menu-header {
  background: #fafafa;
  border-bottom: 1px solid #e4e4e7;
  color: #18181b;
  & .st-menu-title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    color: #18181b;
    text-transform: none;
  }
  & .close_right_side {
    color: #18181b;
    & i {
      color: #18181b;
    }
  }
}
#side_cart_block {
  height: 100%;

  & .shoppingcart-list {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    & .small_cart_product_list {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 0px;
      gap: 12px;
      & li {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0px;
        background: #ffffff;
        box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
          0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04);
        overflow: hidden;
        border-radius: 12px;
        & .flex_container.flex_start {
          display: flex;
          align-items: center;
          flex-direction: row;
          & picture img {
            border: none;
          }
        }
        & .small_cart_info {
          position: relative;
          width: 100%;
          & .flex_container.flex_start.mar_b4 {
            flex-direction: column;
            align-items: flex-start;
          }
          & .price-trash {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: 100%;
          }
          & .ajax_remove_button {
            width: 24px;
            height: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #18181b;
            & i {
              color: #18181b;
            }
          }
          & .product-quantity,
          & .product-name {
            font-family: "Inter";
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #18181b;
          }
          & .price {
            font-family: "Inter";
            font-style: normal;
            font-weight: 700;
            font-size: 14px;
            line-height: 20px;
            color: #18181b;
          }
          & .flex_container:last-child {
            & .qty_wrap {
              display: none;
            }
            & .flex_child {
              font-family: "Inter";
              font-style: normal;
              font-weight: 400;
              font-size: 14px;
              line-height: 20px;
              color: #18181b;
            }
          }
        }
      }
    }
  }
}

.bottom_cart_side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  gap: 24px;
  background: #ffffff;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04);
  border-radius: 12px;

  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;

  color: #18181b;
  & .small_cart_sumary {
    width: 100%;
  }
  & a.btn {
    width: 100%;
  }
}
.buttons-cart-bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  & .btn:first-child {
    justify-content: flex-start;
  }
  & .btn:last-child {
    justify-content: flex-end;
  }
  & .btn {
    height: 28px;
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
  }
  & .btn-outline {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px 8px;
    gap: 6px;
    background: #ffffff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12),
      0px 0px 0px 1px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    color: #18181b;
  }
}

/* Category Grid Landing Styles */
.cat-grid-land {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;

  & > a {
    display: block;
    width: 180px;
    position: relative;
    aspect-ratio: 1;
    border-radius: 100px;
    overflow: hidden;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
      0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease-in-out;

    &:hover {
      transform: scale(1.05);
    }

    & picture {
      display: block;
      width: 100%;
      height: 100%;
    }

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      border-radius: 100px;
      display: block;
    }
  }

  & h3.s_title_block {
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;

    & a.subcategory-name {
      font-family: "Inter";
      font-style: normal;
      font-weight: 700;
      font-size: 14px;
      line-height: 20px;
      color: #27272a;
      text-decoration: none;
      white-space: nowrap;
      display: block;
      transition: color 0.2s ease;

      &:hover {
        color: var(--brand-color);
      }
    }
  }
}

ul.inline_list.subcate_grid_view.row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  align-items: start;
  margin: 0;
  padding: 0;

  & > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    /* Reset Bootstrap grid classes */
    flex: none;

    & > a.img {
      display: block;
      width: 180px;
      max-width: 100%;
      position: relative;
      aspect-ratio: 1;
      border-radius: 100px;
      overflow: hidden;
      box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
        0px 1px 2px -1px rgba(0, 0, 0, 0.08),
        0px 2px 4px 0px rgba(0, 0, 0, 0.04);
      transition: transform 0.2s ease-in-out;

      &:hover {
        transform: scale(1.05);
      }

      & picture {
        display: block;
        width: 100%;
        height: 100%;
      }

      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 100px;
        display: block;
      }
    }

    & h3.s_title_block {
      margin: 0;
      padding: 0;
      text-align: center;
      width: 100%;
      max-width: 100%;

      & a.subcategory-name {
        font-family: "Inter";
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 20px;
        color: #27272a;
        text-decoration: none;
        white-space: nowrap;
        display: block;
        transition: color 0.2s ease;

        &:hover {
          color: var(--brand-color);
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  ul.inline_list.subcate_grid_view.row {
    grid-template-columns: repeat(4, 1fr);

    & > li > a.img {
      width: 160px;
      max-width: 100%;
    }
  }
}

@media (max-width: 768px) {
  ul.inline_list.subcate_grid_view.row {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    /* Asegurar que no haya overflow */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Resetear cualquier padding/margin del row de Bootstrap */
    margin-left: 0 !important;
    margin-right: 0 !important;

    & > li {
      /* Forzar que cada columna ocupe exactamente 50% */
      min-width: 0;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box;
      /* Resetear estilos de Bootstrap col-* */
      float: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      flex-basis: auto !important;
      flex-grow: 0 !important;
      flex-shrink: 1 !important;

      & > a.img {
        width: 100%;
        max-width: 140px;
        /* Asegurar que la imagen no cause overflow */
        box-sizing: border-box;
        margin: 0 auto;
      }
    }

    & > li h3.s_title_block {
      & a.subcategory-name {
        font-size: 13px;
        /* Permitir que el texto se ajuste si es necesario */
        white-space: normal;
        word-break: break-word;
      }
    }
  }
}

a[title="Atención al cliente"] {
  display: flex !important;
  flex-direction: row;
  gap: 5px;
}

/* Estilos para igualar el tamaño de logos en el slider de fabricantes */
#textboxes_363,
#textboxes_373,
#textboxes_367,
#textboxes_377 {
  & .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
  }

  & .steasy_element_item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
  }

  & .easy_image {
    width: 100%;
    max-width: 200px;
    height: 80px;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0 auto;
  }

  & a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
}

/* Estilos para iframes de Google Maps en la página de tiendas */
.store-picture {
  iframe {
    width: 100%;
    max-width: 100%;
    height: 300px;
    border: 0;
    display: block;
  }
}

@media (max-width: 768px) {
  .store-picture {
    iframe {
      height: 250px;
    }
  }
}

/* Club Pincolor Section - Minimalist Styles */
.club-pincolor-section {
  padding: 40px 0;
  border-top: 1px solid #e4e4e7;
  margin-top: 40px;
  background-color: #fafafa;
}

.club-pincolor-content {
  text-align: center;
}

.club-pincolor-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12px;
  color: #18181b;
}

.club-pincolor-title strong {
  color: #de3083;
}

.club-pincolor-text {
  font-size: 14px;
  line-height: 1.6;
  color: #6c757d;
  margin-bottom: 20px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.club-pincolor-content .btn {
  margin-top: 8px;
}

@media (max-width: 768px) {
  .club-pincolor-section {
    padding: 30px 0;
    margin-top: 30px;
  }

  .club-pincolor-title {
    font-size: 20px;
  }

  .club-pincolor-text {
    font-size: 13px;
  }
}