/* 0 - 600PX: Phone 600 - 900px: Table portrait 900 - 1200px: Tablet landscape [1200 - 1800] is where our nortal styles apply 1800px + : Big desktop */ /* Media Query M3 */ /* Grid breakpoints */ :global(.vtex-tab-layout-0-x-container) { padding: 0 40px; margin: 0; } @media screen and (min-width: 1920px) { :global(.vtex-tab-layout-0-x-container) { margin: 6px 360px; padding: 0; } } :global(.vtex-tab-layout-0-x-container) .listContainer--tabList { border-bottom: 1px solid #bfbfbf; height: 43px; justify-content: space-between; padding: 0 64px; } @media screen and (min-width: 1920px) { :global(.vtex-tab-layout-0-x-container) .listContainer--tabList { height: 49px; } } @media screen and (max-width: 1024px) { :global(.vtex-tab-layout-0-x-container) .listContainer--tabList { border-top: 1px solid #bfbfbf; flex-direction: column; height: fit-content; padding: 16px 0 0 0; margin: 0; } } @media screen and (max-width: 1024px) { :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem { align-self: flex-start; flex-direction: column; height: fit-content; padding: 0 0 16px; margin: 0; } } :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button) { border: none; } @media screen and (max-width: 1024px) { :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button) { width: 100%; } } :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button):hover { background-color: transparent; } :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label) { font-weight: 400; font-size: 18px; line-height: 18px; color: #bfbfbf; text-transform: capitalize; padding: 0.25em 10px 0.32em; } :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label):hover { color: #929292; } @media screen and (min-width: 1920px) { :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label) { font-size: 24px; line-height: 24px; } } @media screen and (max-width: 1024px) { :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label) { text-align: left; flex-direction: column; height: fit-content; padding: 0 !important; font-size: 18px; line-height: 18px; } } @media screen and (max-width: 1024px) { :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive { align-self: flex-start; flex-direction: column; height: fit-content; padding: 0 0 16px; margin: 0; } } :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button) { background-color: transparent; width: 114px; border: none; } @media screen and (max-width: 1024px) { :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button) { width: 100%; } } :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label) { color: #000000; background-color: transparent; border-bottom: 2px solid #000000; padding: 0; } :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label):hover { color: #000000; } @media screen and (max-width: 1024px) { :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label) { flex-direction: column; text-align: left; height: fit-content; padding: 0; } } @media screen and (max-width: 1024px) { :global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label) { border: none; } } :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem { display: flex; flex-direction: row; gap: 32px; align-items: flex-start; padding: 32px 32px 16px; } @media (max-width: 1024px) { :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem { flex-direction: column; gap: 16px; padding: 16px 0 0 0; border-bottom: 1px solid #bfbfbf; } } :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem .productImagesContainer { width: 50%; max-width: 50%; } :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productImageTag) { width: 100%; max-width: 100%; display: block; } :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) { max-width: 50%; } @media screen and (max-width: 1024px) { :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) { max-width: 100%; } } :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) { font-weight: 400; font-size: 24px; line-height: 32px; color: #575757; margin-top: 0; } @media screen and (min-width: 1920px) { :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) { font-size: 32px; line-height: 32px; } } @media screen and (max-width: 1024px) { :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) { font-size: 20px; line-height: 32px; } } :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) { font-weight: 400; font-size: 16px; line-height: 22px; color: #929292; } @media screen and (min-width: 1920px) { :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) { font-size: 18px; line-height: 25px; } } @media screen and (max-width: 1024px) { :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) { font-size: 14px; line-height: 19px; } } :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) :global(.vtex-store-components-3-x-container--description-product-description) { padding: 0; margin: 0; } @media screen and (max-width: 1024px) { :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) :global(.vtex-store-components-3-x-container--description-product-description) { margin-bottom: 16px; } }