/* ===== Site-wide dark theme override ===== */
/* Page background -> #484848, titles -> #ED6A2B, body text -> white.
   Header and footer are excluded: they keep their original white
   background and original (dark-on-white) text colors untouched. */

html, body {
  background-color: #484848 !important;
}

/* Header navbar: center the menu in the header instead of it sitting
   immediately next to the logo (its box currently spans from right after
   the logo to the right edge, so "centered" within that box still reads as
   off-center against the full header width). Desktop only — the nav switches
   to the hamburger dropdown below this width, which is left untouched. */
@media (min-width: 1025px) {
  /* The actual row (flex-direction:row-reverse, justify-content:space-between)
     is the .e-con-inner wrapper inside 48ae26b, not 48ae26b itself (that
     outer element is just a column wrapper with one child). */
  .elementor-element-48ae26b > .e-con-inner {
    position: relative;
  }
  .elementor-element-074b91a {
    position: absolute !important;
    /* True 50% (of the full header width) overlaps the logo: the logo only
       occupies the left side with nothing mirroring it on the right, so
       centering on the whole box pulls the nav left into the logo's ~195px.
       Shift the center point right by half the logo's width so the nav is
       centered in the space actually available next to the logo instead. */
    left: calc(50% + 97px) !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    /* width:auto shrink-to-fits against (containing-block - left offset),
       which is only half the header here and wraps the menu; max-content
       sizes to the menu's natural width regardless of that. */
    width: max-content !important;
    max-width: none !important;
  }
  .elementor-element-074b91a .elementor-nav-menu {
    flex-wrap: nowrap !important;
  }
  /* Logo: was positioned by space-between against the (now absolute, out of
     flow) nav. The row is flex-direction:row-reverse, so with only the logo
     left in normal flow, flex-end is what keeps it visually on the left
     (matching where it sat before, when it "won" the reversed flex-end slot
     under space-between). */
  .elementor-element-48ae26b > .e-con-inner {
    justify-content: flex-end !important;
  }
}

/* Homepage hero: after removing the second image div (c2c380f), the
   remaining image box (5ee521b) needs to expand to fill the freed space
   instead of leaving it empty. Its background-size was "auto" (repeat),
   which would tile the image if just widened -> force cover/no-repeat so
   it scales to fill instead of duplicating. */
.elementor-element-5ee521b {
  --width: 100% !important;
  width: 100% !important;
}
.elementor-element-5ee521b:not(.elementor-motion-effects-element-type-background) {
  background-image: url(/assets/myplace-1.webp) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Homepage hero (5ee521b): use a different, mobile-cropped photo on small
   screens instead of the desktop one. */
@media (max-width: 767px) {
  .elementor-element-5ee521b:not(.elementor-motion-effects-element-type-background) {
    background-image: url(/assets/myplace-7.webp) !important;
  }
  /* The box's fixed 250px min-height was cropping this (portrait, 4:5)
     photo with cover. Size the box to the photo's own ratio instead, so
     the full image fits at any mobile width without cropping. */
  .elementor-element-5ee521b {
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;
  }
}

/* Camabox listing (page-id-122): both banner images (36f2947 desktop/laptop,
   38a44ae tablet/mobile — navy "CAMA BOX" graphics) were replaced with real
   text headings -> size them like the "Nossa história" title (page-id-695 /
   f478003); color already comes from the global heading rule below. */
body.page-id-122 .elementor-element-36f2947 .elementor-heading-title,
body.page-id-122 .elementor-element-38a44ae .elementor-heading-title {
  font-family: "FilsonPro", Sans-serif;
  font-weight: 200;
  text-transform: uppercase;
  font-style: normal;
  text-align: left;
  font-size: 78px;
}
@media (max-width: 1366px) {
  body.page-id-122 .elementor-element-36f2947 .elementor-heading-title,
  body.page-id-122 .elementor-element-38a44ae .elementor-heading-title {
    font-size: 56px;
  }
}
@media (max-width: 767px) {
  body.page-id-122 .elementor-element-36f2947 .elementor-heading-title,
  body.page-id-122 .elementor-element-38a44ae .elementor-heading-title {
    font-size: 40px;
  }
}

/* Cabeceiras listing (page-id-799): same banner-image-to-text-title swap
   (36f2947 desktop/laptop, b9a0ea8 tablet/mobile). */
body.page-id-799 .elementor-element-36f2947 .elementor-heading-title,
body.page-id-799 .elementor-element-b9a0ea8 .elementor-heading-title {
  font-family: "FilsonPro", Sans-serif;
  font-weight: 200;
  text-transform: uppercase;
  font-style: normal;
  text-align: left;
  font-size: 78px;
}
@media (max-width: 1366px) {
  body.page-id-799 .elementor-element-36f2947 .elementor-heading-title,
  body.page-id-799 .elementor-element-b9a0ea8 .elementor-heading-title {
    font-size: 56px;
  }
}
@media (max-width: 767px) {
  body.page-id-799 .elementor-element-36f2947 .elementor-heading-title,
  body.page-id-799 .elementor-element-b9a0ea8 .elementor-heading-title {
    font-size: 40px;
  }
}

/* Roupas de cama listing (page-id-763): same banner-image-to-text-title
   swap (36f2947 desktop/laptop, 04e1902 tablet/mobile). */
body.page-id-763 .elementor-element-36f2947 .elementor-heading-title,
body.page-id-763 .elementor-element-04e1902 .elementor-heading-title {
  font-family: "FilsonPro", Sans-serif;
  font-weight: 200;
  text-transform: uppercase;
  font-style: normal;
  text-align: left;
  font-size: 78px;
}
@media (max-width: 1366px) {
  body.page-id-763 .elementor-element-36f2947 .elementor-heading-title,
  body.page-id-763 .elementor-element-04e1902 .elementor-heading-title {
    font-size: 56px;
  }
}
@media (max-width: 767px) {
  body.page-id-763 .elementor-element-36f2947 .elementor-heading-title,
  body.page-id-763 .elementor-element-04e1902 .elementor-heading-title {
    font-size: 40px;
  }
}

/* Lojas listing (page-id-693): same banner-image-to-text-title swap
   (15921fa desktop/laptop, ebf5415 tablet/mobile). This title is a full
   sentence rather than a one-word label, so it uses a smaller size than
   the other listing pages to avoid overflowing/wrapping awkwardly. */
body.page-id-693 .elementor-element-15921fa .elementor-heading-title,
body.page-id-693 .elementor-element-ebf5415 .elementor-heading-title {
  font-family: "FilsonPro", Sans-serif;
  font-weight: 200;
  text-transform: uppercase;
  font-style: normal;
  text-align: left;
  font-size: 42px;
  line-height: 1.25;
  max-width: 900px;
}
@media (max-width: 1366px) {
  body.page-id-693 .elementor-element-15921fa .elementor-heading-title,
  body.page-id-693 .elementor-element-ebf5415 .elementor-heading-title {
    font-size: 34px;
  }
}
@media (max-width: 767px) {
  body.page-id-693 .elementor-element-15921fa .elementor-heading-title,
  body.page-id-693 .elementor-element-ebf5415 .elementor-heading-title {
    font-size: 26px;
    max-width: 100%;
  }
}

/* "Experiência 5 Estrelas" badges (Entrega Rápida / Desde 1999 / Compra
   Segura) are .elementor-image-box-title, which the global heading rule
   below paints orange -> these three need to stay white instead. */
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .elementor-element-73c73c1 .elementor-image-box-title,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .elementor-element-3e84441 .elementor-image-box-title,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .elementor-element-9eeea5b .elementor-image-box-title {
  color: #FFFFFF !important;
}

/* Homepage category cards (d28a25f/01ab789/5db60bf): swapped to the new
   My Place photos, same cover/no-repeat treatment to avoid tiling. */
.elementor-element-d28a25f:not(.elementor-motion-effects-element-type-background) {
  background-image: url(/assets/myplace-2.webp) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.elementor-element-01ab789:not(.elementor-motion-effects-element-type-background) {
  background-image: url(/assets/myplace-3.webp) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
/* Second home video (06c57bc) was replaced by a static image; keep the same
   4:3 box shape / rounded corners the video widget used to have. */
.elementor-element-06c57bc .elementor-widget-container {
  border-radius: 15px;
  overflow: hidden;
}
.elementor-element-06c57bc .elementor-widget-container img {
  display: block;
  width: 100%;
  aspect-ratio: 1.33333;
  object-fit: cover;
  object-position: center center;
}

.elementor-element-5db60bf:not(.elementor-motion-effects-element-type-background) {
  background-image: url(/assets/myplace-4.webp) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Homepage decorative section (element 64eface) uses a background IMAGE
   (home-bg1-desktop-webp.webp) that is baked onto a white canvas with an
   orange pattern in the middle -> can't recolor a raster image via CSS,
   so drop the image and keep just the solid dark background-color. */
.elementor-element-64eface {
  background-image: none !important;
}

/* "Satisfação garantida" sections (home: e6ca3ce, historia: e44485f) had their
   own explicit light-gray section background (#ECECEC), independent of body. */
.elementor-element-e6ca3ce,
.elementor-element-e44485f {
  background-color: #484848 !important;
}

/* The same sections also carry a built-in Elementor "edge fade" on the reviews
   carousel: a ::after with a gradient hardcoded to the OLD #ECECEC background,
   fading to transparent. Repaint it with the new dark color instead. */
.elementor-element-e6ca3ce::before,
.elementor-element-e44485f::before {
  background-color: #484848 !important;
}

.elementor-element-e6ca3ce::after,
.elementor-element-e44485f::after {
  background-image: linear-gradient(to left, #484848 25%, rgba(0, 0, 0, 0) 35%) !important;
}

/* Header & footer keep a white background */
[data-elementor-type="header"],
[data-elementor-type="footer"] {
  background-color: #FFFFFF !important;
}

/* Everything below is scoped to "direct children of <body> that are NOT the
   header or footer" so none of it touches header/footer content at all. */

body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) {
  color: #FFFFFF;
}

body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) p,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) li,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) span,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) div,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) a,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .elementor-image-box-description,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .elementor-icon-list-text,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .produto-desc,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .produto-features,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .produto-list li {
  color: #FFFFFF !important;
}

body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) h1,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) h2,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) h3,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) h4,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) h5,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) h6,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .elementor-heading-title,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .elementor-image-box-title,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .produto-title,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .produto-h2,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .produto-ficha .ficha-label,
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .produto-features .font_semi {
  color: #ED6A2B !important;
}

/* "Satisfação garantida" intro paragraph (element 048f86e) is body copy that
   happens to use an <h2> tag, not an actual title -> keep it white like the
   rest of the paragraph text, and give the bold "de 1000 avaliações..." accent
   span the orange highlight instead (it was inheriting white from the
   general span rule, the opposite of what it should be). */
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .elementor-element-048f86e .elementor-heading-title {
  color: #FFFFFF !important;
}
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .elementor-element-048f86e .font_azul {
  color: #ED6A2B !important;
}

/* Review cards (light-gray #D7D7D7 background) in the "Satisfação garantida"
   carousel: keep the card background and the orange names, but the review
   body text needs a dark color (not white) to read against the light card. */
body > :not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .elementor-element-ca29c58 .elementor-image-box-description {
  color: #484848 !important;
}

/* Newsletter box (fbde3e9): background matches the review-card gray, and the
   wrapper's negative margin is retuned so the box sits centered on the seam
   between the main content and the footer, instead of fully above it. */
.elementor-element-fbde3e9 {
  background-color: #D7D7D7 !important;
}
.elementor-element-fbde3e9 .elementor-image-box-description,
.elementor-element-fbde3e9 .elementor-field-label {
  color: #484848 !important;
}
/* The newsletter card now overlaps ~135px into the footer by design (it's
   centered on the seam) -> push the homepage footer's own content down so
   none of it sits hidden behind the card. Scoped to the homepage only
   (page-id-13), since no other page has this overlapping newsletter box. */
body.page-id-13 [data-elementor-type="footer"] .elementor-element-9cd6eed {
  padding-top: 160px !important;
}
.elementor-element-5f7e08d {
  margin-bottom: -135px !important;
}

/* Homepage "TENHO INTERESSE!" buttons (6 carousel slides) all read their
   background from the kit's global navy variable --e-global-color-74f9000
   (only used by these buttons site-wide) -> redefine it to orange. */
.elementor-kit-5 {
  --e-global-color-74f9000: #ED6A2B;
}

/* Buttons / CTAs: keep their own fill + white label regardless of the rules above */
.elementor-button,
.elementor-button *,
.produto-cta,
.produto-cta *,
.wa-chooser-store,
.produto-relacionado-cta,
.produto-relacionado-cta * {
  color: #FFFFFF !important;
}

/* Store-chooser modal is appended straight to <body> at runtime (also matches the
   scope above) but must stay a light card with dark text, not white-on-dark. */
.wa-chooser-card {
  background: #F4F4F4;
}
.wa-chooser-card h3 {
  color: #ED6A2B !important;
}
.wa-chooser-card p {
  color: #4D4D4D !important;
}

/* Form fields need a light field surface so typed text stays legible */
.elementor-field,
.elementor-field-textual {
  background-color: #F4F4F4 !important;
  color: #2C2C2C !important;
}

/* Monochrome size-selector icons (dark strokes on transparent svg) need inverting
   to read against the dark background. Trust badges (grupo1/2/3-svg) already carry
   their own brand color and must NOT be inverted. */
.produto-size-icon img,
.produto-size-icon svg {
  filter: invert(1) brightness(1.6);
}

/* "Nossa história" page: text block on the left, images on the right
   (previously the text column was a leftover narrow sliver next to a wide
   paragraph block; now it's a single consolidated text block). */
body.page-id-695 .elementor-element-c03a32f {
  width: 45% !important;
  max-width: 45% !important;
}
body.page-id-695 .elementor-element-bc81056 {
  width: 50% !important;
  max-width: 50% !important;
}
body.page-id-695 .elementor-element-77f6a94 > .e-con-inner {
  align-items: flex-start !important;
}
/* Body copy, not a real title -> white like the rest of the page text */
body.page-id-695 .elementor-element-c03a32f .elementor-heading-title {
  color: #FFFFFF !important;
  text-align: left !important;
}
/* The two smaller photos (46%+46%+24px gap = 92%+24px) were centered with
   leftover space on each side, so they sat inset from the full-width photo
   above them. Size them to exactly fill the row instead. */
body.page-id-695 .elementor-element-4078aa3,
body.page-id-695 .elementor-element-a0a8dac {
  width: calc(50% - 12px) !important;
  max-width: calc(50% - 12px) !important;
}
/* Video (41211d6) was full-bleed edge-to-edge (16:9 at full page width =
   ~810px tall), leaving almost no gap before the newsletter box that sits
   right below it (pulled up by its own -120px margin). Shrink it to a
   contained, centered size like the rest of the page content. */
body.page-id-695 .elementor-element-41211d6 {
  max-width: 950px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Newsletter card (03a21a9) on this page still had its original navy
   background -> match the gray card used for the newsletter on the other
   pages (fbde3e9). */
body.page-id-695 .elementor-element-03a21a9 {
  background-color: #D7D7D7 !important;
}
body.page-id-695 .elementor-element-03a21a9 .elementor-image-box-description,
body.page-id-695 .elementor-element-03a21a9 .elementor-field-label {
  color: #484848 !important;
}
/* Same navy-card fix on the "Nossas Lojas" page newsletter (6ed80f0). */
body.page-id-693 .elementor-element-6ed80f0 {
  background-color: #D7D7D7 !important;
}
body.page-id-693 .elementor-element-6ed80f0 .elementor-image-box-description,
body.page-id-693 .elementor-element-6ed80f0 .elementor-field-label {
  color: #484848 !important;
}

/* Footer column titles (Institucional / Nossas Lojas / Atendimento) were
   still navy from the original template -> orange, matching every other
   title on the site. Footer keeps its white background/body-text as-is. */
[data-elementor-type="footer"] .elementor-element-bcc2bbf .elementor-heading-title,
[data-elementor-type="footer"] .elementor-element-3a90e0b .elementor-heading-title,
[data-elementor-type="footer"] .elementor-element-ac57858 .elementor-heading-title {
  color: #ED6A2B !important;
}

/* Divider borders that assumed a light page background */
.produto-list li,
.produto-two-col > div {
  border-color: rgba(255, 255, 255, .15);
}