...
========================================================================== */
.mds-cats { position: relative; }
.mds-cat.has-mega { position: static; }
.mds-cat.has-mega > a { position: relative; }
.mds-drop.mds-mega {
left: 0;
right: 0;
top: 100%;
min-width: 0;
padding: 0;
border: 0;
border-top: 1px solid #E8E6E3;
border-bottom: 1px solid #E8E6E3;
box-shadow: 0 18px 32px rgba(26,26,26,0.06);
background: #FFFFFF;
}
.mds-mega-inner {
display: flex;
gap: 64px;
max-width: 1440px;
margin: 0 auto;
padding: 32px 48px 36px;
box-sizing: border-box;
}
.mds-mega-col { min-width: 150px; }
.mds-mega-col ul { list-style: none; margin: 0; padding: 0; }
.mds-mega .mds-mega-head {
margin: 0 0 14px;
padding: 0;
font-family: Outfit, "Helvetica Neue", Arial, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #1A1A1A;
}
.mds-mega .mds-mega-col a {
display: block;
padding: 5px 0;
font-family: Outfit, "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
font-weight: 300;
letter-spacing: 0.01em;
line-height: 1.45;
text-transform: none;
white-space: nowrap;
color: #4A4A4A !important;
background: transparent;
}
.mds-mega .mds-mega-col a:hover {
color: #2F4A43 !important;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.mds-mega-all { margin-left: auto; padding-left: 40px; border-left: 1px solid #E8E6E3; }
.mds-mega .mds-mega-col a.mds-mega-viewall {
display: inline-block;
margin-top: 2px;
padding: 10px 22px;
border: 1px solid #2F4A43;
color: #2F4A43 !important;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
}
.mds-mega .mds-mega-col a.mds-mega-viewall:hover { background: #2F4A43; color: #FFFFFF !important; text-decoration: none; }
/* MDS REDESIGN 2026-11-14 polish: closer to Dermstore - firmer small headings with a hairline rule,
even column widths, long lists (8+ links) flow into two balanced sub-columns, calmer link spacing. */
.mds-mega-inner { gap: 56px; padding: 36px 48px 40px; }
.mds-mega-col { min-width: 170px; }
.mds-mega .mds-mega-head {
font-weight: 600;
font-size: 11px;
letter-spacing: 0.18em;
padding-bottom: 10px;
margin-bottom: 12px;
border-bottom: 1px solid #E8E6E3;
}
.mds-mega .mds-mega-col a { padding: 6px 0; font-size: 14px; font-weight: 300; color: #3D3D3D !important; }
.mds-mega-col ul:has(> li:nth-child(8)) { columns: 2; column-gap: 56px; }
.mds-mega-col ul:has(> li:nth-child(8)) li { break-inside: avoid; }
.mds-mega-all { min-width: 0; padding-left: 48px; }
.mds-mega-all .mds-mega-head { border-bottom: 0; }
@media only screen and (max-width: 1100px) {
.mds-mega-inner { gap: 40px; padding: 28px 24px 32px; }
}
@media only screen and (max-width: 900px) {
.mds-cat.has-mega { position: relative; }
.mds-drop.mds-mega { position: static; border: 0; box-shadow: none; }
.mds-mega-inner { display: block; padding: 6px 0 12px 12px; }
.mds-mega-col { min-width: 0; margin-bottom: 14px; }
.mds-mega .mds-mega-head { margin: 8px 0 6px; font-size: 10px; color: #737373; }
.mds-mega .mds-mega-col a { padding: 7px 0; font-size: 14px; }
.mds-mega-all { margin-left: 0; padding-left: 0; border-left: 0; }
.mds-mega .mds-mega-head { border-bottom: 0; padding-bottom: 0; font-weight: 500; letter-spacing: 0.16em; }
.mds-mega-col ul:has(> li:nth-child(8)) { columns: 1; }
}
/* MDS REDESIGN 2026-11-14: announcement bar above the header (only rendered when announcement.txt has text) */
.mds-announce {
display: flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 8px 16px;
box-sizing: border-box;
background: #D9D9D9;
color: #1A1A1A;
text-align: center;
font-family: Outfit, "Helvetica Neue", Arial, sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.03em;
line-height: 1.35;
}
.mds-announce a, .mds-announce span { color: #1A1A1A !important; text-decoration: none; }
.mds-announce a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media only screen and (max-width: 720px) { .mds-announce { font-size: 12px; padding: 7px 12px; } }
/* =====================================================================
MDS HERO CAROUSEL 2026-11-14
4 approved slides (visual only). Replaces the single hero photo.
Images already include typography; COMPRAR is a transparent overlay.
===================================================================== */
.hero-luxury-slot .mds-hero,
.mds-hero {
position: relative;
width: 100%;
margin: 0;
overflow: hidden;
background: #FFFFFF;
font-family: Outfit, "Helvetica Neue", Arial, sans-serif;
line-height: 0;
}
.mds-hero-track {
display: flex;
transition: transform 0.7s cubic-bezier(.4, 0, .2, 1);
will-change: transform;
}
.mds-slide {
position: relative;
flex: 0 0 100%;
width: 100%;
margin: 0;
padding: 0;
line-height: 0;
}
.mds-slide picture,
.mds-slide img {
display: block !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
object-fit: contain !important;
object-position: center !important;
border: 0 !important;
margin: 0 !important;
}
.mds-slide picture { line-height: 0; }
@media (min-width: 721px) {
.mds-slide img { aspect-ratio: 2 / 1; }
}
@media (max-width: 720px) {
.mds-slide.mds-slide-osteo img { aspect-ratio: 390 / 500; }
.mds-slide:not(.mds-slide-osteo) img { aspect-ratio: 390 / 514; }
}
/* Transparent hit area over the baked-in COMPRAR button */
.mds-slide-buy {
position: absolute;
z-index: 2;
display: block;
overflow: hidden;
color: transparent !important;
background: transparent;
text-indent: 100%;
white-space: nowrap;
text-decoration: none !important;
border: 0;
}
.mds-slide-buy:focus-visible {
outline: 2px solid #C4A574;
outline-offset: 3px;
text-indent: 0;
color: transparent !important;
background: transparent;
}
/* Desktop button positions, measured on the 1440-wide banners */
@media (min-width: 721px) {
.mds-slide-rogaine .mds-slide-buy {
left: 8.7%; top: 65.0%; width: 10.0%; height: 6.8%;
}
.mds-slide-durma .mds-slide-buy {
left: 51.0%; top: 47.0%; width: 10.2%; height: 6.6%;
}
.mds-slide-osteo .mds-slide-buy {
left: 8.6%; top: 53.5%; width: 10.2%; height: 6.6%;
}
}
/* Mobile: full-width COMPRAR near the bottom of the type band */
@media (max-width: 720px) {
.mds-slide-buy {
left: 4%;
right: 4%;
width: auto;
top: auto;
bottom: 5.5%;
height: 10.5%;
}
}
/* Arrows and dots — same size and place as the approved previews */
.mds-hero-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
border: 0;
background: rgba(255, 255, 255, 0.925);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
cursor: pointer;
z-index: 3;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.mds-hero-arrow.prev { left: 28px; }
.mds-hero-arrow.next { right: 28px; }
.mds-hero-arrow svg {
width: 16px;
height: 16px;
stroke: #1A1A1A;
stroke-width: 1.35;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.mds-hero-arrow:hover { background: #FFFFFF; }
.mds-hero-arrow:focus-visible { outline: 2px solid #C4A574; outline-offset: 2px; }
.mds-hero-dots {
position: absolute;
left: 0;
right: 0;
bottom: 22px;
display: flex;
justify-content: center;
align-items: center;
gap: 18px;
z-index: 3;
line-height: 0;
}
.mds-hero-dots button {
width: 7px;
height: 7px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(26, 26, 26, 0.47);
cursor: pointer;
}
.mds-hero-dots button.on {
width: 20px;
height: 5px;
border-radius: 3px;
background: rgba(26, 26, 26, 0.98);
}
.mds-hero.is-light-ui .mds-hero-dots button { background: rgba(255, 255, 255, 0.70); }
.mds-hero.is-light-ui .mds-hero-dots button.on { background: rgba(255, 255, 255, 0.98); }
@media (max-width: 720px) {
.mds-hero-arrow { display: none; }
.mds-hero-dots { bottom: 14px; }
/* type band is light on every mobile slide */
.mds-hero .mds-hero-dots button { background: rgba(26, 26, 26, 0.35); }
.mds-hero .mds-hero-dots button.on { background: #1A1A1A; }
}
@media (prefers-reduced-motion: reduce) {
.mds-hero-track { transition: none; }
}
/* Carousel must clip slides (overrides earlier overflow:visible on the hero slot). */
.bt-home-page .header_slider.hero-luxury-slot,
.hero-luxury-slot,
.mds-hero {
overflow: hidden !important;
}
.mds-hero-track { width: 100%; }
.mds-slide {
flex: 0 0 100%;
width: 100%;
min-width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* MDS REDESIGN 2026-11-14: one balanced 4-column footer, same width as the page.
Col 1 logo/contact, col 2 Links, col 3 payment + shipping, col 4 Seguranca.
Tablet 2x2. Phone stacked. Display only. */
#bt_footer p:empty { display: none !important; margin: 0 !important; padding: 0 !important; }
#bt_footer .bt-footer-middle .container {
width: 100% !important;
max-width: 1344px !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
#bt_footer .bt-footer-middle .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
#bt_footer .bt-footer-middle .col-md-12 {
float: none !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#bt_footer .mds-footer-grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: 28px 32px;
align-items: start;
width: 100%;
margin: 0;
padding: 0;
text-align: left;
background: #FFFFFF;
}
#bt_footer .mds-footer-brand,
#bt_footer .mds-footer-links,
#bt_footer .mds-footer-payship,
#bt_footer .mds-footer-sec,
#bt_footer .mds-footer-grid .bt-block-footer,
#bt_footer .mds-footer-grid .col-xs-12 {
float: none !important;
width: auto !important;
max-width: 100%;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
height: auto !important;
text-align: left;
background: #FFFFFF;
}
#bt_footer .mds-footer-links .box-heading,
#bt_footer .mds-footer-links .box-content,
#bt_footer .mds-footer-links .footer-contact {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
#bt_footer .mds-footer-brand a { display: inline-block; line-height: 0; }
#bt_footer .mds-footer-brand .footer-contact { margin-top: 16px !important; }
#bt_footer .mds-footer-brand p { margin: 8px 0 0 !important; }
#bt_footer .mds-footer-payship h3:not(:first-child) {
margin-top: 24px !important;
}
#bt_footer .mds-footer-payship ul,
#bt_footer .mds-footer-sec ul,
#bt_footer .mds-footer-links ul {
margin: 0 !important;
padding: 0 !important;
list-style: none;
}
#bt_footer .mds-pay-logos {
display: grid !important;
grid-template-columns: repeat(4, max-content);
gap: 12px 16px;
align-items: center;
justify-content: start;
justify-items: start;
list-style: none;
margin: 0 !important;
padding: 0 !important;
background: #FFFFFF;
}
#bt_footer .mds-pay-logos li {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0;
padding: 0;
height: 22px;
line-height: 0;
background: transparent;
}
#bt_footer .mds-pay-logos img,
#bt_footer .mds-pay-logos svg {
display: block;
height: 22px !important;
width: auto !important;
max-width: 100%;
max-height: 22px !important;
object-fit: contain;
object-position: left center;
}
#bt_footer .mds-ship-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
#bt_footer .mds-sec-logos {
display: flex !important;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
gap: 8px;
list-style: none;
margin: 0 !important;
padding: 0 !important;
background: #FFFFFF;
}
#bt_footer .mds-sec-logos li {
display: block;
margin: 0;
padding: 0;
line-height: 0;
}
#bt_footer .mds-sec-logos img,
#bt_footer .mds-sec-logos svg {
display: block;
width: 140px !important;
height: 44px !important;
max-width: 100%;
box-sizing: border-box;
}
#bt_footer .mds-credit {
width: 100%;
max-width: 1344px;
margin: 16px auto 0;
padding: 12px 0 0;
box-sizing: border-box;
}
@media only screen and (max-width: 991px) {
#bt_footer .mds-footer-grid {
grid-template-columns: 1fr 1fr;
gap: 28px 32px;
}
#bt_footer .mds-pay-logos {
grid-template-columns: repeat(4, max-content);
}
}
@media only screen and (max-width: 767px) {
#bt_footer {
margin-top: 0;
padding: 20px 0 8px;
}
#bt_footer .bt-footer-middle .container {
padding-left: 16px !important;
padding-right: 16px !important;
}
#bt_footer .mds-footer-grid {
grid-template-columns: 1fr;
gap: 24px;
}
#bt_footer .mds-pay-logos {
grid-template-columns: repeat(3, max-content);
gap: 10px 16px;
}
#bt_footer .mds-sec-logos {
flex-direction: row;
flex-wrap: wrap;
gap: 8px 10px;
}
#bt_footer .mds-sec-logos img,
#bt_footer .mds-sec-logos svg {
width: 140px !important;
height: 42px !important;
}
#bt_footer .mds-credit {
width: calc(100% - 32px);
max-width: none;
margin-top: 16px;
padding-top: 12px;
}
}
/* MDS REDESIGN 2026-11-14: sit the hero flush under the category bar and clip carousel slides cleanly. */
/* Do not use 100vw here: it is wider than the layout viewport when a scrollbar is reserved, which lets the next slide peek. redesign.js sizes the slot to clientWidth. */
.bt-home-page .menu_custom.row,
.bt-home-page .header_slider,
.bt-home-page .header_slider.hero-luxury-slot,
.bt-home-page .hero-luxury-slot {
margin-top: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.bt-home-page .header_slider.hero-luxury-slot,
.bt-home-page .hero-luxury-slot,
.mds-hero,
.hero-luxury-slot .mds-hero {
overflow: hidden !important;
clip-path: inset(0);
isolation: isolate;
contain: paint;
}
.mds-hero,
.hero-luxury-slot .mds-hero {
width: 100% !important;
max-width: 100% !important;
}
.mds-hero-track {
display: flex;
margin: 0;
padding: 0;
}
.mds-slide {
flex: 0 0 100%;
width: 100%;
min-width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
margin: 0;
padding: 0;
}