/**
 * Copyright © Caravel. All rights reserved.
 *
 * Black Cassol colour scheme for the storefront chrome and overlays.
 *
 * Loaded only by the cassol_blackfriday_active layout handle. Every rule is scoped to body.black-friday and changes
 * colours only (background, text, border, fill, stroke, shadow): no spacing, size, radius or font changes, so the
 * components keep the structure the theme gives them. "!important" is used only where the theme itself uses an
 * important utility (e.g. !bg-[#EEEEEE]) or where the colour is inline (Page Builder, cookie bar config).
 *
 * Tailwind arbitrary classes are matched by their escaped names (.bg-\[\#f6f6f6\]) so the markup stays untouched.
 */

body.black-friday {
    --bf-bg: #050505;
    --bf-surface: #101010;
    --bf-surface-2: #171717;
    --bf-surface-3: #222222;
    --bf-line: #262626;
    --bf-line-2: #333333;
    --bf-text: #F4F1EA;
    --bf-muted: #A39E94;
    --bf-muted-cool: #9C9C9C;
    --bf-red: #BD2821; /* the Cassol red used in production (tailwind "secondary"), for fills, text and hovers alike */
    --bf-ok: #5FD39A;
    --bf-ok-dark: #1b6e49;
    --bf-glow: #FFE7B8;
    --bf-outline: rgba(244, 241, 234, .75);
    --bf-overlay: rgba(0, 0, 0, .7);
    --bf-shadow: 0 30px 60px -10px #000;
}

/* ------------------------------------------------------------------------------------------------------------------
   1. Page background: dark only on the home page; the other pages keep the light content under the dark chrome.
      The home content itself is not recoloured here: the campaign content comes with its own colours through the
      scheduled content of the CMS page (Caravel_CmsScheduledContent), on the same dates as this module.
   ------------------------------------------------------------------------------------------------------------------ */
body.black-friday.cms-index-index {
    background-color: var(--bf-bg) !important;
    color: var(--bf-text);
}

/* ------------------------------------------------------------------------------------------------------------------
   2. Generic colour utilities inside the chrome and overlays. The theme writes colours as Tailwind classes in the
      markup, so the overrides follow the class names; each scope wrapper raises the specificity above the utility.
   ------------------------------------------------------------------------------------------------------------------ */
body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"], [ui-id^="message-"], [id="cookiesModal"], .lgpd-content) {
    color-scheme: dark;
}

/* Backgrounds */
body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"], [id="cookiesModal"]) :is(.bg-white, .bg-container-lighter, .bg-\[\#FEFEFE\]) {
    background-color: var(--bf-surface-2);
}

body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"], [id="cookiesModal"]) :is(.bg-\[\#f6f6f6\], .bg-\[\#F6F6F6\], .bg-gray-50, .bg-gray-100, .bg-container, .bg-container-darker) {
    background-color: var(--bf-surface);
}

body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"], [id="cookiesModal"]) :is(.bg-\[\#efefef\], .bg-\[\#EEEEEE\], .bg-gray-200, .bg-gray-shades-100, .bg-\[\#E2E2E2\]) {
    background-color: var(--bf-surface-3);
}

body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"], [id="cookiesModal"]) :is(.hover\:bg-gray-50:hover, .md\:hover\:bg-gray-50:hover, .hover\:bg-gray-200:hover, .lg\:hover\:bg-gray-50:hover) {
    background-color: var(--bf-surface-3);
}

/* Text */
body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"], [id="cookiesModal"]) :is(.text-black, .text-\[\#1C1B1B\], .text-\[\#1c1b1b\], .text-\[\#222\], .text-\[\#222222\], .text-\[\#333333\], .text-\[\#4F4F4F\], .text-gray-800, .text-gray-900, .text-gray-700, .text-gray-shades-500, .text-gray-shades-600, .text-primary, .text-\[\#003D7C\], .text-\[\#082E53\]) {
    color: var(--bf-text);
}

body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"], [id="cookiesModal"]) :is(.text-\[\#6E6E6E\], .text-\[\#696969\], .text-\[\#666\], .text-\[\#666666\], .text-\[\#797979\], .text-\[\#868686\], .text-\[\#949494\], .text-gray-600, .text-gray-500, .text-gray-400, .text-gray-shades-300, .text-gray-shades-400) {
    color: var(--bf-muted);
}

body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"], [id="cookiesModal"]) :is(.text-secondary, .text-\[\#BD2821\], .text-\[\#bd2821\]) {
    color: var(--bf-text);
}

body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"]) :is(.text-green-600, .text-green-700) {
    color: var(--bf-ok);
}

body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"]) :is(.text-link, a.text-primary, .hover\:text-black:hover, .hover\:text-gray-800:hover) {
    color: var(--bf-text);
}

/* Borders and dividers */
body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"], [id="cookiesModal"]) :is(.border-\[\#F0F0F0\], .border-\[\#f0f0f0\], .border-\[\#CCCCCC\], .border-gray-100, .border-gray-200, .border-gray-shades-100, .border-\[\#D5D5D5\], .border-white, .divide-gray-100 > :not([hidden]) ~ :not([hidden])) {
    border-color: var(--bf-line);
}

body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"], [id="cookiesModal"]) :is(.border-gray-300, .border-gray-shades-400, .border-\[\#ACACAC\], .border-\[\#949494\], .border-\[\#222222\]) {
    border-color: var(--bf-line-2);
}

body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"]) :is(.border-primary, .border-\[\#003D7C\], .border-secondary) {
    border-color: var(--bf-outline);
}

/* The theme paints every <label> with a white gradient (components/labels.css); inside the dark chrome that mask must
   go. Floating labels (.field label.label) get a dark mask in the modal section below. */
body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"], [id="cookiesModal"], .lgpd-content) label:not(.label) {
    background: none !important;
}

/* Skeleton placeholders */
body.black-friday :is(.page-header, [id="cart-drawer"], [aria-modal="true"]) .animate-pulse {
    background-color: var(--bf-surface-3);
}

/* Form controls inside the chrome and overlays */
body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"], [id="cookiesModal"]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    background-color: var(--bf-surface) !important;
    border-color: var(--bf-line-2) !important;
    color: var(--bf-text) !important;
}

body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"], [id="cookiesModal"]) :is(input, textarea)::placeholder {
    color: var(--bf-muted) !important;
}

body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"], [id="cookiesModal"]) :is(input, select, textarea):focus {
    border-color: var(--bf-text) !important;
    --tw-ring-color: var(--bf-outline);
}

/* Buttons: primary (blue today) and the red ones become the mockup red; outlined ones become a light outline. */
body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"], [id="cookiesModal"], .lgpd-content) :is(.btn-primary, .btn-secondary, .bg-primary, .bg-secondary, .bg-\[\#BD2821\], .bg-\[\#bd2821\], .newsletter-submit) {
    background-color: var(--bf-red) !important;
    border-color: var(--bf-red) !important;
    color: #fff !important;
}

body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"], [id="cookiesModal"], .lgpd-content) :is(.btn-primary, .btn-secondary, .bg-primary, .bg-secondary, .bg-\[\#BD2821\], .bg-\[\#bd2821\], .newsletter-submit):hover {
    background-color: var(--bf-red) !important;
    border-color: var(--bf-red) !important;
    filter: none;
}

body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"]) :is(.border-\[\#BD2821\].text-\[\#BD2821\], .border-\[\#003D7C\].text-\[\#003D7C\], .bg-transparent.border) {
    border-color: var(--bf-outline);
    color: var(--bf-text);
    background-color: transparent;
}

body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"]) :is(.border-\[\#BD2821\].text-\[\#BD2821\], .border-\[\#003D7C\].text-\[\#003D7C\], .bg-transparent.border):hover {
    background-color: var(--bf-text) !important;
    color: var(--bf-bg) !important;
}

/* Inline SVG icons drawn with the theme's fixed dark grey */
body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"]) :is(path, circle, rect, line)[stroke="#1C1B1B"],
body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"]) :is(path, circle, rect, line)[stroke="#4F4F4F"],
body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"]) :is(path, circle, rect, line)[stroke="#000000"],
body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"]) :is(path, circle, rect, line)[stroke="black"] {
    stroke: var(--bf-text);
}

body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"]) :is(path, circle, rect)[fill="#1C1B1B"],
body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"]) :is(path, circle, rect)[fill="#1c1b1b"],
body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"]) :is(path, circle, rect)[fill="#000000"],
body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"]) :is(path, circle, rect)[fill="black"],
body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"]) :is(path, circle, rect)[fill="#161519"] {
    fill: var(--bf-text);
}

body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"]) :is(path, circle, rect)[fill="#868686"],
body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"]) :is(path, circle, rect)[fill="#666666"],
body.black-friday :is(.page-header, .page-footer, [id="cart-drawer"], [aria-modal="true"]) :is(path, circle, rect)[fill="#4F4F4F"] {
    fill: var(--bf-muted);
}

/* ------------------------------------------------------------------------------------------------------------------
   3. Top header (CMS block "top-header" inside the blue strip)
   ------------------------------------------------------------------------------------------------------------------ */
body.black-friday .page-header .main-header .top-header {
    background-color: #000 !important;
    box-shadow: inset 0 -1px 0 var(--bf-line);
}

#html-body.black-friday .page-header .top-header [data-content-type="row"],
#html-body.black-friday .page-header .top-header .pagebuilder-column-group,
#html-body.black-friday .page-header .top-header .pagebuilder-column {
    background-color: transparent !important;
}

body.black-friday .page-header .top-header .nav-links > div a {
    color: var(--bf-text);
}

body.black-friday .page-header .top-header .nav-links:last-child > div a:last-child {
    background-color: var(--bf-surface-2);
}

/* Coupon CTA ("CTA com Flip" HTML block) */
body.black-friday .page-header .top-header .custom-cta-wrapper {
    background: var(--bf-red) !important;
    box-shadow: 0 8px 28px -8px rgba(232, 17, 45, .7) !important;
    color: #fff !important;
}

/* ------------------------------------------------------------------------------------------------------------------
   4. Header: logo row, address chooser, search, WhatsApp, account, cart icon
   ------------------------------------------------------------------------------------------------------------------ */
body.black-friday .page-header .main-header .content-header {
    background-color: var(--bf-bg);
    color: var(--bf-text);
    border-color: var(--bf-line);
    box-shadow: 0 1px 0 var(--bf-line);
}

body.black-friday .page-header .content-header .search-bar {
    background-color: var(--bf-surface) !important;
}

body.black-friday .page-header .search-content {
    background-color: transparent;
    color: var(--bf-text);
}

body.black-friday .page-header [x-ref="searchContainerMobile"] {
    background-color: var(--bf-bg);
}

body.black-friday .page-header .search-content.focus-search {
    background-color: var(--bf-bg);
}

body.black-friday .page-header #search {
    background-color: var(--bf-surface) !important;
    border-color: var(--bf-line-2) !important;
    color: var(--bf-text) !important;
}

body.black-friday .page-header #search:focus {
    border-color: var(--bf-text) !important;
}

body.black-friday .page-header .search-content .minisearch button[type="submit"] svg {
    fill: var(--bf-red);
}

body.black-friday .page-header .search-content :is(.sugestions, .block-search) {
    background-color: var(--bf-surface-2);
    color: var(--bf-text);
    box-shadow: var(--bf-shadow);
}

body.black-friday .page-header .search-content .product-image-box {
    background-color: #fff;
}

body.black-friday .page-header .search-content .autocomplete-price {
    color: var(--bf-text);
}

/* "Termos mais buscados" panel (Cassol_SmartHint top terms / CMS search_block): heading, terms, arrows, product widgets */
body.black-friday .page-header .minisearch .block-search h2 {
    color: var(--bf-muted);
}

/* The theme sets these colours from a deeply nested selector in search.css, hence the !important. */
body.black-friday .page-header .search-content .termos ul li a {
    color: var(--bf-muted) !important;
}

body.black-friday .page-header .search-content .termos ul li a:hover {
    color: var(--bf-text) !important;
}

body.black-friday .page-header .search-content .termos ul li svg path {
    stroke: var(--bf-muted);
}

body.black-friday .page-header .minisearch .block-search .produtos .product-item-link {
    color: var(--bf-text);
}

body.black-friday .page-header .minisearch .block-search .produtos .price-box .prices-wrapper .price {
    color: var(--bf-text);
}

body.black-friday .page-header .minisearch .block-search .produtos .price-box .prices-wrapper .old-price .price {
    color: var(--bf-muted);
}

/* Live suggestions dropdown: headings muted, product title and final price in the text colour, PIX line green,
   old price and installments muted (same hierarchy as the product cards of the mockup). */
body.black-friday .page-header .search-content .sugestions h2 {
    color: var(--bf-muted);
}

body.black-friday .page-header .search-content .sugestions .product-infos > span {
    color: var(--bf-text);
}

body.black-friday .page-header .search-content .sugestions .autocomplete-price [data-price-type="finalPrice"],
body.black-friday .page-header .search-content .sugestions .autocomplete-price [data-price-type="finalPrice"] span {
    color: var(--bf-text);
}

body.black-friday .page-header .search-content .sugestions .autocomplete-price .main-price .whitespace-nowrap {
    color: var(--bf-ok);
}

body.black-friday .page-header .search-content .sugestions .autocomplete-price .old-price,
body.black-friday .page-header .search-content .sugestions .autocomplete-price .old-price span,
body.black-friday .page-header .search-content .sugestions .autocomplete-price .prices-wrapper > p,
body.black-friday .page-header .search-content .sugestions .autocomplete-price .price-box > p {
    color: var(--bf-muted);
}

/* Suggested terms: a chip (bg-gray-100) on mobile only; from lg the theme drops the chip (lg:bg-transparent), which the
   generic .bg-gray-100 rule of section 2 would otherwise repaint dark. */
body.black-friday .page-header .search-content .sugestions .search-terms button {
    background-color: var(--bf-surface);
    color: var(--bf-text);
}

body.black-friday .page-header .search-content .sugestions .search-terms button:hover {
    background-color: var(--bf-surface-3);
}

@media (min-width: 1024px) {
    body.black-friday .page-header .search-content .sugestions .search-terms button,
    body.black-friday .page-header .search-content .sugestions .search-terms button:hover {
        background-color: transparent;
    }
}

body.black-friday .page-header .search-content .sugestions li[data-suggestion] a:hover,
body.black-friday .page-header .search-content .sugestions li[data-suggestion] a:focus-visible {
    background-color: var(--bf-surface-3);
}

body.black-friday .page-header .search-content .sugestions button[type="submit"] {
    color: var(--bf-text);
    border-color: var(--bf-line-2);
}

/* WhatsApp pill in the header (green ink on a dark chip) */
@media (min-width: 1024px) {
    body.black-friday .page-header .content-header .whatsapp {
        background-color: var(--bf-surface-2);
    }
}

/* The icon is a filled handset (path with a fill attribute) inside a stroke-only speech bubble (path without fill).
   Both become green; the bubble must stay an outline, so it never receives a fill. */
body.black-friday .page-header .content-header .whatsapp svg path[fill="#F0F5FB"] {
    fill: var(--bf-ok);
    stroke: var(--bf-ok) !important;
}

body.black-friday .page-header .content-header .whatsapp svg path:not([fill]) {
    fill: none;
    stroke: var(--bf-ok) !important;
}

body.black-friday .page-header .content-header .whatsapp .text-white {
    color: var(--bf-ok);
}

/* Mobile "Ofertas para / Selecionar região" bar (Caravel_AddressSelect mini trigger, rendered in top.container) */
body.black-friday .top-container .bg-\[\#FEFEFE\] {
    background-color: var(--bf-surface);
    color: var(--bf-text);
    box-shadow: 0 1px 0 var(--bf-line);
}

body.black-friday .top-container .bg-\[\#FEFEFE\] .text-secondary {
    color: var(--bf-text);
}

body.black-friday .top-container .bg-\[\#FEFEFE\] :is(.bg-white, .border-gray-200) {
    background-color: var(--bf-surface-2);
    border-color: var(--bf-line-2);
}

body.black-friday .top-container .bg-\[\#FEFEFE\] .text-\[\#4F4F4F\] {
    color: var(--bf-muted);
}

body.black-friday .top-container .bg-\[\#FEFEFE\] .bg-\[\#BD2821\] {
    background-color: var(--bf-red);
}

/* Address chooser popover (geoip confirmation) */
body.black-friday .page-header .address-select-wrapper .shadow-lg,
body.black-friday .page-header .mini-address-trigger .shadow-lg {
    box-shadow: var(--bf-shadow);
}

/* ------------------------------------------------------------------------------------------------------------------
   5. Menus: desktop bar + mega menu, mobile drawer, "Cassol +"
   ------------------------------------------------------------------------------------------------------------------ */
/* The category bar is a single, slightly lighter band (same surface as the dropdowns), with no top line, so it
   reads apart from the header above and the banner below. */
body.black-friday .menu-container-nav {
    background-color: var(--bf-surface-2);
    box-shadow: none;
}

body.black-friday .menu-container-nav .hyva-topmenu-desktop,
body.black-friday .menu-container-nav .snowdog-topmenu-desktop {
    background-color: transparent;
}

/* The right-hand group ("Marcas exclusivas") reuses the mega menu wrapper rendered inline (menu.css .menu-right
   .menu-content { static }); it must not carry the dropdown surface, otherwise a lighter box shows in the bar. */
body.black-friday .menu-container-nav .hyva-topmenu-desktop .snowdog-topmenu-desktop ul li.menu-right .menu-content {
    background-color: transparent;
    box-shadow: none;
}

/* Bar links follow the mockup's department bar: muted grey at rest, light on hover (the theme uses black/red; the
   Cassol red as text does not reach 3.5:1 on any dark grey, so it stays reserved for fills). "Marcas exclusivas"
   is always light, like the right-side link of the mockup. */
body.black-friday .menu-container-nav .hyva-topmenu-desktop .snowdog-topmenu-desktop > ul .snowdog-menu-link {
    color: var(--bf-muted) !important;
}

body.black-friday .menu-container-nav .hyva-topmenu-desktop .snowdog-topmenu-desktop > ul .snowdog-menu-link:hover,
body.black-friday .menu-container-nav .hyva-topmenu-desktop .snowdog-topmenu-desktop > ul .snowdog-menu-link:hover span,
body.black-friday .menu-container-nav .hyva-topmenu-desktop .snowdog-topmenu-desktop > ul .snowdog-menu-link.snowdog-menu-text-hover {
    color: var(--bf-text) !important;
}

body.black-friday .menu-container-nav .hyva-topmenu-desktop .snowdog-topmenu-desktop > ul .special-link > span {
    color: var(--bf-text);
}

body.black-friday .menu-container-nav .hyva-topmenu-desktop .snowdog-topmenu-desktop .menu-content {
    background-color: var(--bf-surface-2);
    box-shadow: var(--bf-shadow);
}

body.black-friday .menu-container-nav .hyva-topmenu-desktop .snowdog-topmenu-desktop .menu-content .categoria-nivel-2 > .categoria-nivel-3 > ul.content-level > li > .group a.snowdog-menu-link {
    color: var(--bf-text) !important;
}

body.black-friday .menu-container-nav .hyva-topmenu-desktop .snowdog-topmenu-desktop .menu-content .categoria-nivel-3 a.snowdog-menu-link {
    color: var(--bf-muted) !important;
}

/* "Ver tudo" is always light (like the level-2 headings) among the muted items, in the mega menu and in the drawer
   alike; the theme uses the blue primary. */
body.black-friday .menu-container-nav .hyva-topmenu-desktop .snowdog-topmenu-desktop .menu-content .categoria-nivel-3 .ver-tudo,
body.black-friday .menu-container-nav .hyva-topmenu-desktop .snowdog-topmenu-desktop .menu-content .categoria-nivel-3 .ver-tudo:hover {
    color: var(--bf-text);
}

/* The link inside the "Ver tudo" wrapper is also a level-2 group link: repeat the level-2 selector so this wins. */
body.black-friday .menu-container-nav .hyva-topmenu-desktop .snowdog-topmenu-desktop .menu-content .categoria-nivel-2 > .categoria-nivel-3 > ul.content-level > li > .group.ver-tudo a.snowdog-menu-link {
    color: var(--bf-text) !important;
}

body.black-friday .menu-container-nav .hyva-topmenu-desktop .snowdog-topmenu-desktop .menu-content .categoria-nivel-2 > .categoria-nivel-3 > ul.content-level > li > .group.ver-tudo a.snowdog-menu-link:hover {
    color: var(--bf-text) !important;
}

body.black-friday .menu-container-nav .hyva-topmenu-desktop .snowdog-topmenu-desktop ul li > .group a.snowdog-menu-link:hover {
    color: var(--bf-text) !important;
}

/* "Departamentos" toggle and the mobile/desktop drawer menu */
body.black-friday .hyva-topmenu-mobile,
body.black-friday .hyva-topmenu-mobile #toggle-menu,
body.black-friday .menu-container-nav > button {
    color: var(--bf-muted);
}

body.black-friday .menu-container-nav > button svg,
body.black-friday .menu-container-nav > button svg path {
    stroke: var(--bf-muted);
}

body.black-friday .menu-container-nav > button:hover,
body.black-friday .hyva-topmenu-mobile #toggle-menu:hover {
    color: var(--bf-text);
}

body.black-friday .menu-container-nav > button:hover svg,
body.black-friday .menu-container-nav > button:hover svg path {
    stroke: var(--bf-text);
}

body.black-friday .hyva-topmenu-mobile .height-calc-desktop {
    background-color: var(--bf-surface);
    border-color: var(--bf-red);
}

body.black-friday .hyva-topmenu-mobile .height-calc-desktop.backdrop {
    background-color: var(--bf-overlay);
}

/* Drawer items follow the mockup's department bar: muted grey at rest, light on hover. */
body.black-friday .hyva-topmenu-mobile :is(.menu, .menu-root, .submenu),
body.black-friday .hyva-topmenu-mobile :is(.menu, .menu-root, .submenu) :is(li, button, a, span) {
    color: var(--bf-muted);
}

body.black-friday .hyva-topmenu-mobile .menu-mobile > button span,
body.black-friday .hyva-topmenu-mobile .lvl-1 > button span,
body.black-friday .hyva-topmenu-mobile .lvl-1 > .group span {
    color: var(--bf-muted);
}

body.black-friday .hyva-topmenu-mobile :is(.menu > li, .menu li.lvl-1, .submenu li, .mt-auto) {
    border-color: var(--bf-line);
}

body.black-friday .hyva-topmenu-mobile :is(.submenu .flex.flex-col, .submenu .menu-root, .menu .opened > button, .mt-auto) {
    background-color: var(--bf-surface);
}

/* The drawer's root title ("Todos os departamentos", a static div on desktop): always light. */
body.black-friday .hyva-topmenu-mobile .lvl-1 > div.font-bold span {
    color: var(--bf-text);
}

/* Title of a clicked category (and its back arrow): muted like the items, light with the grey band on hover (the
   hover rules below cover it). The theme paints it grey on desktop and red on mobile. */
body.black-friday .hyva-topmenu-mobile .height-calc-desktop .opened > button span {
    color: var(--bf-muted);
}

body.black-friday .hyva-topmenu-mobile .height-calc-desktop .opened > button svg path {
    fill: var(--bf-muted);
}

/* Hover highlights only the hovered row, like the theme's bg-gray-50 band on white: the button or link itself gets
   the lighter grey and light text/chevron. The wrappers (.group, which in category_child.phtml holds a node's whole
   child list) stay transparent so the band never covers a block of items. The "Ver tudo" link has its own colours
   below. The specificity (0,5,1) beats the generic hover utilities of section 2. */
body.black-friday .hyva-topmenu-mobile .height-calc-desktop :is(.group, .md\:hover\:bg-gray-50, .lg\:hover\:bg-gray-50):hover {
    background-color: transparent;
}

body.black-friday .hyva-topmenu-mobile .height-calc-desktop :is(button, a.snowdog-menu-link-topmenu-mobile):hover {
    background-color: var(--bf-surface-3);
}

/* Only the button or the link itself triggers the light text: .group wraps the whole nested list of a node, so a
   .group:hover rule would paint every child item. */
body.black-friday .hyva-topmenu-mobile .height-calc-desktop :is(button, a.snowdog-menu-link-topmenu-mobile):not(.see-all *):hover,
body.black-friday .hyva-topmenu-mobile .height-calc-desktop :is(button, a.snowdog-menu-link-topmenu-mobile):not(.see-all *):hover :is(a, span) {
    color: var(--bf-text);
}

body.black-friday .hyva-topmenu-mobile .height-calc-desktop button:hover svg path {
    fill: var(--bf-text);
}

body.black-friday .hyva-topmenu-mobile :is(.highlight > button span, .highlight > .group span) {
    color: var(--bf-text);
}

/* "Ver tudo": always light among the muted items (the theme uses the blue primary). */
body.black-friday .hyva-topmenu-mobile .height-calc-desktop .see-all :is(a, span),
body.black-friday .hyva-topmenu-mobile .height-calc-desktop .see-all a:hover,
body.black-friday .hyva-topmenu-mobile .height-calc-desktop .see-all a:hover span {
    color: var(--bf-text);
}

body.black-friday .hyva-topmenu-mobile .lvl-1.whatsapp > .group a {
    background-color: var(--bf-red);
}

body.black-friday .hyva-topmenu-mobile .lvl-1.whatsapp > .group a span {
    color: #fff;
}

body.black-friday .hyva-topmenu-mobile .group:hover .group-hover\:text-\[\#BD2821\],
body.black-friday .hyva-topmenu-mobile .group:hover .md\:group-hover\:text-\[\#BD2821\] {
    color: var(--bf-text);
}

body.black-friday .hyva-topmenu-mobile .height-calc-desktop .lg\:border-r {
    border-color: var(--bf-line);
}

/* "Cassol +" dropdown */
body.black-friday .cassol-menu .cassol-menu__item {
    background-color: var(--bf-surface-2);
    color: var(--bf-text);
}

body.black-friday .cassol-menu .cassol-menu__item .cassol-menu__inner-list {
    background-color: var(--bf-surface-2);
    box-shadow: var(--bf-shadow);
}

body.black-friday .cassol-menu .cassol-menu__item .cassol-menu__inner-list .cassol-menu__inner-link {
    color: var(--bf-muted);
}

body.black-friday .cassol-menu .cassol-menu__item .cassol-menu__inner-list .cassol-menu__inner-item:hover .cassol-menu__inner-link {
    color: var(--bf-text);
    background-color: var(--bf-surface-3);
}

body.black-friday .cassol-menu img {
    filter: invert(1);
}

/* ------------------------------------------------------------------------------------------------------------------
   6. Mini cart drawer
      Tone for tone with the light theme: what is light grey there (header, item list, cross-sell block) becomes the
      dark grey of the category bar, what is white (panel, subtotal/total block, empty state) becomes black.
   ------------------------------------------------------------------------------------------------------------------ */
body.black-friday #cart-drawer .minicart-wrapper .backdrop {
    background-color: var(--bf-overlay) !important;
}

body.black-friday #cart-drawer .minicart-wrapper > div > .bg-white {
    background-color: var(--bf-bg);
    color: var(--bf-text);
    box-shadow: var(--bf-shadow);
}

body.black-friday #cart-drawer .minicart-wrapper .close-cart {
    color: var(--bf-text);
}

body.black-friday #cart-drawer .minicart-wrapper :is(header, .bg-\[\#f6f6f6\], .cart-container) {
    background-color: var(--bf-surface-2);
    color: var(--bf-text);
}

body.black-friday #cart-drawer .minicart-wrapper :is(.cart-subtotal, .cart-empty) {
    background-color: var(--bf-bg);
    color: var(--bf-text);
}

body.black-friday #cart-drawer .minicart-wrapper #cart-drawer-title,
body.black-friday #cart-drawer .minicart-wrapper .item,
body.black-friday #cart-drawer .minicart-wrapper .cart-empty,
body.black-friday #cart-drawer .minicart-wrapper .item-name,
body.black-friday #cart-drawer .minicart-wrapper .item-price,
body.black-friday #cart-drawer .minicart-wrapper .qty {
    color: var(--bf-text);
}

body.black-friday #cart-drawer .minicart-wrapper .item {
    border-color: var(--bf-line-2);
}

body.black-friday #cart-drawer .minicart-wrapper .item-options li + li {
    border-color: var(--bf-line-2);
}

/* Quantity control: one tone lighter than the item list (the theme's #efefef pill on #f6f6f6), input included, which
   the form-control rule of section 2 would otherwise paint on the darker input surface (the id beats its (0,5,2)
   selector). */
body.black-friday #cart-drawer .minicart-wrapper .qty-wrapper,
body.black-friday #cart-drawer .minicart-wrapper .qty-wrapper input {
    background-color: var(--bf-surface-3) !important;
    border-color: var(--bf-surface-3) !important;
}

/* SKU and "Remover": neutral grey (the warm muted tone looked off next to the light product name). */
body.black-friday #cart-drawer .minicart-wrapper :is(.item-sku, .item-remove),
body.black-friday #cart-drawer .minicart-wrapper .crossssel-cart .text-\[\#6E6E6E\] {
    color: var(--bf-muted-cool);
}

body.black-friday #cart-drawer .minicart-wrapper .item-image img {
    background-color: #fff;
}

body.black-friday #cart-drawer .minicart-wrapper .payment-cash-down {
    color: var(--bf-text);
}

body.black-friday #cart-drawer .minicart-wrapper .payment-installments {
    color: var(--bf-text);
}

body.black-friday #cart-drawer .minicart-wrapper .crossssel-cart .add-to-cart .btn {
    border-color: var(--bf-outline);
    color: var(--bf-text);
}

/* ------------------------------------------------------------------------------------------------------------------
   7. Hyvä modals, address chooser, newsletter, logout, shipping quote, compare, notify me
   ------------------------------------------------------------------------------------------------------------------ */
body.black-friday [aria-modal="true"]:not(.minicart-wrapper) {
    background-color: var(--bf-surface-2);
    color: var(--bf-text);
    border-color: var(--bf-line-2) !important;
    box-shadow: var(--bf-shadow) !important;
}

/* Overlays behind the modals (Hyvä ModalBuilder, shipping quote, out of stock) */
body.black-friday .fixed.inset-0.bg-black.bg-opacity-50,
body.black-friday .bg-black.bg-opacity-50.fixed {
    background-color: var(--bf-overlay);
}

/* Modal header icons (location pin, close X): outlined with the light text colour; the theme fills them white. */
body.black-friday [aria-modal="true"] .modal-header {
    color: var(--bf-text);
}

body.black-friday [aria-modal="true"] .modal-header svg path {
    fill: none !important;
    stroke: currentColor;
    color: var(--bf-text) !important;
}

/* Address chooser */
body.black-friday .address-select-popup {
    color: var(--bf-text);
}

/* Floating labels: the theme paints them with a white gradient (label { background: linear-gradient(...) !important })
   so the label masks the input border; here the mask is the dialog colour. */
body.black-friday [aria-modal="true"] .field label,
body.black-friday [aria-modal="true"] .field label.label,
body.black-friday .address-select-popup .field label {
    background: linear-gradient(transparent 50%, var(--bf-surface-2) 50%) !important;
    color: var(--bf-muted) !important;
}

body.black-friday [aria-modal="true"] .field label span,
body.black-friday .address-select-popup .field label span {
    color: var(--bf-muted);
}

/* The CEP and city fields sit on the dialog grey, not on the darker input surface of section 2 (whose selector
   is (0,5,2), hence the [aria-modal] and .form-input repeated here to win). */
body.black-friday [aria-modal="true"] .address-select-popup .field input.form-input.rounded-lg {
    background-color: var(--bf-surface-2) !important;
    border-color: var(--bf-line-2) !important;
}

body.black-friday .address-select-popup .address-list > div {
    border-color: var(--bf-line-2);
}

/* Address cards: the theme shows the selected one as a blue box with white text and the others in red text. Here the
   selected box is the Cassol red with white text and the others use the light text (section 2 maps .text-secondary
   to the red inside modals, so both states are repeated here with more specificity). */
body.black-friday [aria-modal="true"] .address-select-popup .text-secondary {
    color: var(--bf-text);
}

body.black-friday .address-select-popup .bg-primary,
body.black-friday .address-select-popup .address-list .border-primary {
    background-color: var(--bf-red) !important;
    border-color: var(--bf-red) !important;
    color: #fff !important;
}

body.black-friday .address-select-popup .bg-primary :is(span, .text-secondary, .text-white) {
    color: #fff !important;
}

body.black-friday .address-select-popup [aria-modal="true"] .modal-header .close svg path {
    fill: none !important;
    color: var(--bf-text) !important;
}

/* Logout modal */
body.black-friday #logoutModal .modal-logout .title-modal {
    color: var(--bf-text);
}

body.black-friday #logoutModal .modal-logout > p {
    color: var(--bf-muted);
}

/* ------------------------------------------------------------------------------------------------------------------
   8. Toasts (Caravel_Notifications) and cookie bar (Caravel_Lgpd, colours come inline from the Amasty config)
   ------------------------------------------------------------------------------------------------------------------ */
body.black-friday [ui-id^="message-"] > .bg-white {
    background-color: var(--bf-text);
    color: var(--bf-bg);
    box-shadow: 0 14px 40px -8px #000;
}

body.black-friday [ui-id^="message-"] :is(.text-gray-800, .text-gray-600) {
    color: var(--bf-bg);
}

body.black-friday [ui-id^="message-"] .text-gray-400 {
    color: var(--bf-line-2);
}

body.black-friday [ui-id^="message-"] .text-green-600 {
    color: var(--bf-ok-dark);
}

body.black-friday [ui-id^="message-"] .text-red-600 {
    color: var(--bf-red);
}

body.black-friday .lgpd-content {
    background-color: var(--bf-surface-2) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .6) !important;
    color: var(--bf-text);
}

body.black-friday .lgpd-content p {
    color: var(--bf-text) !important;
}

body.black-friday .lgpd-content a {
    color: var(--bf-text);
}

body.black-friday .lgpd-content .bg-\[\#E2E2E2\] {
    background-color: var(--bf-surface);
    color: var(--bf-text);
}

body.black-friday #cookiesModal section [x-ref="cookieForm"] label {
    color: var(--bf-text) !important;
}

/* ------------------------------------------------------------------------------------------------------------------
   9. Footer: newsletter band, CMS block "footer", accordion, developed by
   ------------------------------------------------------------------------------------------------------------------ */
body.black-friday .page-footer {
    background-color: #000;
    color: var(--bf-text);
    box-shadow: inset 0 1px 0 var(--bf-line);
}

body.black-friday .page-footer .footer-content {
    background-color: #000;
}

body.black-friday .page-footer .newsletter-block-wrapper {
    background-image: none;
    background-color: #000;
}

body.black-friday .page-footer .newsletter-block-wrapper .newsletter {
    background-color: var(--bf-surface) !important;
    box-shadow: inset 0 0 0 1px var(--bf-line);
}

body.black-friday .page-footer .newsletter-block-wrapper .newsletter :is(.label, h4) {
    color: var(--bf-text);
}

body.black-friday .page-footer .newsletter-block-wrapper .newsletter-input {
    background-color: var(--bf-surface-2) !important;
    border-color: var(--bf-line-2) !important;
}

body.black-friday .page-footer .footer-content .pagebuilder-column-line .pagebuilder-column :is(.footer-category-title, .footer-category-subtitle) {
    color: var(--bf-muted);
}

body.black-friday .page-footer .footer-content .pagebuilder-column-line .pagebuilder-column .content,
body.black-friday .page-footer .footer-content .copyright p,
body.black-friday .page-footer .footer-bottom [data-content-type="text"] {
    color: var(--bf-text);
}

body.black-friday .page-footer .footer-content .pagebuilder-column-line .pagebuilder-column.block-accordion {
    border-color: var(--bf-line);
}

body.black-friday .page-footer .footer-content .pagebuilder-column-line .pagebuilder-column.block-accordion .footer-accordion.footer-apoio {
    border-color: var(--bf-line);
}

body.black-friday .page-footer .footer-content .pagebuilder-column-line .pagebuilder-column.block-accordion .footer-accordion::after {
    filter: invert(1);
}

body.black-friday .page-footer .footer-content .footer-social ul img {
    filter: invert(1);
}

body.black-friday .page-footer [style*="#013d7c"],
body.black-friday .page-footer [style*="#013D7C"],
body.black-friday .page-footer h4 {
    color: var(--bf-text) !important;
}

body.black-friday .page-footer [style*="#7e8c8d"],
body.black-friday .page-footer [style*="#7E8C8D"] {
    color: var(--bf-muted) !important;
}

body.black-friday .page-footer > .footer.content > div:last-of-type a span {
    color: var(--bf-muted);
}

body.black-friday .page-footer > .footer.content > div:last-of-type a svg path {
    fill: var(--bf-muted);
}