/**CSS DOMA GESTÃO **/

/* Fonte Manrope (web/fonts/manrope) */
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope/Manrope-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope/Manrope-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope/Manrope-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope/Manrope-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope/Manrope-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope/Manrope-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope/Manrope-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }

/* Sobrescreve as variáveis de fonte do Themeoption (store_default.css) — html:root ganha de :root */
html:root {
    --font-family-name__base: 'Manrope', sans-serif;
    --heading__font-family__base: 'Manrope', sans-serif;
    --navigation-level0-item__font-family: 'Manrope', sans-serif;
    --other_font_family: 'Manrope', sans-serif;
}

body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', sans-serif;
}

[name="shippingAddress.country_id"]
/*[name="shippingAddress.region_id"]*/ {
    display: none;
}

.customer-account-create .field.street .label span {
    font-weight: 500;
}

[name="shippingAddress.street.1"].field label,
[name="shippingAddress.street.2"].field label,
[name="shippingAddress.street.3"].field label {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    display: contents;
    opacity: 1;
    visibility: visible;
    color: #000;
}

.catalog-product-view .doma-discount-price span.price {
    font-size: 2.4rem;
    color: #000;
    font-weight: 500;
}

.catalog-product-view .doma-parcelamento {
    margin-top: -3%;
}

 .catalog-product-view .doma-parcelamento,
.catalog-product-view .product-rate-price {
    width: 100%;
}

.page-products .doma-discount-price{
    margin-top: 4%;
}

.page-products .doma-discount-price span.price {
    font-weight: 500;
    color: #000;
}


.catalog-product-view .doma-discount-price {
    float: none;
    padding-top: 10px;
    border-top: 1px solid;
    margin-top: 10px;
}

.page-product.labels-doma {
    margin-bottom: 2%;
}

.catalog-product-view .page-product.labels-doma img.doma-product-label-img {
	position: relative !important;
}

.page-product.labels-doma span.doma-product-label-text{
    font-size: 15px !important;
    position: relative !important;
}

.checkout-index-index #shipping-new-address-form>div,
.checkout-index-index .fieldset > .field .additional {
    padding: 0 10px 0 0;
    display: inline-block;
    zoom: 1;
    width: 50%;
    vertical-align: top;
}

.checkout-index-index .fieldset > .field .additional{
    width: 32% !important;
}

.checkout-index-index input[name="street[0]"] {
    width: 98.5%;
}

.checkout-index-index input[name="street[3]"]{
    width: 109%;
}
.checkout-index-index .required .field > label.not-required::after,
.checkout-index-index .fieldset > .field.required > .not-required.label:after {
    display: none;
}

.additional.required .label:after{
    content: '*';
    color: #e02b27;
    font-size: 1.2rem;
    margin: 0 0 0 6px;
}

.minicart-wrapper .block-content .actions .secondary {
    margin-bottom: 3%;
}

.minicart-wrapper .block-content .actions .secondary .action.viewcart:not(:hover),
.minicart-wrapper .block-content .actions .secondary .action.viewcart:hover{
    text-align: center;
}

.availability.only.configurable-variation-qty{
    display: none;
}

.header-container.layout-11 .horizontal .level0>.level-top{
    color:white;
}

.slider-principal-mobile{
    display: none;
}


/*Mobile*/
@media (max-width:768px) {

    .catalog-product-view .doma-discount-price span.price{
        font-size: 1.8rem;
    }
    
    .checkout-index-index #shipping-new-address-form>div, .checkout-index-index .fieldset > .field .additional,
    .checkout-index-index input[name="street[0]"],
    .checkout-index-index input[name="street[3]"],
    .checkout-index-index .fieldset > .field .additional{
        width: 100% !important;
    }

    .slider-principal-desktop{
        display: none;
    }

    .slider-principal-mobile{
        display: block;
    }

    .desenvolvido-doma{
        margin-left: 17%;
    }

    .header-container.layout-11 .horizontal .level0>.level-top{
        color:#000;
    }


}
/* ===== Header: ações (Buscar / Minha conta / Carrinho) =====
   Réplica do .header-actions do design system (marmitissima-design,
   assets/css/header.css): ícones de contorno 22px, rótulo Manrope 13px/600,
   cor #201e1e -> vermelho da marca no hover, 28px entre os itens. */
.header-container .header__action .flex-layout,
.header-container .header__action .header__action-default {
    gap: 28px;
}

.header-container .header__action .header__action-default > li {
    margin: 0;
}

.header-container .header__action .header-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    color: #201e1e;
    text-decoration: none;
    transition: color 160ms ease;
}

.header-container .header__action .header-icon:hover,
.header-container .header__action .header-icon:focus-visible {
    color: #ed3237;
    text-decoration: none;
}

/* Remove os ícones de fonte (::before) que o tema injeta nos links */
.header-container .header__action .header-icon::before {
    display: none !important;
}

.header-container .header__action .header-icon svg.header-icon-svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none !important;
    color: inherit;
}

.header-container .header__action .header-icon-label {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
    white-space: nowrap;
}

/* Texto "Search products" do modo popup da busca — não existe no design */
.header-container .header__action .top-search .header-search-form {
    display: none !important;
}

/* Contador preso ao ícone, não ao link inteiro */
.header-container .header__action .header-icon-media {
    position: relative;
    display: flex;
}

.header-container .header__action .header__action-default .minicart-wrapper .action.showcart .counter.qty,
.header-container .header__action .header__action-default li .counter.qty {
    position: absolute;
    top: -6px !important;
    right: -8px !important;
    left: auto;
    min-width: 16px !important;
    min-height: 0 !important;
    height: 16px !important;
    margin: 0;
    padding: 0 4px;
    border-radius: 999px;
    background-color: #ed3237;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 10px !important;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.header-container .header__action .counter.qty .total-mini-cart-item {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}


.sliders-principal.slider-principal-desktop .banner-slider-carousel {
    margin-top: 2%;
}

.sliders-principal img {
    border-radius: 10px;
}


.search_type_popup #search-form .field.search .action.search svg{
    color:white !important
}

.sliders-principal {
    margin-top: 2%;
    margin-bottom: 3%;
}



@media (max-width: 1024px) {
    .header-container .header__action .flex-layout,
    .header-container .header__action .header__action-default {
        gap: 20px;
    }

    .header-container .header__action .header-icon-label {
        display: none;
    }
}

@media (max-width: 768px) {
    .header-container .header__action .flex-layout,
    .header-container .header__action .header__action-default {
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .header-container .header__action .flex-layout,
    .header-container .header__action .header__action-default {
        gap: 14px;
    }
}

/* ===== Tabs do Page Builder com imagem (Blueskytechco_Themeoption) =====
   Só vale para tabs com "Imagem da Tab" preenchida (a.tab-title--image). */
.tabs-navigation {
    --tab-card-accent: #ed3237;
}

/* Cards lado a lado com 12px de distância (igual ao design) */
.tabs-navigation:has(a.tab-title--image) {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
}

.tabs-navigation .tab-header:has(> a.tab-title--image) {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

.tabs-navigation .tab-header:has(> a.tab-title--image)::before,
.tabs-navigation .tab-header:has(> a.tab-title--image)::after,
.tabs-navigation a.tab-title--image::before,
.tabs-navigation a.tab-title--image::after {
    display: none !important;
}

/* O Bluesky empurra o link das abas a partir da 2ª (margin-left:
   var(--tab-title-spacing), 55px) — isso cortava a borda direita do card. */
.tabs-navigation a.tab-title--image {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 96px;
    margin: 0 !important;
    padding: 8px 8px 14px;
    border: 1px solid #e3e3e3;
    border-radius: 14px;
    background: #fff;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.tabs-navigation a.tab-title--image .tab-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 10px;
    overflow: hidden;
    background: #f4f1ec;
}

.tabs-navigation a.tab-title--image .tab-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tabs-navigation a.tab-title--image span.tab-title {
    padding: 0;
    border: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: #5f5f5f;
    text-align: center;
    white-space: nowrap;
}

.tabs-navigation a.tab-title--image:hover {
    border-color: var(--tab-card-accent);
}

.tabs-navigation .tab-header.ui-tabs-active > a.tab-title--image {
    border-color: var(--tab-card-accent);
    background: var(--tab-card-accent);
    box-shadow: 0 8px 18px rgba(237, 50, 55, .28);
}

.tabs-navigation .tab-header.ui-tabs-active > a.tab-title--image span.tab-title {
    color: #fff;
}

@media (max-width: 480px) {
    .tabs-navigation a.tab-title--image {
        width: 80px;
    }
}

/* ===== Menu do header igual em todas as páginas =====
   Estas regras existiam só para a home (.cms-demo_bathroom_1 em
   templates.css); nas outras páginas o menu voltava ao padrão do tema
   (maiúsculas, quebrando linha). */
.header-container .navigation .level0 > a,
.header-container .navigation .level0 > .level-top {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    color: #000;
    line-height: 55px;
    padding: 0 19px;
    text-decoration: none;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

.header-container .navigation .level0 > .level-top:hover {
    color: #000;
}

.header-container .navigation.horizontal .horizontal-list .level0.menu-item-has-children > a span:not(.label) {
    font-weight: 500;
}

/* ===== Minicart: opções do item (ex.: itens do kit) =====
   O styles-m.css do tema põe a lista de opções em 2 colunas
   (minmax(88px, auto) | 1fr); com um rótulo longo ("Seleciona abaixo os
   produtos do combo") a coluna dos valores ficava com 0px e o texto quebrava
   letra por letra. Aqui: rótulo em cima, itens embaixo. Mesmo prefixo do
   seletor do tema para ganhar dele. */
.minicart-wrapper .minicart-items-wrapper .product-item .product .product-item-details .product.options.list,
.minicart-items .product-item .product-item-details .product.options.list {
  display: block;
  margin: 6px 0 0;
}

.minicart-wrapper .minicart-items-wrapper .product-item .product .product-item-details .product.options.list .label,
.minicart-wrapper .minicart-items-wrapper .product-item .product .product-item-details .product.options.list .values,
.minicart-items .product-item .product-item-details .product.options.list .label,
.minicart-items .product-item .product-item-details .product.options.list .values {
  display: block;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

.minicart-wrapper .minicart-items-wrapper .product-item .product .product-item-details .product.options.list .label,
.minicart-items .product-item .product-item-details .product.options.list .label {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: #201e1e;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.minicart-wrapper .minicart-items-wrapper .product-item .product .product-item-details .product.options.list .label::after,
.minicart-items .product-item .product-item-details .product.options.list .label::after {
  content: none;
}

.minicart-wrapper .minicart-items-wrapper .product-item .product .product-item-details .product.options.list .values,
.minicart-items .product-item .product-item-details .product.options.list .values {
  font-size: 12px;
  line-height: 1.6;
  color: #6e6c6c;
  word-break: normal;
  overflow-wrap: anywhere;
}