/** Shopify CDN: Minification failed

Line 1817:0 Unexpected "}"

**/
/* Custom Geral */

/* cssMode (scroll nativo dos carrosséis): trava o scroll SÓ no eixo horizontal.
   Sem isto, o wrapper vira um container que também rola na vertical -> "engole"
   o scroll da página e deforma os produtos ao arrastar pra baixo. */
.swiper.swiper-css-mode > .swiper-wrapper {
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

.price,
.installment-payment strong,
.minicart__item-price {
	color: #311F07 !important;
}

.sale_badge .product__badges .product__badges-sale {
  font-size: 11px !important;
  font-weight: 600;
  padding: 4px 8px !important;
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border-radius: 6px;
}

.product-detail__custom-name-button button {
  background: none;
	border: 1px solid #1d1d1b;
	color: #1d1d1b;
	font-weight: 400;
  width: 100%;
}

.product-detail__custom-name-button span {
  /* text-decoration: underline; */
  text-underline-offset: 5px;
}

/* .product-item__price,
.card-product-price {
font-size: 10px;
} */

@media (max-width: 767px) {
.product-item__action,
select-option {
border-radius: 30%;
}
}

.sec__collection-list {
  margin-bottom: 0px;
}

/* Top Bar */

@media (max-width: 767px) {
  #topbar .text-slide .px-15 {
    font-size: clamp(9px, 2.8vw, 12px);
  }
}

/* Header */

/* Sombra bem sutil abaixo do header pra separar do conteudo (nada intrusivo) */
.section-header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
/* Sem sombra quando o header esta transparente sobre um banner (ex.: homepage) e ainda nao virou sticky */
.section-header:not(.shopify-section-header-sticky):has(.transparent:not(:hover)) {
  box-shadow: none;
}

/* Página de Produto */

.button_buy-now button {
padding: 15px !important;
border-radius: 10px;
}

.product__submit-form-cart .button_buy-now button span {
  letter-spacing: 1.2px;
  font-size: 1.75rem;
}

.product-detail__title,
.product-detail__meta{
  margin-bottom: 0;
}

/* PDP: tamanho/peso do preço, do preço comparativo (De) e do parcelamento vêm
   do bloco "Preço" em Informações do produto (vars --pdp-*). Os defaults abaixo
   reproduzem o visual atual; ajuste tudo pelo editor, sem tocar no CSS. */
.product-detail__price .price {
  font-size: var(--pdp-price-size, 24px);
  font-weight: var(--pdp-price-weight, 600);
}
.product-detail__price .compare-price {
  font-size: var(--pdp-compare-size, 18px);
  font-weight: var(--pdp-compare-weight, 400);
}
.product-detail__price .installment-payment,
.product-detail__price .installment-payment p {
  font-size: var(--pdp-installment-size, 13px);
  font-weight: var(--pdp-installment-weight, 400);
}

.card-product-price .price-regular {
  flex: 0 0 auto;
  width: auto;
}

.card-product-price .price--special {
  font-size: inherit;
}

.product-detail__meta {
  font-size: 1rem;
  width: 100%;
  color: gray;
  font-weight: 500;
  margin-bottom: 0;
  margin-top: 0;
  opacity: 0.7;
}

.product-detail__price {
  align-items: baseline;
}

/* Parcelamento sempre numa linha PRÓPRIA, logo abaixo do preço (content-after),
   colado — sem o gap longo. flex-basis:100% quebra a linha; o espaçamento
   vertical fica só o row-gap do container (pequeno). */
.card-product-price .installment-payment {
  flex: 0 0 100%;
  width: 100%;
  margin-top: 0;
  line-height: 1.1;
}

.installment-payment p {
  margin: 0;
}

/* PDP: preco em 2 linhas — "De" riscado + selo (-X%) na 1a linha; "Por" grande + parcelamento na 2a */
.card-product-price--detail {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  line-height: 1.1;
}
.card-product-price--detail .pdp-price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  line-height: 1;
}
.card-product-price--detail .pdp-price-row--bottom {
  align-items: baseline;
  gap: 0.5rem;
}
/* Preco final: tamanho do bloco "Preco" (como antes), so em destaque com negrito */
.card-product-price--detail .price {
  font-size: var(--pdp-price-size, 24px);
  font-weight: 600;
  line-height: 1;
}
/* Preco "De": bem menor (no maximo 1.4rem) */
.card-product-price--detail .compare-price {
  font-size: min(1.4rem, var(--pdp-compare-size, 1.4rem));
  line-height: 1;
}
.card-product-price--detail .installment-payment {
  flex: 0 1 auto;
  width: auto;
  margin: 0;
  color: #6b7280;
  line-height: 1;
}
.pdp-discount-badge {
  display: inline-flex;
  align-items: center;
  background-color: #d0473e;
  color: #fff;
  font-weight: 600;
  line-height: 1;
  padding: 0.3rem 0.7rem;
  border-radius: 0.4rem;
  font-size: 1.3rem;
}

/* Delivery availability alignment */
.delivery-availability {
  align-items: center;
  gap: 8px;
}

.delivery-availability #prazo_disponibilidade {
  display: flex;
  align-items: center;
  gap: 8px;
}

.delivery-availability #prazo_disponibilidade svg {
  flex-shrink: 0;
}

.product__badges-custom,
.product__badges-sale {
  border-radius: 0 !important;
  gap: 4px;
}

.product__badges-custom {
  padding-block: 1px !important;
  padding-inline: 5px !important;
  font-size: 11px !important;
}

.product__badges-sale {
  padding-block: 2px !important;
  padding-inline: 6px !important;
  font-size: 12px !important;
}

@media screen and (max-width: 750px) {
  section[class*=main-product-section] .product__badges-inner {
    padding-block: 1px !important;
    padding-inline: 14px !important;
    font-size: 15px !important;
  }
}

@media screen and (max-width: 749px) {
  .sale_badge--inside-price {
    margin-left: auto;
    flex-shrink: 0;
  }
}

.size-filter-block {
  padding: 15px;
  margin-bottom: 20px;
  background: #fff;
  border-radius: 0;
  border: 1px solid #e5e5e5;
}

.size-filter-collapsible {
  display: block;
}

.size-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  color: var(--heading-color, #222);
}

.size-filter-heading .open-children-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-filter-content {
  padding-top: 15px;
}

.size-filter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.size-filter-item {
  min-width: 48px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid #ddd;
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  user-select: none;
}

.size-filter-item:hover {
  border-color: var(--heading-color, #222);
  color: var(--heading-color, #222);
}

.size-filter-item.current-filter {
  background: var(--heading-color, #222);
  color: #fff;
  border-color: var(--heading-color, #222);
}

.size-filter-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.size-filter-label {
  white-space: nowrap;
}

.size-filter-clear {
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.size-filter-clear-btn {
  font-size: 13px;
  color: #666;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.size-filter-clear-btn:hover {
  color: var(--heading-color, #222);
}

.size-filter-item-wide {
  width: auto !important;
  min-width: 36px;
  padding: 0 10px !important;
  font-size: 12px !important;
}

.size-filter-item-wide .size-filter-label {
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .size-filter-block {
    padding: 12px;
    margin-bottom: 15px;
  }

  .size-filter-heading {
    font-size: 15px;
    padding: 8px 0;
  }

  .size-filter-grid {
    gap: 6px;
  }

  .size-filter-item {
    min-width: 42px;
    height: 40px;
    padding: 6px 10px;
    font-size: 13px;
  }
}

@media screen and (max-width: 480px) {
  .size-filter-item {
    min-width: 38px;
    height: 36px;
    padding: 5px 8px;
    font-size: 12px;
  }

  .size-filter-grid {
    gap: 5px;
  }
}
.menu-category-icon {
  border-radius: 100% !important;
}

/* ============================================================
   Nav Pill — horizontal expand
   ============================================================ */

.nav-pill__checkbox {
  position: fixed;
  opacity: 0;
  pointer-events: none;
}

/* Container — pill shape */
mobile-navigation-bar.nav-pill {
  position: fixed;
  bottom: calc(var(--pill-bottom, 14px) + env(safe-area-inset-bottom, 0px));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  visibility: visible;
  opacity: 1;
  transition: left 0.35s ease, right 0.35s ease, padding 0.35s ease, border-radius 0.35s ease;
}

/* Position: left or right */
mobile-navigation-bar.nav-pill.nav-pill--left {
  left: var(--pill-horizontal, 16px);
  right: auto;
}
mobile-navigation-bar.nav-pill.nav-pill--right {
  right: var(--pill-horizontal, 16px);
  left: auto;
}

/* Classic layout — original bottom bar styling */
mobile-navigation-bar:not(.nav-pill) {
  padding: 4px 15px !important;
  padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
}

mobile-navigation-bar:not(.nav-pill) a {
  -webkit-tap-highlight-color: transparent;
  border-radius: 0;
  transition: background-color 0.2s ease;
  gap: 1px;
}

mobile-navigation-bar:not(.nav-pill) a svg {
  width: 18px;
  height: 18px;
}

mobile-navigation-bar:not(.nav-pill) a img {
  max-height: 18px;
  width: auto;
}

mobile-navigation-bar:not(.nav-pill) a .fs-small {
  font-size: 10px;
  line-height: 1;
}

mobile-navigation-bar:not(.nav-pill) a:active {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Pill trigger — entire pill is the label */
.nav-pill__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 18px;
  cursor: pointer;
  font-size: var(--pill-font-size, 12px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #1a1a1a;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  flex-shrink: 0;
  transition: width 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

/* Nav items — collapsed */
mobile-navigation-bar.nav-pill > a,
mobile-navigation-bar.nav-pill > div,
mobile-navigation-bar.nav-pill > .header-account-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 0;
  min-width: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  color: #1a1a1a;
  flex-shrink: 0;
  transition: min-width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s ease, padding 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

mobile-navigation-bar.nav-pill a svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

mobile-navigation-bar.nav-pill a img {
  max-height: 20px;
  width: auto;
}

mobile-navigation-bar.nav-pill .fs-small {
  font-size: 9px;
  line-height: 1.1;
}

/* Close — hidden when collapsed */
.nav-pill__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0;
  min-width: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  color: #1a1a1a;
  flex-shrink: 0;
  transition: min-width 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

/* ---- EXPANDED ---- */

.nav-pill__checkbox:checked ~ mobile-navigation-bar.nav-pill .nav-pill__trigger {
  width: 0;
  min-width: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.nav-pill__checkbox:checked ~ mobile-navigation-bar.nav-pill > a,
.nav-pill__checkbox:checked ~ mobile-navigation-bar.nav-pill > div,
.nav-pill__checkbox:checked ~ mobile-navigation-bar.nav-pill > .header-account-popup {
  min-width: 48px;
  width: auto;
  padding: 10px 6px;
  opacity: 1;
  pointer-events: auto;
}

/* Stagger */
.nav-pill__checkbox:checked ~ mobile-navigation-bar.nav-pill > :nth-child(2) { transition-delay: 0s; }
.nav-pill__checkbox:checked ~ mobile-navigation-bar.nav-pill > :nth-child(3) { transition-delay: 0.03s; }
.nav-pill__checkbox:checked ~ mobile-navigation-bar.nav-pill > :nth-child(4) { transition-delay: 0.06s; }
.nav-pill__checkbox:checked ~ mobile-navigation-bar.nav-pill > :nth-child(5) { transition-delay: 0.09s; }
.nav-pill__checkbox:checked ~ mobile-navigation-bar.nav-pill > :nth-child(6) { transition-delay: 0.12s; }
.nav-pill__checkbox:checked ~ mobile-navigation-bar.nav-pill > :nth-child(7) { transition-delay: 0.15s; }
.nav-pill__checkbox:checked ~ mobile-navigation-bar.nav-pill > :nth-child(8) { transition-delay: 0.18s; }

.nav-pill__checkbox:checked ~ mobile-navigation-bar.nav-pill .nav-pill__close {
  min-width: 40px;
  padding: 10px 8px;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.2s;
}

/* Expanded — stretch to edges */
.nav-pill__checkbox:checked ~ mobile-navigation-bar.nav-pill.nav-pill--left,
.nav-pill__checkbox:checked ~ mobile-navigation-bar.nav-pill.nav-pill--right {
  left: 10px;
  right: 10px;
  padding: 4px 6px;
  border-radius: 28px;
  justify-content: space-evenly;
}

/* Tap feedback */
mobile-navigation-bar.nav-pill > a:active,
mobile-navigation-bar.nav-pill > div:active {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 12px;
}

/* Hide nav bar on desktop — pill and classic */
@media screen and (min-width: 768px) {
  mobile-navigation-bar,
  mobile-navigation-bar.nav-pill,
  .nav-pill__checkbox {
    display: none !important;
  }
}

/* Body padding — mobile only when nav bar is visible */
@media screen and (max-width: 767.98px) {
  .mobi-navigation-bar:has(mobile-navigation-bar:not(.nav-pill)) {
    padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
  }
  .mobi-navigation-bar:has(.nav-pill) {
    padding-bottom: 0;
  }
}
.cart_gift_unlocked .cart_bar_w span svg {
  right: 1.5rem;
}

.cart_gift_unlocked .primary-color {
  --color-primary: #14854e;
}

.gift-progress-bar--minicart {
  padding: 2.8rem 2.6rem 1.8rem;
}

.gift-progress-bar--minicart .cart_bar_w,
.gift-progress-bar--minicart .progress {
  overflow: visible;
}

.gift-progress-bar--minicart .gift-bar-message {
  font-size: 1.45rem;
  line-height: 1.45;
}

.gift-progress-bar--minicart .gift-bar-actions {
  margin-top: 1.2rem;
}

.gift-bar-redeem {
  appearance: none;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 0;
  color: #fff;
  display: inline-flex;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  padding: 0.9rem 1.2rem;
  text-transform: uppercase;
}

.gift-bar-redeem:hover {
  transform: translateY(-1px);
}

/* Botão de login do cupom de troca: mesmo VISUAL do "Resgatar brindes"
   (gift-bar-redeem), mas em largura cheia e centralizado (não inline). */
.troca-login-prompt .gift-bar-redeem {
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: center;
}

body .tingle-modal.gift-progress-modal .tingle-modal-box {
  border-radius: 0;
  max-width: min(92vw, 46rem);
  width: min(92vw, 46rem);
}

body .tingle-modal.gift-progress-modal .tingle-modal-box__content {
  min-width: 0;
  padding: 2.4rem;
}

.gift-progress-modal__title {
  font-size: 1.8rem;
  line-height: 1.25;
  margin: 0 0 1.6rem;
}

.gift-progress-modal__empty {
  margin: 0;
}

.gift-progress-modal__list {
  display: grid;
  gap: 1.2rem;
}

.gift-progress-modal__item {
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 0;
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 6.4rem minmax(0, 1fr) auto;
  padding: 1rem;
}

.gift-progress-modal__media {
  align-items: center;
  aspect-ratio: 1;
  background: var(--grey-color, #f6f6f6);
  border-radius: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.gift-progress-modal__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.gift-progress-modal__info {
  min-width: 0;
}

.gift-progress-modal__name {
  color: var(--color-heading);
  display: block;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  word-break: break-word;
}

.gift-progress-modal__meta {
  color: var(--color-muted, #777);
  font-size: 1.2rem;
  line-height: 1.3;
  margin-top: 0.4rem;
}

.gift-progress-modal__variant {
  background: var(--color-background, #fff);
  border: 1px solid var(--color-border);
  border-radius: 0;
  color: var(--color-heading);
  font: inherit;
  font-size: 1.2rem;
  height: 40px !important;
  margin-top: 0.8rem;
  padding: 0.6rem 0.9rem;
  width: fit-content;
}

select.gift-progress-modal__variant {
  appearance: auto;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}

.gift-progress-modal__add {
  border-radius: 0;
  min-height: 3.8rem;
  padding: 0.8rem 1.4rem;
  white-space: nowrap;
}

.gift-progress-modal__add[disabled] {
  cursor: default;
  opacity: 0.55;
}

#minicart-form .items > .cart-item {
  width: 100%;
}

#minicart-form .cart-item--gift-progress .minicart__product-info {
  flex: 1 1 auto;
  min-width: 0;
}

.cart-item__gift-badge,
.cart-item__gift-qty {
  align-items: center;
  background: rgba(var(--color-primary-rgb), 0.1);
  border-radius: 999px;
  color: var(--color-primary);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  min-height: 2.2rem;
  padding: 0.5rem 0.8rem;
  text-transform: uppercase;
}

.cart-item__gift-qty {
  background: var(--grey-color, #f6f6f6);
  color: var(--color-heading);
}

@media (max-width: 575.98px) {
  .gift-progress-modal__item {
    grid-template-columns: 5.6rem minmax(0, 1fr);
  }

  .gift-progress-modal__add {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
  }
}

/* Hide old coupon overlay button — coupon is now inline in cart footer */
.mini_cart_coupon {
  display: none !important;
}

#coupon.cart-footeraddon {
  display: none !important;
}

/* Hide "Ver carrinho" button */
.drawer-bottom .viewcart {
  display: none !important;
}

/* Minicart coupon inline */
.minicart-coupon-inline {
  margin-bottom: 1.6rem;
}

.minicart-coupon-inline__form {
  align-items: stretch;
  display: flex;
  gap: 8px;
  width: 100%;
}

.minicart-coupon-inline .discount_code {
  border-color: var(--color-border, var(--border-color, #d9d9d9));
  border-radius: 10px;
  flex: 1 1 auto;
  font-size: 1.3rem;
  height: 4.4rem;
  margin: 0;
  min-width: 0;
  padding-inline: 1.4rem;
}

.minicart-coupon-inline__button {
  border-radius: 10px;
  font-size: 1.2rem;
  min-width: 10.4rem;
  padding: 0 1.6rem;
  white-space: nowrap;
}

.minicart-coupon-inline .cart-discount__codes {
  margin-bottom: 0;
}

.minicart-coupon-inline .cart-discount__item {
  border: 1px solid var(--color-border, var(--border-color, #d9d9d9));
  border-radius: 0;
  padding: 0.4rem 0.7rem;
}

/* Cart item compact (minicart only) */
#minicart-form .cart-item {
  display: flex !important;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
}

#minicart-form .cart-item .minicart__product__image {
  flex-shrink: 0;
  align-self: flex-start;
  height: var(--custom-width);
}

#minicart-form .cart-item .minicart__product__image a {
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;
}

#minicart-form .cart-item .minicart__product__image a img {
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  width: 100%;
}

#minicart-form .cart-item .minicart__product-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

#minicart-form .cart-item .minicart__header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

#minicart-form .cart-item .minicart__header-left {
  flex: 1;
  min-width: 0;
}

#minicart-form .cart-item .minicart__product-name {
  font-size: 1.3rem;
  line-height: 1.3;
  min-width: 0;
}

#minicart-form .cart-item .minicart__product-name a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

#minicart-form .cart-item .minicart__item-prices {
  font-size: 1.5rem;
  white-space: nowrap;
  flex-shrink: 0;
}

#minicart-form .cart-item .minicart__item-variant {
  font-size: 1.15rem;
}

/* Quantity + edit/trash row: below variant, inside info column */
#minicart-form .cart-item .minicart__actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

#minicart-form .cart-item .minicart__item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Hide old layout elements */
#minicart-form .cart-item .minicart__bottom {
  display: none !important;
}

#minicart-form .cart-item .minicart__actions {
  display: none !important;
}

@media screen and (max-width: 749px) {
  #minicart-form .cart-item {
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  #minicart-form .cart-item .minicart__product__image {
    --custom-width: 7rem !important;
    align-self: flex-start;
    height: var(--custom-width);
  }

  #minicart-form .cart-item .minicart__product-name {
    font-size: 1.2rem;
  }

  .main-product {
    column-gap: 2px !important;
    row-gap: 12px !important;
  }

  section[class*="main-product"],
  .sec__featured-product {
    --section-pt: 0 !important;
  }

  .product-detail__media {
    width: 100vw !important;
    max-width: 100vw !important;
    flex: 0 0 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  .product-detail__information {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media screen and (max-width: 767.98px) {
  .product-detail__media media-gallery .swiper-pagination.product-media-pagination--solid {
    position: absolute;
    right: auto;
    bottom: 16px;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: fit-content;
    min-width: fit-content;
    max-width: calc(100% - 32px);
    height: 24px;
    margin: 0;
    padding: 0;
    gap: 0;
    overflow: hidden;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.29);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    box-shadow: none;
  }

  .product-detail__media media-gallery .swiper-pagination.product-media-pagination--solid.swiper-pagination-bullets {
    display: flex;
  }

  .product-detail__media media-gallery .swiper-pagination.product-media-pagination--solid .swiper-pagination-bullet {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0 !important;
    padding: 0;
    opacity: 1;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
  }

  .product-detail__media media-gallery .swiper-pagination.product-media-pagination--solid .swiper-pagination-bullet::after {
    display: none;
  }

  .product-detail__media media-gallery .swiper-pagination.product-media-pagination--solid .swiper-pagination-bullet::before {
    content: "";
    position: static;
    display: block;
    width: 6px;
    height: 6px;
    opacity: 0.45;
    transform: none;
    transition: 0.15s ease-in-out;
    background: rgb(35, 55, 44);
    border: 0;
    border-radius: 50%;
    box-shadow: none;
  }

  .product-detail__media media-gallery .swiper-pagination.product-media-pagination--solid .swiper-pagination-bullet-active::before {
    opacity: 1;
    transform: scale(1.15);
  }
}

.product-detail__meta li {
  display: flex;
  align-items: baseline;
  gap: 0;
}

.product-detail__meta-label {
  margin-right: 0;
  flex: 0 0 auto;
}

.product-detail__meta-value,
.product__sku.product-detail__meta-value {
  margin-left: 0;
}

/* Minicart spacing overrides */
.minicart__wrapper > .minicart__header {
  padding-top: 1rem !important;
  padding-bottom: 0.5rem !important;
}

.minicart-form {
  padding-top: 0.5rem !important;
}

.minicart-body {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

/* Minicart Bottom / Cart minicart footer */
.drawer-bottom {
  padding: 1rem !important;
}

/* Perf: skip rendering/layout/paint of off-screen sections to cut main-thread
   work on load (helps INP on low-end devices). On-screen sections render
   normally; only off-screen ones are skipped. Scoped to mobile/tablet to avoid
   clipping desktop hover popups/tooltips. First section (LCP / above-the-fold)
   is excluded so it is never deferred. `contain-intrinsic-size: auto` remembers
   each section's real height after first render to keep scroll stable. */
@media (max-width: 1024px) {
  #MainContent > .shopify-section:not(:first-child) {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
  }
  /* Exceção: a seção da collection contém o "Ordenar por" (bottom-sheet
     position:fixed) e o drawer de filtros. O containment do content-visibility
     torna a seção o containing block do fixed, jogando o bottom-sheet para o
     fim da seção (fora da tela). Mantemos essa seção sem containment. */
  #MainContent > .shopify-section:has(.sec__collection-main) {
    content-visibility: visible;
    contain-intrinsic-size: none;
  }
}

/* ---- Linha de carrinho aninhada (personalização atrelada à camisa) ----
   O Glozin não é Dawn/Horizon, então renderizamos o aninhamento via CSS:
   a linha filha (item.parent_relationship) é recuada/marcada sob a linha pai.
   IMPORTANTE: indentação por PADDING + box-sizing:border-box (NUNCA margin-left
   num item de width:100% — isso estourava a largura e cortava preço/quantidade).
   Item compacto: o que importa é chegar identificado no pedido. */
/* Minicart (item é um flex div) */
.cart-item--child:not(tr) {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding-left: 16px;
  border-left: 2px solid rgba(8, 91, 71, .35);
}
/* permite os filhos flex encolherem em vez de transbordar */
.cart-item--child:not(tr),
.cart-item--child:not(tr) .minicart__product-info,
.cart-item--child:not(tr) .minicart__header-left { min-width: 0; }
.cart-item--child:not(tr)::before {
  content: "\21B3"; /* ↳ */
  position: absolute;
  left: 3px;
  top: 12px;
  color: #9aa0a6;
  font-size: 12px;
  line-height: 1;
}
/* imagem e textos menores (item compacto) */
.cart-item--child:not(tr) .minicart__product__image { --custom-width: 4.5rem; }
.cart-item--child:not(tr) .minicart__product-name { font-size: 13px; }
.cart-item--child:not(tr) .product-option { font-size: 11.5px; line-height: 1.35; }
.cart-item--child:not(tr) .product-option-property { word-break: break-word; overflow-wrap: anywhere; }

/* Página de carrinho (item é um <tr>) */
tr.cart-item--child td { background: rgba(8, 91, 71, .04); }
tr.cart-item--child td:first-child {
  box-shadow: inset 4px 0 0 rgba(8, 91, 71, .5);
}
tr.cart-item--child .product-option-property { word-break: break-word; overflow-wrap: anywhere; }

/* Miniatura Variant Options (tag "Miniatura" -> variant option rendered as custom thumbnails) */
.ident-size-block--miniatura {
  display: flex;
  flex-wrap: wrap;
  gap: 8px !important;
}

.miniatura-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 91px;
  cursor: pointer;
  border: 2px solid #d9d9d9;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.2s ease;
}

.miniatura-swatch:hover {
  border-color: #999;
}

input:checked + .miniatura-swatch {
  border-color: #311F07;
  box-shadow: 0 0 0 1px #311F07;
}

input.option-disabled + .miniatura-swatch {
  opacity: 0.4;
  pointer-events: none;
}

.miniatura-swatch__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.miniatura-swatch__image--empty {
  background-color: #f0f0f0;
}

.miniatura-swatch__label {
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 2px;
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (max-width: 750px) {
  .miniatura-swatch {
    width: 80px;
  }

  .miniatura-swatch__label {
    font-size: 11px;
  }
}

/* ============================================================
   AJUSTES 14-07
   ============================================================ */

/* ---- Combined listing (grupo de variantes / brk-cl) ----
   Transforma o grid "stacked" em um carrossel horizontal: os swatches
   ficam numa única linha e deslizam ao chegar na borda (swipe no mobile,
   barra de rolagem no desktop). Especificidade .brk-cl .brk-cl__* vence
   a do CSS do app (classe única) independente da ordem de carregamento. */
.brk-cl .brk-cl__list {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 6px;
}
.brk-cl .brk-cl__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.brk-cl .brk-cl__list::-webkit-scrollbar {
  height: 4px;
}
.brk-cl .brk-cl__list::-webkit-scrollbar-track {
  background: transparent;
}
.brk-cl .brk-cl__list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

/* ---- Pills de variação "Tamanho" em uma única linha ----
   Quando o option name contém "Tamanho" (fieldset .product-form__input_size),
   tenta encaixar todas as pills na mesma linha reduzindo o padding e
   distribuindo o espaço. Se não couber, ainda quebra (flex-wrap: wrap). */
.product-form__input_size {
  flex-wrap: wrap;
  gap: 0.6rem;
}
.product-form__input_size .product__item-option {
  flex: 0 1 auto; /* desktop: largura natural, sem esticar/deformar */
  min-width: 6.4rem; /* caixa retangular (mais larga que alta), nao um circulo */
  padding-inline: 1.8rem;
  justify-content: center;
  text-align: center;
  border-radius: 10px; /* cantos arredondados moderados, no lugar do rounded-3 (3px) */
}
/* Tamanho selecionado: marrom no lugar do preto padrao do tema. */
fieldset.product-form__input_size
  input[type="radio"]:not(.option-disabled):checked
  + label:not(.product__color-swatch) {
  background-color: #8C5A3C;
  border-color: #8C5A3C;
  color: #FFFFFF;
}
/* Hover nas pills de tamanho nao selecionadas: tom claro do marrom, no lugar
   do preto do .btn-hover. */
fieldset.product-form__input_size
  input[type="radio"]:not(.option-disabled):not(:checked)
  + label:not(.product__color-swatch):hover {
  background: #F1E6DF;
  border-color: #8C5A3C;
  color: #8C5A3C;
}
/* No mobile as pills preenchem a linha para caberem todas de uma vez */
@media (max-width: 749.98px) {
  .product-form__input_size .product__item-option {
    flex: 1 1 auto;
    padding-inline: 0.6rem;
  }
}

/* ---- Product cards (vitrines): badges menores no canto sup. esquerdo ---- */
.product-item .product__badges {
  top: 6px;
  left: 6px;
}
.product-item .product__badges-inner {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.25;
}
.product-item .product__badges-inner svg {
  width: 11px;
  height: 11px;
}

/* Etiqueta "Fora de estoque". O !important e para vencer o raio de 6px que a
   regra acima aplica (tambem com !important) a todas as etiquetas do card. */
.product__badges-sold-out {
  border-radius: 5px !important;
}

/* Botao "Fora de estoque" do card: branco solido com borda, no lugar do branco
   translucido que deixava a foto do produto aparecer atras. O tema so baixa a
   opacidade de qualquer botao desabilitado (button[disabled] no critical.css),
   entao devolvemos a opacidade e pintamos o fundo e a borda. */
.product-item .product__add-cart[disabled] {
  opacity: 1;
  --btn-bg: #FFFFFF;
  --btn-color: #806B5F;
  --btn-border-color: #806B5F;
  background: #FFFFFF;
  color: #806B5F;
  border: 1px dashed #806B5F;
  border-radius: 5px;
}
[dir="rtl"] .product-item .product__badges {
  left: auto;
  right: 6px;
}

/* ---- Product cards (vitrines): preços ----
   1ª linha: compare-at-price + price lado a lado (COMPARE | PRICE)
   2ª linha: parcelamento (quando houver), abaixo. */
.product-item .card-product-price {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
}
.product-item .card-product-price .price-regular {
  white-space: nowrap;
  line-height: 1.15;
  margin: 0;
}
.product-item .card-product-price .price {
  font-size: 1.8rem;
  line-height: 1.15;
}
.product-item .card-product-price .compare-price {
  font-size: 1.2rem;
}
/* parcelamento em linha própria, abaixo do compare | price */
.product-item .installment-payment {
  flex: 0 0 100%;
  width: 100%;
  margin: 2px 0 0;
}
.product-item .installment-payment,
.product-item .installment-payment p {
  font-size: 1.1rem;
  line-height: 1.15;
}
.product-item .card-product-price .unit-price {
  flex: 0 0 100%;
}

/* ---- PDP mobile: sale badge no canto superior esquerdo da imagem ----
   No mobile a sale badge (.sale_badge--inside-price) sai da linha de preço
   e vai para o topo-esquerdo da imagem do produto, como nas vitrines.
   Neutralizamos os ancestrais posicionados da coluna de info para que a
   badge ancore em .main-product (cujo 1º filho empilhado é a imagem). */
@media (max-width: 767.98px) {
  .main-product {
    position: relative;
  }
  .main-product .product-detail__information,
  .main-product .product-detail__information .sticky,
  .product-detail__information .product-detail__price,
  .product-detail__information .card-product-price {
    position: static;
  }
  .product-detail__information .card-product-price .sale_badge--inside-price {
    position: absolute;
    top: 8px;
    left: 8px;
    margin: 0 !important;
    z-index: 5;
  }
}

/* ---- Sticky add to cart: sem padding + container full width ---- */
sticky-add-cart {
  padding: 0 !important;
}

/* ============================================================
   Mobile media layout (independente do Desktop layout)
   Controlado por <media-gallery data-mobile-media="..."> e aplicado só ao
   DOM grid/stack (quando o Desktop layout é Grid/Stack). O desktop não muda.
   ============================================================ */
.media-grid-wrapper {
  position: relative;
}
@media (max-width: 767.98px) {
  /* Carrossel: uma imagem por vez, com snap (os solid dots são gerados pelo
     media-mobile-dots.js e estilizados pelo bloco .product-media-pagination--solid) */
  .product-detail__media media-gallery[data-mobile-media="carousel"] .grid_scroll {
    --col-number: 1 !important; /* vence o --col-number inline (1.2) */
    scroll-snap-type: x mandatory;
  }
  .product-detail__media media-gallery[data-mobile-media="carousel"] .grid_scroll > * {
    scroll-snap-align: center;
    /* Todas as células assumem a razão da 1ª imagem (--gallery-ratio) em vez da
       razão de cada imagem. Assim uma foto retrato não estica a linha do grid e
       não gera faixa branca nas quadradas — o sale badge (topo) e os dots (base)
       voltam a ficar sobre a imagem. object-fit: contain segue valendo (sem corte);
       imagens de razão diferente só ganham faixa lateral dentro da célula. */
    --aspect-ratio: var(--gallery-ratio, 1) !important;
  }
  /* Grid 1 coluna (scroll horizontal, 1 por vez, sem dots) */
  .product-detail__media media-gallery[data-mobile-media="grid_1_column"] .grid_scroll {
    --col-number: 1 !important;
  }
  /* Grid 2 colunas */
  .product-detail__media media-gallery[data-mobile-media="grid_2_column"] .grid_scroll {
    --col-number: 2 !important;
  }
  /* Empilhado: imagens uma embaixo da outra (rolagem vertical da página) */
  .product-detail__media media-gallery[data-mobile-media="stack"] .grid_scroll {
    grid-auto-flow: row !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: auto !important;
    overflow-x: visible;
    overflow-y: visible;
  }

  /* Layout "Thumbnail" usa Swiper. Cada slide mantém a SUA razão
     (product_image_ratio = adapt) e o Swiper roda com autoHeight (theme.js), então
     o container acompanha a mídia ativa — sem faixa branca nas mídias mais baixas
     e os solid dots ficam colados na base da imagem. */
}

/* Galeria do produto nos layouts grid/stack/carrossel (.grid_scroll): imagem
   sem corte de largura. O tema força object-fit:cover em todo container com
   --aspect-ratio (regra global via :where(), especificidade 0); aqui trocamos
   para contain só nesse DOM. O layout de miniaturas (swiper) NÃO usa
   .grid_scroll, então continua como está (cover). Vale desktop e mobile. */
.product-detail__media media-gallery .grid_scroll :is(img, picture) {
  object-fit: contain;
}

/* Vídeos na galeria (local/externo): a MOLDURA (render) assume a altura da 1ª
   imagem (--gallery-ratio) em vez da razão própria do vídeo — assim um vídeo 9:16
   não estica o carrossel. As IMAGENS seguem com a própria razão (adapt). O vídeo
   aparece INTEIRO (object-fit: contain, sem corte) na altura da 1ª imagem, ficando
   mais estreito e centralizado. Vale mobile e desktop. */
.product-detail__media slide-with-thumbs .media-main-swiper .media-gallery__local-video,
.product-detail__media slide-with-thumbs .media-main-swiper .media-gallery__external-video {
  --aspect-ratio: var(--gallery-ratio, 1) !important;
  aspect-ratio: var(--gallery-ratio, 1) !important;
}
.product-detail__media slide-with-thumbs .media-main-swiper .media-gallery__local-video video,
.product-detail__media slide-with-thumbs .media-main-swiper .media-gallery__external-video iframe {
  object-fit: contain;
}

/* ============================================================
   Layout Thumbnail (left/bottom) no DESKTOP
   ============================================================ */
@media (min-width: 768px) {
  /* Imagem principal NÃO corta e cada slide usa a SUA própria razão
     (product_image_ratio = adapt). Com autoHeight no Swiper (theme.js), o container
     acompanha a mídia ativa — sem faixa branca e sem corte. */
  .product-detail__media slide-with-thumbs .media-main-swiper .swiper-wrapper {
    align-items: flex-start;
  }
  .product-detail__media slide-with-thumbs .media-main-swiper .swiper-slide,
  .product-detail__media slide-with-thumbs .media-main-swiper .media-gallery__image {
    height: auto !important;
    aspect-ratio: var(--aspect-ratio, var(--gallery-ratio, 1));
  }
  .product-detail__media slide-with-thumbs .media-main-swiper .media-gallery__image img {
    object-fit: contain !important;
    height: 100% !important;
  }

  /* Tamanho das miniaturas (Product information > Media > "Tamanho das
     miniaturas"). No thumbnail_left o tamanho = largura da coluna; escalamos ela
     e a largura da imagem principal por --thumb-scale. (No thumbnail_bottom o
     tamanho é controlado pelo slides-per-view no theme.js, também via escala.) */
  .product-detail__media .thumbnail_left .media-thumb-swiper {
    width: calc(5rem * var(--thumb-scale, 1));
  }
  .product-detail__media .thumbnail_left .media-main-swiper {
    width: calc(100% - 1rem - 5rem * var(--thumb-scale, 1));
  }

  /* Setas de navegar entre as fotos: estilo sútil (sem fundo branco/borda verde).
     Trocamos o ícone preenchido (que ficava grosso ao ampliar) por um chevron
     desenhado com borda — traçado fino e do tamanho que quisermos.
     O clique no lightbox segue pelo próprio <a> da imagem. */
  .product-detail__media .swiper-arrow {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--color-heading);
    opacity: 0.4;
    transition: opacity 0.15s ease;
  }
  .product-detail__media .swiper-arrow svg {
    display: none;
  }
  .product-detail__media .swiper-arrow::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
  }
  .product-detail__media .swiper-button-prev::before {
    transform: rotate(135deg);
    margin-left: 5px;
  }
  .product-detail__media .swiper-button-next::before {
    transform: rotate(-45deg);
    margin-right: 5px;
  }
  .product-detail__media .swiper-arrow:hover {
    opacity: 0.8;
    background: transparent !important;
  }
}

/* Remove o botão "expandir" (lightbox) sobre a imagem. O hover/zoom continua e o
   clique na imagem ainda abre o lightbox. */
.product-detail__media .zoom_light_box {
  display: none !important;
}

/* ============================================================
   Mega menu (novo layout em colunas). Só no desktop (≥1025px), onde o mega
   vira colunas estáticas. Uma coluna por categoria (grid nativo do tema) —
   configure o nº de colunas do bloco = nº de categorias do item. */
@media (min-width: 1025px) {
  /* Sublinha os links de NÍVEL 2 que são diretos (sem submenu-3). */
  .submenu-horizontal .menu-lv2-direct {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }

  /* Cada categoria alinhada ao topo da sua coluna (sem esticar). */
  .submenu-horizontal .menu-list .subchildmenu.grid {
    align-items: start;
  }

  /* Título da coluna (categoria de nível-2): peso maior para destacar do
     resto dos subitens, como na referência. */
  .submenu-horizontal .menu-list .subchildmenu > li.menu-link.level-1 > menu-item > a {
    font-weight: 600;
  }

  /* Fundo do mega menu igual ao do header. */
  .submenu.submenu-horizontal {
    background: #FFFFFF;
  }

  /* Cada lista de subitens (nível-3) sem fundo próprio (transparente). */
  .submenu-horizontal .sub-children-menu,
  .submenu-horizontal .sub-children-menu .gradient {
    background: transparent;
  }
}

/* Botão de estado ativo (ex.: aba selecionada em Novidades, seletor de
   variante) na cor marrom da Brk Store, no lugar do verde herdado do tema da
   BRK Agro. */
.btn-active.active {
  background-color: #8C5A3C;
  border-color: #8C5A3C;
  color: #FFFFFF;
  border-radius: 5px;
}

/* Paleta dos botoes da Brk Store: marrom #8C5A3C e branco trocando de lugar
   no hover. Cheio (fundo marrom, texto branco) vira branco com texto marrom;
   outline (fundo branco, texto e borda marrom) vira marrom com texto branco.

   Redefinimos as variaveis no proprio botao em vez de escrever regras de
   :hover: as regras de hover moram em theme.css, que carrega depois deste
   arquivo, e leem --btn-primary-hover-*. Como a variavel mais proxima vence,
   isto cobre repouso e hover de uma vez. */

/* Botoes cheios (inclui a aba selecionada, que tambem tem .btn-outline: a
   especificidade maior de .btn-active.active faz este bloco vencer nela). */
.btn-primary,
.btn-active.active,
.shopify-payment-button__button--unbranded,
.shopify-payment-button__more-options,
.shopify-challenge__button {
  --btn-primary-bg-color: #8C5A3C;
  --btn-primary-bg-graident-color: #8C5A3C;
  --btn-primary-color: #FFFFFF;
  --btn-primary-hover-bg-color: #FFFFFF;
  --btn-primary-hover-bg-color-graident: #FFFFFF;
  --btn-primary-hover-color: #8C5A3C;
}

/* Sem isto a borda sumiria no hover: o tema aponta --btn-border-color para a
   cor de fundo do hover, que aqui e branca. O !important e porque a regra do
   theme.css tem a mesma especificidade e carrega depois. */
.btn-primary:hover,
.btn-active.active:hover,
.shopify-payment-button__button--unbranded:hover,
.shopify-payment-button__more-options:hover,
.shopify-challenge__button:hover {
  --btn-border-color: #8C5A3C !important;
}

/* Botoes outline: caminho inverso, preenchem de marrom no hover. */
.btn-outline {
  --btn-color: #8C5A3C;
  --btn-border-color: #8C5A3C;
  --btn-outline-color: #8C5A3C;
  --btn-outline-border-color: #8C5A3C;
  --btn-primary-hover-bg-color: #8C5A3C;
  --btn-primary-hover-bg-color-graident: #8C5A3C;
  --btn-primary-hover-color: #FFFFFF;
  border-radius: 5px;
}

/* Cantos inferiores arredondados nos menus que abrem (mega menu, dropdown e
   submenus aninhados). Só no desktop: abaixo de 1025px eles viram gaveta de
   tela cheia, onde o raio não faz sentido. */
@media screen and (min-width: 1025px) {
  .submenu,
  .sub-children-menu {
    border-radius: 0 0 5px 5px;
  }

  /* O fundo pode vir de um filho (.gradient); sem isto o canto fica quadrado. */
  .submenu > .gradient,
  .submenu > .sec__inner,
  .sub-children-menu > .gradient {
    border-radius: inherit;
  }
}

/* Cantos inferiores arredondados no painel que abre a partir do cabeçalho,
   tanto no mega-menu (Novidades, Homens, Mulheres) quanto no dropdown simples.
   overflow: hidden impede que o fundo dos filhos vaze sobre o raio. */
.level0 > menu-item > .submenu,
.level0 .submenu.submenu-horizontal {
  border-radius: 0 0 5px 5px;
  overflow: hidden;
}

/* Botão "Ver tudo" das seções de coleção: marrom escuro, sem reagir ao hover.
   O seletor do hover usa a tag (a.btn_view-all) so para ganhar de
   .btn-link:hover do theme.css, que carrega depois deste arquivo. */
.btn_view-all,
a.btn_view-all:hover {
  font-size: 12px;
  font-weight: 600;
  color: #311F07;
  text-transform: uppercase;
  text-decoration: none;
}

/* Sem a seta que vinha depois do texto (icon-view-all). Escondida no CSS
   porque o mesmo markup se repete em uma duzia de sections do tema, que sao
   sobrescritas nos updates da Shopify. */
.btn_view-all svg {
  display: none;
}

/* Card de produto: cantos arredondados na área da imagem.
   overflow garante que a foto acompanhe o raio. */
.product-item .product-item__media--ratio {
  border-radius: 10px;
  overflow: hidden;
}

/* Preserva os casos especiais que usam a mesma classe e seriam
   sobrescritos pela regra acima (especificidade menor no tema). */
sticky-add-cart .product-item__media--ratio {
  border-radius: 50%;
}

/* Títulos de seção da home (Novidades, Botas e Botinas, Bonés...). */
.section__header-heading {
  font-size: 25px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0;
  color: #111;
}

/* Badges do card de produto.
   O container so posiciona; a aparencia fica em .product__badges-inner, que
   e quem realmente desenha cada etiqueta (o tema pinta com var(--badges-bg),
   que cobriria qualquer fundo posto no container). */
.product__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  background: none;
  padding: 0;
}


/* Itens de topo da barra do cabeçalho (OFERTAS ESPECIAIS, Novidades,
   Homens, Mulheres, Infantil, Personalize). Mira só no nível 0 para não
   afetar .heading-style, usada em títulos por todo o tema. */
.level0 > menu-item > a,
.level0 > menu-item > a span,
.level0 > a {
  font-weight: 600 !important;
  color: #311F07 !important;
}

/* ------------------------------------------------------------------
   Abertura do mega-menu com clip-path (desktop).
   O tema abre o submenu via classe .visible (JS), entao o atraso ao
   fechar e a troca entre itens continuam por conta dele. Aqui so trocamos
   a animacao: o painel e revelado de cima para baixo e o conteudo desce
   junto com fade. O transform do submenu NAO e tocado, pois o tema o usa
   para posicionar o painel.
   ------------------------------------------------------------------ */
@media (min-width: 1025px) {
  .menu-parent__horizontal > .submenu:not(.submenu-vertical) {
    clip-path: inset(0 0 100% 0);
    transition:
      clip-path 0.36s cubic-bezier(0.33, 1, 0.68, 1),
      opacity 0.2s ease,
      visibility 0s linear 0.36s;
  }

  .menu-parent__horizontal.visible > .submenu:not(.submenu-vertical),
  .menu-parent__horizontal:focus-within > .submenu:not(.submenu-vertical) {
    clip-path: inset(0 0 0 0);
    transition:
      clip-path 0.36s cubic-bezier(0.33, 1, 0.68, 1),
      opacity 0.2s ease,
      visibility 0s linear 0s;
  }

  /* Conteudo interno: desce e aparece junto com a revelacao. */
  .menu-parent__horizontal > .submenu:not(.submenu-vertical) > * {
    opacity: 0;
    transform: translateY(-20px);
    transition:
      opacity 0.27s ease,
      transform 0.36s cubic-bezier(0.33, 1, 0.68, 1);
  }

  .menu-parent__horizontal.visible > .submenu:not(.submenu-vertical) > *,
  .menu-parent__horizontal:focus-within > .submenu:not(.submenu-vertical) > * {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respeita quem pediu menos animacao no sistema. */
@media (prefers-reduced-motion: reduce) {
  .menu-parent__horizontal > .submenu,
  .menu-parent__horizontal > .submenu > * {
    transition-duration: 0.01ms !important;
  }
}

/* Linha separadora sob o cabeçalho: vinha de --color-border (#311F07) e
   aparecia como um traço escuro entre o header e o mega-menu. */
.header.border-bottom {
  border-bottom-color: #FFFFFF;
}

}

/* Popup de conta ancorado no canto superior direito, abaixo do cabeçalho.
   O <dialog> vive no shadow DOM do componente da Shopify, mas ele expõe
   part="dialog", que permite posicioná-lo de fora. Necessário porque, no
   top layer, o dialog cai no centro da tela quando o posicionamento do
   componente nao se aplica. */
.header-account-popup shopify-account::part(dialog) {
  position: fixed;
  inset-block-start: calc(var(--header-height, 60px) + 12px);
  inset-inline-end: 20px;
  inset-block-end: auto;
  inset-inline-start: auto;
  margin: 0;
  width: 360px;
  max-width: calc(100vw - 40px);
}

@media (max-width: 750px) {
  .header-account-popup shopify-account::part(dialog) {
    inset-block-start: auto;
    inset-block-end: 0;
    inset-inline: 0;
    width: 100vw;
    max-width: 100vw;
  }
}

/* Popup de conta: painel ancorado ao ícone, alinhado à direita do header. */
.header-account-popup {
  position: relative;
}

/* Menu principal: remove o sublinhado animado que aparecia no hover dos itens
   de primeiro nivel (Ofertas Especiais, Novidades, Homens, Mulheres...). A
   linha vem de navigation.css (.horizontal-list .level0 > menu-item > a:after),
   que so existe no desktop; a mudanca de cor no hover continua. Precisa de
   !important porque navigation.css carrega depois deste arquivo. */
@media screen and (min-width: 1025px) {
  .horizontal-list .level0 > menu-item > a:after {
    display: none !important;
  }
}

/* "Ordenar por": painel e lista copiando o modal de referencia — cartao branco
   com raio de 14px e sombra difusa, linhas com recuo a esquerda para o tique
   do item selecionado e realce cinza claro no hover. O padding do cartao
   (py-20 px-25 no markup) vira 8px, porque aqui quem respira sao as linhas. */
.toolbar-sorter .select-custom__content {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 8px;
  min-width: 198px;
}

.facet-filters__sort filter-sort {
  position: relative;
  display: block;
  padding: 9px 16px 9px 38px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.5;
  /* A cor do texto tambem entra na transicao: sem ela o branco aparecia de
     uma vez enquanto o fundo ainda estava entrando.

     A saida e mais curta que a entrada de proposito: com o mesmo tempo nos
     dois lados, ao correr o mouse pela lista a linha anterior ainda estava
     desbotando quando a seguinte acendia, e dava para ver duas marcadas. */
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  transition:
    background-color 0.09s var(--hover-transition-timing),
    color 0.09s var(--hover-transition-timing);
}

.facet-filters__sort filter-sort:hover {
  transition:
    background-color var(--hover-transition-duration) var(--hover-transition-timing),
    color var(--hover-transition-duration) var(--hover-transition-timing);
}

@media (hover: hover) {
  .facet-filters__sort filter-sort:hover {
    background-color: #8C5A3C;
    color: #FFFFFF;
  }
}

/* A pilula "Ordenar por:" com o mesmo marrom no hover. O seletor inclui a tag
   (select-sorter) so para ganhar da regra equivalente do collection-page.css,
   que carrega depois e pinta com --chip-green. */
@media (hover: hover) {
  .toolbar-products .toolbar-sorter select-sorter.select-selected:hover {
    background: #8C5A3C;
    border-color: #8C5A3C;
    color: #FFFFFF;
  }
}
/* Telas de toque: o :hover fica "preso" depois do toque (o botao continuava
   marrom com o menu ja fechado), entao la o hover nao pinta nada. */
@media (hover: none) {
  .toolbar-products .toolbar-sorter select-sorter.select-selected:hover {
    background: transparent;
    border-color: var(--chip-green, #311F07);
    color: var(--chip-green, #311F07);
  }
}

/* Tique do item selecionado, desenhado com duas bordas em L giradas. */
.facet-filters__sort filter-sort[selected]::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 11px;
  height: 6px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(-45deg);
}


/* CTA do WhatsApp com a forma do botao de compra (bloco, padding 15px, raio
   10px). Em repouso fica outline no verde do WhatsApp; no hover preenche.
   O tema nao trazia CSS para esta classe — o link saia solto, em texto. */
.product-detail__whatsapp-cta .whatsapp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  padding: 15px;
  border: 1.5px solid #25d366;
  border-radius: 10px;
  background: #ffffff;
  color: #128c4a;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 0.25s ease-out,
    border-color 0.25s ease-out,
    color 0.25s ease-out;
}

.product-detail__whatsapp-cta .whatsapp-cta:hover {
  background: #25d366;
  border-color: #25d366;
  color: #ffffff;
}

/* O icone acompanha a cor do texto nos dois estados. */
.product-detail__whatsapp-cta .whatsapp-cta__icon {
  display: inline-flex;
  flex-shrink: 0;
}

.product-detail__whatsapp-cta .whatsapp-cta__icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Separador "Ou" entre o botao de compra e o do WhatsApp: a palavra no meio
   de duas hairlines. */
.product-detail__whatsapp-cta .whatsapp-cta__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  font-size: 12px;
  color: #888888;
}

.product-detail__whatsapp-cta .whatsapp-cta__divider::before,
.product-detail__whatsapp-cta .whatsapp-cta__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e5e5;
}

/* Tamanho esgotado: o risco diagonal do tema usa #ddd, que some no cinza do
   proprio botao. Aqui ele fica visivel, como no modelo. */
.product-form__input input.option-disabled + .product__item-option::after {
  --color-border: #a8a8a8;
}

.product-form__input input.option-disabled + .product__item-option {
  color: #9a9a9a;
  border-color: #e0e0e0;
}

/* Título do produto: fs-26 é usado só aqui (utilitário genérico do tema,
   mas sem outro consumidor no momento), então sobe direto para 3rem.
   !important porque um app instalado na loja injeta um <style> com id da
   seção (#shopify-section-... .product-detail__title { font-size: 2.29rem }),
   fora do nosso controle, que senão venceria pela especificidade do ID. */
.product-detail__title.fs-26 {
  font-size: clamp(3rem, 5.6vw, 3.5rem) !important;
}

/* Espaço abaixo do título do produto: mb-10 (1rem/10px) é genérico, então
   sobe só aqui. */
.product-detail__title.mb-10 {
  margin-bottom: 1rem;
  font-family: Inter, sans-serif;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

/* "Esse produto possui Envio Imediato / prazo de produção": estava
   desalinhado a esquerda e sem nenhuma caixa ao redor. Vira uma caixa com a
   mesma cara das outras de beneficio (fundo, borda, raio), centralizada.

   #prazo_disponibilidade nasce com display:contents (definido no <style>
   proprio do bloco), que remove a caixa do elemento — padding, fundo, borda
   e justify-content nele nao fariam nada. Por isso viramos o display para
   flex aqui, e por especificidade (classe do pai + id, contra so o id do
   estilo do bloco) ganhamos sem precisar de !important. */
.delivery-return.vertical > div {
  justify-content: center;
}

.delivery-availability #prazo_disponibilidade {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 0;
  padding: 14px 16px;
  background: #f7f7f7;
  border: 1px solid #eeeeee;
  border-radius: 8px;
  text-align: center;
}

.delivery-availability #prazo_disponibilidade svg {
  width: 18px;
  height: 18px;
}

/* O fill fica no <path>, nao no <svg> (fill="black" e atributo do path).
   Uma regra de CSS, mesmo sem !important, ja vence o atributo de
   apresentacao — so precisa mirar o elemento certo. */
.delivery-availability #prazo_disponibilidade svg path {
  fill: #8c5a3c;
}

.delivery-availability #prazo_disponibilidade span {
  color: #111111;
  font-size: 13px;
}

.delivery-availability #prazo_disponibilidade span::after {
  color: #888888;
}

/* ---- Guia de tamanhos (snippet size-guide-brk) ---- */
.brk-sg {
  display: flex;
  gap: 2.4rem;
  align-items: flex-start;
}
.brk-sg__table-wrap {
  flex: 1 1 45%;
  min-width: 0;
  border-radius: 1.6rem;
  overflow: hidden;
}
.brk-sg__head {
  background: #8C5A3C;
  color: #FFFFFF;
  text-align: center;
  padding: 1.6rem 1rem 1.2rem;
}
.brk-sg__title {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.brk-sg__sub {
  margin: 0.8rem 0 0;
  font-size: 1.1rem;
  font-style: italic;
}
.brk-sg__table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 1.4rem;
}
.brk-sg__table thead th {
  background: #2B2B2B;
  color: #FFFFFF;
  padding: 1.6rem 0.6rem;
  font-size: 1.4rem;
  font-weight: 600;
  border: 1px solid #FFFFFF;
}
.brk-sg__table tbody th,
.brk-sg__table tbody td {
  background: #E9E1DB;
  padding: 1.1rem 0.6rem;
  border: 1px solid #FFFFFF;
  font-weight: 500;
}
.brk-sg__table tbody th {
  font-weight: 600;
}
.brk-sg__image {
  flex: 1 1 55%;
}
.brk-sg__image img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 749.98px) {
  .brk-sg {
    flex-direction: column;
  }
  .brk-sg__image {
    width: 70%;
    margin-inline: auto;
  }
}

/* ---- Barra "Tabela de Medidas" acima do botao de compra ---- */
.brk-sg-bar {
  gap: 1.2rem;
  margin-bottom: 2rem;
  padding: 1.6rem 1.8rem;
  background: #F6F6F6;
  border-radius: 1.2rem;
  color: #111111;
}
.brk-sg-bar__left {
  gap: 1.2rem;
}
.brk-sg-bar__title {
  font-size: 1.5rem;
  font-weight: 600;
}
.brk-sg-bar__link {
  font-size: 1.4rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Popup do guia de tamanhos mais largo, para a foto ficar maior. */
.size_chart.size_chart {
  --popup-max-width: 96rem;
}

/* Popup do guia de tamanhos no celular: sem barra de rolagem (ela comia espaco
   so do lado direito e deixava a tabela torta), margens iguais e sem largura minima. */
@media (max-width: 749.98px) {
  .tingle-modal.size_chart .tingle-modal-box {
    width: 100% !important;
    max-width: 100%;
  }
  .tingle-modal.size_chart .tingle-modal-box__content {
    min-width: 0;
    padding-inline: 16px;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tingle-modal.size_chart .tingle-modal-box__content::-webkit-scrollbar {
    display: none;
  }
  .tingle-modal.size_chart .brk-sg__table-wrap {
    width: 100%;
  }
  .tingle-modal.size_chart .brk-sg__table {
    table-layout: fixed;
  }
  /* Popup so rola na vertical: nada de arrastar a pagina para os lados. */
  .tingle-modal.size_chart,
  .tingle-modal.size_chart .tingle-modal-box__content {
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
}

/* Balao (hover) dos tamanhos: no toque nao serve e o do ultimo tamanho (G2)
   passava da borda direita, deixando a pagina mais larga que a tela. */
@media (max-width: 749.98px) {
  .product-form__input .tooltip-content {
    display: none !important;
  }
}

/* Header 100% fixo (sticky_header_type = always): sticky desde o carregamento e
   sem a animacao fadeInSticky, que fazia o header sumir e reaparecer ao passar
   da altura da barra do topo. */
.section-header:has(header[data-sticky="always"]) {
  position: sticky;
  top: 0;
  z-index: 11;
}
.section-header:has(header[data-sticky="always"]).shopify-section-header-sticky.animate:not(.scroll-up) {
  animation: none;
}

/* Sem sombra embaixo do header (o tema aplica box-shadow quando ele fica fixo). */
.section-header,
.section-header header.header,
.shopify-section-header-sticky,
.shopify-section-header-sticky header.header,
.section-header .header__inner {
  box-shadow: none !important;
}

/* ---- Coleção: filtros horizontais em linha única (estilo minimalista) ----
   Filtros em texto com seta à esquerda; "N itens" e "Classificar" à direita.
   Só desktop; no mobile continua o botão Filtro do tema. */
@media (min-width: 1025px) {
  div.w-full:has(> .collection-filter.horizontal) {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 3rem;
  }
  div.w-full:has(> .collection-filter.horizontal) > * {
    grid-column: 1 / -1;
  }
  div.w-full:has(> .collection-filter.horizontal) > .collection-filter.horizontal {
    grid-column: 1;
    grid-row: 1;
  }
  div.w-full:has(> .collection-filter.horizontal) > .toolbar-products {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    gap: 2.4rem;
  }
  .collection-filter.horizontal .horizontal-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2rem;
    margin-bottom: 0;
  }
  .collection-filter.horizontal .horizontal-filter .filter-item {
    min-width: 0;
    width: auto;
  }
  .collection-filter.horizontal .horizontal-filter collapsible-block {
    border: 0;
    padding: 0;
  }
  .collection-filter.horizontal .horizontal-filter .collapsible-heading {
    width: auto;
    gap: 0.6rem;
    padding: 1.6rem 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: none;
    font-size: 1.5rem;
    font-weight: 400;
  }
  .collection-filter.horizontal .horizontal-filter .filter-item .collapsible-content {
    left: 0;
    right: auto;
  }
  .toolbar-products .btn-filter {
    display: none !important;
  }
  div.w-full:has(> .collection-filter.horizontal) {
    padding-top: 1rem;
    row-gap: 1rem;
  }
  .toolbar-products .toolbar-left {
    flex: 0 0 auto;
  }
  .toolbar-products .toolbar-amount {
    font-size: 1.5rem;
    color: #6b6b6b;
    white-space: nowrap;
  }
  .toolbar-products .toolbar-sorter {
    flex: 0 0 auto;
  }
  .toolbar-products .toolbar-sorter select-sorter.select-selected,
  .toolbar-products .toolbar-sorter select-sorter.select-selected:hover {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-heading);
    gap: 0.6rem;
    font-size: 1.5rem;
  }
  .toolbar-products .toolbar-sorter select-sorter.select-selected > span.heading-color {
    display: none;
  }
  .toolbar-products .toolbar-sorter .select-custom__content {
    right: 0;
    left: auto;
  }
}

/* Painel dos filtros (desktop, horizontal) igual ao do "Classificar": cartão
   branco, raio 14px, sombra difusa e linhas com hover marrom. */
@media (min-width: 1025px) {
  .collection-filter.horizontal .horizontal-filter .filter-item .collapsible-content {
    width: auto;
    min-width: 22rem;
    max-width: 32rem;
    padding: 8px !important;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    top: calc(100% + 0.4rem);
  }
  .collection-filter.horizontal .horizontal-filter collapsible-block.active .collapsible-content {
    top: calc(100% + 0.4rem);
  }
  .collection-filter.horizontal .horizontal-filter .filter-content .items {
    padding: 0;
    margin: 0;
  }
  .collection-filter.horizontal .horizontal-filter .filter-content .item {
    margin: 0;
  }
  .collection-filter.horizontal .horizontal-filter .filter-content filter-item.link-filter {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.5;
    transition: background-color 0.09s ease-out, color 0.09s ease-out;
  }
  .collection-filter.horizontal .horizontal-filter .filter-content filter-item.link-filter:hover {
    background-color: #8C5A3C;
    color: #FFFFFF;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
  }
}

/* "Envio imediato" discreto abaixo do preco no card (antes era a tarja marrom
   embaixo da foto). */
.product-item__shipping-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 1.2rem;
  line-height: 1.2;
  color: #8a8a8a;
}
.product-item__shipping-note svg {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
}

/* Botão "Adicionar à Sacola" sobre a foto do card: mesmo raio do "Fora de
   estoque" (5px, regra .product__add-cart[disabled] acima). */
.product-item__inner .product__add-cart {
  border-radius: 5px;
}

/* Ícone de fogo na frente do "% OFF" da etiqueta sobre a foto. Via ::before
   para continuar aparecendo quando o tema reescreve o texto ao trocar de variante. */
.product__badges.absolute .product__badges-sale::before {
  content: "";
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 0.1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22url%28%23g%29%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%25%22 y1=%22100%25%22 x2=%22100%25%22 y2=%220%25%22%3E%3Cstop offset=%220%25%22 stop-color=%22%23FFD700%22/%3E%3Cstop offset=%2245%25%22 stop-color=%22%23FF8C00%22/%3E%3Cstop offset=%2275%25%22 stop-color=%22%23FF4500%22/%3E%3Cstop offset=%22100%25%22 stop-color=%22%23FF0000%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4%22/%3E%3C/svg%3E") center / contain no-repeat;
}
.product__badges.absolute .product__badges-sale {
  align-items: center;
}

/* Banner "Reforço de Marca" (home): imagem um pouco mais para baixo dentro do
   recorte (mostra mais o topo da foto). Só desktop/tablet. */
@media (min-width: 750px) {
  .sec__iwto .banner__media img {
    object-position: 50% 10% !important;
  }
}

/* Faixa de benefícios (icon-box) da home: textos no marrom do site. */
.sec__icon-box.color-default .sec__icon-box-content-heading,
.sec__icon-box.color-default .sec__icon-box-content-des,
.sec__icon-box.color-default .sec__icon-box-content-des strong,
.sec__icon-box.color-default .sec__icon-box-content-des a {
  color: #8C5A3C;
}

/* Ícone do cartão (Parcelamento) da faixa de benefícios no marrom do site. */
.sec__icon-box.color-default .sec__icon-box-content-icon.icon-type-payment {
  color: #8C5A3C;
}

/* ---- Perguntas frequentes: cartão branco arredondado sobre fundo bege ----
   Título em caixa alta à esquerda, perguntas em negrito com divisórias finas e
   seta (chevron) à direita no lugar do "+". */
.sec__faq.sec__faq {
  background: #F5F3EE;
}
.sec__faq > div {
  background: #FCFCFC;
  border: 1px solid #ECEAE4;
  border-radius: 16px;
  padding: 2.4rem;
}
.sec__faq .section__header {
  text-align: left !important;
  margin-bottom: 1.6rem;
  padding-inline: 0;
}
.sec__faq .section__header-heading {
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #1a1a1a;
}
.sec__faq .section__header-des {
  font-size: 1.4rem;
  color: #6b6b6b;
}
.sec__faq .faq-section-title {
  padding: 2rem 4rem 2rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1a1a1a;
  border-bottom: 1px solid #ECEAE4;
}
.sec__faq faq-item .motion-item:last-child .faq-section-title {
  border-bottom: 0;
}
.sec__faq .faq-section-title .icon_plus-animation {
  display: none;
}
.sec__faq .faq-section-title::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 1.8rem;
  height: 1.8rem;
  transform: translateY(-50%);
  background: #1a1a1a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.sec__faq collapsible-block.active .faq-section-title::after,
.sec__faq collapsible-block[open] .faq-section-title::after {
  transform: translateY(-50%) rotate(180deg);
}
.sec__faq .faq_content-inner {
  padding: 0 4rem 2rem 0;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #4a4a4a;
}
@media (max-width: 749.98px) {
  .sec__faq > div {
    padding: 1.6rem;
  }
}

/* Menu do header centralizado: logo à esquerda, menu no centro da página e
   ícones à direita (colunas laterais iguais). Só desktop. */
@media (min-width: 1025px) {
  header-inner.logo-position.logo-left {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  }
  header-inner.logo-left .header__menu {
    justify-content: center;
  }
}

/* Sem a setinha para baixo ao lado dos itens do menu principal (desktop). Os
   submenus continuam abrindo normalmente ao passar o mouse. */
@media (min-width: 1025px) {
  .header__menu .level0 > menu-item .icon-down {
    display: none !important;
  }
}

/* ---- Modal "Adicionar à sacola" (quickview): fotos empilhadas com scroll ----
   Coluna esquerda rola com todas as fotos do produto (uma sobre a outra, com
   fresta branca); a direita traz título, preço, opções e o botão fixo embaixo. */
@media (min-width: 750px) {
  .tingle-modal.quickview .tingle-modal-box {
    width: min(92vw, 864px) !important;
    max-width: none !important;
    height: min(92vh, 616px) !important;
    max-height: none !important;
    border-radius: 16px;
    overflow: hidden;
  }
  .tingle-modal.quickview .tingle-modal-box__content,
  .tingle-modal.quickview .product-quickview__content {
    height: 100%;
    padding: 0;
  }
  .tingle-modal.quickview .product-quickview__content > .grid {
    height: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  /* coluna das fotos */
  .tingle-modal.quickview .product-single__media {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    background: #fff;
  }
  .tingle-modal.quickview .product-single__media::-webkit-scrollbar {
    display: none;
  }
  .tingle-modal.quickview .product-single__media .swiper-actions,
  .tingle-modal.quickview .product-single__media .swiper-pagination,
  .tingle-modal.quickview .product-single__media .loading_image {
    display: none !important;
  }
  .tingle-modal.quickview .product-single__media .swiper-wrapper-preview,
  .tingle-modal.quickview .product-single__media .media-main-swiper {
    height: auto !important;
    overflow: visible !important;
  }
  .tingle-modal.quickview .product-single__media .swiper-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }
  .tingle-modal.quickview .product-single__media .swiper-slide {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
  }
  .tingle-modal.quickview .product-single__media .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
  }
  /* coluna das informações */
  .tingle-modal.quickview .product-single__information {
    height: 100%;
    position: relative;
  }
  .tingle-modal.quickview .product-single__information > div {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 2.8rem 3.2rem;
    overflow-y: auto;
  }
  .tingle-modal.quickview .product-detail__title {
    font-size: 2.4rem !important;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 3rem 1.2rem 0;
  }
  .tingle-modal.quickview .product-detail__buy-buttons {
    margin-top: auto;
  }
  .tingle-modal.quickview .tingle-modal__close {
    right: 1.6rem;
    top: 1.6rem;
  }
}

/* Modal quickview: seletor de quantidade (− 1 +) ao lado do botão de compra. */
.tingle-modal.quickview .product__submit-form-cart {
  flex-wrap: nowrap;
  align-items: stretch;
}
.tingle-modal.quickview .product-form__quantity {
  flex: 0 0 auto;
}
.tingle-modal.quickview quantity-input.quantity {
  height: 100%;
  min-height: 5.2rem;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  background: #fff;
  align-items: center;
}
.tingle-modal.quickview .product__submit-form-cart .product-form__submit {
  flex: 1 1 auto;
  min-height: 5.2rem;
  border-radius: 10px;
}
.tingle-modal.quickview .product__submit-form-cart .product-form__submit {
  white-space: nowrap;
  padding-inline: 1.2rem;
}
.tingle-modal.quickview quantity-input.quantity {
  min-width: 11rem;
  justify-content: space-between;
}

/* ---- Modal quickview: lista de outros modelos acima do "Tamanho" ---- */
.brk-qvm {
  margin-bottom: 2rem;
}
.brk-qvm__label {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #1a1a1a;
}
.brk-qvm__current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #4a4a4a;
}
.brk-qvm__items {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  padding: 0.3rem 0.2rem 0.6rem;
  scrollbar-width: thin;
}
.brk-qvm__item {
  flex: 0 0 auto;
  width: 4rem;
  height: 4.8rem;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  overflow: hidden;
  background: #f2f2f2;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.brk-qvm__item:hover {
  border-color: #8C5A3C;
}
.brk-qvm__item.is-current {
  border-color: #8C5A3C;
  box-shadow: 0 0 0 1px #8C5A3C;
}
.brk-qvm__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Botões − e + do modal: sem o quadrado cinza em volta. */
.tingle-modal.quickview .quantity__button,
.tingle-modal.quickview .quantity__button.grey-bg {
  background: transparent !important;
  box-shadow: none;
  border-radius: 0;
}

/* Modal: sem a etiqueta preta "% OFF" em cima do título (a etiqueta vermelha
   ao lado do preço continua). */
.tingle-modal.quickview .sale_badge,
.tingle-modal.quickview .product-single__information .product__badges {
  display: none !important;
}

/* ---- Botão do modal: efeito de check ao adicionar ao carrinho ----
   No estado data-added="true" o ícone de carrinho e o texto somem (clip-path +
   blur) e o check com "explosão" aparece no centro do botão. */
.tingle-modal.quickview .product-form__submit {
  --text-speed: 0.26;
  --base-delay: calc(var(--text-speed) * 0.25);
  --tick-speed: 0.1;
  --ring-speed: 0.2;
  --check-speed: 0.2;
  --burst-speed: 0.32;
  --step-delay: 3;
  --ease-out-quad: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  position: relative;
  overflow: hidden;
}
.tingle-modal.quickview .product-form__submit > svg:not(.icon-load),
.tingle-modal.quickview .product-form__submit > .btn-label {
  clip-path: circle(100% at 50% 50%);
}
.tingle-modal.quickview .product-form__submit[data-added="true"] > svg:not(.icon-load),
.tingle-modal.quickview .product-form__submit[data-added="true"] > .btn-label {
  clip-path: circle(0% at 50% 50%);
  filter: blur(2px);
  opacity: 0;
  translate: 0 4px;
}
.tingle-modal.quickview .add-to-cart__added {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.tingle-modal.quickview .add-to-cart__added-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
}
.tingle-modal.quickview .checkmark-burst {
  width: 30px;
  height: 30px;
  opacity: 0;
  overflow: visible;
}
.tingle-modal.quickview .checkmark-burst .burst { rotate: 20deg; }
.tingle-modal.quickview .checkmark-burst .check {
  opacity: 0.2;
  scale: 0.8;
  filter: blur(2px);
  transform: translateZ(0);
}
.tingle-modal.quickview .checkmark-burst :is(.ring, .line, .check, .burst, .tick) {
  transform-box: fill-box;
  transform-origin: center;
}
.tingle-modal.quickview .checkmark-burst .line {
  stroke-dasharray: 1.5 1.5;
  stroke-dashoffset: -1.5;
  translate: 0 -180%;
}
.tingle-modal.quickview .checkmark-burst g {
  transform-origin: center;
  rotate: calc(var(--index) * (360 / 8) * 1deg);
}
.tingle-modal.quickview [data-added="true"] .checkmark-burst { opacity: 1; }
.tingle-modal.quickview [data-added="true"] .check { opacity: 1; scale: 1; filter: blur(0); }
.tingle-modal.quickview [data-added="true"] .tick { scale: 1.75; }
.tingle-modal.quickview [data-added="true"] .ring { opacity: 0; scale: 1; }
.tingle-modal.quickview [data-added="true"] .line { stroke-dashoffset: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .tingle-modal.quickview .product-form__submit > svg:not(.icon-load),
  .tingle-modal.quickview .product-form__submit > .btn-label {
    transition-property: clip-path, opacity, filter, translate;
    transition-duration: calc(var(--text-speed) * 0.6s), calc(var(--text-speed) * 1s);
    transition-timing-function: ease-out;
  }
  .tingle-modal.quickview [data-added="true"] .check {
    transition-property: opacity, scale, filter;
    transition-duration: calc(var(--check-speed) * 1s);
    transition-delay: calc(var(--base-delay) * 1s);
    transition-timing-function: var(--ease-out-quad);
  }
  .tingle-modal.quickview [data-added="true"] .tick {
    transition-property: scale;
    transition-duration: calc(var(--tick-speed) * 1s);
    transition-delay: calc((var(--base-delay) + var(--check-speed) * var(--step-delay) * 1.1) * 1s);
    transition-timing-function: ease-out;
  }
  .tingle-modal.quickview [data-added="true"] .ring {
    transition-property: opacity, scale;
    transition-duration: calc(var(--ring-speed) * 1s);
    transition-delay: calc((var(--base-delay) + var(--check-speed) * var(--step-delay)) * 1s);
    transition-timing-function: var(--ease-out-quad);
  }
  .tingle-modal.quickview [data-added="true"] .line {
    transition-property: stroke-dashoffset;
    transition-duration: calc(var(--burst-speed) * 1s);
    transition-delay: calc((var(--base-delay) + var(--check-speed) * var(--step-delay)) * 1s);
    transition-timing-function: var(--ease-out-cubic);
  }
}

/* Modal: com o check na tela o spinner de carregamento não aparece. */
.tingle-modal.quickview .product-form__submit[data-added="true"] .icon-load,
.tingle-modal.quickview .product-form__submit[data-added="true"] .spin {
  display: none !important;
}

/* Modal: quantidade + botão cabem na coluna sem vazar pela borda direita. */
.tingle-modal.quickview .product-form__buttons,
.tingle-modal.quickview .product__submit-form,
.tingle-modal.quickview .product-form,
.tingle-modal.quickview .product__submit-form-cart {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.tingle-modal.quickview .product__submit-form-cart {
  gap: 1rem !important;
}
.tingle-modal.quickview quantity-input.quantity {
  min-width: 9.6rem;
}
.tingle-modal.quickview .product__submit-form-cart .product-form__submit {
  flex: 1 1 0;
  min-width: 0;
  font-size: 1.5rem;
  padding-inline: 0.8rem;
  gap: 0.6rem;
}
.tingle-modal.quickview .product-form__quantity {
  flex: 0 0 9.6rem !important;
  width: 9.6rem !important;
}
.tingle-modal.quickview quantity-input.quantity {
  width: 100% !important;
  min-width: 0 !important;
}
.tingle-modal.quickview quantity-input .quantity__button {
  width: 3rem !important;
  min-width: 0 !important;
  flex: 0 0 3rem;
}
.tingle-modal.quickview .product__submit-form-cart .product-form__submit {
  font-size: 1.4rem;
  padding-inline: 0.6rem;
  overflow: hidden;
}

/* Menu principal (desktop): 14px, peso 600, maiúsculo, 24px entre os itens
   (12px de cada lado). O bloco completo da tipografia está em
   typography-alpha.css. */
@media (min-width: 1025px) {
  .header__menu .navigation.horizontal .level0 > menu-item > a {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase !important;
  }
  .header__menu .navigation.horizontal .level0 > menu-item {
    padding-inline: 1.2rem !important;
  }
}

/* ---- Carrinho lateral flutuante, com bordas arredondadas ----
   Em vez de colado nas bordas da tela, o painel flutua a 12px do topo, do
   fundo e da direita, com cantos de 16px e sombra. Fechado, ele sai da tela
   inteiro (translateX 100% + a folga). */
cart-notification .minicart__wrapper.bls__drawer {
  top: 12px !important;
  bottom: 12px !important;
  right: 12px !important;
  height: auto !important;
  width: min(48rem, calc(100vw - 24px));
  max-width: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  --tw-translate-x: calc(100% + 24px);
}
.open-drawer cart-notification .minicart__wrapper.bls__drawer.open {
  --tw-translate-x: 0;
}
@media (max-width: 749.98px) {
  cart-notification .minicart__wrapper.bls__drawer {
    top: 8px !important;
    bottom: 8px !important;
    right: 8px !important;
    width: calc(100vw - 16px);
    border-radius: 14px;
    --tw-translate-x: calc(100% + 16px);
  }
}

/* ---- Carrinho lateral: quantidade arredondada e "Remover" virou uma lixeira ---- */
.minicart__wrapper quantity-input.quantity {
  border-radius: 10px !important;
  overflow: hidden;
}
.minicart__item-remove .cart-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  color: #6b6b6b;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.minicart__item-remove .cart-remove:hover {
  background: #f1f1f1;
  color: #1a1a1a;
}
.minicart__item-remove .cart-remove__x {
  display: block;
}

/* Botões do carrinho lateral com cantos arredondados: "Continuar comprando"
   (carrinho vazio), "Ver carrinho" e "Finalizar compra". */
.minicart-action.close-cart,
#minicart_wrapper .viewcart,
#minicart-form .viewcart,
#minicart-form .btn-checkout,
#minicart_wrapper .btn-checkout {
  border-radius: 10px;
}

/* Carrinho vazio: mensagem e botão centralizados no meio do painel
   (na horizontal e na vertical). */
.minicart__wrapper .custom-scrollbar:has(.cart-empty) {
  display: flex;
  flex-direction: column;
}
.minicart__wrapper .custom-scrollbar:has(.cart-empty) > form {
  flex: 1 1 auto;
  min-height: 0;
}
.minicart__wrapper .cart-body:has(.cart-empty) {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.minicart__wrapper .cart-empty {
  width: 100%;
  text-align: center;
}

/* Título do carrinho lateral: "Carrinho" + a quantidade numa bolinha cinza
   (sem parênteses). */
.cart-count-drawer {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 2.2rem;
  margin-left: 0.8rem;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: #ececec;
  color: #333;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
}

/* ---- Carrinho lateral: "Desconto" como acordeão (+) que abre o campo ---- */
.minicart-coupon-acc {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.minicart-coupon-acc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 0;
  font-size: 1.4rem;
  color: #1a1a1a;
  cursor: pointer;
  list-style: none;
}
.minicart-coupon-acc__summary::-webkit-details-marker {
  display: none;
}
.minicart-coupon-acc__icon {
  position: relative;
  width: 1.4rem;
  height: 1.4rem;
}
.minicart-coupon-acc__icon::before,
.minicart-coupon-acc__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.4rem;
  height: 1.5px;
  background: #1a1a1a;
  transform: translate(-50%, -50%);
}
.minicart-coupon-acc__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.minicart-coupon-acc__body {
  padding: 0 0 1.6rem;
}
.minicart-coupon-acc .minicart-coupon-inline__form {
  gap: 1rem;
}
.minicart-coupon-acc .discount_code {
  border-radius: 10px;
  font-size: 1.4rem;
  height: 4.6rem;
}
.minicart-coupon-acc .minicart-coupon-inline__button {
  border-radius: 10px;
  min-width: 10rem;
  font-size: 1.4rem;
}

/* Carrinho lateral: a área de baixo (desconto, subtotal e botões) em branco. */
.minicart__wrapper .drawer-bottom,
.minicart__wrapper .drawer-bottom.grey-bg,
#minicart-form .drawer-bottom {
  background: #fff !important;
}

/* Carrinho lateral: divisórias mais discretas (a linha escura entre a lista e a
   área de baixo, e a dos complementos). */
.minicart__wrapper .drawer-bottom.border-top,
.minicart__wrapper .cart-addons.border-top,
#minicart-form .drawer-bottom.border-top,
#minicart-form .cart-addons.border-top {
  border-top: 1px solid #efefef !important;
}

/* ---- Barra de rolagem igual à do tema original (tema-brkStore-country/main) ----
   Fina, trilho cinza claro (#f8f8f8) e "polegar" marrom (#907761) que escurece ao
   passar o mouse. O espaço da barra fica reservado na página (scrollbar-gutter),
   então o conteúdo não pula quando ela aparece. */
* {
  scrollbar-width: thin;
  scrollbar-color: #907761 #f8f8f8;
}
html {
  scrollbar-gutter: stable;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: #f8f8f8;
}
*::-webkit-scrollbar-thumb {
  background: #907761;
  border-radius: 10px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #77471b;
}

/* CORAÇÃO DE FAVORITOS (cards de produto e galeria da página do produto): canto superior direito */
media-gallery { position: relative; }
.card-heart {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #1a1a1a;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.card-heart:hover { transform: scale(1.08); background: #fff; }
.card-heart svg { display: block; width: 20px; height: 20px; }
.card-heart.active { color: #e53935; }
.card-heart.active svg { fill: currentColor; }
/* o botão antigo de favoritos (pilha de ações no card) some: o coração do canto já faz isso */
.product-item .product-item__button-action button-wishlist { display: none !important; }

/* PÁGINA MEUS FAVORITOS (pages/meus-favoritos) */
.wishlist-page-section .main-wishlist__header {
  /* alinhado ao canto esquerdo, na mesma margem da grade de produtos (fluid_container) */
  padding-block: 30px 24px;
  font-family: 'Inter', sans-serif;
  color: #1a1a1a;
}
.main-wishlist__breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 13px;
  color: #777;
}
.main-wishlist__breadcrumb a { color: inherit; text-decoration: none; }
.main-wishlist__breadcrumb a:hover { color: #1a1a1a; }
.main-wishlist__breadcrumb span { color: #1a1a1a; }
.main-wishlist__title {
  margin: 0;
  font: 600 24px/1.2 'Inter', sans-serif;
  letter-spacing: 0.02em;
}
.main-wishlist__summary { margin: 8px 0 0; font-size: 14px; color: #777; }
.main-wishlist__summary[hidden] { display: none; }
/* na página de favoritos o X do tema já remove o card: o coração do canto sai */
.wishlist-page-section .card-heart { display: none; }
@media (max-width: 749px) {
  .wishlist-page-section .main-wishlist__header { padding: 90px 16px 16px; }
  .main-wishlist__title { font-size: 20px; }
}

/* botão "Voltar às compras" da página de favoritos (lista vazia) com bordas arredondadas */
.wishlist-page-section .wishlist-no-product-url {
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  background: #8C5A3C !important;
  border-color: #8C5A3C !important;
  color: #fff !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.wishlist-page-section .wishlist-no-product-url:hover {
  background: #77471b !important;
  border-color: #77471b !important;
  color: #fff !important;
}

/* coleções no celular: margem lateral de 8px ao redor da grade de produtos */
@media (max-width: 749px) {
  .sec__collection-main .stretch_width,
  .sec__collection-main .container,
  .sec__collection-main .fluid_container {
    --bs-gutter-x: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* coracao de favoritar nos cards: nao aparece na pagina inicial (so nas listas de
   produtos/colecoes/busca e na pagina do produto) */
body.index .card-heart { display: none !important; }

/* o coracao so aparece com o mouse sobre o card/foto (ou se o produto ja estiver
   favoritado). Em telas de toque (sem hover) ele continua sempre visivel. */
@media (hover: hover) {
  .card-heart {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }
  .product-item:hover .card-heart,
  media-gallery:hover .card-heart,
  .card-heart:focus-visible,
  .card-heart.active {
    opacity: 1;
    pointer-events: auto;
  }
}

/* SETAS DA GALERIA DO PRODUTO: seta fina e discreta (->), sem fundo nem borda,
   em desktop e celular. */
.product-detail__media .swiper-arrow.swiper-arrow {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #1a1a1a;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.product-detail__media .swiper-arrow.swiper-arrow:hover { opacity: 1; background: transparent !important; }
.product-detail__media .swiper-arrow.swiper-arrow svg { display: none; }
.product-detail__media .swiper-arrow.swiper-arrow::before {
  content: "";
  display: block;
  width: 22px;
  height: 12px;
  margin: 0;
  border: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h20M16 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h20M16 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: none;
}
.product-detail__media .swiper-button-prev.swiper-arrow::before { transform: scaleX(-1); }

/* HIERARQUIA NOS CARDS: o nome do produto tem mais destaque (maior e mais
   pesado) que o preco, com um respiro maior entre os dois. */
.product-item .product-item__name {
  font-size: 2rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
}
.product-item .card-product-price .price {
  font-size: 1.6rem;
  font-weight: 400;
}
.product-item .card-product-price .compare-price {
  font-size: 1.2rem;
}
/* celular: cards estreitos (2 colunas); a hierarquia vem do peso (600 x 400) */
@media (max-width: 749.98px) {
  .product-item .product-item__name { font-size: 1.6rem !important; }
}

/* TAMANHOS (PP, P, M, G...): o titulo ("Tamanho" + guia) fica numa linha propria e
   os quadradinhos ficam todos juntos, numa linha unica, logo abaixo dele. */
.product-form__input_size {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: start;
  gap: 0.4rem;
  width: 100%;
}
.product-form__input_size > .form__label {
  grid-row: 1;
  grid-column: 1 / -1;
  margin-bottom: 0.4rem;
}
.product-form__input_size .product__item-option {
  grid-row: 2;
  min-width: 4rem;
  padding: 0.8rem 1.2rem;
  font-size: 1.2rem;
  border-radius: 8px;
  white-space: nowrap;
  justify-content: center;
}

/* TAMANHO/OPCAO ESGOTADA: sem o risco diagonal e sem opacidade: contorno tracejado
   (como no Mercado Livre) e texto cinza. */
.product-form__input input.option-disabled + .product__item-option::after,
.product-form__input input.option-disabled + .product__item-option::before {
  display: none !important;
}
.product-form__input input.option-disabled + .product__item-option {
  opacity: 1;
  color: #777;
  border: 1px dashed #b5b5b5;
  background: transparent;
  pointer-events: auto; /* o tema bloqueava o mouse; precisamos do hover para o tooltip */
  cursor: not-allowed;
}

/* balao "Ver opcoes disponiveis" (tamanho esgotado): fundo branco, texto escuro */
.product__item-option .tooltip-content {
  background: #ffffff;
  color: #1a1a1a;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}
.product__item-option .tooltip-content::before {
  border-top-color: #ffffff;
}

/* BLOCO "MODELO" (miniaturas): modelo esgotado fica com contorno tracejado (sem
   corte diagonal e sem opacidade) e mostra o balao "Ver opcoes disponiveis". */
.brk-color-group .brk-color-group__soldout {
  display: none;
}
.brk-color-group .brk-color-group__item.is-soldout {
  border: 1px dashed #b5b5b5;
}
.brk-color-group .brk-color-group__item.is-soldout:hover {
  border-color: #8c5a3c;
}
.brk-soldout-tip {
  position: fixed;
  z-index: 9999;
  padding: 8px 12px;
  background: #ffffff;
  color: #1a1a1a;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.brk-soldout-tip.is-visible { opacity: 1; }
.brk-soldout-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--arrow-x, 50%);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #ffffff;
}
/* modelo esgotado: imagem levemente apagada (a borda tracejada continua nitida) */
.brk-color-group .brk-color-group__item.is-soldout .brk-color-group__media {
  opacity: 0.7;
}

/* =====================================================================
   ESCALA DE TAMANHOS: multiplos de 4 (px). Use estes tokens em CSS novo, em vez de
   valores soltos (13px, 5px, 1.7rem...). Fontes: 12/16/20/24/32/40. Espacos:
   4/8/12/16/20/24/32/40/48. Raios: 4/8/12/16/20.
   ===================================================================== */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  --fs-xs: 12px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 40px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

/* Preco cortado (de) sempre ANTES do preco final. O Liquid ja sai nessa ordem;
   o order garante o mesmo quando o JS cria o preco cortado ao trocar de variante. */
.card-product-price .price-regular:has(> .compare-price, .compare-price) {
  order: -1;
}
.pdp-price-line .compare-price {
  order: -1;
}

/* Botao "Fora de estoque" na pagina de produto: mesmo estilo do card, #806B5F
   com borda tracejada, fundo branco e sem a opacidade padrao do desabilitado. */
.product-detail__buy-buttons .product-form__submit[disabled],
.product-detail__information .product_submit_button[disabled] {
  opacity: 1;
  --btn-bg: #FFFFFF;
  --btn-color: #806B5F;
  --btn-border-color: #806B5F;
  background: #FFFFFF;
  color: #806B5F;
  border: 1px dashed #806B5F;
}

/* ---- Tabela de chapeus (snippet size-guide-chapeu): duas tabelas empilhadas ---- */
.brk-sg--hat {
  flex-direction: column;
  gap: 2.4rem;
}
.brk-sg--hat .brk-sg__table-wrap {
  flex: 0 0 auto;
  width: 100%;
}
.brk-sg--hat .brk-sg__sub {
  font-style: normal;
  line-height: 1.4;
}
.brk-sg--hat .brk-sg__title {
  font-size: 1.6rem;
}

/* Chapeus nas pontas do cabecalho marrom da carneira elastica (a altura do
   cabecalho nao muda: os icones ficam absolutos e centralizados na vertical). */
.brk-sg--hat .brk-sg__head {
  position: relative;
  padding-inline: 10rem;
}
.brk-sg__hat-icon {
  position: absolute;
  top: 50%;
  width: 6.4rem;
  height: auto;
  transform: translateY(-50%);
}
.brk-sg__hat-icon--left { left: 1.6rem; }
.brk-sg__hat-icon--right { right: 1.6rem; }
@media (max-width: 749.98px) {
  .brk-sg--hat .brk-sg__head { padding-inline: 6.4rem; }
  .brk-sg__hat-icon { width: 4rem; }
  .brk-sg__hat-icon--left { left: 1.2rem; }
  .brk-sg__hat-icon--right { right: 1.2rem; }
}

/* Lista de produtos (colecoes): espaco entre linhas e entre colunas de cards em 8px
   (linhas eram 3rem / 3,2rem via --row-gap; colunas 10 a 16px via --col-gap). */
.product-grid.row-gap-custom {
  row-gap: 8px !important;
  column-gap: 8px !important;
}

/* Filtro (gaveta no celular): fechamento mais suave. A gaveta sai em 0,5s com curva
   ease-in-out (a padrao do tema anda quase tudo nos primeiros 120ms) e o fundo escuro
   some junto, com a mesma duracao. A abertura continua como era. */
@media screen and (max-width: 1024.98px) {
  .collection-filter:not(.open) {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  btn-filter.overlay::after {
    transition: opacity 0.5s ease, visibility 0.5s ease, background-color 0.5s ease;
  }
}

/* Filtro de colecao: caixas de selecao redondas no lugar das quadradas. */
.collection-filter .filter-item .checkbox {
  border-radius: 50% !important;
}

/* Celular: o seletor de grade (snippet grid-toggle) substitui os icones antigos de colunas e lista. */
@media (max-width: 749px) {
  .toolbar-products .show-type-products :is(grid-mode, view-mode) { display: none !important; }
}

/* Celular: Filtrar, Classificar ao lado dele e, na ponta direita, os botoes de 1/2 produtos. */
@media (max-width: 749px) {
  .toolbar-products {
    flex-wrap: nowrap;
    align-items: center;
    gap: 20px;
  }
  .toolbar-products .toolbar-left {
    order: 1;
    flex: 0 0 auto;
  }
  .toolbar-products .toolbar-sorter {
    order: 2;
    display: flex !important;
    flex: 0 0 auto !important;
    justify-content: flex-start;
    margin: 0;
  }
  .toolbar-products .toolbar-sorter select-sorter.select-selected,
  .toolbar-products .toolbar-sorter select-sorter.select-selected:hover {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
  }
  .toolbar-products .toolbar-sorter select-sorter label {
    border: 0 !important;
    padding: 0 !important;
    gap: 6px;
    font: inherit;
    color: inherit;
  }
  .toolbar-products .toolbar-sorter .sort-icon-mobile { display: block; }
  .toolbar-products .toolbar-sorter select-sorter .icon-down { display: none; }
  .toolbar-products .show-type-products,
  .toolbar-products .brk-grid-toggle-wrap {
    order: 3;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0 !important;
  }
}

/* Filtros ativos (chips) e botao "Limpar tudo": cantos arredondados. */
.filter-current .link-filter,
.filter-current .filters_clear {
  border-radius: 8px !important;
}

/* Carrossel "Visto recentemente": rolagem mais suave. O Swiper usa a rolagem nativa
   do navegador (cssMode) com encaixe obrigatorio a cada slide, o que trava o arraste.
   Com encaixe por proximidade o dedo desliza livre e so "gruda" ao parar. */
.products-recently-viewed > .swiper-wrapper {
  scroll-snap-type: x proximity !important;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---- Tabela de calcas jeans (snippet size-guide-jeans): mesmo visual da de camisas ---- */
.brk-sg--jeans .brk-sg__table-wrap {
  flex: 0 0 auto;
  width: 100%;
}
.brk-sg--jeans .brk-sg__sub {
  font-style: normal;
  line-height: 1.4;
}

/* Paginas de politicas (privacidade, termos...): titulo alinhado a esquerda, junto do texto */
.shopify-policy__title,
.shopify-policy__title h1 {
  text-align: left !important;
}
/* O texto da politica vem num .container proprio (margem + padding): zera para
   o texto comecar na mesma linha do titulo. */
.shopify-policy__body .container.is-custom-page {
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  max-width: none !important;
}

/* Coleção sem resultados (filtros demais): estado vazio com botões */
.brk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
  padding: 64px 16px;
  text-align: center;
}
.brk-empty__icon {
  margin-bottom: 16px;
  color: #8C5A3C;
}
.brk-empty__title {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: #111111;
}
.brk-empty__text {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 24px;
  color: #555555;
}
.brk-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.brk-empty__btn {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid #8C5A3C;
  border-radius: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #8C5A3C;
  text-decoration: none;
}
.brk-empty__btn--primary {
  background: #8C5A3C;
  color: #FFFFFF;
}
@media (max-width: 749.98px) {
  .brk-empty { padding: 40px 16px; }
  .brk-empty__btn { width: 100%; text-align: center; }
}

/* Página de pesquisa (/search): campo "Pesquise em nosso site" com cantos arredondados. */
.sec__collection-main .ssearch__input.field__input {
  border-radius: var(--radius-md, 8px);
}

/* ALVOS DE TOQUE (minimo 44x44px): o visual segue igual, so a area clicavel cresce */
.site-header__actions { gap: 0; }
.site-header__icon-link,
.site-header__menu-toggle,
.site-header__logo {
  min-width: 44px;
  min-height: 44px;
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
}
/* o link tem 44px e o icone 22px (11px de folga em cada lado): o contador mantem a mesma
   posicao de antes em relacao ao icone (-6px em cima, -8px na direita) */
.site-header .site-header__icon-link .site-header__badge {
  top: 5px;
  right: 3px;
  bottom: auto;
}
.card-heart::after,
.card-gallery__control::after {
  content: "";
  position: absolute;
  inset: -6px;
}
.product__color-swatches--js.product__item-option,
label.product__item-option {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.quantity__button {
  min-width: 44px;
}
.product-item__name {
  min-height: 44px;
  box-sizing: border-box;
}
.site-header__nav-chip,
.quick-url.btn-rounded,
.site-header__nav-brand {
  min-height: 44px;
}
.btn-search-close,
.close-cart-button {
  position: relative;
}
.btn-search-close::after,
.close-cart-button::after {
  content: "";
  position: absolute;
  inset: -12px;
}

/* TEXTO LEGIVEL: nome do produto 16px; apoio (envio, selos, filtros, preco antigo) 14px */
.product-item__name {
  --font-size: 16px;
  font-size: 16px;
}
.product-item__shipping-note,
.product-item__shipping-note span,
.product__badges-sale,
.product-item .compare-price,
.btn-filter__label,
.sort-label-text {
  font-size: 14px;
}
@media (max-width: 749.98px) {
  .collapsible-heading { font-size: 14px; }
}
.product-item .installment-payment,
.product-item .installment-payment p {
  font-size: 14px !important;
}

/* PAGINA DE PRODUTO: texto de apoio >= 14px, corpo/acoes em 16px */
.product__sku.product-detail__meta-value,
.product-detail__meta,
.product__item-option .z-2,
.whatsapp-cta__divider,
.brk-ub-frete,
.brk-ub-frete b,
.brk-ub-trust__item,
.delivery-availability span,
.delivery-availability strong,
.brk-sbuy__note,
.brk-sg__table th,
.brk-sg__table td {
  font-size: 14px !important;
}
.whatsapp-cta,
.pdp-installments,
.brk-sg-bar__title,
.brk-sg-bar__link,
.brk-color-group__heading-label,
.brk-color-group__heading-name,
.product-form__input .btn-text-transform {
  font-size: 16px !important;
}
.product-detail__meta .product__sku.product-detail__meta-value,
.product-detail__meta .product__sku {
  font-size: 14px !important;
}

/* CONTRASTE (>= 4,5:1): SKU e botao do WhatsApp na pagina de produto */
.product-detail__meta .product__sku,
.product-detail__meta .product__sku.product-detail__meta-value {
  color: #5f5f5f !important;
}
.product-detail__whatsapp-cta .whatsapp-cta {
  --wa-color: #0b6b38;
  color: #0b6b38 !important;
}

/* TAMANHOS no celular: a linha unica divide a largura em partes iguais (7 tamanhos em
   360px cabem sem estourar a pagina); a altura de 44px continua. */
@media (max-width: 749.98px) {
  .product-form__input_size {
    grid-auto-columns: minmax(0, 1fr);
    justify-content: stretch;
  }
  .product-form__input_size .product__item-option {
    min-width: 0;
    padding-inline: 0;
  }
}

/* ANDROID: a pagina nunca desloca para o lado e a gaveta do menu usa a altura visivel
   real (barra do Chrome), para os botoes Minha conta / Atendimento ficarem na tela. */
@media (max-width: 749.98px) {
  html,
  body {
    overflow-x: clip;
  }
  .site-header .site-header__nav {
    width: min(100vw, 100%);
    height: 100dvh;
    max-height: 100dvh;
    bottom: auto;
  }
  .site-header__nav-chip {
    height: 44px;
  }
}

/* menu "Classificar" (e demais selects) acima do coracao dos cards (z-index 6) */
.toolbar-sorter .select-custom__content,
.select-custom .select-custom__content {
  z-index: 20;
}