/*** Customize seu css aqui ***/

.product-title {
  line-height: 1.45;
}

.product-sku {
  color: #7c8096;
  font-size: 13px;
  font-weight: 400;
  line-height: 40px;
  margin-bottom: 0;
  margin-top: 0;
  width: 100%;
}

.product-sku b {
  color: #7c8096;
  font-weight: 600;
}

.product-header-box_left .product-title.product-title_desktop {
  margin-bottom: 0 !important;
  padding-bottom: 6px !important;
}

.product-header-box_left .product-sku {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.product-header-box_left .product-getDiscount.hide-lg {
  margin-bottom: 16px;
  padding-top: 0 !important;
}

@media (max-width: 991px) {
  .product-header-box_left .product-title.product-title_desktop {
    margin-bottom: 0 !important;
    padding-bottom: 6px !important;
  }
}

@media (max-width: 575px) {
  .product-header-box_left .product-title.product-title_desktop {
    padding-bottom: 6px !important;
  }
}

@media (max-width: 1199px) and (min-width: 992px) {
  .product-title {
    line-height: 1.45;
  }
}

/* Página de produto — mobile: imagem principal maior, faixa cinza mais fina */
@media (max-width: 991px) {
  .product-images {
    display: block;
  }

  .product-zoom {
    height: auto;
    margin: 0 auto 12px;
    max-width: 100%;
    width: 100%;
  }

  .product-zoom_link {
    float: none;
    height: auto;
    padding: 6px;
  }

  .product-zoom_link picture {
    display: block;
    line-height: 0;
  }

  .product-zoom_image {
    display: block;
    height: auto;
    margin: 0 auto;
    max-height: none;
    max-width: 100%;
    position: relative;
    width: 100%;
  }

  .product-gallery_mobile {
    clear: both;
    display: block;
    margin-top: 4px;
    width: 100%;
  }

  .product-gallery_mobile .product-gallery_list {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 575px) {
  .product-zoom {
    height: auto;
    max-width: 100%;
    width: 100%;
  }

  .product-zoom_link {
    padding: 4px;
  }
}

@media (min-width: 992px) {
  .header-content .navbar {
    align-items: center;
    display: flex;
    height: 89px;
  }

  .header-content .logo img,
  .header-content .logo svg {
    max-height: 56px;
  }
}

.showcase-product_buy {
  background-color: #21C553;
}

.showcase-product_buy:focus,
.showcase-product_buy:hover {
  background-color: #1a9941;
  color: #fff;
}

@media (min-width: 992px) {
  .header-content .nav-main {
    height: 89px;
  }

  .header-content .nav-main_link {
    padding: calc((89px - 30px) / 2) 22px;
  }

  /* Mega-menu — sidebar + conteúdo */
  /* Limita o painel à largura do container (margens laterais) */
  .nav-main_item>.nav-main_content.dropdown-content {
    background-color: transparent;
    box-shadow: none;
    min-height: 0;
  }

  .nav-main_item>.dropdown-content:before {
    display: none;
  }

  .nav-main-box {
    border-radius: 0 0 10px 10px;
    box-shadow: 1px 6px 20px 4px rgba(0, 0, 0, 0.22);
    display: flex;
    min-height: 660px;
    overflow: hidden;
    position: relative;
  }

  .nav-main-box_first {
    background-color: #f8f9fe;
    border-right: 0.5px solid #e2e6ee;
    flex-shrink: 0;
    max-width: 244px;
    min-width: 244px;
    padding-bottom: 0;
    width: 244px;
  }

  .nav-main-box-first_title {
    color: #0d1f4c;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.3;
    padding: 1.25rem 1.25rem 0.75rem;
  }

  .nav-main-box-first_title svg {
    flex-shrink: 0;
    height: 14px;
    margin-right: 7px;
    width: 14px;
  }

  .nav-main-box_first>ul {
    max-height: 610px;
    overflow-y: auto;
  }

  .nav-main-box_first>ul>li {
    border-left: 3px solid transparent;
    border-radius: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    padding: 11px 1.25rem;
  }

  .nav-main-box_first>ul>li:hover {
    background-color: #eef1f9;
    font-weight: 400;
  }

  .nav-main-box_first>ul>li:hover a {
    color: #0d1f4c;
  }

  .nav-main-box_first>ul>li.nav-children_custom.active {
    background-color: #e9effb;
    border-left-color: #2563c9;
  }

  .nav-main-box_first>ul>li.nav-children_custom.active .nav-main_children__link {
    color: #0d1f4c;
    font-weight: 600;
  }

  .nav-main-box_first>ul>li a {
    color: #4a5468;
  }

  .nav-main-box_first .nav-main_children__box {
    align-items: center;
    display: flex;
    max-width: calc(100% - 16px);
  }

  .nav-main-box_first .nav-main_children_icon {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: 19px;
    justify-content: center;
    margin-right: 11px;
    width: 19px;
  }

  .nav-main-box_first .nav-main_children_icon svg,
  .nav-main-box_first .nav-main_children_icon img {
    display: block;
    height: 19px;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: 19px;
  }

  .nav-main-box_first .icon-viewSubcategories {
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0.45;
    padding-left: 10px;
  }

  .nav-main-box_first .icon-viewSubcategories svg {
    height: 7px;
    width: 4px;
  }

  .nav-main-box_first>ul>li.nav-children_custom.active .icon-viewSubcategories {
    color: #2563c9;
    opacity: 1;
  }

  .nav-main-box_first .nav-main_content__children.dropdown-content {
    background-color: #ffffff;
    bottom: 0;
    display: none;
    left: 244px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1.5rem 2rem;
    right: 0;
    top: 0;
  }

  .nav-children_custom.active>.nav-main_content__children.dropdown-content {
    display: block;
  }

  .menu-conteudo-header {
    align-items: center;
    border-bottom: 0.5px solid #e2e6ee;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.875rem;
  }

  .menu-conteudo-header_title {
    color: #0d1f4c;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
  }

  .menu-conteudo-header_link {
    color: #2563c9;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
  }

  .menu-conteudo-header_link:hover,
  .menu-conteudo-header_link:focus {
    color: #1d4fa8;
    opacity: 1;
    text-decoration: underline;
  }

  .menu-grupos {
    column-count: 2;
    column-fill: auto;
    column-gap: 3.75rem;
    display: block;
    flex-direction: unset;
    flex-wrap: unset;
    height: auto;
    max-height: 580px;
    max-width: 580px;
    overflow-x: hidden;
    width: 100%;
  }

  .nav-main_content li.nav-main-children_item,
  .nav-main_content li.nav-main-children_item.grupo {
    break-inside: avoid;
    display: block;
    margin-bottom: 1.5rem;
    max-width: 100%;
    min-height: 0;
    padding-bottom: 0;
    padding-top: 0;
    width: 100%;
  }

  .nav-main_content li.nav-main-children_item>* {
    max-width: 100%;
  }

  .nav-main-children_item>.nav-main_children {
    color: #0d1f4c;
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.35;
    margin-bottom: 10px;
  }

  .nav-main_subcategory {
    margin-top: 0;
    padding-top: 0;
  }

  .nav-main-subcategory_list {
    display: block;
    flex-direction: unset;
    flex-wrap: unset;
    width: 100%;
  }

  .nav-main-subcategory_item {
    padding-bottom: 0;
  }

  .nav-main-subcategory_link {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    transition: color 0.12s ease, padding-left 0.12s ease;
  }

  .nav-main-subcategory-link_title {
    color: #5a6478;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.4;
    overflow: visible;
    padding: 5px 0;
    text-overflow: unset;
    white-space: normal;
  }

  .nav-main-subcategory_link:hover .nav-main-subcategory-link_title,
  .nav-main-subcategory_link:focus .nav-main-subcategory-link_title {
    color: #2563c9;
    padding-left: 4px;
  }
}

@media (max-width: 1199px) and (min-width: 992px) {
  .nav-main-box_first {
    max-width: 232px;
    min-width: 232px;
    width: 232px;
  }

  .nav-main-box_first .nav-main_content__children.dropdown-content {
    left: 232px;
    padding: 1.5rem 2rem;
  }

  .nav-main_item>.dropdown-content:before {
    width: 232px;
  }
}

/* Footer — layout imagem 2 */
.footer-content_main.content {
  padding-left: 0;
  padding-right: 0;
}

.footer-content_main .footer-columns_main {
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
}

.footer-content_main .footer-columns_main>.column {
  flex: none;
  margin-bottom: 0;
}

.footer-content_main>.container>.columns.footer-columns_main>.column .footer-box,
.footer-content_main>.container>.columns.footer-columns_main>.column:nth-child(2) .footer-box,
.footer-content_main .footer-columns_menus_inner>.column .footer-box {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

.footer-content_main .footer-box.footer-box_contact.footer-box_contact__card {
  margin-bottom: 0 !important;
}

.footer-content_main .footer-box.footer-box_page1,
.footer-content_main .footer-box.footer-box_page2,
.footer-content_main .footer-box.footer-box_page3 {
  padding-left: 0;
  padding-right: 0;
}

.footer-box_contact__card {
  background:
    radial-gradient(ellipse 140% 95% at 50% -5%, rgba(130, 188, 245, 0.3) 0%, transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(8, 24, 58, 0.18) 100%);
  border: 3px solid #3559a0;
  border-radius: 16px;
  box-shadow:
    inset 0 0 54px rgba(80, 145, 220, 0.22),
    inset 0 2px 0 rgba(255, 255, 255, 0.14);
  margin-bottom: 0;
  overflow: hidden;
  padding: 32px 28px 30px;
  position: relative;
  width: 100%;
}

.footer-box_contact__card .footer_title {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 22px;
}

.footer-contact_item {
  margin-bottom: 20px;
}

.footer-contact_item:last-of-type {
  margin-bottom: 0;
}

.footer-contact-link_title {
  display: block;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  margin-bottom: 8px;
}

.footer-contact_link__email {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.footer-contact_phones {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-contact_link__phone {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
}

.footer-contact_locations {
  align-items: stretch;
  display: grid;
  gap: 0 22px;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  margin-top: 4px;
}

.footer-contact_central {
  margin-top: 30px;
  text-align: left;
}

.footer-contact_central_title {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  margin: 0 0 10px;
}

.footer-contact_central_phone {
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  white-space: nowrap;
}

.footer-contact_central_email {
  color: #ffffff;
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 10px;
  word-break: break-word;
}

.footer-contact_central_email:focus,
.footer-contact_central_email:hover {
  color: #ffffff;
  opacity: 0.88;
  text-decoration: underline;
}

.footer-contact_locations_divider {
  background: rgba(255, 255, 255, 0.28);
  height: auto;
  width: 1px;
}

.footer-contact_location {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.footer-contact_location_header {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.footer-contact_location_icon {
  color: #fff;
  display: flex;
  flex-shrink: 0;
  line-height: 0;
}

.footer-contact_location_city {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.footer-contact_location_address {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  margin: 0;
}

.footer-contact_location_phone {
  margin-top: auto;
  padding-top: 18px;
}

.footer-contact_location_label {
  color: rgba(255, 255, 255, 0.55);
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  margin-bottom: 6px;
}

.footer-contact_location .footer-contact_link__phone {
  font-size: 18px;
  line-height: 24px;
}

.footer-contact_item__treatment .footer-contact-link_text {
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
}

.footer-contact_item__treatment .footer-contact-link_text p {
  margin-bottom: 0;
}

.footer-contact_item__treatment .footer-contact-link_text p+p {
  margin-top: 11px;
}

.footer-contact_item__treatment .footer-contact-link_text b {
  font-weight: 600;
}

.footer-social__card {
  margin-left: -6px;
  margin-top: 24px;
  position: relative;
  z-index: 1;
}

@media (min-width: 992px) {
  .footer-content_main>.container {
    padding-left: 0;
  }

  .footer-content_main .footer-columns_main {
    align-items: start;
    column-gap: 40px;
    display: grid !important;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    margin-left: 0;
  }

  .footer-content_main .footer-columns_main>.column {
    padding-left: 0;
    padding-right: 0;
  }

  .footer-content_main .footer-column_contact {
    flex: none !important;
    max-width: none !important;
    padding-left: 0;
    padding-right: 0 !important;
    width: 100% !important;
  }

  .footer-content_main .footer-columns_menus {
    flex: none !important;
    max-width: none;
    min-width: 0;
    overflow: hidden;
    padding-left: 0 !important;
    padding-right: 0;
    width: 100%;
  }

  .footer-content_main .footer-columns_menus_inner {
    align-items: flex-start;
    column-gap: 24px;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.9fr) minmax(0, 1.7fr);
    margin-left: 0;
    margin-right: 0;
    min-width: 0;
    width: 100%;
  }

  .footer-content_main .footer-columns_menus_inner--count-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .footer-content_main .footer-columns_menus_inner>.column {
    flex: none;
    max-width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
  }

  .footer-content_main .footer-box_page__brands,
  .footer-content_main .footer-pages__brands {
    max-width: 100%;
    min-width: 0;
  }
}

/* Tablets / iPad / Tab: 2 colunas de marcas + telefone sem quebra */
@media (min-width: 992px) and (max-width: 1399px) {
  .footer-pages__brands {
    column-count: 2;
    column-gap: 14px;
    column-width: auto;
  }

  .footer-pages__brands .footer-page_item {
    font-size: 12px;
    line-height: 16px;
    padding: 5px 0;
  }

  .footer-pages__brands .footer-page_link {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
  }

  .footer-box_contact__card {
    padding: 28px 22px 26px;
  }

  .footer-contact_central_phone {
    display: inline-block;
    font-size: 20px;
    line-height: 1.25;
    white-space: nowrap;
  }
}

@media (min-width: 1400px) {
  .footer-content_main .footer-columns_main {
    column-gap: 148px;
    grid-template-columns: 448px minmax(0, 1fr);
    margin-left: -24px;
  }

  .footer-content_main .footer-columns_menus_inner {
    column-gap: 72px;
    grid-template-columns: minmax(136px, 0.74fr) minmax(136px, 0.78fr) minmax(260px, 1.6fr);
  }

  .footer-content_main .footer-columns_menus_inner--count-2 {
    grid-template-columns: minmax(136px, 1fr) minmax(136px, 1fr);
  }

  .footer-pages__brands {
    column-count: 3;
    column-gap: 16px;
    column-width: auto;
  }
}

.footer-social__card .footer-social_item {
  margin: 4px 8px;
}

.footer-social__card .social-icons__link {
  border: 1px solid #E8A045;
  border-radius: 4px;
  height: 32px;
  width: 32px;
}

.footer-social__card .social-icons__link svg,
.footer-social__card .social-icons__link svg>* {
  fill: #E8A045;
  max-height: 16px;
  max-width: 16px;
}

.footer-social__card .social-icons__link:hover svg,
.footer-social__card .social-icons__link:hover svg>* {
  fill: #fff;
}

.footer-social__card .social-icons__link:hover {
  background-color: #E8A045;
}

.footer-column_pages .footer_title__group {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 22px;
}

.footer-column_pages .footer-page_item {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  padding: 7px 0;
}

.footer-column_pages .footer-page_item:first-of-type {
  padding-top: 0;
}

.footer-box_page__brands .footer_title__group {
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 12px;
}

.footer-pages__brands {
  column-count: 3;
  column-gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-pages__brands .footer-page_item {
  break-inside: avoid;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  padding: 6px 0;
}

.footer-pages__brands .footer-page_link {
  display: inline-block;
  white-space: nowrap;
}

.footer-pages__brands .footer-page_item:first-of-type,
.footer-box_page__brands .footer-pages__brands .footer-page_item:first-of-type {
  padding-top: 6px;
}

.footer-brands_iso {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.footer-brands_iso img {
  height: auto;
  max-height: 112px;
  max-width: 112px;
  width: auto;
}

@media (max-width: 991px) {
  .footer-content_main .footer-columns_main>.column {
    margin-bottom: 40px;
  }

  .footer-content_main .footer-columns_main>.column:last-child {
    margin-bottom: 0;
  }

  .footer-content_main .footer-columns_menus_inner>.column {
    margin-bottom: 36px;
  }

  .footer-content_main .footer-columns_menus_inner>.column:last-child {
    margin-bottom: 0;
  }

  .footer-content_main .footer-columns_menus {
    padding-left: 0 !important;
  }

  .footer-content_main .footer-column_contact {
    padding-right: 0 !important;
  }

  .footer-content_main .footer-box.footer-box_contact.footer-box_contact__card {
    border-top: 3px solid #3559a0;
    padding-top: 32px;
  }

  .footer-contact_locations {
    gap: 22px 0;
    grid-template-columns: 1fr;
  }

  .footer-contact_central_phone {
    font-size: 24px;
    white-space: nowrap;
  }

  .footer-contact_locations_divider {
    height: 1px;
    width: 100%;
  }

  .footer-pages__brands {
    column-count: 2;
    column-width: auto;
  }

  .footer-pages__brands .footer-page_link {
    display: inline-block;
    white-space: nowrap;
  }
}

@media (max-width: 575px) {
  .footer-pages__brands {
    column-count: 1;
    column-width: auto;
  }
}

/* Footer responsive: un solo contenido, presentado como accordion en tablet/mobile. */
.footer-mobile-accordion__trigger,
.footer-brands_progress {
  display: none;
}

@media (max-width: 1024px) {
  .footer-content_main.content {
    padding-bottom: 34px;
    padding-top: 44px;
  }

  .footer-content_main>.container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .footer-content_main .footer-columns_main,
  .footer-content_main .footer-columns_menus_inner {
    display: block !important;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .footer-content_main .footer-columns_main>.column {
    margin-bottom: 28px;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }

  .footer-content_main .footer-columns_main>.column:last-child,
  .footer-content_main .footer-columns_menus_inner>.column,
  .footer-content_main .footer-columns_menus_inner>.column:last-child {
    margin-bottom: 0;
  }

  .footer-content_main .footer-columns_menus {
    max-width: 100%;
    overflow: visible;
    padding-left: 0 !important;
    padding-right: 0;
    width: 100%;
  }

  .footer-content_main .footer-columns_menus_inner {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    overflow: hidden;
  }

  .footer-content_main .footer-columns_menus_inner>.column {
    max-width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }

  .footer-mobile-accordion,
  .footer-content_main .footer-box.footer-mobile-accordion {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    margin-bottom: 0;
  }

  .footer-column_pages:last-child .footer-mobile-accordion {
    border-bottom: 0;
  }

  .footer-mobile-accordion__desktop-title {
    display: none;
  }

  .footer-mobile-accordion__trigger {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    justify-content: space-between;
    line-height: 22px;
    min-height: 58px;
    padding: 17px 18px;
    text-align: left;
    width: 100%;
  }

  .footer-mobile-accordion__trigger:focus-visible,
  .footer-brands_progress__toggle:focus-visible,
  .footer-brands_all-link:focus-visible {
    outline: 2px solid #f7992c;
    outline-offset: -3px;
  }

  .footer-mobile-accordion__indicator {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    flex: 0 0 24px;
    height: 24px;
    margin-left: 16px;
    position: relative;
    transition: border-color 180ms ease, transform 220ms ease;
    width: 24px;
  }

  .footer-mobile-accordion__indicator::before,
  .footer-mobile-accordion__indicator::after {
    background: #f7992c;
    border-radius: 1px;
    content: '';
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .footer-mobile-accordion__indicator::before {
    height: 2px;
    width: 10px;
  }

  .footer-mobile-accordion__indicator::after {
    height: 10px;
    transition: transform 220ms ease, opacity 180ms ease;
    width: 2px;
  }

  .footer-mobile-accordion__trigger[aria-expanded='true'] .footer-mobile-accordion__indicator {
    border-color: rgba(247, 153, 44, 0.72);
    transform: rotate(180deg);
  }

  .footer-mobile-accordion__trigger[aria-expanded='true'] .footer-mobile-accordion__indicator::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .footer-mobile-accordion__panel {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 260ms ease, opacity 180ms ease;
  }

  .footer-mobile-accordion__panel-inner {
    min-height: 0;
    overflow: hidden;
  }

  .footer-mobile-accordion-ready .footer-mobile-accordion__panel[aria-hidden='true'] {
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
  }

  .footer-mobile-accordion .footer-pages {
    list-style: none;
    margin: 0;
    padding: 2px 18px 18px;
  }

  .footer-mobile-accordion .footer-page_item,
  .footer-mobile-accordion .footer-page_item:first-of-type,
  .footer-box_page__brands .footer-pages__brands .footer-page_item:first-of-type {
    font-size: 14px;
    line-height: 20px;
    min-width: 0;
    padding: 7px 0;
  }

  .footer-mobile-accordion .footer-page_link,
  .footer-pages__brands .footer-page_link {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: normal;
  }

  .footer-mobile-accordion .footer-pages__brands {
    column-count: auto;
    column-gap: normal;
    display: grid;
    gap: 0 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .footer-pages__brands .footer-page_item[hidden] {
    display: none !important;
  }

  .footer-brands_progress {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    justify-content: space-between;
    margin: 0 18px;
    padding: 15px 0 20px;
  }

  .footer-brands_progress__toggle {
    appearance: none;
    background: transparent;
    border: 0;
    color: #f6a33e;
    cursor: pointer;
    display: none;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    padding: 4px 0;
    text-align: left;
  }

  .has-progressive-brands .footer-brands_progress__toggle {
    display: inline-flex;
  }

  .footer-brands_progress__toggle::after {
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    content: '';
    height: 6px;
    margin: 4px 0 0 9px;
    transform: rotate(45deg);
    transition: transform 180ms ease;
    width: 6px;
  }

  .footer-brands_progress__toggle[aria-expanded='true']::after {
    margin-top: 8px;
    transform: rotate(225deg);
  }

  .footer-brands_all-link {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    padding: 4px 0;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.45);
    text-underline-offset: 3px;
  }

  .footer-brands_iso {
    align-items: center;
    justify-content: center;
    margin: 20px auto 22px;
    min-height: 88px;
    width: 100%;
  }

  .footer-brands_iso img {
    height: auto;
    max-height: 92px;
    max-width: 92px;
    width: auto;
  }

  .footer-content_second {
    padding-bottom: calc(94px + env(safe-area-inset-bottom));
    padding-top: 26px;
  }

  .footer-content_second>.container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .footer-content_second>.container>.col-12>.columns {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr);
    margin-left: 0;
    margin-right: 0;
    text-align: center;
  }

  .footer-content_second>.container>.col-12>.columns>.column {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }

  .footer-content_second .footer-box {
    line-height: 1.55;
    overflow-wrap: anywhere;
    padding: 0;
  }

  .footer-content_second .logo-platform {
    display: inline-block;
    line-height: 1.45;
    max-width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-mobile-accordion__indicator,
  .footer-mobile-accordion__indicator::after,
  .footer-mobile-accordion__panel,
  .footer-brands_progress__toggle::after {
    transition: none !important;
  }
}

html.hw-reduced .footer-mobile-accordion__indicator,
html.hw-reduced .footer-mobile-accordion__indicator::after,
html.hw-reduced .footer-mobile-accordion__panel,
html.hw-reduced .footer-brands_progress__toggle::after {
  transition: none !important;
}

/* Títulos de produto inteiros (home, categorias e busca) — remove corte de 1/2 linhas */
.showcase-product_link_title,
.showcase-search.showcase-search_list .showcase-product_link_title {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  height: auto;
  overflow: visible;
}

/* Alinhamento de preços — títulos com alturas variáveis */
.showcase-products_grid>ul.showcase-list {
  display: flex;
  flex-wrap: wrap;
}

.showcase-products_grid .showcase-item:not(.showcase-item_buy-to-gether):not(.showcase-item_kit):not(.showcase-item_calc) {
  display: flex;
  float: none;
}

.showcase-products_grid .showcase-item:not(.showcase-item_buy-to-gether):not(.showcase-item_kit):not(.showcase-item_calc) .showcase-product.card,
.showcase-products_carousel .showcase-item:not(.showcase-item_buy-to-gether):not(.showcase-item_kit):not(.showcase-item_calc) .showcase-product.card,
.showcase-slider .showcase-item:not(.showcase-item_buy-to-gether):not(.showcase-item_kit):not(.showcase-item_calc) .showcase-product.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.showcase-products_grid .showcase-item:not(.showcase-item_buy-to-gether):not(.showcase-item_kit):not(.showcase-item_calc) .showcase-product.card .card-footer,
.showcase-products_carousel .showcase-item:not(.showcase-item_buy-to-gether):not(.showcase-item_kit):not(.showcase-item_calc) .showcase-product.card .card-footer,
.showcase-slider .showcase-item:not(.showcase-item_buy-to-gether):not(.showcase-item_kit):not(.showcase-item_calc) .showcase-product.card .card-footer {
  margin-top: auto;
}

/* Listagem de categoria/busca (visão em grade) — iguala alturas por fileira */
.showcase-search.showcase-search_grid .showcase-list {
  display: flex;
  flex-wrap: wrap;
}

.showcase-search.showcase-search_grid .showcase-item {
  display: flex;
  float: none;
}

.showcase-search.showcase-search_grid .showcase-item>.showcase-product.card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.showcase-search.showcase-search_grid .showcase-item .card-footer {
  margin-top: auto;
}

/* Carrossel (tiny-slider): iguala a altura dos slides para alinhar os preços */
ul.showcase-slider.tns-slider {
  align-items: stretch;
  display: flex;
}

ul.showcase-slider>.showcase-item {
  display: flex;
  flex-shrink: 0;
  float: none;
  height: auto;
}

ul.showcase-slider>.showcase-item>.showcase-product.card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

ul.showcase-slider>.showcase-item .card-footer {
  margin-top: auto;
}

/* Vitrine 6 — padroniza ícones SVG de categorias */
.showcase-image-carousel--compact .showcase-banners_item {
  width: 110px;
}

.showcase-model-6 .showcase-banners_link--svg {
  align-items: center;
  background-color: #fcfcfc;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  display: flex;
  height: 86px;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  width: 86px;
}

.showcase-model-6 .showcase-banners_link--svg picture {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.showcase-model-6 .showcase-banners_link--svg img.banner-grid--svg {
  display: block;
  height: 70px;
  max-height: 70px;
  max-width: 70px;
  object-fit: contain;
  width: 70px;
}

.showcase-model-6 .showcase-banners_link--svg+.showcase-image-title {
  margin-top: 8px;
}

@media (max-width: 991px) {
  .showcase-image-carousel--compact .showcase-banners_item {
    width: 100px;
  }

  .showcase-model-6 .showcase-banners_link--svg {
    border-radius: 10px;
    height: 82px;
    width: 82px;
  }

  .showcase-model-6 .showcase-banners_link--svg img.banner-grid--svg {
    height: 66px;
    max-height: 66px;
    max-width: 66px;
    width: 66px;
  }

  .showcase-model-6 .showcase-banners_link--svg+.showcase-image-title {
    margin-top: 6px;
  }
}

/* Home — banners institucionais: desktop vs mobile (não depende só de hide-lg/show-lg) */
.banner-custom_box__desktop {
  display: block !important;
}

.banner-custom_box__mobile {
  display: none !important;
}

@media (max-width: 991px) {
  .banner-custom_box__desktop {
    display: none !important;
  }

  .banner-custom_box__mobile {
    display: block !important;
  }
}

/* Home mobile — espaçamento banners institucionais e categorias */
@media (max-width: 991px) {
  .banner-custom-content {
    padding-bottom: 18px;
    padding-top: 14px;
  }

  .home-main .showcase.showcase-model-6 {
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 12px;
  }

  .home-main .showcase.showcase-model-6 .showcase-title {
    margin-bottom: 14px;
  }

  .showcase-model-6 .showcase-banners {
    padding-bottom: 0;
  }
}

/* Home desktop — reduz espaço da vitrine de categorias */
@media (min-width: 992px) {
  .home-main .showcase.showcase-model-5:has(+ .showcase.showcase-model-6) {
    padding-bottom: 68px;
  }

  .home-main .showcase.showcase-model-6 {
    margin-bottom: 8px;
    margin-top: 0;
    padding-bottom: 28px;
  }

  .home-main .showcase.showcase-model-6 .showcase-title {
    margin-bottom: 18px;
  }

  .showcase-model-6 .showcase-banners {
    padding-bottom: 0;
  }
}

.product-attributes_table {
  border-collapse: collapse;
  width: 100%;
}

.product-attributes_table th,
.product-attributes_table td {
  border: 1px solid #D5E2EB;
  color: #12114B;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

.product-attributes_table th {
  background-color: #fafafa;
  font-weight: 600;
  width: 32%;
}

.product-attributes_table td {
  color: #12114B80;
}

@media (max-width: 767px) {

  .product-attributes_table th,
  .product-attributes_table td {
    display: block;
    width: 100%;
  }

  .product-attributes_table th {
    border-bottom: 0;
    padding-bottom: 6px;
  }

  .product-attributes_table td {
    padding-top: 0;
  }
}

/* === Recursos 1.5: cotação no topo do header === */
.header-top-bar .header-top-bar_nav {
  align-items: center;
  justify-content: space-between;
}

.header-top-bar .header-top-bar_left {
  flex: 1 1 auto;
  justify-content: flex-start;
  min-width: 0;
}

.header-top-bar .header-top-bar_right {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-left: auto;
}

.header-top-quote {
  align-items: center;
  background: transparent;
  border: 0;
  color: #ffffff;
  cursor: default;
  display: inline-flex;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  line-height: 1.3;
  max-width: 100%;
  padding: 0;
  text-align: left;
}

.header-top-quote_clickable {
  cursor: pointer;
}

.header-top-quote_clickable:hover {
  color: #ffffff;
  opacity: 0.92;
}

.header-top-quote_label {
  color: #ffffff;
  font-weight: 600;
  white-space: nowrap;
}

.header-top-quote_values {
  align-items: center;
  color: #ffffff;
  display: inline-flex;
  flex-wrap: wrap;
  font-weight: 600;
  gap: 0;
  white-space: nowrap;
}

.header-top-quote_item {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
}

.header-top-quote_sep {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
  margin: 0 2px 0 8px;
}

.header-top-quote_flag {
  border-radius: 1px;
  display: inline-block;
  flex-shrink: 0;
  height: 12px;
  object-fit: cover;
  width: 18px;
}

.header-top-quote_value {
  color: #ffffff;
  white-space: nowrap;
}

.header-top-bar .header-top-bar_left.navbar-section {
  justify-content: flex-start;
}

.header-top-bar .top-pages_list {
  justify-content: flex-end;
}

@media (max-width: 991px) {
  .header-top-bar .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .header-top-bar .header-top-bar_nav {
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    min-height: 28px;
  }

  .header-top-bar .header-top-bar_left,
  .header-top-bar .header-top-bar_right {
    flex: 0 1 auto;
    margin-left: 0;
    max-width: none;
    width: auto;
  }

  .header-top-bar .header-top-bar_left {
    flex: 1 1 auto;
    min-width: 0;
  }

  .header-top-bar .header-top-bar_right {
    flex: 0 0 auto;
    margin-left: auto;
    max-width: 52%;
  }

  .header-top-bar .header-top-bar_right.navbar-section {
    justify-content: flex-end;
  }

  .header-top-quote {
    flex-wrap: nowrap;
    font-size: 11px;
    gap: 4px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .header-top-quote_values {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-top-quote_flag {
    height: 10px;
    width: 15px;
  }

  .header-top-quote_sep {
    margin: 0 1px 0 5px;
  }

  .header-top-bar .top-pages_list {
    flex-wrap: nowrap;
    justify-content: flex-end;
    overflow: hidden;
  }

  .header-top-bar .top-pages_item {
    padding: 2px 6px;
  }

  .header-top-bar .top-pages_item:first-child {
    padding-left: 0;
  }

  .header-top-bar .top-pages_link {
    display: block;
    font-size: 9px;
    line-height: 1.2;
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .header-top-bar .header-top-bar_nav {
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px 0 6px;
  }

  .header-top-bar .header-top-bar_left,
  .header-top-bar .header-top-bar_right {
    flex: 0 0 100%;
    margin-left: 0;
    max-width: 100%;
    width: 100%;
  }

  .header-top-bar .navbar .header-top-bar_left.navbar-section,
  .header-top-bar .navbar .header-top-bar_right.navbar-section,
  .header-top-bar .navbar .header-top-bar_right.navbar-section:not(:first-child):last-child {
    justify-content: center;
  }

  .header-top-quote {
    justify-content: center;
    text-align: center;
    width: 100%;
  }

  .header-top-quote_values {
    justify-content: center;
  }

  .header-top-bar .top-pages {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .header-top-bar .navbar .top-pages_list {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    max-width: 100%;
  }

  .header-top-bar .top-pages_item:first-child {
    padding-left: 6px;
  }

  .header-top-bar .top-pages_item:last-of-type {
    padding-right: 6px;
  }

  .header-top-bar .top-pages_link {
    max-width: none;
    text-align: center;
    white-space: normal;
  }
}

/* Header desktop: busca à esquerda + conta/carrinho à direita */
@media (min-width: 992px) {
  .header-content .navbar {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .header-content .navbar-section:first-child {
    flex: 0 0 auto;
    max-width: none;
    min-width: 0;
  }

  .header-content .navbar-center {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-start;
    max-width: none;
    min-width: 0;
    overflow: hidden;
    padding-left: 20px;
    padding-right: 16px;
    width: auto;
  }

  .header-content .navbar-section:last-child {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: flex-end;
    max-width: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 20px;
    width: auto;
  }

  .search-desktop {
    flex: 1 1 auto;
    margin-right: 0;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .search-desktop form,
  .search-desktop .input-group {
    max-width: 100%;
    width: 100%;
  }

  .search-desktop .form-input {
    max-width: 100%;
    width: 100%;
  }

  .header-box_account {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
  }

  .header-box_account .header-link_account {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
  }

  .header-box_account .header-link_account>* {
    float: none;
  }

  .header-box_account .header-link_icon {
    flex-shrink: 0;
  }

  .header-box_account .header-link_text {
    flex-shrink: 1;
    margin-left: 8px;
    min-width: 0;
  }

  .header-link_text__logged .account_link {
    max-width: 130px;
    width: auto;
  }

  .header-link.header-link_cart {
    flex-shrink: 0;
    margin-left: 50px;
    position: relative;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .header-content .navbar-center {
    padding-right: 20px;
  }

  .header-link.header-link_cart {
    margin-left: 28px;
  }
}

/* Header mobile: margem esquerda da busca (logo — busca) */
@media (max-width: 991px) {
  .header-content .navbar {
    align-items: center;
    flex-wrap: nowrap;
    gap: 14px;
    justify-content: flex-start;
  }

  .header-content .navbar-section:first-child,
  .header-content .navbar-section:last-child {
    flex: 0 0 auto;
    min-width: 0;
  }

  .header-content .navbar-section:last-child {
    margin-left: auto;
  }

  .header-content .navbar-center {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 0;
    min-width: 0;
    overflow: visible;
    padding-left: 0;
    padding-right: 0;
  }

  .header-content .navbar-center .logo.show-lg {
    flex: 0 0 auto;
    margin-right: 0;
  }

  .header-content .header-search-mobile,
  .header-content .navbar-center .search-desktop {
    display: block !important;
    flex: 1 1 auto;
    margin-left: 28px !important;
    max-width: none;
    min-width: 0;
    width: auto !important;
  }

  .header-content .header-link_search.search_link {
    display: none !important;
  }

  .header-content .header-search-mobile .form-input,
  .header-content .navbar-center .search-desktop .form-input {
    height: 48px;
    padding-left: 14px;
  }

  /*
   * Modo com login + carrinho:
   * linha 1 — menu | logo | usuário + sacola
   * linha 2 — busca full width
   * (modo catálogo sem essa classe permanece na linha única)
   */
  .header-content--with-shop .navbar {
    align-items: center;
    column-gap: 10px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "menu logo actions"
      "search search search";
    height: auto;
    min-height: 0;
    padding-bottom: 10px;
    padding-top: 8px;
    row-gap: 10px;
  }

  .header-content--with-shop .navbar-section:first-child {
    grid-area: menu;
    justify-self: start;
    margin-left: 0;
  }

  .header-content--with-shop .navbar-center {
    display: contents;
  }

  .header-content--with-shop .navbar-center .logo.show-lg {
    grid-area: logo;
    justify-self: center;
    margin: 0;
  }

  .header-content--with-shop .navbar-section:last-child {
    align-items: center;
    display: flex;
    gap: 0;
    grid-area: actions;
    justify-content: flex-end;
    justify-self: end;
    margin-left: 0;
  }

  .header-content--with-shop .header-box_account.hide-lg {
    display: flex !important;
  }

  .header-content--with-shop .header-box_account .header-link_account {
    align-items: center;
    display: flex;
  }

  .header-content--with-shop .header-box_account .header-link_text {
    display: none !important;
  }

  .header-content--with-shop .header-box_account .header-link_icon {
    align-items: center;
    display: inline-flex;
    line-height: 0;
    padding: 4px 10px 4px 4px;
  }

  .header-content--with-shop .header-link.header-link_cart {
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    display: inline-flex;
    line-height: 0;
    margin-left: 0;
    padding: 4px 4px 4px 12px;
    position: relative;
  }

  .header-content--with-shop .header-link_cart .cart_quantity {
    background-color: #E01380;
  }

  .header-content--with-shop .header-search-mobile,
  .header-content--with-shop .navbar-center .search-desktop {
    grid-area: search;
    margin-left: 0 !important;
    max-width: 100%;
    width: 100% !important;
  }

  .header-content--with-shop .header-search-mobile .form-input,
  .header-content--with-shop .navbar-center .search-desktop .form-input {
    border-radius: 8px;
  }
}

/* Badge de quantidade no carrinho do header */
.header-link_cart .cart_quantity {
  align-items: center;
  background-color: #3189CA;
  border-radius: 50%;
  bottom: auto;
  color: #fff;
  display: none;
  font-size: 10px;
  font-weight: bold;
  height: 18px;
  justify-content: center;
  left: auto;
  line-height: 14px;
  min-width: 18px;
  padding: 1px 4px;
  position: absolute;
  right: -6px;
  top: -4px;
}

.header-link_cart .cart_quantity.cart_quantity--visible {
  display: flex;
}

/* Filtro de preço — valores acima do slider + respiro vertical */
.search-filter_price .search-filter-header {
  padding-bottom: 14px;
}

.search-filter_price .search-filter-body {
  padding-bottom: 4px;
}

.search-filter-price_values {
  line-height: 18px;
  margin-bottom: 14px;
  margin-top: 0;
}

.search-filter-price .noUi-target {
  margin-bottom: 28px;
}

.search-filter_price .search-filters-btn_finish {
  margin-top: 4px;
}

/* Checkout — seletor de cidade com busca (apenas etapa de entrega) */
.checkout-card-shipping .checkout-city-picker-wrap {
  position: relative;
}

.checkout-card-shipping .checkout-city-picker {
  position: relative;
}

.checkout-card-shipping .checkout-city-picker-trigger {
  align-items: center;
  background: #fff;
  border: 1px solid #d3dbe2;
  border-radius: 4px;
  color: #3b4351;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  line-height: 1.4;
  min-height: 40px;
  padding: 8px 12px;
  text-align: left;
  width: 100%;
}

.checkout-card-shipping .checkout-city-picker-trigger.is-placeholder {
  color: #8a94a6;
}

.checkout-card-shipping .checkout-city-picker-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.checkout-card-shipping .checkout-city-picker-trigger-icon {
  color: #8a94a6;
  flex-shrink: 0;
  margin-left: 8px;
}

.checkout-card-shipping .checkout-city-picker-trigger-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-card-shipping .checkout-city-picker-panel {
  background: #fff;
  border: 1px solid #d3dbe2;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(24, 39, 75, 0.12);
  left: 0;
  margin-top: 6px;
  overflow: hidden;
  padding-bottom: 4px;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
}

.checkout-card-shipping .checkout-city-picker-search {
  align-items: center;
  background: #fff;
  border: 1.5px solid #d3dbe2;
  border-radius: 10px;
  display: flex;
  gap: 10px;
  margin: 12px 14px;
  padding: 10px 12px;
  transition: border-color 0.15s ease;
}

.checkout-card-shipping .checkout-city-picker-search:focus-within {
  border-color: #3189CA;
}

.checkout-card-shipping .checkout-city-picker-search-icon {
  color: #8a94a6;
  flex-shrink: 0;
}

.checkout-card-shipping .checkout-city-picker-search-input {
  background: transparent;
  border: 0;
  color: #3b4351;
  flex: 1;
  font-size: 15px;
  line-height: 1.35;
  margin: 0;
  min-width: 0;
  outline: 0;
  padding: 0;
  width: 100%;
}

.checkout-card-shipping .checkout-city-picker-search-input::placeholder {
  color: #8a94a6;
  opacity: 1;
}

.checkout-card-shipping .checkout-city-picker-search-input[type="search"]::-webkit-search-cancel-button,
.checkout-card-shipping .checkout-city-picker-search-input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.checkout-card-shipping .checkout-city-picker-search-clear {
  align-items: center;
  background: transparent;
  border: 0;
  color: #8a94a6;
  cursor: pointer;
  display: none;
  flex-shrink: 0;
  font-size: 20px;
  height: 24px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 24px;
}

.checkout-card-shipping .checkout-city-picker-search-clear.is-visible {
  display: inline-flex;
}

.checkout-card-shipping .checkout-city-picker-list {
  max-height: 280px;
  overflow-y: auto;
}

.checkout-card-shipping .checkout-city-picker-empty {
  color: #8a94a6;
  font-size: 14px;
  margin: 0;
  padding: 16px;
}

.checkout-card-shipping .checkout-city-picker-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #f1f4f8;
  color: inherit;
  cursor: pointer;
  display: flex;
  gap: 11px;
  padding: 12px 16px;
  text-align: left;
  width: 100%;
}

.checkout-card-shipping .checkout-city-picker-item:hover,
.checkout-card-shipping .checkout-city-picker-item.is-kbd,
.checkout-card-shipping .checkout-city-picker-item.is-active {
  background: #f3f8fd;
}

.checkout-card-shipping .checkout-city-picker-pin {
  align-items: center;
  background: #eef6fc;
  border-radius: 8px;
  color: #3189CA;
  display: grid;
  flex: none;
  height: 30px;
  place-items: center;
  width: 30px;
}

.checkout-card-shipping .checkout-city-picker-label {
  color: #3b4351;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-card-shipping .checkout-city-picker-label b {
  color: #3189CA;
  font-weight: 700;
}

/* Checkout — resumo lateral (produto + totais) */
.checkout-card-summary {
  box-shadow: none;
}

.checkout-card-summary>.card-body,
.checkout-card-summary>.card-footer {
  box-sizing: border-box;
  padding-left: 12px;
  padding-right: 12px;
}

.checkout-card-summary .card-body .checkout-product--cart-style {
  align-items: flex-start;
  box-sizing: border-box;
  display: flex;
  gap: 15px;
  min-height: 0;
  overflow: visible;
  padding-bottom: 15px;
  padding-top: 15px;
  width: 100%;
}

.checkout-card-summary .card-body .checkout-product--cart-style:first-of-type {
  padding-top: 12px;
}

.checkout-card-summary .checkout-product-media {
  flex: 0 0 72px;
  float: none;
  margin-right: 0;
  min-height: 0;
  width: 72px;
}

.checkout-card-summary .checkout-product-media .checkout-product-image {
  align-items: center;
  display: flex;
  height: auto;
  justify-content: center;
  min-height: 0;
}

.checkout-card-summary .checkout-product-media .checkout-product-image img {
  display: block;
  margin: 0 auto;
  max-height: 72px;
  max-width: 100%;
}

.checkout-card-summary .checkout-product-body {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}

.checkout-card-summary .checkout-product-top {
  align-items: flex-start;
  display: flex;
  gap: 10px 12px;
  justify-content: space-between;
}

.checkout-card-summary .checkout-product-main {
  flex: 1 1 auto;
  min-width: 0;
}

.checkout-card-summary .checkout-product-aside {
  align-items: flex-end;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  max-width: 42%;
  min-width: 7.5rem;
}

.checkout-card-summary .checkout-product-aside-head {
  align-items: flex-start;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  width: 100%;
}

.checkout-card-summary .checkout-product-header {
  margin-bottom: 4px;
  overflow: hidden;
  padding-right: 0;
}

.checkout-card-summary .checkout-product-header .checkout-product-title {
  float: none;
  margin: 0;
  min-height: 0;
  width: 100%;
}

.checkout-card-summary .checkout-product-header .checkout-product-title p {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  line-height: 1.3;
  margin-bottom: 0;
  overflow: hidden;
  word-break: break-word;
}

.checkout-card-summary .checkout-product-header .checkout-product-title>* {
  float: none;
  max-height: none;
  width: auto;
}

.checkout-card-summary .checkout-product-aside-head .btn-checkout-delete {
  flex-shrink: 0;
  line-height: 0;
  margin: 2px 0 0;
}

.checkout-card-summary .checkout-product-aside-head .btn-checkout-delete svg {
  fill: #e55353;
}

.checkout-card-summary .checkout-product-extra {
  margin-top: 8px;
}

.checkout-card-summary .checkout-product-info p,
.checkout-card-summary .checkout-product-extra p {
  margin-bottom: 2px;
}

.checkout-card-summary .checkout-product-unit-price {
  font-size: 0.8em;
  line-height: 1.35;
  margin-bottom: 0;
  opacity: 0.85;
}

.checkout-card-summary .checkout-product-prices {
  flex: 1 1 auto;
  margin-top: 0;
  min-width: 0;
  text-align: right;
}

.checkout-card-summary .checkout-product-prices .checkout-product-price {
  color: #242431;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 0;
  text-align: right;
  white-space: nowrap;
}

.checkout-card-summary .checkout-product-prices .checkout-product-price_withoutProgressive {
  display: block;
  margin-bottom: 2px;
  text-align: right;
  white-space: nowrap;
}

.checkout-card-summary .checkout-product_quantity {
  color: #7f8ba3;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  margin: 0;
  max-width: 95px;
  padding: 0;
  width: 100%;
}

.checkout-card-summary .checkout-product_quantity .input-group {
  align-items: center;
  border: 1px solid #e3e3e8;
  border-radius: 6px;
  justify-content: center;
}

.checkout-card-summary .checkout-product_quantity .btn,
.checkout-card-summary .checkout-product_quantity input {
  background-color: transparent;
  box-shadow: none;
  min-height: 30px;
}

.checkout-card-summary .checkout-product_quantity .btn {
  color: #7f8ba3;
  font-size: 0.85em;
  font-weight: 500;
  height: auto;
  line-height: 1.8;
  max-width: 3.2em;
  padding-bottom: 0.45em;
  padding-top: 0.45em;
}

.checkout-card-summary .checkout-product_quantity .btn:first-of-type {
  padding-left: 0.9em;
  padding-right: 0.45em;
}

.checkout-card-summary .checkout-product_quantity .btn:last-of-type {
  padding-left: 0.45em;
  padding-right: 0.9em;
}

.checkout-card-summary .checkout-product_quantity .btn:focus,
.checkout-card-summary .checkout-product_quantity .btn:hover {
  background-color: transparent;
  color: #7f8ba3;
  opacity: 0.7;
}

.checkout-card-summary .checkout-product_quantity input {
  border: none;
  font-size: 1em;
  height: auto;
  line-height: 1.55;
  max-width: 3.1em;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

.checkout-card-summary .checkout-product-price,
.checkout-card-summary .checkout-product-price>span,
.checkout-card-summary .price-small {
  white-space: nowrap;
}

.checkout-card-summary .card-body .checkout-product-price {
  text-align: right;
  width: auto;
}

.checkout-card-summary .card-body .checkout-product-price .price-small,
.checkout-card-summary .checkout-product-prices .checkout-product-price .price-small {
  display: block;
  float: none;
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.25;
  margin-top: 2px;
  opacity: 0.76;
  text-align: right;
  width: auto;
}

.checkout-card-summary>.card-footer>section:not(.checkout-product-coupon) {
  align-items: center;
  display: flex;
  gap: 0.5rem 1rem;
  justify-content: space-between;
}

.checkout-card-summary>.card-footer .checkout-product-left {
  flex: 1 1 auto;
  float: none;
  height: auto;
  min-width: 0;
  width: auto;
}

.checkout-card-summary>.card-footer .checkout-product-right {
  flex: 0 0 auto;
  float: none;
  flex-wrap: nowrap;
  height: auto;
  margin-left: 0;
  max-width: 62%;
  min-width: 0;
  text-align: right;
  width: auto;
}

.checkout-card-summary>.card-footer .checkout-product-title {
  font-size: 14px;
  line-height: 1.35;
}

.checkout-card-summary>.card-footer .checkout-product-price {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0;
  text-align: right;
}

.checkout-card-summary .checkout-product-total {
  border-top: 1px solid #e3e3e8;
  margin-top: 4px;
  padding-top: 12px;
}

.checkout-card-summary .checkout-product-total .checkout-product-title,
.checkout-card-summary .checkout-product-total .checkout-product-price {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.checkout-card-summary>.card-footer .checkout-product-coupon {
  display: block;
  margin-top: 12px;
  width: 100%;
}

.checkout-card-summary>.card-footer .checkout-product-coupon .form-group {
  margin-bottom: 0;
  width: 100%;
}

.checkout-card-summary>.card-footer .checkout-product-coupon .btn-checkout-coupon {
  box-sizing: border-box;
  display: block;
  text-align: center;
  width: 100%;
}

.checkout-quotation-rate {
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  padding: 0.35rem 0.75rem 0.25rem;
}

.checkout-quotation-tag {
  align-items: center;
  background: rgba(49, 137, 202, 0.1);
  border: 1px solid rgba(49, 137, 202, 0.25);
  border-radius: 3px;
  display: inline-flex;
  font-size: 0.625rem;
  gap: 0.2rem;
  line-height: 1.25;
  padding: 0.1rem 0.35rem;
}

.checkout-quotation-tag_label {
  color: #3189CA;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.checkout-quotation-tag_value {
  color: #3189CA;
  font-weight: 700;
}

@media (max-width: 1199px) and (min-width: 992px) {
  .checkout-card-summary .checkout-product-media {
    flex-basis: 68px;
    width: 68px;
  }

  .checkout-card-summary .checkout-product-media .checkout-product-image img {
    max-height: 68px;
  }

  .checkout-card-summary .checkout-product-header .checkout-product-title p {
    font-size: 13px;
  }

  .checkout-card-summary .checkout-product-prices .checkout-product-price {
    font-size: 14px;
  }

  .checkout-card-summary .checkout-product-aside {
    max-width: 44%;
  }
}

@media (max-width: 991px) {
  .checkout-card-summary .checkout-product--cart-style {
    gap: 12px;
  }

  .checkout-card-summary .checkout-product-media {
    flex-basis: 64px;
    width: 64px;
  }

  .checkout-card-summary .checkout-product-media .checkout-product-image img {
    max-height: 64px;
  }

  .checkout-card-summary .checkout-product-aside {
    max-width: 46%;
    min-width: 6.5rem;
  }

  .checkout-card-summary .checkout-product_quantity {
    max-width: 88px;
  }

  .checkout-card-summary>.card-footer .checkout-product-right {
    max-width: 58%;
  }

  .checkout-card-summary .checkout-product-total .checkout-product-title,
  .checkout-card-summary .checkout-product-total .checkout-product-price {
    font-size: 16px;
  }
}

/* Checkout — respiro vertical: mesmo espaço título → campos nas duas seções */
.card.checkout-card.checkout-card-user .card-header.card-header_address1,
.card.checkout-card.checkout-card-user .card-header.card-header_address2 {
  padding-bottom: 18px;
}

.card.checkout-card.checkout-card-user .card-header.card-header_address1 {
  padding-top: 4px;
}

.card.checkout-card.checkout-card-user .card-header.card-header_address2 {
  margin-top: 0;
  padding-top: 16px;
}

.card.checkout-card.checkout-card-user .card-header .card-title {
  display: block;
  line-height: 1.35;
  margin-bottom: 0;
}

.card.checkout-card.checkout-card-user .checkout-section-fields,
.card.checkout-card.checkout-card-shipping_info .checkout-section-fields {
  padding-bottom: 0;
  padding-top: 18px;
}

.card.checkout-card.checkout-card-user .checkout-section-fields_columns,
.card.checkout-card.checkout-card-shipping_info .checkout-section-fields_columns {
  margin-top: 0;
  padding-top: 0;
}

.card.checkout-card.checkout-card-user .checkout-section-fields_columns>.column,
.card.checkout-card.checkout-card-shipping_info .checkout-section-fields_columns>.column {
  padding-top: 0;
}

.card.checkout-card.checkout-card-shipping_info .checkout-section-fields_row-document {
  margin-top: 0;
}

.card.checkout-card.checkout-card-user .form-group_document .form-document-helper,
.card.checkout-card.checkout-card-shipping_info .form-group_document .form-document-helper {
  color: #666;
  font-size: 12px;
  line-height: 1.35;
  margin: 6px 0 0;
  text-align: right;
}

.card.checkout-card.checkout-card-user .form-group_phone .form-phone-helper,
.card.checkout-card.checkout-card-shipping_info .form-group_phone .form-phone-helper {
  color: #666;
  font-size: 12px;
  line-height: 1.35;
  margin: 6px 0 0;
}

.new-account-main .form-group_phone .form-phone-helper,
.account-main .form-group_phone .form-phone-helper,
.change-account-main .form-group_phone .form-phone-helper {
  color: #666;
  font-size: 12px;
  line-height: 1.35;
  margin: 6px 0 0;
}

.new-account-main .form-group_phone.has-error .checkout-phone-field,
.account-main .form-group_phone.has-error .checkout-phone-field,
.change-account-main .form-group_phone.has-error .checkout-phone-field {
  border-bottom-color: #e85600;
}

/* Label flutuante (checkout/cadastro/conta): +595 só com foco/valor, mesma linha do input */
.new-account-main .form-group_phone .form-label,
.change-account-main .form-group_phone .form-label,
.account-main .form-group_phone .form-label,
.card.checkout-card .form-group_phone .form-label {
  pointer-events: none;
}

.new-account-main .form-group_phone [x-cloak],
.change-account-main .form-group_phone [x-cloak],
.account-main .form-group_phone [x-cloak],
.card.checkout-card .form-group_phone [x-cloak] {
  display: none !important;
}

.checkout-phone-field {
  align-items: center;
  border-bottom: 1px solid #E3E3E8;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  height: 40px;
  min-height: 40px;
  position: relative;
  width: 100%;
  z-index: 2;
}

.form-group_phone.has-error .checkout-phone-field {
  border-bottom-color: #e85600;
}

.checkout-phone-field_prefix {
  align-items: center;
  color: #6b7280;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 500;
  height: 100%;
  line-height: 20px;
  padding: 0 8px 0 0;
  position: relative;
  white-space: nowrap;
}

.checkout-phone-field_prefix::after {
  background: #cfd3dc;
  content: '';
  height: 16px;
  margin-left: 8px;
  width: 1px;
}

.checkout-phone-field_input.form-input {
  border: 0 !important;
  box-shadow: none !important;
  flex: 1 1 auto;
  height: 40px !important;
  line-height: 20px !important;
  margin: 0 !important;
  min-width: 0;
  padding: 10px 0 !important;
  position: relative;
  z-index: 2;
}

.checkout-phone-field_input.form-input:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
}

/* Prefixo oculto: campo vazio fica idêntico ao Nombre (só o label por cima) */
.checkout-phone-field:not(.is-active) {
  gap: 0;
}

.checkout-phone-field:not(.is-active) .checkout-phone-field_prefix {
  display: none !important;
}

.card.checkout-card.checkout-card-user .checkout-section-fields>.form-group_custom:first-child,
.card.checkout-card.checkout-card-user .checkout-section-fields_columns>.column>.form-group_custom:first-child,
.card.checkout-card.checkout-card-shipping_info .checkout-section-fields>.form-group_custom:first-child,
.card.checkout-card.checkout-card-shipping_info .checkout-section-fields_columns>.column>.form-group_custom:first-child {
  margin-top: 0;
  padding-top: 0;
}

.card.checkout-card.checkout-card-user .checkout-section-fields>.form-group_custom:first-child:not(.onFocus) .form-label,
.card.checkout-card.checkout-card-user .checkout-section-fields_columns>.column>.form-group_custom:first-child:not(.onFocus) .form-label,
.card.checkout-card.checkout-card-shipping_info .checkout-section-fields>.form-group_custom:first-child:not(.onFocus) .form-label,
.card.checkout-card.checkout-card-shipping_info .checkout-section-fields_columns>.column>.form-group_custom:first-child:not(.onFocus) .form-label {
  top: -12px;
}

#checkout-user .form-group:has(.form-input-password) .form-icon.form-icon_password {
  height: 18px;
  margin: 0 !important;
  top: 11px !important;
  width: 18px;
}

.checkout-shipping-detail_fantasy {
  margin-top: 14px;
}

.column-summary .checkout-card-finish_footer_summary {
  margin-top: 16px;
}

.column-summary .checkout-card-finish_footer_summary .card-header {
  padding: 0;
}

.column-summary .checkout-card-finish_footer_summary .card-title {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.card.checkout-card.checkout-card-finish_header .card-body {
  align-items: stretch;
  flex-direction: column;
}

.checkout-card-finish_header-main,
.checkout-order-header-title {
  align-items: center;
  display: flex;
  width: 100%;
}

.checkout-card-finish_payment-header {
  border-bottom: 1px solid #e3e3e8;
  padding: 16px 20px;
}

.checkout-card-finish_payment-header .checkout-order-header-title {
  margin: 0;
}

.checkout-card-finish_payment-header.checkout-card-finish_header .checkout-text {
  margin-left: 40px;
  max-width: calc(100% - 30px - 40px);
  padding-bottom: 5px;
  padding-top: 5px;
}

.checkout-card-finish_payment-header.checkout-card-finish_header .checkout-text b {
  font-size: 21px;
  line-height: 25px;
  margin-bottom: 4px;
}

.checkout-order-status-wrap {
  border-top: 1px solid #e3e3e8;
  margin-top: 16px;
  padding-top: 20px;
  width: 100%;
}

.checkout-card-finish_header .tile-text {
  color: #242431;
  font-size: 13px;
  line-height: 16px;
  padding-top: 2px;
}

.checkout-card-finish_header .tile-title {
  color: #242431;
  font-size: 15px;
  font-weight: bold;
  line-height: 18px;
}

.checkout-card-finish_header .timeline .timeline-item {
  margin-bottom: 0;
  padding-bottom: 38px;
}

.checkout-card-finish_header .timeline .timeline-item:before {
  background-color: #242431;
  left: 13.5px;
  width: 3px;
}

.checkout-card-finish_header .timeline .timeline-item.disable:before {
  background-color: rgba(36, 36, 49, 0.25);
}

.checkout-card-finish_header .timeline .timeline-item.disable .tile {
  align-items: center;
  height: 100%;
}

.checkout-card-finish_header .timeline .timeline-item.disable .tile-title {
  color: #5a5a7b;
}

.checkout-card-finish_header .timeline .timeline-item.disable .timeline-icon {
  background-color: #fff;
  border: 2px solid rgba(36, 36, 49, 0.25);
}

.checkout-card-finish_header .timeline .timeline-item.disable .timeline-icon svg {
  display: none;
}

.checkout-card-finish_header .timeline .timeline-item:last-of-type {
  padding-bottom: 0;
}

.checkout-card-finish_header .timeline .timeline-item:last-of-type:before {
  display: none;
}

.checkout-card-finish_header .timeline .timeline-item .timeline-content {
  padding: 2px 0 0 40px;
}

.checkout-card-finish_header .timeline .timeline-item .timeline-icon {
  background-color: #242431;
  height: 30px;
  position: relative;
  width: 30px;
  z-index: 1;
}

.checkout-card-finish_header .timeline .timeline-item .timeline-icon:before {
  display: none;
}

.checkout-card-finish_header .timeline .timeline-item .timeline-icon svg {
  fill: #fff;
  width: 14px;
}

@media (min-width: 992px) {
  .checkout-card-finish_header .timeline--order-status {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    overflow: hidden;
    padding-top: 8px;
  }

  .checkout-card-finish_header .timeline--order-status .timeline-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 0;
    position: relative;
    text-align: center;
  }

  .checkout-card-finish_header .timeline--order-status .timeline-item:before {
    display: none;
  }

  .checkout-card-finish_header .timeline--order-status .timeline-item:not(:last-of-type):after {
    background-color: #242431;
    content: '';
    height: 3px;
    left: calc(50% + 15px);
    position: absolute;
    right: auto;
    top: 15px;
    width: calc(100% - 30px);
    z-index: 0;
  }

  .checkout-card-finish_header .timeline--order-status .timeline-item.disable:not(:last-of-type):after {
    background-color: rgba(36, 36, 49, 0.25);
  }

  .checkout-card-finish_header .timeline--order-status .timeline-left {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    z-index: 1;
  }

  .checkout-card-finish_header .timeline--order-status .timeline-item .timeline-content {
    padding: 12px 8px 0;
    width: 100%;
  }

  .checkout-card-finish_header .timeline--order-status .timeline-item.disable .tile {
    height: auto;
  }
}

.checkout-card-summary>.card-footer .checkout-product-coupon {
  border-top: 1px solid #e3e3e8;
  margin-top: 20px;
  padding-top: 18px;
}

.checkout-card-summary>.card-footer .checkout-product-coupon .form-group {
  margin-bottom: 12px;
}

.checkout-card-summary .checkout-product-coupon_new {
  padding-top: 6px;
}

.checkout-card-summary .checkout-product-coupon_new .form-group_custom {
  margin-bottom: 12px;
  padding-right: 12px;
  padding-top: 6px;
}

.checkout-card-summary .checkout-product-coupon_new .form-group_custom .form-input-hint {
  margin-top: 8px;
}

.checkout-card-summary .checkout-product-coupon_new>.col-4>.form-group {
  margin-top: 22px;
}

/* Checkout — opções de frete (mobile + valores longos PY) */
.checkout-card-shipping_info .checkout-option_shipping .form-radio {
  align-items: flex-start;
  display: flex;
  padding-left: 0;
  width: 100%;
}

.checkout-card-shipping_info .checkout-option_shipping .form-radio .form-icon {
  bottom: auto;
  flex: 0 0 18px;
  margin: 8px 10px 0 0;
  position: relative;
  top: auto;
}

.checkout-card-shipping_info .checkout-option_shipping .checkout-option_left {
  align-items: flex-start;
  display: block;
  flex: 1 1 auto;
  float: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
  padding: 8px 8px 8px 0;
}

.checkout-card-shipping_info .checkout-option_shipping .checkout-option_right {
  align-items: flex-start;
  display: flex;
  flex: 0 1 auto;
  float: none;
  justify-content: flex-end;
  max-width: 44%;
  min-height: 0;
  padding: 8px 0;
}

.checkout-card-shipping_info .checkout-option_shipping .checkout-option_price {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: right;
  white-space: normal;
  word-break: break-word;
}

.checkout-card-shipping_info .checkout-option_shipping .checkout-option_price>span:first-child {
  display: block;
  white-space: nowrap;
}

.checkout-card-shipping_info .checkout-option_shipping .checkout-option_price .price-small {
  display: block;
  float: none;
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.25;
  margin-top: 2px;
  opacity: 0.76;
  text-align: right;
  white-space: nowrap;
  width: auto;
}

.checkout-card-shipping_info .checkout-option_shipping .checkout-option_text {
  padding-bottom: 0;
  padding-top: 4px;
}

.checkout-card-shipping_info .checkout-option_shipping .checkout-option_title {
  line-height: 1.35;
  padding-right: 4px;
}

@media (max-width: 991px) {
  .card.checkout-card.checkout-card-user .card-header.card-header_address2 {
    padding-top: 14px;
  }

  .checkout-card-summary .checkout-product-coupon_new>.col-4>.form-group {
    margin-top: 0;
  }

  .checkout-card-shipping_info .checkout-option_shipping .checkout-option_right {
    max-width: 48%;
  }

  .checkout-card-shipping_info .checkout-option_shipping .checkout-option_price {
    font-size: 12px;
  }
}

/* Showcase model 8 (Marcas Destacadas)
   - Desktop: altura fixa do fundo para ficar por trás da próxima vitrine
   - Mobile/tablet: SVG preenche o box (preserveAspectRatio=none no liquid) */
.showcase-model-8 .showcase-background svg {
  display: block;
  height: 100%;
  left: 0;
  margin: 0;
  max-height: none;
  max-width: none;
  position: absolute;
  top: 0;
  width: 100%;
}

@media (min-width: 992px) {
  .showcase-model-8 .showcase-background {
    bottom: auto;
    height: 865px;
    overflow: hidden;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .showcase-model-8 .showcase-background {
    height: 1065px;
  }

  .showcase-model-8 .showcase-background svg {
    height: 100%;
    width: 100%;
  }
}

@media (max-width: 991px) {
  .showcase-model-8 .showcase-background {
    bottom: auto;
    height: calc(100% + 30%);
    overflow: hidden;
  }

  .showcase-model-8 .showcase-background svg {
    height: 100%;
    width: 100%;
  }
}

/* Showcase payment — 4º card (Ueno Bank / preto) + layout 4 cards */
.showcase-model-custom .showcase-payment_item.showcase-payment_item4 {
  color: #000000;
}

.showcase-model-custom .showcase-payment_item.showcase-payment_item4 .showcase-payment_card {
  border-color: #000000;
}

.showcase-model-custom .showcase-payment_item.showcase-payment_item4 .showcase-payment_card__footer:before {
  background-color: #000000;
}

.showcase-model-custom .showcase-payment_tax__image img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-height: 28px;
  max-width: 100%;
  width: auto;
}

.showcase-model-custom .showcase-payment_tax__subtitle {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  margin-top: 10px;
}

.showcase-model-custom .showcase-payment_location {
  color: #333333;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 16px;
}

.showcase-model-custom .showcase-payment_legal {
  color: #333333;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
  margin-top: 16px;
}

.showcase-model-custom .showcase-payment_card__footer {
  margin-top: 24px;
  padding-top: 28px;
}

@media (min-width: 992px) {
  .showcase-model-custom .showcase-payment_list {
    align-items: stretch;
  }

  .showcase-model-custom .showcase-payment_item {
    display: flex;
    margin-left: 24px;
    max-width: none;
    width: calc((100% - (24px * 3)) / 4);
  }

  .showcase-model-custom .showcase-payment_card {
    height: 100%;
    padding: 40px 14px 32px;
  }

  .showcase-model-custom .showcase-payment_tax {
    font-size: 100px;
    line-height: 90px;
  }

  .showcase-model-custom .showcase-payment_tax__text {
    font-size: 30px;
    line-height: 1;
  }
}

@media (max-width: 1519px) and (min-width: 1400px) {
  .showcase-model-custom .showcase-payment_item {
    margin-left: 20px;
    width: calc((100% - (20px * 3)) / 4);
  }
}

@media (max-width: 1399px) and (min-width: 1200px) {
  .showcase-model-custom .showcase-payment_item {
    margin-left: 16px;
    width: calc((100% - (16px * 3)) / 4);
  }

  .showcase-model-custom .showcase-payment_tax__subtitle {
    font-size: 13px;
  }

  .showcase-model-custom .showcase-payment_location {
    font-size: 11px;
  }

  .showcase-model-custom .showcase-payment_legal {
    font-size: 9px;
  }
}

@media (max-width: 1199px) and (min-width: 992px) {
  .showcase-model-custom .showcase-payment_item {
    margin-left: 12px;
    width: calc((100% - (12px * 3)) / 4);
  }

  .showcase-model-custom .showcase-payment_card {
    padding: 28px 10px 22px;
  }

  .showcase-model-custom .showcase-payment_tax {
    font-size: 80px;
    line-height: 72px;
  }

  .showcase-model-custom .showcase-payment_tax__text {
    font-size: 24px;
    line-height: 22px;
  }

  .showcase-model-custom .showcase-payment_tax__subtitle {
    font-size: 12px;
    margin-top: 8px;
  }

  .showcase-model-custom .showcase-payment_location {
    font-size: 10px;
    margin-top: 12px;
  }

  .showcase-model-custom .showcase-payment_legal {
    font-size: 8px;
    margin-top: 12px;
  }

  .showcase-model-custom .showcase-payment_card__footer {
    margin-top: 18px;
    padding-top: 22px;
  }
}

/* Produtos indisponíveis: imagem e título mais apagados */
.showcase-product.card:has(.showcase-prices_out-of-stock) .showcase-product_image {
  opacity: 0.5;
  filter: grayscale(0.35);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.showcase-product.card:has(.showcase-prices_out-of-stock) .showcase-product_link_title {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

/* Menu de atalhos (entre busca e linha colorida) */
/* Distribución responsive (decidida por el contenido, no por breakpoints):
   - La lista principal hace wrap: si categorías + botones no entran en una fila
     con su ancho natural, los botones bajan a una segunda fila. Antes el grupo
     de categorías tenía min-width:0 y se encogía, pero su lista es nowrap con
     overflow visible: entre 1200 y 1399px se desbordaba ~200px por debajo de
     los botones (Perfumería/Electro × Ofertas y Más/Outlet), y entre 1400 y
     1599px ya sobresalía 17px dentro del gap.
   - Las categorías son un carrusel horizontal propio: solo se desplaza si no
     entran ni ocupando una fila entera. El borde hacia donde hay más categorías
     se desvanece (o muestra una sombra en navegadores sin animaciones ligadas
     al scroll), sin JS, y con mouse se ve una barra fina.
   - Los botones nunca se encogen por debajo de su texto: si no entran, bajan de
     fila y se estiran para ocupar el ancho (antes flex: 1 1 0 + nowrap hacía
     que el texto se saliera del botón en móvil).
   Las variables --shortcut-* permiten adaptar fondo y sombras a otra temática. */
.header-shortcut-menu {
  --shortcut-bg: #ffffff;
  --shortcut-edge: rgba(0, 0, 0, 0.16);
  --shortcut-scrollbar: rgba(0, 0, 0, 0.25);
  background: var(--shortcut-bg);
  position: relative;
  z-index: 8;
}

.header-shortcut-menu_list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 28px;
  list-style: none;
  margin: 0;
  min-height: 56px;
  padding: 10px 0;
  width: 100%;
}

.header-shortcut-menu_group {
  flex: 0 1 auto;
  list-style: none;
  margin: 0;
  min-width: 0;
}

/* flex-grow 1000 vs 1: compartiendo fila, el espacio sobrante va a las
   categorías y los botones quedan con su ancho natural a la derecha; solo en
   su fila, cada grupo ocupa todo el ancho. */
.header-shortcut-menu_group__links {
  flex: 1000 1 auto;
  max-width: 100%;
}

.header-shortcut-menu_group__buttons {
  flex: 1 0 auto;
  margin-left: auto;
  max-width: 100%;
}

/* Desktop (≥992px): grilla de dos áreas, categorías (todo el ancho menos el
   botón) y botón de la cámara al extremo derecho. Las categorías van centradas
   dentro de su área, así el aire sobrante queda repartido parejo a los dos
   lados del bloque (con tres áreas simétricas la izquierda copiaba el ancho del
   botón y quedaba vacía). Si no entran, el área se achica y las categorías se
   desplazan dentro de su carrusel en vez de superponerse o romper la fila. */
@media (min-width: 992px) {
  .header-shortcut-menu_list {
    column-gap: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .header-shortcut-menu_group__links {
    grid-column: 1;
    justify-self: center;
    max-width: 100%;
  }

  .header-shortcut-menu_group__buttons {
    grid-column: 2;
    justify-self: end;
    margin-left: 0;
    max-width: none;
  }
}

/* Desde 1440px las categorías ganan presencia: texto de 15px, íconos de 24px
   y un poco más de aire alrededor de cada ítem. */
@media (min-width: 1440px) {
  .header-shortcut-menu_group__links .header-shortcut-menu_link {
    font-size: 15px;
    gap: 9px;
    padding: 6px 4px;
  }

  .header-shortcut-menu .header-shortcut-menu_group__links .header-shortcut-menu_icon,
  .header-shortcut-menu .header-shortcut-menu_group__links .header-shortcut-menu_icon img,
  .header-shortcut-menu .header-shortcut-menu_group__links .header-shortcut-menu_icon svg {
    height: 24px;
    max-height: 24px;
    max-width: 24px;
    width: 24px;
  }
}

.header-shortcut-menu_group-list {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Categorías: separación fija por tramos (40px desde 1600, 28px en 1440–1599,
   18px en 1200–1439, 14px en 992–1199; 28px en el carrusel de tablet y móvil),
   sin repartir el espacio sobrante entre ellas: en desktop el bloque
   va centrado en su área por la grilla de arriba. Dentro del carrusel arrancan desde el
   inicio para que, si desbordan, se pueda desplazar hasta la primera.
   padding/margin de 4px: el anillo de foco no se recorta dentro del carrusel. */
.header-shortcut-menu_group__links .header-shortcut-menu_group-list {
  background:
    linear-gradient(to right, var(--shortcut-bg) 40%, transparent) left center / 48px 100% no-repeat local,
    linear-gradient(to left, var(--shortcut-bg) 40%, transparent) right center / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--shortcut-edge), transparent) left center / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--shortcut-edge), transparent) right center / 16px 100% no-repeat scroll;
  gap: 40px;
  justify-content: flex-start;
  margin: -4px;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding: 4px;
  scroll-behavior: smooth;
  scroll-padding-inline: 40px;
  scrollbar-color: var(--shortcut-scrollbar) transparent;
  scrollbar-width: thin;
}

.header-shortcut-menu_group__links .header-shortcut-menu_group-list::-webkit-scrollbar {
  height: 6px;
}

.header-shortcut-menu_group__links .header-shortcut-menu_group-list::-webkit-scrollbar-thumb {
  background-color: var(--shortcut-scrollbar);
  border-radius: 3px;
}

/* Pantallas táctiles: sin barra (se desplaza con el dedo; quedan las sombras). */
@media (hover: none) and (pointer: coarse) {
  .header-shortcut-menu_group__links .header-shortcut-menu_group-list {
    scrollbar-width: none;
  }

  .header-shortcut-menu_group__links .header-shortcut-menu_group-list::-webkit-scrollbar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-shortcut-menu_group__links .header-shortcut-menu_group-list {
    scroll-behavior: auto;
  }
}

/* Navegadores con animaciones ligadas al scroll (Chrome/Edge 115+, Safari 26+):
   en lugar de las sombras, el borde con más categorías se desvanece y el ítem
   cortado se ve como "continúa". Sin desplazamiento posible la línea de tiempo
   queda inactiva → sin máscara. No es movimiento: sigue al dedo/rueda. */
@property --shortcut-fade-start {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --shortcut-fade-end {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@keyframes shortcut-scroll-fade {
  from { --shortcut-fade-start: 0px; --shortcut-fade-end: 40px; }
  10%, 90% { --shortcut-fade-start: 40px; --shortcut-fade-end: 40px; }
  to { --shortcut-fade-start: 40px; --shortcut-fade-end: 0px; }
}

@supports (animation-timeline: scroll()) {
  .header-shortcut-menu_group__links .header-shortcut-menu_group-list {
    animation: shortcut-scroll-fade linear both;
    animation-timeline: scroll(self inline);
    background: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--shortcut-fade-start), #000 calc(100% - var(--shortcut-fade-end)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--shortcut-fade-start), #000 calc(100% - var(--shortcut-fade-end)), transparent);
  }
}

/* Botones: wrap como último recurso (nunca superpuestos). */
.header-shortcut-menu_group__buttons .header-shortcut-menu_group-list {
  flex-wrap: wrap;
  gap: 8px 17px;
}

.header-shortcut-menu_item {
  flex: 0 0 auto;
  list-style: none;
  margin: 0;
  min-width: 0;
}

.header-shortcut-menu_item__button {
  flex: 1 1 auto;
  max-width: 100%;
}

.header-shortcut-menu_link {
  align-items: center;
  color: #333333;
  display: inline-flex;
  font-size: 14px;
  font-weight: 500;
  gap: 8px;
  line-height: 1.2;
  padding: 6px 2px;
  text-decoration: none;
  transition: opacity 0.15s ease;
  white-space: nowrap;
}

.header-shortcut-menu_link:hover,
.header-shortcut-menu_link:focus {
  color: #002161;
  opacity: 0.85;
  text-decoration: none;
}

.header-shortcut-menu_icon {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.header-shortcut-menu_group__links .header-shortcut-menu_icon {
  color: #dc4181;
  height: 22px;
  width: 22px;
}

.header-shortcut-menu_group__links .header-shortcut-menu_icon--mask {
  background-color: #dc4181;
  -webkit-mask-image: var(--shortcut-icon);
  mask-image: var(--shortcut-icon);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  /* Engrossa um pouco o traço da silhueta (SVGs finos do CDN) */
  filter:
    drop-shadow(0.55px 0 0 #dc4181) drop-shadow(-0.55px 0 0 #dc4181) drop-shadow(0 0.55px 0 #dc4181) drop-shadow(0 -0.55px 0 #dc4181);
}

.header-shortcut-menu_group__links .header-shortcut-menu_icon svg,
.header-shortcut-menu_group__links .header-shortcut-menu_icon svg path,
.header-shortcut-menu_group__links .header-shortcut-menu_icon svg circle,
.header-shortcut-menu_group__links .header-shortcut-menu_icon svg rect,
.header-shortcut-menu_group__links .header-shortcut-menu_icon svg line,
.header-shortcut-menu_group__links .header-shortcut-menu_icon svg polyline,
.header-shortcut-menu_group__links .header-shortcut-menu_icon svg polygon {
  stroke: currentColor;
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
}

.header-shortcut-menu_group__links .header-shortcut-menu_icon svg [fill]:not([fill='none']),
.header-shortcut-menu_group__links .header-shortcut-menu_icon svg:not([fill='none']) {
  fill: currentColor;
}

.header-shortcut-menu_group__links .header-shortcut-menu_icon img,
.header-shortcut-menu_group__links .header-shortcut-menu_icon svg {
  height: 22px;
  max-height: 22px;
  max-width: 22px;
  width: 22px;
}

.header-shortcut-menu_icon img,
.header-shortcut-menu_icon svg {
  display: block;
  height: 20px;
  max-height: 20px;
  max-width: 20px;
  width: 20px;
}

.header-shortcut-menu_text {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
  min-width: 0;
}

.header-shortcut-menu_title {
  display: block;
}

.header-shortcut-menu_subtitle {
  display: block;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.15;
  opacity: 0.95;
}

/* min-height en lugar de height fijo y white-space normal: si un botón no
   entra ni solo en su fila (textos largos en pantallas muy angostas), su texto
   pasa a dos líneas dentro del botón en vez de salirse. */
.header-shortcut-menu_item__button .header-shortcut-menu_link {
  background-color: #E01380;
  border-radius: 5px;
  box-sizing: border-box;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  justify-content: center;
  min-height: 40px;
  overflow-wrap: break-word;
  padding: 4px 14px;
  white-space: normal;
  width: 100%;
}

.header-shortcut-menu_item__button .header-shortcut-menu_link:hover,
.header-shortcut-menu_item__button .header-shortcut-menu_link:focus {
  color: #ffffff;
  opacity: 0.92;
}

.header-shortcut-menu_item__button .header-shortcut-menu_icon {
  height: 18px;
  width: 18px;
}

.header-shortcut-menu_item__button .header-shortcut-menu_icon img,
.header-shortcut-menu_item__button .header-shortcut-menu_icon svg {
  height: 18px;
  max-width: 18px;
}

.header-shortcut-menu_item__button .header-shortcut-menu_title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
}

.header-shortcut-menu_item__button .header-shortcut-menu_subtitle {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  opacity: 1;
}

/* Botão com 2 linhas (Câmera): mantém fontes menores */
.header-shortcut-menu_item__button .header-shortcut-menu_text:has(.header-shortcut-menu_subtitle) .header-shortcut-menu_title {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.1;
}

/* Separación entre categorías por tramos: con 8 categorías y el botón de la
   cámara, así entran en una fila desde ~1200px. */
@media (max-width: 1599px) {
  .header-shortcut-menu_group__links .header-shortcut-menu_group-list {
    gap: 28px;
  }
}

@media (max-width: 1439px) {
  .header-shortcut-menu_group__links .header-shortcut-menu_group-list {
    gap: 18px;
  }

  .header-shortcut-menu_group__links .header-shortcut-menu_link {
    font-size: 13px;
  }
}

/* Tablets / notebooks estreitos: solo tipografía y alturas más compactas.
   El reparto en filas ya no depende de este breakpoint (ver wrap arriba). */
@media (max-width: 1199px) {
  .header-shortcut-menu_list {
    min-height: 0;
    padding: 10px 0 12px;
  }

  .header-shortcut-menu_group__buttons .header-shortcut-menu_group-list {
    gap: 8px;
  }

  .header-shortcut-menu_group__links .header-shortcut-menu_group-list {
    gap: 14px;
  }

  .header-shortcut-menu_link {
    font-size: 13px;
  }

  .header-shortcut-menu_item__button .header-shortcut-menu_link {
    font-size: 12px;
    min-height: 36px;
    padding: 3px 10px;
  }

  .header-shortcut-menu_item__button .header-shortcut-menu_title {
    font-size: 12px;
  }
}

/* Mobile: carrusel a sangre (sin padding del container) + botones compactos */
@media (max-width: 991px) {
  .header-shortcut-menu .container {
    padding-left: 0;
    padding-right: 0;
  }

  .header-shortcut-menu_list {
    gap: 8px;
  }

  .header-shortcut-menu_group__links .header-shortcut-menu_group-list {
    gap: 28px;
    margin: -4px 0;
    padding: 4px 12px;
    scroll-padding-inline: 32px;
  }

  .header-shortcut-menu_group__buttons .header-shortcut-menu_group-list {
    gap: 6px;
    padding: 0 12px;
  }

  .header-shortcut-menu_item__button .header-shortcut-menu_link {
    min-height: 34px;
    padding: 3px 8px;
  }

  .header-shortcut-menu_link {
    font-size: 13px;
  }
}

/* Piezas de la marca Cyber Day («Cyber» + «day.com.py», cursor y anillos con las
   fechas). Las usa el estado vacío de la categoría (sections/campaign-cyberday-
   empty.liquid), que define --cyber-magenta, --cyber-cyan y --cyber-ring y ajusta
   los tamaños en «Estado vacío de la categoría Cyber Day». */
.gz-cyber-cta_brand {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  white-space: nowrap;
}

.gz-cyber-cta_cyber {
  color: var(--cyber-magenta);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-shadow: 0 0 8px rgba(221, 61, 255, 0.55);
}

.gz-cyber-cta_day {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

.gz-cyber-cta_domain {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
}

.gz-cyber-cta_cursor {
  align-self: flex-end;
  fill: rgba(9, 52, 66, 0.9);
  filter: drop-shadow(0 0 3px rgba(124, 244, 255, 0.75));
  flex: 0 0 auto;
  height: 22px;
  margin-bottom: 1px;
  stroke: var(--cyber-cyan);
  stroke-linejoin: round;
  stroke-width: 1.7;
  transform: rotate(-8deg);
  width: 22px;
}

.gz-cyber-cta_dates {
  display: flex;
  flex: 0 0 auto;
}

.gz-cyber-cta_date {
  align-items: center;
  border: 2px solid #ea55ff;
  border-radius: 50%;
  box-shadow:
    0 0 6px rgba(214, 64, 250, 0.85),
    inset 0 0 6px rgba(214, 64, 250, 0.5);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: var(--cyber-ring);
  justify-content: center;
  position: relative;
  width: var(--cyber-ring);
}

.gz-cyber-cta_date + .gz-cyber-cta_date {
  margin-left: -6px;
}

/* Encendido en secuencia de los anillos (solo opacity). */
.gz-cyber-cta_date::after {
  border-radius: 50%;
  box-shadow:
    0 0 10px 1px rgba(236, 100, 255, 0.95),
    inset 0 0 8px rgba(236, 100, 255, 0.7);
  content: '';
  inset: -2px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.gz-cyber-cta_date-day {
  color: #efc2ff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  text-shadow: 0 0 6px rgba(214, 102, 255, 0.8);
}

.gz-cyber-cta_date-month {
  color: #f6eaff;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  margin-top: 2px;
}

@keyframes gz-cyber-click {
  0%, 56%, 80%, 100% { transform: rotate(-8deg); }
  62%, 74% { transform: rotate(-8deg) translate(-3px, -3px); }
  68% { transform: rotate(-8deg) translate(-3px, -3px) scale(0.82); }
}

@keyframes gz-cyber-ring {
  0%, 58%, 84%, 100% { opacity: 0; }
  66%, 76% { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .gz-cyber-cta_cursor {
    animation: gz-cyber-click 1.8s ease-in-out infinite;
  }

  .gz-cyber-cta_date::after {
    animation: gz-cyber-ring 1.8s ease-in-out infinite;
  }

  .gz-cyber-cta_date:nth-child(2)::after {
    animation-delay: 0.12s;
  }

  .gz-cyber-cta_date:nth-child(3)::after {
    animation-delay: 0.24s;
  }
}

/* "animated": false en store.campaigns.cyberday → sin movimiento. */
.gz-cyber-empty--static .gz-cyber-cta_cursor,
.gz-cyber-empty--static .gz-cyber-cta_date::after {
  animation: none;
}

/* ==========================================================================
   Barra Cyber Day (sections/campaign-cyberday-bar.liquid). Franja sticky por
   encima del topbar, en todas las páginas con header: antes del inicio, cuenta
   regresiva; durante la campaña, CTA a la categoría oficial; al terminar, no
   se muestra. Fondo oscuro con aurora violeta/cian, partículas y una línea neón
   que corre por el borde inferior (todo transform/opacity, sin repintar). Alto
   fijo por breakpoint (--gz-cd-bar); con la barra presente el script pone
   html.gz-cd-on y el CSS define --gz-cd-h, que corre los otros elementos sticky
   (filtro del catálogo, menú lateral de páginas) y el menú móvil para que no
   queden debajo. z-index 1000: sobre el header (999; el menú móvil vive dentro
   del header y arranca debajo de la barra) y debajo de los cajones del carrito
   y de los filtros, del buscador predictivo y de la galería de fotos.
   ========================================================================== */
:root {
  --gz-cd-bar: 52px;
}

@media (max-width: 991px) {
  :root {
    --gz-cd-bar: 50px;
  }
}

@media (max-width: 767px) {
  :root {
    --gz-cd-bar: 48px;
  }
}

html.gz-cd-on {
  --gz-cd-h: var(--gz-cd-bar);
  scroll-padding-top: var(--gz-cd-bar);
}

@media (min-width: 992px) {
  html.gz-cd-on .search-main .col-search-filter {
    top: calc(16px + var(--gz-cd-h));
  }

  html.gz-cd-on .sf-panel {
    --sf-max-height: min(80vh, calc(100vh - 32px - var(--gz-cd-h)));
  }
}

/* Menú lateral móvil: es fijo y arranca debajo del topbar + header (111px en
   theme-all.css); con la barra arriba se corre su alto para seguir dejando a la
   vista la fila del logo y del botón del menú. */
@media (max-width: 991px) {
  html.gz-cd-on .sidebar-nav {
    margin-top: calc(75px + 36px + var(--gz-cd-h));
  }
}

@media (min-width: 961px) {
  html.gz-cd-on .page-main .columns > .column.page-side-sticky {
    max-height: calc(100vh - 2 * var(--page-side-gap) - var(--gz-cd-h));
    max-height: calc(100dvh - 2 * var(--page-side-gap) - var(--gz-cd-h));
    top: calc(var(--page-side-gap) + var(--gz-cd-h));
  }
}

.gz-cd {
  --cd-neon: #f645fc;
  --cd-violet: #9b5cff;
  --cd-cyan: #5ee7ff;
  --cd-text-2: #e6dcff;
  background:
    radial-gradient(55% 170% at 8% 125%, rgba(94, 231, 255, 0.2), transparent 62%),
    radial-gradient(45% 190% at 92% -40%, rgba(246, 69, 252, 0.32), transparent 62%),
    linear-gradient(90deg, #0a0920 0%, #150b33 42%, #1d0b3b 68%, #0a0920 100%);
  box-shadow: 0 6px 18px rgba(18, 7, 44, 0.32);
  box-sizing: border-box;
  color: #ffffff;
  height: var(--gz-cd-bar);
  isolation: isolate;
  overflow: hidden;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Línea neón del borde inferior: un degradado el doble de ancho que se
   desplaza (transform), así el brillo recorre la barra sin repintar. */
.gz-cd::after {
  background: linear-gradient(90deg,
    rgba(94, 231, 255, 0) 0%, var(--cd-cyan) 12%, var(--cd-neon) 25%, var(--cd-violet) 37%, rgba(94, 231, 255, 0) 50%,
    var(--cd-cyan) 62%, var(--cd-neon) 75%, var(--cd-violet) 87%, rgba(94, 231, 255, 0) 100%);
  bottom: 0;
  content: '';
  height: 2px;
  left: 0;
  pointer-events: none;
  position: absolute;
  width: 200%;
  z-index: 2;
}

/* Capa de efectos: aurora (::before) y partículas (::after). */
.gz-cd_fx,
.gz-cd_fx::before,
.gz-cd_fx::after {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.gz-cd_fx {
  overflow: hidden;
  z-index: 0;
}

.gz-cd_fx::before {
  background:
    radial-gradient(28% 120% at 30% 50%, rgba(155, 92, 255, 0.42), transparent 70%),
    radial-gradient(22% 110% at 62% 60%, rgba(246, 69, 252, 0.28), transparent 70%),
    radial-gradient(18% 120% at 82% 40%, rgba(94, 231, 255, 0.22), transparent 70%);
  content: '';
  left: -20%;
  right: -20%;
}

.gz-cd_fx::after {
  background-image:
    radial-gradient(1.5px 1.5px at 6% 30%, #ffffff, transparent),
    radial-gradient(1px 1px at 14% 72%, #ffd6fb, transparent),
    radial-gradient(1.5px 1.5px at 23% 22%, #c8f8ff, transparent),
    radial-gradient(1px 1px at 37% 80%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 48% 18%, #ffd6fb, transparent),
    radial-gradient(1px 1px at 57% 66%, #c8f8ff, transparent),
    radial-gradient(1.5px 1.5px at 69% 28%, #ffffff, transparent),
    radial-gradient(1px 1px at 78% 78%, #ffd6fb, transparent),
    radial-gradient(1.5px 1.5px at 88% 24%, #c8f8ff, transparent),
    radial-gradient(1px 1px at 95% 64%, #ffffff, transparent);
  content: '';
  opacity: 0.55;
}

.gz-cd_panel {
  align-items: center;
  box-sizing: border-box;
  color: #ffffff;
  display: flex;
  gap: 18px;
  height: 100%;
  justify-content: center;
  margin: 0 auto;
  max-width: 1280px;
  padding: 0 16px;
  position: relative;
  text-decoration: none;
  z-index: 1;
}

.gz-cd_panel[hidden] {
  display: none !important;
}

.gz-cd_sr {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Marca: «Cyber» en degradado neón + «day.com.py». */
.gz-cd_brand {
  align-items: baseline;
  display: flex;
  flex: 0 0 auto;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.gz-cd_cyber {
  color: #f645fc;
  font-size: 23px;
  letter-spacing: -0.02em;
  text-shadow: 0 0 8px rgba(246, 69, 252, 0.6);
}

/* Letras sueltas del logo y del título del CTA (ola letra por letra). «Cyber»
   lleva un color por letra que arma el degradado rosa → violeta. */
.gz-cd_l {
  display: inline-block;
}

.gz-cd_sp {
  white-space: pre;
}

.gz-cd_cyber .gz-cd_l:nth-child(1) { color: #ff86f4; }
.gz-cd_cyber .gz-cd_l:nth-child(2) { color: #fb6cf8; }
.gz-cd_cyber .gz-cd_l:nth-child(3) { color: #f251fb; }
.gz-cd_cyber .gz-cd_l:nth-child(4) { color: #d662ff; }
.gz-cd_cyber .gz-cd_l:nth-child(5) { color: #b97bff; }

/* Textos «calientes» (Ofertas especiales): vibran cada pocos segundos. */
.gz-cd_hot {
  color: #fff0fd;
  display: inline-block;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(246, 69, 252, 0.8);
}

.gz-cd_day {
  color: #ffffff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-left: 1px;
}

.gz-cd_dom {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.85;
}

/* --- Contador ------------------------------------------------------------- */
.gz-cd_label {
  color: var(--cd-text-2);
  flex: 0 1 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.gz-cd_label-short {
  display: none;
}

.gz-cd_timer {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
}

.gz-cd_unit {
  align-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(246, 69, 252, 0.55);
  border-radius: 9px;
  box-shadow:
    inset 0 0 12px rgba(155, 92, 255, 0.32),
    0 0 10px rgba(246, 69, 252, 0.22);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 40px;
  justify-content: center;
  min-width: 48px;
  overflow: hidden;
  padding: 0 6px;
}

.gz-cd_unit:last-child {
  position: relative;
}

.gz-cd_unit:last-child::after {
  border-radius: inherit;
  box-shadow:
    inset 0 0 14px rgba(155, 92, 255, 0.45),
    0 0 14px rgba(246, 69, 252, 0.55);
  content: '';
  inset: -1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.gz-cd_num {
  display: block;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  text-shadow: 0 0 10px rgba(246, 69, 252, 0.6);
}

.gz-cd_lbl {
  color: #cdbaff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  margin-top: 3px;
  text-transform: uppercase;
}

.gz-cd_sep {
  color: var(--cd-neon);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  margin-top: -6px;
  text-shadow: 0 0 8px rgba(246, 69, 252, 0.8);
}

.gz-cd_note {
  background: rgba(246, 69, 252, 0.1);
  border: 1px solid rgba(246, 69, 252, 0.55);
  border-radius: 999px;
  color: var(--cd-text-2);
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 13px;
  position: relative;
  white-space: nowrap;
}

.gz-cd_note::after {
  border-radius: inherit;
  box-shadow:
    0 0 14px rgba(246, 69, 252, 0.75),
    inset 0 0 10px rgba(246, 69, 252, 0.4);
  content: '';
  inset: -1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.gz-cd_label-mobile {
  display: none;
}

/* --- CTA (durante la campaña): toda la franja es el enlace ---------------- */
.gz-cd_panel--live {
  cursor: pointer;
}

/* opacity: 1 → anula a:hover/a:focus { opacity: .7 } de theme-all.css. */
.gz-cd_panel--live:hover,
.gz-cd_panel--live:focus,
.gz-cd_panel--live:focus-visible {
  color: #ffffff;
  opacity: 1;
  text-decoration: none;
}

.gz-cd_panel--live:focus-visible {
  outline: 2px solid var(--cd-cyan);
  outline-offset: -4px;
}

.gz-cd_badge {
  align-items: center;
  background: rgba(255, 59, 139, 0.16);
  border: 1px solid rgba(255, 96, 166, 0.6);
  border-radius: 999px;
  color: #ffd3e7;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  gap: 6px;
  letter-spacing: 0.12em;
  padding: 5px 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

.gz-cd_dot {
  background: #ff3b8b;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 59, 139, 0.9);
  flex: 0 0 auto;
  height: 8px;
  position: relative;
  width: 8px;
}

.gz-cd_dot::after {
  border: 2px solid rgba(255, 59, 139, 0.75);
  border-radius: 50%;
  content: '';
  inset: -4px;
  opacity: 0;
  position: absolute;
}

.gz-cd_live-text {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.gz-cd_live-title {
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}

.gz-cd_live-title-short {
  display: none;
}

.gz-cd_live-sub {
  color: var(--cd-text-2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.gz-cd_btn {
  align-items: center;
  background: linear-gradient(92deg, #d4149f 0%, #8e2fe0 58%, #3f5fe0 100%);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 6px 18px rgba(246, 69, 252, 0.45);
  color: #ffffff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  gap: 8px;
  height: 36px;
  overflow: hidden;
  padding: 0 18px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

/* Brillo que cruza el botón cada pocos segundos. */
.gz-cd_btn::after {
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-130%);
}

.gz-cd_btn-in {
  align-items: center;
  display: inline-flex;
  gap: inherit;
}

.gz-cd_btn svg {
  flex: 0 0 auto;
}

@media (hover: hover) {
  .gz-cd_panel--live:hover .gz-cd_btn {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.4),
      0 8px 24px rgba(246, 69, 252, 0.65);
    transform: translateY(-1px) scale(1.03);
  }
}

.gz-cd_ends {
  color: var(--cd-text-2);
  flex: 0 0 auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.gz-cd_ends-time {
  color: #ffffff;
  font-weight: 800;
}

/* --- Animación ------------------------------------------------------------ */
@keyframes gz-cd-line {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@keyframes gz-cd-aurora {
  0% { transform: translateX(-6%); }
  100% { transform: translateX(6%); }
}

@keyframes gz-cd-twinkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.8; }
}

@keyframes gz-cd-tick {
  from { opacity: 0; transform: translateY(-45%); }
  to { opacity: 1; transform: none; }
}

@keyframes gz-cd-sep {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes gz-cd-unit-glow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes gz-cd-ping {
  0% { opacity: 0.9; transform: scale(0.6); }
  80%, 100% { opacity: 0; transform: scale(1.6); }
}

@keyframes gz-cd-shine {
  0%, 55% { transform: translateX(-130%); }
  85%, 100% { transform: translateX(130%); }
}

@keyframes gz-cd-arrow {
  0%, 60%, 100% { transform: none; }
  75% { transform: translateX(4px); }
}

/* Ola: cada letra sube con un pequeño rebote y vuelve; las letras salen
   escalonadas (--i) y después todas quedan quietas un rato. */
@keyframes gz-cd-wave {
  0%, 36%, 100% { transform: none; }
  9% { transform: translateY(-4px) scale(1.14); }
  18% { transform: translateY(1px) scale(0.97); }
  27% { transform: translateY(-1px); }
}

@keyframes gz-cd-wave-sm {
  0%, 40%, 100% { transform: none; }
  10% { transform: translateY(-3px) scale(1.1); }
  20% { transform: translateY(1px); }
}

/* Parpadeo de neón ocasional en «Cyber». */
@keyframes gz-cd-flicker {
  0%, 86%, 91%, 95%, 100% { opacity: 1; }
  87% { opacity: 0.45; }
  89% { opacity: 0.9; }
  93% { opacity: 0.6; }
}

/* Vibración: ráfaga corta de sacudidas con un leve agrandado; después, quieto. */
@keyframes gz-cd-shake {
  0%, 58%, 100% { transform: none; }
  60% { transform: translateX(-2px) rotate(-2deg) scale(1.07); }
  64% { transform: translateX(2px) rotate(2deg) scale(1.07); }
  68% { transform: translateX(-2px) rotate(-1.5deg) scale(1.06); }
  72% { transform: translateX(2px) rotate(1.5deg) scale(1.05); }
  76% { transform: translateX(-1px) rotate(-1deg) scale(1.03); }
  80% { transform: translateX(1px) rotate(0.5deg) scale(1.01); }
  84% { transform: none; }
}

@keyframes gz-cd-note-glow {
  0%, 56%, 90%, 100% { opacity: 0; }
  62%, 80% { opacity: 1; }
}

@keyframes gz-cd-in {
  from { opacity: 0; transform: translateY(40%); }
  to { opacity: 1; transform: none; }
}

@keyframes gz-cd-burst {
  0% { opacity: 0.9; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .gz-cd::after {
    animation: gz-cd-line 6s linear infinite;
  }

  .gz-cd_fx::before {
    animation: gz-cd-aurora 9s ease-in-out infinite alternate;
  }

  .gz-cd_fx::after {
    animation: gz-cd-twinkle 3.2s ease-in-out infinite;
  }

  .gz-cd_num.is-tick {
    animation: gz-cd-tick 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .gz-cd_sep {
    animation: gz-cd-sep 1s ease-in-out infinite;
  }

  /* El bloque de los segundos «late» con el cambio de cada segundo (halo en
     ::after, solo opacity). */
  .gz-cd_unit:last-child::after {
    animation: gz-cd-unit-glow 1s ease-in-out infinite;
  }

  .gz-cd_dot::after {
    animation: gz-cd-ping 1.4s ease-out infinite;
  }

  .gz-cd_btn::after {
    animation: gz-cd-shine 3.2s ease-in-out infinite;
  }

  .gz-cd_btn svg {
    animation: gz-cd-arrow 1.6s ease-in-out infinite;
  }

  .gz-cd_l {
    animation: gz-cd-wave 2.8s cubic-bezier(0.3, 0.7, 0.3, 1) infinite;
    animation-delay: calc(var(--i) * 0.08s);
  }

  .gz-cd_live-title .gz-cd_l {
    animation-duration: 3.2s;
    animation-delay: calc(var(--i) * 0.045s);
    animation-name: gz-cd-wave-sm;
  }

  .gz-cd_cyber {
    animation: gz-cd-flicker 5s linear infinite;
  }

  .gz-cd_hot {
    animation: gz-cd-shake 2.4s linear infinite;
  }

  .gz-cd_note::after {
    animation: gz-cd-note-glow 2.4s linear infinite;
  }

  /* El texto del botón vibra a destiempo de «Ofertas especiales». */
  .gz-cd_btn-in {
    animation: gz-cd-shake 2.6s linear 0.8s infinite;
  }

  /* Paso de contador a CTA: el CTA entra desde abajo y la franja destella. */
  .gz-cd--burst .gz-cd_panel--live {
    animation: gz-cd-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .gz-cd--burst::before {
    animation: gz-cd-burst 1.2s ease-out forwards;
    background: radial-gradient(60% 200% at 50% 50%, rgba(246, 69, 252, 0.45), transparent 70%);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
  }
}

.gz-cd--static::after,
.gz-cd--static .gz-cd_fx::before,
.gz-cd--static .gz-cd_fx::after,
.gz-cd--static .gz-cd_num.is-tick,
.gz-cd--static .gz-cd_sep,
.gz-cd--static .gz-cd_unit:last-child::after,
.gz-cd--static .gz-cd_dot::after,
.gz-cd--static .gz-cd_btn::after,
.gz-cd--static .gz-cd_btn svg,
.gz-cd--static .gz-cd_l,
.gz-cd--static .gz-cd_cyber,
.gz-cd--static .gz-cd_hot,
.gz-cd--static .gz-cd_note::after,
.gz-cd--static .gz-cd_btn-in,
.gz-cd--static.gz-cd--burst::before,
.gz-cd--static.gz-cd--burst .gz-cd_panel--live {
  animation: none;
}

/* Modal de cookies (sections/check-cookie.liquid baja el header a z-index 9
   mientras está abierto): la barra también queda debajo. */
body:has(.modal.active) .gz-cd {
  z-index: 9;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1199px) {
  .gz-cd_note-dates {
    display: none;
  }

  .gz-cd_panel {
    gap: 14px;
  }
}

@media (max-width: 991px) {
  .gz-cd_live-sub,
  .gz-cd_ends,
  .gz-cd_label-long {
    display: none;
  }

  .gz-cd_label-short {
    display: inline;
  }

  .gz-cd_unit {
    height: 38px;
    min-width: 44px;
  }

  .gz-cd_num {
    font-size: 18px;
  }
}

/* Móvil: marca más chica sin «.com.py», etiqueta corta, bloques compactos sin
   separadores; en el CTA, título corto y botón compacto. */
@media (max-width: 767px) {
  .gz-cd_panel {
    gap: 10px;
    padding: 0 12px;
  }

  .gz-cd_cyber {
    font-size: 18px;
  }

  .gz-cd_day {
    font-size: 15px;
  }

  .gz-cd_dom,
  .gz-cd_label-long,
  .gz-cd_label-short,
  .gz-cd_note,
  .gz-cd_sep,
  .gz-cd_badge-text,
  .gz-cd_live-title-long {
    display: none;
  }

  .gz-cd_live-title-short {
    display: inline;
  }

  .gz-cd_label {
    letter-spacing: 0;
    text-transform: none;
  }

  .gz-cd_label-mobile {
    display: flex;
    flex-direction: column;
    line-height: 1.12;
  }

  .gz-cd_label-mobile .gz-cd_hot {
    font-size: 11.5px;
  }

  .gz-cd_label-mobile-2 {
    color: var(--cd-text-2);
    font-size: 10px;
    font-weight: 600;
  }

  .gz-cd_timer {
    gap: 4px;
  }

  .gz-cd_unit {
    border-radius: 8px;
    height: 36px;
    min-width: 38px;
    padding: 0 4px;
  }

  .gz-cd_num {
    font-size: 16px;
  }

  .gz-cd_lbl {
    font-size: 8px;
    letter-spacing: 0.08em;
    margin-top: 2px;
  }

  .gz-cd_badge {
    padding: 5px;
  }

  .gz-cd_live-title {
    font-size: 15px;
  }

  .gz-cd_btn {
    font-size: 13px;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
  }
}

/* 360–389: marca y bloques un poco más chicos para que entre «Ofertas especiales». */
@media (max-width: 389px) {
  .gz-cd_panel {
    gap: 8px;
    padding: 0 10px;
  }

  .gz-cd_cyber {
    font-size: 16px;
  }

  .gz-cd_day {
    font-size: 13px;
  }

  .gz-cd_unit {
    min-width: 35px;
  }

  .gz-cd_num {
    font-size: 15px;
  }
}

@media (max-width: 359px) {
  .gz-cd_label {
    display: none;
  }
}

@media (max-width: 359px) {
  .gz-cd_live-text {
    display: none;
  }
}

/* Estado vacío de la categoría Cyber Day (sections/campaign-cyberday-empty.liquid,
   desde templates/404.liquid). Reutiliza las piezas del CTA (marca, cursor,
   anillos) en grande dentro de una tarjeta con el mismo neón. */
.gz-cyber-empty-main {
  padding-bottom: 72px;
  padding-top: 48px;
}

.gz-cyber-empty_card {
  --cyber-neon: #f645fc;
  --cyber-magenta: #dd3dff;
  --cyber-cyan: #7cf4ff;
  background:
    radial-gradient(90% 120% at 0% 110%, rgba(34, 214, 190, 0.3), transparent 50%),
    radial-gradient(70% 110% at 85% -10%, rgba(132, 46, 232, 0.6), transparent 62%),
    linear-gradient(110deg, #0a0918 0%, #130b29 55%, #1b0b31 100%);
  border: 2px solid var(--cyber-neon);
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(246, 69, 252, 0.22),
    0 0 28px rgba(246, 69, 252, 0.45),
    inset 0 0 24px rgba(246, 69, 252, 0.25);
  box-sizing: border-box;
  color: #ffffff;
  margin: 0 auto;
  max-width: 720px;
  padding: 40px 32px 36px;
  text-align: center;
}

.gz-cyber-empty_art {
  --cyber-ring: 76px;
  align-items: center;
  display: flex;
  gap: 22px;
  justify-content: center;
  margin-bottom: 28px;
}

.gz-cyber-empty_art .gz-cyber-cta_brand {
  text-align: left;
}

.gz-cyber-empty_art .gz-cyber-cta_cyber {
  font-size: 48px;
}

.gz-cyber-empty_art .gz-cyber-cta_day {
  font-size: 38px;
}

.gz-cyber-empty_art .gz-cyber-cta_domain {
  font-size: 20px;
}

.gz-cyber-empty_art .gz-cyber-cta_cursor {
  height: 40px;
  margin-bottom: 2px;
  width: 40px;
}

.gz-cyber-empty_art .gz-cyber-cta_date {
  border-width: 3px;
}

.gz-cyber-empty_art .gz-cyber-cta_date + .gz-cyber-cta_date {
  margin-left: -10px;
}

.gz-cyber-empty_art .gz-cyber-cta_date-day {
  font-size: 28px;
}

.gz-cyber-empty_art .gz-cyber-cta_date-month {
  font-size: 15px;
  margin-top: 3px;
}

.gz-cyber-empty_title {
  color: #ffffff;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 12px;
  text-shadow: 0 0 14px rgba(246, 69, 252, 0.45);
}

.gz-cyber-empty_text {
  color: rgba(255, 255, 255, 0.86);
  font-size: 17px;
  line-height: 1.5;
  margin: 0 auto 28px;
  max-width: 30em;
}

/* Degradado oscuro: texto blanco con contraste ≥4.5:1. */
.gz-cyber-empty_btn {
  background: linear-gradient(135deg, #c42bd9 0%, #7b2be6 100%);
  border-radius: 30px;
  box-shadow: 0 0 16px rgba(246, 69, 252, 0.5);
  color: #ffffff;
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  padding: 14px 30px;
  text-decoration: none;
  text-transform: uppercase;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.gz-cyber-empty_btn:hover,
.gz-cyber-empty_btn:focus {
  box-shadow: 0 0 26px rgba(246, 69, 252, 0.8);
  color: #ffffff;
  opacity: 1;
  text-decoration: none;
}

.gz-cyber-empty_btn:focus-visible {
  outline: 2px solid var(--cyber-cyan);
  outline-offset: 3px;
}

@media (hover: hover) {
  .gz-cyber-empty_btn:hover {
    transform: translateY(-1px);
  }
}

@media (max-width: 575px) {
  .gz-cyber-empty-main {
    padding-bottom: 48px;
    padding-top: 24px;
  }

  .gz-cyber-empty_card {
    border-radius: 16px;
    padding: 28px 18px;
  }

  .gz-cyber-empty_art {
    --cyber-ring: 52px;
    flex-wrap: wrap;
    gap: 12px;
  }

  .gz-cyber-empty_art .gz-cyber-cta_cyber {
    font-size: 34px;
  }

  .gz-cyber-empty_art .gz-cyber-cta_day {
    font-size: 27px;
  }

  .gz-cyber-empty_art .gz-cyber-cta_domain {
    font-size: 14px;
  }

  .gz-cyber-empty_art .gz-cyber-cta_cursor {
    height: 28px;
    width: 28px;
  }

  .gz-cyber-empty_art .gz-cyber-cta_date + .gz-cyber-cta_date {
    margin-left: -7px;
  }

  .gz-cyber-empty_art .gz-cyber-cta_date-day {
    font-size: 19px;
  }

  .gz-cyber-empty_art .gz-cyber-cta_date-month {
    font-size: 11px;
    margin-top: 2px;
  }

  .gz-cyber-empty_title {
    font-size: 22px;
  }

  .gz-cyber-empty_text {
    font-size: 15px;
    margin-bottom: 22px;
  }
}

/* Página adicional — Cámara Puente (sem card estreito / sem título) */
.card.card-page.card-page-form:has(.genz-camera-page),
.card.card-page:has(.genz-camera-page),
.card.card-page.card-page--camera,
.card.card-page.card-page-form.card-page--camera {
  background: transparent;
  border: none;
  box-shadow: none;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  padding: 0;
  width: 100%;
  overflow: visible !important;
}

.card.card-page.card-page-form:has(.genz-camera-page) .card-header,
.card.card-page:has(.genz-camera-page) .card-header,
.card.card-page--camera .card-header {
  display: none !important;
}

.card.card-page.card-page-form:has(.genz-camera-page) .card-body,
.card.card-page.card-page-form:has(.genz-camera-page) .card-body_custom,
.card.card-page:has(.genz-camera-page) .card-body,
.card.card-page:has(.genz-camera-page) .card-body_custom,
.card.card-page--camera .card-body,
.card.card-page--camera .card-body_custom {
  padding: 0;
  overflow: visible !important;
}

/* Remove o padding-top padrão do main (70px) nesta página */
main.page-main:has(.genz-camera-page),
main.page-main:has(.card-page--camera) {
  padding-top: 28px;
  overflow: visible !important;
}

/* Faixa laranja full + colada no rodapé (sem gap do main) */
main.page-main:has(.genz-camera-viaja) {
  padding-bottom: 0 !important;
}

.page-content:has(.genz-camera-viaja),
.page-container:has(.genz-camera-viaja),
.card.card-page:has(.genz-camera-viaja),
.card.card-page:has(.genz-camera-viaja) .card-body,
.card.card-page:has(.genz-camera-viaja) .card-body_custom {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.genz-camera-viaja {
  position: relative;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
  background-color: #F39443;
  background-image: radial-gradient(ellipse 128% 65% at 91% 13%,
      rgba(255, 210, 120, 0.84) 0%,
      rgba(255, 170, 70, 0.35) 45%,
      rgba(243, 148, 67, 0) 112%);
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

.genz-viaja-city {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  user-select: none;
}

.genz-viaja-inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 48px 40px 56px;
  text-align: left;
}

.genz-viaja-steps {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  margin-top: -15px;
}

.genz-viaja-steps img {
  display: block;
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: clamp(190px, 17.5vw, 270px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  object-fit: contain;
  object-position: center bottom;
}

/* Títulos alinhados à esquerda (Tiny/tema às vezes centraliza h2) */
.genz-camera-page h2,
.genz-camera-viaja h2 {
  text-align: left !important;
}

/* Linhas de cards/banner ocupam a largura útil da coluna */
.genz-camera-row {
  width: 100% !important;
}

@media (max-width: 991px) {
  .genz-camera-row {
    flex-wrap: wrap !important;
  }

  .genz-camera-row>div {
    flex: 1 1 calc(50% - 10px) !important;
  }
}

@media (max-width: 575px) {
  .genz-camera-row>div {
    flex: 1 1 100% !important;
  }
}

/*
 * Full horizontal (lado a lado na viewport).
 * Reutilize .genz-fullbleed em qualquer faixa da página da câmera
 * (azul atual e próximos blocos full-width abaixo).
 */
.genz-fullbleed {
  position: relative;
  left: auto !important;
  right: auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box;
}

/* Ancestrais não podem cortar o full-bleed */
.page-main:has(.genz-fullbleed),
.page-content:has(.genz-fullbleed),
.page-container:has(.genz-fullbleed),
.page-content:has(.genz-fullbleed) .container,
.page-content:has(.genz-fullbleed) .columns,
.page-content:has(.genz-fullbleed) .column,
.card.card-page:has(.genz-fullbleed),
.card.card-page:has(.genz-fullbleed) .card-body,
.card.card-page:has(.genz-fullbleed) .card-body_custom {
  overflow: visible !important;
  overflow-x: visible !important;
}

/* Evita barra horizontal da página por causa do 100vw */
body:has(.genz-fullbleed),
html:has(.genz-fullbleed) {
  overflow-x: hidden;
}

.genz-camera-rotativa {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

.genz-camera-rotativa svg {
  flex-shrink: 0;
}

.genz-camera-rotativa span {
  min-width: 0;
}

/* Faixa azul + glow canto inferior esquerdo */
.genz-camera-band {
  overflow: hidden;
  background-color: #002161;
  background-image: radial-gradient(ellipse 128% 65% at 9% 87%,
      rgb(0 101 255 / 84%) 0%,
      rgba(30, 80, 170, 0.28) 89%,
      rgba(0, 33, 97, 0) 112%);
}

@media (max-width: 991px) {

  main.page-main:has(.genz-camera-page),
  main.page-main:has(.card-page--camera) {
    padding-top: 20px;
  }

  .genz-camera-page:not(.genz-fullbleed) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .genz-camera-band>div:not(.div-content) {
    padding-top: 140px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .genz-camera-band>.div-content {
    margin: 0;
    padding: 0;
  }

  .genz-camera-player {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: calc(50% - 50vw + 10px) !important;
    margin-right: calc(50% - 50vw + 10px) !important;
    margin-bottom: -110px !important;
  }

  .genz-camera-player-frame {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 12px !important;
  }

  .genz-camera-rotativa {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .genz-camera-rotativa svg {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    margin-top: 1px;
  }

  .genz-camera-rotativa span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .genz-camera-viaja>.genz-viaja-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 40px !important;
  }

  .genz-viaja-steps {
    flex-wrap: wrap !important;
    margin-top: -8px;
  }

  .genz-viaja-steps img {
    flex: 1 1 calc(50% - 2px) !important;
    height: clamp(160px, 36vw, 220px) !important;
  }

  .genz-camera-conoce>div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 575px) {
  .genz-viaja-steps {
    margin-top: -4px;
  }

  .genz-viaja-steps img {
    flex: 1 1 100% !important;
    height: clamp(180px, 58vw, 240px) !important;
  }
}

/* ==========================================================================
   Busca/categoria — layout mobile (filtros no topo + toolbar sob o título)
   Desktop (≥992px) permanece inalterado (show-lg / hide-lg).
   ========================================================================== */
@media (max-width: 991px) {
  .search-options_mobile.search-options_mobile--genz {
    background: #fff;
    display: block !important;
    margin: 0;
    min-height: 0;
    position: relative;
    width: 100%;
    z-index: 99;
  }

  .search-options_mobile--genz .search-mobile-filter-bar {
    background-color: rgba(18, 17, 75, 0.05);
    cursor: pointer;
    width: 100%;
  }

  .search-options_mobile--genz .search-mobile-filter-bar_inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 44px;
    padding: 10px 16px;
    width: 100%;
  }

  .search-options_mobile--genz .search-mobile-filter-bar_title {
    color: #242431;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
  }

  .search-options_mobile--genz .search-mobile-filter-bar_icon {
    align-items: center;
    color: #9b8fb8;
    display: inline-flex;
    flex-shrink: 0;
  }

  .search-options_mobile--genz .search-mobile-filter-bar_icon svg {
    display: block;
    height: 20px;
    width: 20px;
  }

  .search-options_mobile--genz .search-option-body {
    width: 100%;
  }

  .search-options_mobile--genz .search-options-body_item {
    box-sizing: border-box;
    padding: 16px;
  }

  .search-options_mobile--genz .search-options-body_item.open {
    display: block;
  }

  /* Preço sobe para o topo do painel aberto (só mobile) */
  .search-options_mobile--genz .search-filters-content form {
    display: flex;
    flex-direction: column;
  }

  .search-options_mobile--genz .search-filter_price {
    order: -1;
  }

  .search-options_mobile--genz .search-filters-btn_finish {
    order: 99;
    margin-top: 12px;
  }

  /* Quantidade + ordenação abaixo do título */
  .search-mobile-toolbar.show-lg {
    align-items: center;
    display: flex !important;
    gap: 12px;
    justify-content: space-between;
    margin: 0 0 16px;
    padding: 0;
    width: 100%;
  }

  .search-mobile-toolbar_count {
    color: #242431;
    flex: 0 1 auto;
    font-size: 14px;
    line-height: 1.3;
    margin: 0;
    min-width: 0;
  }

  .search-mobile-toolbar_count strong {
    font-weight: 700;
  }

  .search-mobile-toolbar_order {
    flex: 0 1 auto;
    max-width: 62%;
    min-width: 0;
  }

  .search-mobile-toolbar_order .form-group {
    align-items: center;
    display: flex;
    float: none;
    gap: 8px;
    margin: 0;
    width: 100%;
  }

  .search-mobile-toolbar_order .form-label {
    display: inline;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
  }

  .search-mobile-toolbar_order .dropdown {
    display: inline-block;
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
    vertical-align: middle;
    width: auto;
  }

  .search-mobile-toolbar_order .dropdown>.btn {
    align-items: center;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #374151;
    display: inline-flex;
    font-size: 13px;
    gap: 6px;
    height: 36px;
    justify-content: space-between;
    max-width: 100%;
    min-width: 0;
    padding: 0 10px;
  }

  .search-mobile-toolbar_order .dropdown-icon {
    display: none;
  }

  .search-mobile-toolbar_order .dropdown>.btn>span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .search-mobile-toolbar_order .dropdown>.btn>svg {
    flex-shrink: 0;
    height: 8px;
    margin: 0;
    position: static;
    width: 8px;
  }

}

.checkout-pickup-store {
  margin-top: 8px;
}

.checkout-pickup-store_title {
  font-weight: 700;
  margin-bottom: 2px;
}

.checkout-pickup-store_line {
  margin: 0;
  opacity: 0.85;
}

/* Títulos de producto con palabras largas sin espacios (p. ej.
   "presentaciones/multimedia", "Wi-Fi/MicroSD/50A/Bivolt"): como los títulos
   se muestran completos (overflow: visible, sin line-clamp), una palabra que
   no entra en la card la desbordaba y, en la columna derecha de la grilla
   móvil, generaba scroll horizontal. Solo se corta cuando no entra. */
.showcase-product_link_title {
  word-break: break-word; /* respaldo Safari < 15.4 */
  overflow-wrap: anywhere;
}

/* Barra de orden móvil (Cantidad + "Ordená por"): la intención de esta hoja
   es que el botón se encoja (min-width: 0 en .search-mobile-toolbar_order
   .dropdown>.btn), pero perdía por especificidad contra la regla base
   .search-main .form-group .dropdown>.btn { min-width: 120px }. A 320 px el
   botón no cabía en sus 99 px y generaba scroll horizontal. El texto ya tiene
   ellipsis, así que solo se recorta con "…".
   La lista desplegable (min-width 170px, anclada a la izquierda) se salía por
   la derecha y cortaba las opciones: se ancla al borde derecho del selector. */
@media (max-width: 991px) {
  .search-main .search-mobile-toolbar_order .form-group .dropdown > .btn {
    min-width: 0;
  }

  .search-main .search-mobile-toolbar_order .form-group .dropdown > .menu {
    left: auto;
    right: 0;
  }
}


/* ============================================================================
   Panel de filtros del catálogo (sf-*) — diseño base (sin temática)
   Estructura: .sf-panel > form.sf-form > .sf-head (fijo) + .sf-body (scroll)
   + .sf-foot (fijo). Cada sección es un <details class="sf-section"> con
   summary (título + contador + chips de selección cuando está cerrada),
   buscador local opcional (.sf-search) y lista (.sf-list; con scroll propio a
   partir de 12 opciones). Escritorio: columna pegajosa de alto acotado, así
   el filtro no estira la fila del catálogo. Móvil: cajón lateral.
   El <form>, los inputs y el envío son los originales.
   ========================================================================== */
.sf-panel {
  --sf-bg: #ffffff;
  --sf-line: #e6e8ef;
  --sf-text: #242431;
  --sf-text-2: #5a6478;
  --sf-accent: #2563c9;
  --sf-field-bg: #f4f5f9;
  --sf-chip-bg: #eef1f9;
  --sf-radius: 12px;
  --sf-max-height: min(80vh, calc(100vh - 32px));
  display: flex;
  flex-direction: column;
  max-height: var(--sf-max-height);
  background: var(--sf-bg);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  box-shadow: 0 6px 20px rgba(18, 17, 75, 0.06);
  color: var(--sf-text);
}

/* Los nodos que el JS oculta con [hidden] (badge, chips, buscador, ítems sin
   coincidencia) tienen display propio: el atributo debe ganar igual. */
.sf-panel [hidden] {
  display: none !important;
}

.sf-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: inherit;
}

.sf-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 13px 16px;
  border-bottom: 1px solid var(--sf-line);
}

.sf-head_title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.sf-clear {
  margin-left: auto;
  color: var(--sf-accent);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.sf-clear:hover,
.sf-clear:focus {
  text-decoration: underline;
  opacity: 1;
}

.sf-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: -6px -8px -6px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sf-text);
  cursor: pointer;
}

.sf-clear:not([hidden]) + .sf-close {
  margin-left: 0;
}

.sf-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 16px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(36, 36, 49, 0.25) transparent;
}

.sf-body::-webkit-scrollbar {
  width: 6px;
}

.sf-body::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(36, 36, 49, 0.25);
}

.sf-foot {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-top: 1px solid var(--sf-line);
  background: var(--sf-bg);
  border-radius: 0 0 var(--sf-radius) var(--sf-radius);
}

.sf-foot .search-filters-btn_finish {
  margin: 0;
  height: 42px;
  border-radius: 8px;
}

/* --- Secciones (accordion nativo) ----------------------------------------- */
.sf-panel .search-filter.sf-section {
  padding-bottom: 0;
  border-bottom: 1px solid var(--sf-line);
}

.sf-panel .search-filter.sf-section:last-child {
  border-bottom: 0;
}

.sf-summary {
  display: block;
  padding: 11px 0;
  cursor: pointer;
  list-style: none;
  outline: none;
}

.sf-summary::-webkit-details-marker,
.sf-summary::marker {
  display: none;
  content: '';
}

.sf-summary:focus-visible .search-filter-title {
  outline: 2px solid var(--sf-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.sf-summary_row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sf-panel .search-filter-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

.sf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--sf-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* La flecha (oculta en el diseño anterior) indica el estado del accordion. */
.sf-panel .search-filter-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--sf-text-2);
  transition: transform .25s ease;
}

.sf-panel .search-filter-icon svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.sf-panel .sf-section[open] > .sf-summary .search-filter-icon {
  transform: rotate(180deg);
}

/* Chips de lo seleccionado: solo con la sección cerrada (abierta ya se ve en la lista). */
.sf-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 6px;
}

.sf-panel .sf-section[open] > .sf-summary .sf-selected {
  display: none;
}

.sf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 6px 3px 9px;
  border-radius: 999px;
  background: var(--sf-chip-bg);
  color: var(--sf-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

.sf-chip_remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sf-text-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.sf-chip_remove:hover,
.sf-chip_remove:focus-visible {
  background: rgba(36, 36, 49, 0.12);
  color: var(--sf-text);
}

.sf-section_body {
  padding-bottom: 10px;
}

/* --- Buscador local -------------------------------------------------------- */
.sf-search {
  position: relative;
  margin: 2px 0 8px;
}

.sf-search_icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: var(--sf-text-2);
  pointer-events: none;
}

.sf-panel .form-input.sf-search_input {
  width: 100%;
  height: 36px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--sf-line);
  border-radius: 8px;
  background: var(--sf-field-bg);
  color: var(--sf-text);
  font-size: 13px;
  box-shadow: none;
}

.sf-panel .form-input.sf-search_input:focus {
  border-color: var(--sf-accent);
  box-shadow: 0 0 0 2px rgba(37, 99, 201, 0.15);
}

.sf-empty,
.sf-note {
  margin: 4px 0 2px;
  color: var(--sf-text-2);
  font-size: 12px;
  line-height: 1.4;
}

.sf-note {
  margin-top: 8px;
  opacity: .85;
}

/* --- Listas --------------------------------------------------------------- */
.sf-list--scroll {
  max-height: 268px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(36, 36, 49, 0.25) transparent;
}

.sf-list--scroll::-webkit-scrollbar {
  width: 5px;
}

.sf-list--scroll::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(36, 36, 49, 0.25);
}

.sf-list--scroll.is-empty {
  max-height: none;
}

/* Filas más compactas que el diseño anterior (12px arriba y abajo). */
.sf-panel .search-filters-content .form-checkbox,
.sf-panel .form-checkbox {
  padding-top: 7px;
  padding-bottom: 7px;
}

.sf-panel .form-radio {
  padding-top: 5px;
  padding-bottom: 5px;
}

.sf-panel .form-text {
  font-size: 13px;
  line-height: 1.3;
}

.sf-panel .search-filters-content .form-group.form-group_category,
.sf-panel .form-group.form-group_category {
  padding-top: 2px;
  padding-bottom: 2px;
}

/* --- Árbol de categorías ----------------------------------------------------
   Sin JS el árbol se ve completo (comportamiento anterior). Con JS cada grupo
   tiene un botón que lo contrae; contraído solo queda el nivel superior. */
.sf-group--tree {
  position: relative;
}

.sf-group--tree > [data-sf-item]:first-child {
  padding-right: 30px;
}

.sf-tree-toggle {
  position: absolute;
  top: 2px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sf-text-2);
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}

.sf-tree-toggle:hover,
.sf-tree-toggle:focus-visible {
  background: rgba(36, 36, 49, 0.08);
  color: var(--sf-text);
}

.sf-group--tree:not(.is-collapsed) > .sf-tree-toggle {
  transform: rotate(180deg);
}

.sf-group--tree.is-collapsed:not(.is-searching) .search-filter-link_category__child,
.sf-group--tree.is-collapsed:not(.is-searching) .search-filter-link_category__child2,
.sf-group--tree.is-collapsed:not(.is-searching) .search-filter-link_category__child3 {
  display: none;
}

.sf-group--tree.is-searching > .sf-tree-toggle {
  display: none;
}

/* Variaciones tipo botón/color: la lista es un grid de pastillas. */
.sf-panel .sf-list--chips {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  width: 100%;
}

/* --- Precio --------------------------------------------------------------- */
.sf-panel .search-filter_price .search-filter-header {
  padding-bottom: 11px;
}

.sf-panel .search-filter-price_values {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 0 16px;
  color: var(--sf-text);
  font-size: 12px;
  font-weight: 600;
}

.sf-panel .search-filter-price_values .search-filter-price_lower,
.sf-panel .search-filter-price_values .search-filter-price_upper {
  float: none;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--sf-field-bg);
  white-space: nowrap;
}

.sf-panel .search-filter-price .noUi-target {
  margin: 0 0 18px;
}

/* --- Escritorio: columna pegajosa de alto acotado ------------------------- */
@media (min-width: 992px) {
  .search-main .col-search-filter {
    align-self: flex-start;
    position: -webkit-sticky;
    position: sticky;
    top: 16px;
  }

  .sf-close {
    display: none;
  }
}

/* --- Móvil: cajón lateral (solo el catálogo, .search-options_mobile--genz) -- */
@media (max-width: 991px) {
  .search-options_mobile--genz .search-options-body_item {
    display: none;
    padding: 0;
  }

  /* La sección tiene position:relative + z-index 99 (base): crea el contexto de
     apilamiento del cajón fijo, que quedaba debajo del header (z 999). Con el
     cajón abierto la sección sube por encima del header. */
  .search-options_mobile--genz:has(.search-options-body_item.open),
  body.search-filters-drawer_open .search-options_mobile--genz {
    z-index: 1300;
  }

  .search-options_mobile--genz .search-options-body_item.open {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1200;
    background: rgba(12, 10, 17, 0.55);
    opacity: 1;
    overscroll-behavior: contain;
  }

  .search-options_mobile--genz .search-options-body_item.open .search-filters {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(400px, 92vw);
    display: flex;
    flex-direction: column;
    background: var(--sf-bg, #fff);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.3);
    animation: sf-drawer-in .28s cubic-bezier(.22, .61, .36, 1);
  }

  .search-options_mobile--genz .search-options-body_item.open .search-filters-content.sf-panel {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .search-options_mobile--genz .sf-head {
    padding-top: calc(13px + env(safe-area-inset-top, 0px));
  }

  .search-options_mobile--genz .sf-foot {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
  }

  .sf-close {
    display: inline-flex;
  }

  body.search-filters-drawer_open {
    overflow: hidden;
  }

  @keyframes sf-drawer-in {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-options_mobile--genz .search-options-body_item.open .search-filters {
    animation: none;
  }

  .sf-panel .search-filter-icon,
  .sf-tree-toggle {
    transition: none;
  }
}


/* ============================================================================
   Encabezado de catálogo / búsqueda / marca (templates/search.liquid):
   migas → título → fila "N productos · Ordená por" → grilla.
   El espacio sobrante venía del CSS base (theme-all.css):
     .search-breadcrumbs  padding 24px 0          (abajo 24 + borde)
     .search-title        padding-top 56px; margin-bottom 20px
     .search-container    padding-top 20px
     .search-options_top  (≥992) padding-bottom 28px; margin-bottom 50px
   = 81px migas→título, 40px título→fila y ~79px fila→cards en desktop.
   Aquí se fijan una sola vez (todas las páginas que usan esta plantilla):
   ≈ 15px migas→título, 18px título→fila, 24px fila→cards.
   El selector "~ .search-content" deja fuera marcas y vendedor, que no
   tienen este encabezado. Antes había un bloque solo móvil (dentro de
   @media max-width 991px) con 12px/8px/8px: quedó integrado aquí.
   ========================================================================== */
.search-main .search-breadcrumbs {
  padding-top: 18px;
  padding-bottom: 14px;
}

.search-main .search-title {
  margin-bottom: 0;
  padding-top: 0;
}

.search-main .search-top-content ~ .search-content .search-container {
  padding-top: 18px;
}

@media (min-width: 992px) {
  .search-main .search-top-content ~ .search-content .search-options_top {
    margin-bottom: 12px;
    padding-bottom: 11px;
  }
}

@media (max-width: 991px) {
  .search-main .search-breadcrumbs {
    padding-top: 14px;
    padding-bottom: 12px;
  }

  .search-main .search-title {
    margin-bottom: 14px;
    padding-top: 2px;
  }

  .search-main .search-top-content {
    padding-top: 8px;
  }

  .search-main .search-top-content ~ .search-content .search-container {
    padding-top: 8px;
  }
}

/* Buscador del header: letras cortadas (descendentes de j g p y ¿ y acentos
   de mayúsculas). La Plus Jakarta Sans de salescdn.net/static/fonts declara
   métricas verticales de 0.80em arriba / 0.20em abajo, pero sus glifos llegan
   a ~1.02em (Á É) y ~0.23em (j g ¿). Dentro de un <input> el navegador recorta
   el texto a esas métricas (con cualquier line-height), así que se perdía la
   parte de abajo y los acentos. Misma fuente y mismos archivos, solo con las
   métricas corregidas, y aplicada únicamente a los dos inputs de búsqueda
   (#term2 en el header, 400; #term en el overlay móvil, 600). */
@font-face {
  font-family: 'Plus Jakarta Sans Field';
  src: url("https://salescdn.net/static/fonts/plus-jakarta-sans/plus-jakarta-sans_regular.woff2") format("woff2"), url("https://salescdn.net/static/fonts/plus-jakarta-sans/plus-jakarta-sans_regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 104%;
  descent-override: 26%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Plus Jakarta Sans Field';
  src: url("https://salescdn.net/static/fonts/plus-jakarta-sans/plus-jakarta-sans_semibold.woff2") format("woff2"), url("https://salescdn.net/static/fonts/plus-jakarta-sans/plus-jakarta-sans_semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  ascent-override: 104%;
  descent-override: 26%;
  line-gap-override: 0%;
}

.search-desktop .form-input,
.search .form-input {
  font-family: 'Plus Jakarta Sans Field', 'Plus Jakarta Sans', sans-serif;
}

/* ---------------------------------------------------------------------------
   Buscador predictivo del header (assets/theme-live-search.js) — base
   Panel fijo bajo el input (#term2 / #term), fuera del header para que ningún
   overflow lo recorte. Estados por data-state: loading | results | empty |
   error. La piel Halloween está en theme-halloween.css (§4.19).
   ------------------------------------------------------------------------ */
.ls-panel {
  position: fixed;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
  color: #242431;
  border: 1px solid #E6DED4;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(6, 4, 10, .18), 0 2px 8px rgba(6, 4, 10, .08);
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-align: left;
}

.ls-panel[hidden] {
  display: none;
}

/* Barra de progreso (solo mientras carga). */
.ls-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, #2D59AF, #7B2CBF);
  opacity: 0;
  transform-origin: left center;
  pointer-events: none;
}

.ls-panel[data-state="loading"] .ls-bar {
  opacity: 1;
  animation: ls-bar 1.1s ease-in-out infinite;
}

@keyframes ls-bar {
  0%   { transform: translateX(-100%) scaleX(.45); }
  50%  { transform: translateX(20%) scaleX(.6); }
  100% { transform: translateX(100%) scaleX(.45); }
}

.ls-status {
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.45;
  color: #5B5F70;
}

/* Con resultados el estado solo lo leen los lectores de pantalla. */
.ls-status:empty,
.ls-status--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.ls-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  transition: opacity .15s ease;
}

.ls-list:empty {
  padding: 0;
}

.ls-panel[data-state="loading"] .ls-list:empty::before {
  content: 'Buscando…';
  display: block;
  padding: 14px 16px;
  font-size: 13px;
  color: #5B5F70;
}

.ls-panel[data-state="loading"] .ls-list:not(:empty) {
  opacity: .55;
}

@media (min-width: 992px) {
  .ls-list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

.ls-item {
  margin: 0;
  min-width: 0;
}

.ls-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background-color .15s ease, box-shadow .15s ease;
}

.ls-link:hover,
.ls-link:focus,
.ls-item[aria-selected="true"] .ls-link {
  background: #F4F1FA;
  box-shadow: inset 3px 0 0 #2D59AF;
  color: inherit;
  text-decoration: none;
}

.ls-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px;
  background: #F4EFE8;
}

.ls-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ls-item.is-unavailable .ls-thumb {
  opacity: .55;
  filter: grayscale(.35);
}

.ls-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ls-title {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ls-mark {
  background: transparent;
  color: #2D59AF;
  font-weight: 800;
}

.ls-meta {
  font-size: 11px;
  line-height: 1.3;
  color: #5B5F70;
}

.ls-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.ls-strike {
  font-size: 11px;
  font-weight: 500;
  color: #8A8FA0;
}


.ls-local {
  font-size: 11px;
  font-weight: 600;
  color: #2D59AF;
}

.ls-badge {
  font-size: 11px;
  font-weight: 700;
  color: #8A3B2E;
  background: #FBE9E4;
  border-radius: 999px;
  padding: 2px 8px;
}

.ls-foot {
  flex: 0 0 auto;
  border-top: 1px solid #E6DED4;
  padding: 6px 8px;
}

.ls-foot:empty {
  display: none;
}

.ls-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #2D59AF;
  text-decoration: none;
  transition: background-color .15s ease;
}

.ls-all:hover,
.ls-all:focus {
  background: #F4F1FA;
  color: #2D59AF;
  text-decoration: none;
}

.ls-all_arrow {
  transition: transform .2s ease;
}

.ls-all:hover .ls-all_arrow {
  transform: translateX(3px);
}

@media (max-width: 767px) {
  .ls-link {
    padding: 10px;
    min-height: 64px;
  }

  .ls-status {
    padding: 12px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ls-panel[data-state="loading"] .ls-bar {
    animation: none;
    transform: none;
  }

  .ls-list,
  .ls-link,
  .ls-all,
  .ls-all_arrow {
    transition: none;
  }
}

/* Scroll interno del panel: fino, acorde al fondo. */
.ls-list {
  scrollbar-width: thin;
  scrollbar-color: #C9C3D6 transparent;
}

.ls-list::-webkit-scrollbar {
  width: 8px;
}

.ls-list::-webkit-scrollbar-thumb {
  background: #C9C3D6;
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Buscador predictivo — corrector ("¿Quisiste decir…?") */
.ls-head:empty {
  display: none;
}

.ls-head {
  padding: 10px 16px 0;
}

.ls-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: #5B5F70;
}

.ls-section_badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8A5A00;
  background: #FFF1D6;
}

.ls-note {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #5B5F70;
}

.ls-suggest {
  grid-column: 1 / -1;
}

.ls-suggest_btn {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed #C9C3D6;
  border-radius: 10px;
  background: #FAF8FD;
  color: #242431;
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.ls-suggest_btn:hover,
.ls-suggest_btn:focus,
.ls-suggest[aria-selected="true"] .ls-suggest_btn {
  background: #F1ECFA;
  border-color: #2D59AF;
  outline: none;
}

.ls-suggest_icon {
  margin-right: 4px;
  font-size: 15px;
  color: #2D59AF;
}

.ls-suggest_query {
  font-style: italic;
}

.ls-suggest_query strong {
  font-style: normal;
  font-weight: 800;
  color: #2D59AF;
}

.ls-exact {
  display: block;
  padding: 2px 10px 6px;
  font-size: 12px;
  text-align: center;
  color: #5B5F70;
  text-decoration: underline;
}

.ls-exact:hover,
.ls-exact:focus {
  color: #242431;
}

@media (prefers-reduced-motion: reduce) {
  .ls-suggest_btn {
    transition: none;
  }
}

.ls-note_link {
  color: #2D59AF;
  font-weight: 700;
  text-decoration: underline;
}

/* Etiqueta "Búsqueda inteligente" del buscador (la inserta
   theme-live-search.js). Sobria: ícono de trazo fino en el color de acento y
   texto gris, separada de la lupa por una línea. Decorativa: no recibe clics;
   el JS la ubica a la izquierda de la lupa, reserva su espacio en el padding
   del input y en campos angostos deja solo el ícono. */
.ls-has-ai {
  position: relative;
}

.ls-ai {
  position: absolute;
  top: 50%;
  right: 46px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-right: 10px;
  border-right: 1px solid #E3E0EA;
  color: #8A8FA0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: .01em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  transform: translateY(-50%);
}

.ls-ai svg {
  flex: 0 0 auto;
  color: #2D59AF;
}

.ls-ai--compact {
  gap: 0;
}

.ls-ai--compact .ls-ai_text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* En la fila "¿Quisiste decir…?": misma etiqueta, sin línea divisoria. */
.ls-ai--inline {
  position: static;
  margin-left: auto;
  padding-right: 0;
  border-right: 0;
  transform: none;
}

@media (max-width: 479px) {
  .ls-ai--inline .ls-ai_text {
    display: none;
  }
}

/* Buscador predictivo — relevancia: separador de accesorios en el panel */
.ls-group {
  grid-column: 1 / -1;
  margin: 6px 10px 2px;
  padding-top: 8px;
  border-top: 1px solid #E6DED4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8A8FA0;
  list-style: none;
}

/* Aviso en la página de resultados cuando la búsqueda se refinó (o se puede refinar) */
.ls-refine {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #DCE3F2;
  border-radius: 10px;
  background: #F5F8FE;
  color: #3B4351;
  font-size: 13px;
  line-height: 1.5;
}

.ls-refine svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: #2D59AF;
}

.ls-refine_link {
  font-weight: 700;
  color: #2D59AF;
  text-decoration: underline;
  white-space: nowrap;
}

.ls-refine_link:hover,
.ls-refine_link:focus {
  color: #1d3f86;
}

@media (max-width: 575px) {
  .ls-refine_link {
    white-space: normal;
  }
}

.ls-pending {
  margin: 0;
  padding: 10px;
  font-size: 12px;
  text-align: center;
  color: #8A8FA0;
}

.ls-panel[data-early] .ls-bar {
  opacity: 1;
  animation: ls-bar 1.1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ls-panel[data-early] .ls-bar {
    animation: none;
  }
}

.ls-refine--empty {
  max-width: 640px;
  margin: 16px auto 0;
  text-align: left;
}

/* ==========================================================================
   Catálogo continuo (assets/theme-infinite-scroll.js)
   La paginación numerada queda en el HTML pero oculta; debajo del listado,
   contador, indicador de carga y botón "Cargar más" / "Reintentar".
   ========================================================================== */
.gz-is-on .search-options_bottom {
  display: none !important;
}

.showcase-search .showcase-list > .gz-is-spacer {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding: 0;
  border: 0;
  list-style: none;
  pointer-events: none;
  overflow-anchor: none;
}

/* Mientras se reconstruye la posición al volver: sin parpadeo del inicio. */
.gz-is-restoring main.search-main .showcase-search,
.gz-is-restoring main.search-main .gz-is,
.gz-is-restoring main.search-main .gz-is-prev {
  visibility: hidden;
}

.gz-is,
.gz-is-prev {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.gz-is {
  min-height: 96px;
  padding: 12px 0 36px;
}

.gz-is-prev {
  padding: 0 0 20px;
}

.gz-is-prev[hidden] {
  display: none;
}

.gz-is .search-btn-pagination,
.gz-is-prev .search-btn-pagination {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  margin-left: 0;
  min-width: 220px;
  padding: 2px 20px;
}

.gz-is .search-btn-pagination:focus-visible,
.gz-is-prev .search-btn-pagination:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.gz-is-prev .search-btn-pagination[disabled] {
  cursor: progress;
  opacity: .7;
}

.gz-is_count {
  font-size: 14px;
  margin: 0;
  opacity: .8;
}

.gz-is_msg {
  font-size: 14px;
  margin: 0;
  max-width: 420px;
}

.gz-is_msg:empty,
.gz-is_loading,
.gz-is_more {
  display: none;
}

.gz-is[data-state="loading"] .gz-is_loading {
  align-items: center;
  display: inline-flex;
  font-size: 14px;
  gap: 10px;
}

.gz-is[data-state="idle"] .gz-is_more,
.gz-is[data-state="paused"] .gz-is_more,
.gz-is[data-state="error"] .gz-is_more {
  display: flex;
}

/* En reposo el botón queda para teclado y como respaldo; la carga es automática. */
.gz-is[data-state="idle"] .gz-is_more {
  opacity: .85;
}

.gz-is_spinner {
  animation: gz-is-spin .8s linear infinite;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
  display: inline-block;
  height: 18px;
  opacity: .8;
  width: 18px;
}

@keyframes gz-is-spin {
  to { transform: rotate(360deg); }
}

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

@media (prefers-reduced-motion: reduce) {
  .gz-is_spinner {
    animation-duration: 2.4s;
  }
}

/* Accesos a marcas sin destino válido (sections/brand-link.liquid): no navegan. */
.showcase-banner_link[aria-disabled="true"],
.footer-page_link[aria-disabled="true"] {
  cursor: default;
}

/* ==========================================================================
   Visor de fotos de la ficha (PhotoSwipe, assets/theme.js → openPhotoSwipe)
   Se abre desde <body> por encima de todo; la foto se ajusta completa (PhotoSwipe
   la escala para caber en .pswp__scroll-wrap, sin recortar ni deformar).
   ========================================================================== */
.pswp {
  z-index: 10050;
}

/* Sin scroll de la página de fondo mientras el visor está abierto. */
html.pswp-open,
html.pswp-open body {
  overflow: hidden;
}

/* Margen de seguridad lateral: PhotoSwipe calcula el espacio disponible con el
   tamaño de este contenedor (arriba y abajo lo reserva barsSize). */
.pswp__scroll-wrap {
  left: 12px;
  right: 12px;
  width: auto;
}

@media (min-width: 768px) {
  .pswp__scroll-wrap {
    left: 32px;
    right: 32px;
  }
}

/* Cerrar y las flechas siempre visibles (también en pantallas táctiles). */
.pswp__ui--idle .pswp__top-bar,
.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
  opacity: 1;
}

.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
  visibility: visible;
}

.pswp__button--close:focus-visible,
.pswp__button--arrow--left:focus-visible,
.pswp__button--arrow--right:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* ==========================================================================
   Páginas informativas (templates/page.liquid): menú lateral «La Empresa» +
   «Soporte» acompaña el scroll. Es la columna que contiene las .card-pages-nav
   (visible desde 961px; en pantallas menores quedan los acordeones).
   assets/theme-page-sidebar.js agrega .page-side-sticky solo cuando el
   contenido de la derecha es más alto que los menús. El header no es fijo,
   así que solo se deja un margen arriba. Si los dos menús no entran en la
   pantalla, scroll interno discreto.
   ========================================================================== */
@media (min-width: 961px) {
  .page-main .columns > .column.page-side-sticky {
    --page-side-gap: 24px;
    position: sticky;
    top: var(--page-side-gap);
    align-self: flex-start;
    max-height: calc(100vh - 2 * var(--page-side-gap));
    max-height: calc(100dvh - 2 * var(--page-side-gap));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 140, .45) transparent;
  }
}

/* ==========================================================================
   Código del producto en las tarjetas (sections/showcase-product-code.liquid).
   Línea secundaria bajo el título: mismo valor que la ficha muestra como
   «Código del producto». No cambia la alineación de precios (el footer de la
   tarjeta sigue con margin-top: auto). Gris #5B5F70 sobre blanco: 6.4:1.
   No se atenúa en productos sin stock (a opacidad .5 bajaría de 4.5:1).
   El ícono es una máscara CSS (no SVG en el HTML) para que las tarjetas que
   guarda el catálogo continuo pesen menos. El botón copia sin abrir la ficha
   (theme-product-code.js).
   ========================================================================== */
.showcase-product_code {
  align-items: center;
  color: #5B5F70;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 400;
  gap: 0 4px;
  line-height: 18px;
  margin: 4px 0 0;
  min-width: 0;
}

.showcase-product_code-label {
  flex-shrink: 0;
}

.showcase-product_code-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  min-width: 0;
  overflow-wrap: anywhere;
}

.showcase-product_code-copy {
  --code-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='5.25' y='5.25' width='8' height='8.5' rx='1.6'/%3E%3Cpath d='M10.25 3.25V3a1.5 1.5 0 0 0-1.5-1.5H4A1.5 1.5 0 0 0 2.5 3v5.75a1.5 1.5 0 0 0 1.5 1.5h.25'/%3E%3C/svg%3E");
  -webkit-appearance: none;
  appearance: none;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 24px;
  height: 24px;
  justify-content: center;
  margin: -3px 0;
  padding: 0;
  position: relative;
  transition: background-color .15s ease, color .15s ease;
  width: 24px;
}

.showcase-product_code-copy::before {
  background-color: currentColor;
  content: "";
  display: block;
  height: 14px;
  pointer-events: none;
  width: 14px;
  -webkit-mask: var(--code-icon) center / 14px 14px no-repeat;
  mask: var(--code-icon) center / 14px 14px no-repeat;
}

@media (hover: hover) {
  .showcase-product_code-copy:hover {
    background-color: rgba(36, 36, 49, .07);
    color: #242431;
  }
}

.showcase-product_code-copy:focus:not(:focus-visible) {
  outline: none;
}

.showcase-product_code-copy:focus-visible {
  outline: 2px solid #21C553;
  outline-offset: 1px;
}

.showcase-product_code-copy.is-copied {
  --code-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
  color: #13762F;
}

.showcase-product_code-copy.is-failed {
  color: #B3122D;
}

/* Aviso junto al botón (absoluto: no cambia el alto de la tarjeta). */
.showcase-product_code-copy.is-copied::after,
.showcase-product_code-copy.is-failed::after {
  content: "Copiado";
  font-size: 12px;
  font-weight: 600;
  left: 100%;
  line-height: 18px;
  margin-left: 2px;
  pointer-events: none;
  position: absolute;
  top: 3px;
  white-space: nowrap;
}

.showcase-product_code-copy.is-failed::after {
  content: "Seleccionado";
}

/* Región única de avisos para lectores de pantalla (la crea el JS en <body>). */
.showcase-product_code-status {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Vista en lista (search-for-seller, calculadora solar): el título baja a 12px en móvil. */
@media (max-width: 767px) {
  .showcase-search.showcase-search_list .showcase-product_code {
    font-size: 11px;
  }
}

/* Vitrina en lista de la Home (showcase-model-7): el título tiene alto fijo de
   3 líneas (theme-all.css: .showcase-model-list .showcase-product_link_title
   { height: 3.857em }) con overflow visible; un título de 4+ líneas pisaría el
   código. Solo en tarjetas con código. */
.showcase-model-list .card-header:has(.showcase-product_code) .showcase-product_link_title {
  height: auto;
  min-height: 3.8571428571em;
}

@media (prefers-reduced-motion: reduce) {
  .showcase-product_code-copy {
    transition: none;
  }
}

html.hw-reduced .showcase-product_code-copy {
  transition: none;
}

/* ==========================================================================
   Pedido pendiente de pago (sections/pending-order.liquid): carrito vacío
   porque el pedido ya se creó y el pago no se completó. Neutro, sin alarma:
   el estado real del pago lo informa la página del pedido.
   ========================================================================== */
.gz-pending-order {
  background: #fff;
  border: 1px solid #E3E3E8;
  border-left: 4px solid #F39443;
  border-radius: 10px;
  color: #242431;
  margin: 16px auto;
  max-width: 560px;
  padding: 16px 18px;
  text-align: left;
}

.gz-pending-order[hidden] {
  display: none;
}

.gz-pending-order_title {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  margin: 0 0 6px;
}

.gz-pending-order_text {
  color: #4A4A57;
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 12px;
}

.gz-pending-order .gz-pending-order_btn {
  display: inline-flex;
  height: auto;
  min-height: 40px;
  align-items: center;
  white-space: normal;
}

.gz-pending-order--order {
  max-width: none;
}

.sidenav-overlay_cart .gz-pending-order {
  margin: 16px;
}

/* ==========================================================================
   Precio promocional sin porcentaje de descuento (pedido comercial): la
   promoción se muestra solo con el precio original tachado, en tipografía
   secundaria, sobre el precio promocional destacado (sections/product-content).
   Gris #5F6473 sobre blanco / #FFFCF8 (Halloween): 5,9:1.
   ========================================================================== */
.product-box_prices .product-prices_strike {
  color: #5F6473;
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  margin-bottom: 4px;
}

/* Vitrina en lista (showcase-model-7): theme-all.css ocultaba el precio tachado
   (.showcase-model-list .showcase-promo_box / .showcase-prices_strike
   { display: none }). Con la promoción sin porcentaje, el original tachado es la
   única señal de la oferta: se muestra también aquí. */
.showcase-model-list .showcase-promo_box,
.showcase-model-list .showcase-prices_strike {
  display: block;
}