.mobile-nav-toggle {
  /* Allow the hamburger to sit inline with other icons and remain on top */
  position: relative !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
  background: none !important;
  margin-left: 0.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  /* match header-action-btn spacing so icons align vertically */
  padding: 0.5rem !important;
  align-self: center !important;
}

/* Align the inner icon to match other header icons */
.header .main-header .header-actions .mobile-nav-toggle i,
.mobile-nav-toggle > i {
  font-size: 24px !important;
  line-height: 1 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-1px) !important;
}

/* If icon still off by 1-2px on some devices, tweak translateY as needed */

/* Ensure header action buttons are consistently centered */
.header .main-header .header-actions .header-action-btn,
.header .main-header .header-actions .header-action-btn > i,
.header .main-header .header-actions .mobile-nav-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Force same height so buttons sit on the same row */
.header .main-header .header-actions .header-action-btn {
  height: 40px !important;
  padding: 0 0.5rem !important;
}

.header .main-header .header-actions .mobile-nav-toggle {
  height: 40px !important;
}

@media (min-width: 1200px) {
  .mobile-nav-toggle {
    display: none !important;
  }
}

/* Extra-specific rule to ensure the hamburger is hidden on desktop/layout >= 1200px
   (some other styles in template were forcing it visible). */
@media (min-width: 1200px) {
  .header .main-header .header-actions .mobile-nav-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Strong overrides to cancel other stylesheet rules that force the hamburger off-row */
.header .main-header .container-fluid .header-actions .mobile-nav-toggle,
.header .main-header .header-actions .mobile-nav-toggle {
  /* remove any fixed positioning applied by other CSS */
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  /* match the header-action-btn appearance exactly */
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.5rem !important;
  margin: 0 0 0 0.5rem !important;
  height: 40px !important;
  line-height: 1 !important;
  font-size: 24px !important;
  color: inherit !important;
  z-index: 99999 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

/* Ensure the inner icon aligns with other icons */
.header .main-header .header-actions .mobile-nav-toggle > i {
  display: inline-block !important;
  font-size: 24px !important;
  line-height: 1 !important;
  transform: translateY(0) !important;
  margin: 0 !important;
}

/* Force-show hamburger on small viewports if other styles hide it */
.mobile-nav-toggle {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mobile-nav-toggle > i {
  color: inherit !important;
  display: inline-block !important;
}

/* Prevent the hamburger from being pushed or clipped off the right edge */
.header .main-header .header-actions {
  overflow: visible !important;
}

.header .main-header .header-actions .mobile-nav-toggle {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  margin-right: 0.5rem !important;
  right: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

@media (max-width: 1199px) {
  .header .main-header .header-actions {
    padding-right: 0.5rem !important;
  }
}

/* Pin the hamburger for all non-desktop viewports so it won't be clipped and remains clickable. */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    position: fixed !important;
    top: 12px !important;
    /* shift hamburger left so it sits next to other header icons */
    right: 96px !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 2147483647 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
    background: transparent !important;
    border-radius: 6px !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Ensure inner icon doesn't eat pointer events away from the button */
  .mobile-nav-toggle > i {
    pointer-events: none !important;
  }
}

/* Hide duplicate larger chevron inserted by template menu scripts when an mm-toggle
   caret is also present. The small .mm-toggle caret remains and continues to
   control submenu expand/collapse. */
.menu .toggle-dropdown,
.menu-submenu .toggle-dropdown,
.header .toggle-dropdown,
.navbar .toggle-dropdown {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* If anchors used extra right padding to make room for the hidden chevron,
   reduce it so text alignment looks correct (adjust if necessary). */
.menu a[style*="padding-right"],
.menu-submenu a[style*="padding-right"] {
  padding-right: 0.75rem !important;
}


/* Compact vertical spacing for comments and replies on the content page */
.product-details .info-tabs-container .reviews-content .customer-reviews-list .review-card {
    margin-bottom: 0.75rem !important;
}

/* Even tighter spacing for replies to keep them visually grouped with their parent */
.product-details .info-tabs-container .reviews-content .customer-reviews-list .review-card.review-card--reply {
    margin-bottom: 0.25rem !important;
}

/* Force reset for the showcase box when .no-card-style is present */
.product-details .product-gallery .main-showcase.no-card-style {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

.product-details .product-gallery .main-showcase.no-card-style .image-zoom-container {
    aspect-ratio: auto !important;
}

/* Container track bar replicating image_93367c.png */
.product-tabs-wrapper {
    background: #ffffff;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid #f1f3f5;
}

/* Clear default bootstrap nav tab parameters */
.custom-pill-tabs {
    border: none !important;
    gap: 8px;
    align-items: center;
}

    .custom-pill-tabs .nav-item {
        margin: 0;
    }

    /* Non-active buttons configuration */
    .custom-pill-tabs .nav-link {
        background: transparent !important;
        border: none !important;
        color: #7a7a7a !important;
        font-weight: 600;
        font-size: 1rem;
        padding: 12px 28px;
        border-radius: 8px !important;
        transition: color 0.2s ease, background-color 0.2s ease;
    }

        .custom-pill-tabs .nav-link:hover {
            color: #212529 !important;
        }

        /* High-contrast solid dark active capsule matching image_93367c.png */
        .custom-pill-tabs .nav-link.active {
            background-color: #1e2125 !important; /* Premium dark anthracite */
            color: #ffffff !important;
            font-weight: 700;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

/* Interior area animations */
.custom-product-tab-content {
    background: transparent;
    margin-top: 1.5rem;
}

    .custom-product-tab-content .tab-pane {
        animation: slideUpTab 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

@keyframes slideUpTab {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* overrides.css */
.brand-filter-widget .brand-list.sidebar-category-list {
    max-height: none;
    overflow-y: visible;
}
.storycard--columns-small .product-card .product-name{
    text-overflow: initial !important;
    white-space: normal !important;
    overflow: visible !important;
}

/* Event Ticker Refactor: Support two slides and text wrapping */
.header .top-bar .announcement-slider {
  height: 60px !important; /* 30px * 2 slides */
  overflow: hidden;
}

.header .top-bar .announcement-slider .swiper-wrapper {
  height: auto !important;
}

.header .top-bar .announcement-slider .swiper-slide {
  text-align: center;
  height: 30px !important;
  line-height: 1.2 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  white-space: normal !important;
}

.header .top-bar .announcement-slider .swiper-slide a {
  display: block;
  width: 100%;
}

/* Badge styling for the ticker */
.ticker-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 8px;
  text-transform: uppercase;
  font-weight: 700;
  vertical-align: middle;
  display: inline-block;
}

/* Sleep slide: muted style to distinguish from event slides */
.header .top-bar .announcement-slider .swiper-slide-sleep {
  color: var(--default-color, #666) !important;
  opacity: 0.75;
  font-style: italic;
}

/* NAV-003: Style navigation buttons (e.g. Browse dropdown button) to match .navmenu a links */
@media (min-width: 1200px) {
  .header-nav .navmenu .dropdown > button.nav-link,
  .navmenu .dropdown > button.nav-link {
    color: var(--nav-color) !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
    font-family: var(--nav-font) !important;
    font-weight: 400 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    white-space: nowrap !important;
    transition: 0.3s !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
  }
  .header-nav .navmenu li:hover > button.nav-link,
  .header-nav .navmenu .dropdown.active > button.nav-link,
  .header-nav .navmenu .dropdown.dropdown-active > button.nav-link,
  .navmenu li:hover > button.nav-link,
  .navmenu .dropdown.active > button.nav-link,
  .navmenu .dropdown.dropdown-active > button.nav-link {
    color: var(--nav-hover-color) !important;
  }
}

@media (max-width: 1199px) {
  .header-nav .navmenu .dropdown > button.nav-link,
  .navmenu .dropdown > button.nav-link {
    color: var(--nav-dropdown-color) !important;
    padding: 10px 20px !important;
    font-family: var(--nav-font) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    white-space: nowrap !important;
    transition: 0.3s !important;
    background: none !important;
    border: none !important;
    width: 100% !important;
    text-align: left !important;
    cursor: pointer !important;
  }
  .header-nav .navmenu .dropdown > button.nav-link:hover,
  .header-nav .navmenu .dropdown.active > button.nav-link,
  .header-nav .navmenu .dropdown.dropdown-active > button.nav-link,
  .navmenu .dropdown > button.nav-link:hover,
  .navmenu .dropdown.active > button.nav-link,
  .navmenu .dropdown.dropdown-active > button.nav-link {
    color: var(--nav-dropdown-hover-color) !important;
  }
}

/* Ensure header dropdowns float cleanly above all layout content */
.main-header .dropdown,
.main-header .account-dropdown,
.main-header .top-bar-item.dropdown,
.main-header .language-dropdown {
    position: relative !important;
}

/* Ensure dropdown menus align correctly to the right and float above page content */
.main-header .dropdown-menu,
.main-header .account-dropdown .dropdown-menu,
.main-header .language-dropdown .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    margin-top: 0.5rem !important;
    z-index: 10000 !important;
}

/* Language dropdown specific styles in main-header */
.main-header .language-dropdown .dropdown-toggle {
    color: var(--default-color, #444);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.main-header .language-dropdown .dropdown-toggle:hover {
    color: var(--accent-color, #0d6efd);
}

.main-header .language-dropdown .dropdown-menu {
    min-width: 140px;
    padding: 0.5rem 0;
    background-color: var(--surface-color, #fff);
    border-radius: 6px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid color-mix(in srgb, var(--default-color, #000), transparent 90%);
}

.main-header .language-dropdown .dropdown-menu .dropdown-item {
    padding: 0.4rem 1rem;
    font-size: 14px;
    color: var(--default-color, #444);
    cursor: pointer;
}

.main-header .language-dropdown .dropdown-menu .dropdown-item:hover,
.main-header .language-dropdown .dropdown-menu .dropdown-item.active {
    background-color: color-mix(in srgb, var(--accent-color, #0d6efd), transparent 90%);
    color: var(--accent-color, #0d6efd);
}

.main-header .language-dropdown .dropdown-menu .dropdown-item .selected-icon {
    color: var(--accent-color, #0d6efd);
    font-weight: bold;
}

/* Transparent backdrop for outside-click dismissal */
.header-dropdown-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9998;
    background: transparent;
}

/* DEF-002: At very narrow widths (<= 360px) the header action cluster overflows the
   320px viewport because of added right margins/padding. Trim only the outer spacing
   so the hamburger and all header icons stay fully inside the viewport in EN and FR. */
@media (max-width: 359.98px) {
    .header .main-header .header-actions {
        padding-right: 0 !important;
    }

    .header .main-header .header-actions .language-dropdown {
        margin-right: 8px !important;
    }

    .header .main-header .container-fluid .header-actions .mobile-nav-toggle {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* DEF-004: The desktop "Browse" submenu is absolutely positioned inside layout even
   when hidden (visibility:hidden), so its children can widen the document (e.g. 14px
   horizontal overflow at 1280px in EN). Keep it out of the layout flow until the menu
   is actually shown, and anchor it to the right edge of the last nav item. */
@media (min-width: 1200px) {
    .header-nav .navmenu .dropdown > ul.menu-submenu {
        display: none;
        left: auto;
        right: 0;
        top: 100%;
    }

    .header-nav .navmenu .dropdown > ul.menu-submenu.open,
    .header-nav .navmenu .dropdown:hover > ul.menu-submenu {
        display: block;
        visibility: visible;
        opacity: 1;
    }
}

/* WCAG 2.4.7 Focus Visible / 1.4.11 Non-text Contrast: Clear distinguishable focus indicators */
@media (min-width: 1200px) {
  .header-nav .navmenu .dropdown > button.nav-link:focus-visible,
  .navmenu .dropdown > button.nav-link:focus-visible,
  #browse-dropdown-btn:focus-visible,
  .header-nav .navmenu a:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
    color: #ffffff !important;
  }
}

@media (max-width: 1199px) {
  .header-nav .navmenu .dropdown > button.nav-link:focus-visible,
  .navmenu .dropdown > button.nav-link:focus-visible,
  #browse-dropdown-btn:focus-visible,
  .navmenu a:focus-visible {
    outline: 2px solid #0d6efd !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
  }
}

.header .main-header .header-actions .header-action-btn:focus-visible,
.header .main-header .header-actions .mobile-nav-toggle:focus-visible,
.header .main-header .account-dropdown button:focus-visible,
.main-header .language-dropdown .dropdown-toggle:focus-visible,
.main-header .dropdown-toggle:focus-visible,
.header-action-btn:focus-visible {
    outline: 2px solid #0d6efd !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* Site Identity Block */
.site-identity {
    background-color: var(--surface-color, #f8f9fa);
    border-bottom: 1px solid var(--border-color, #e9ecef);
}

.site-title {
    color: var(--heading-color, #2b4c7e);
    font-family: var(--heading-font, 'Montserrat', sans-serif);
    letter-spacing: 0.02em;
}

.site-beta-badge {
    vertical-align: super;
    opacity: 0.8;
}

.site-subtitle {
    color: var(--default-color, #444);
    font-weight: 400;
}

@media (max-width: 575.98px) {
    .site-title {
        font-size: 1rem;
    }
    .site-beta-badge {
        font-size: 0.65em;
    }
    .site-subtitle {
        font-size: 0.7rem;
    }
}

/* Mobile: Reduce excessive vertical spacing in featured-teaser area for feature-vertical variant */
@media (max-width: 767.98px) {
    .storycard--featured-large.storycard--feature-vertical,
    .category-featured.storycard--featured-large.storycard--feature-vertical {
        gap: 0.5rem !important;
    }

    .storycard--featured-large.storycard--feature-vertical .category-image {
        margin-top: 0.5rem !important;
    }

    .storycard--featured-large.storycard--feature-vertical .category-image img,
    .storycard--featured-large.storycard--feature-vertical .cf-embed img {
        margin: 0.25rem 0 !important;
    }

    .storycard--featured-large.storycard--feature-vertical .featured-teaser {
        margin-top: 0.25rem !important;
    }
}