/* =============================================
   Ames Branding — CSS Variables
   ============================================= */
:root {
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-primary: #4B5C6C;
    --color-accent: #E3D8C4;
    /* Brand typography — two faces, named after the typeface. Roc Grotesk
       Wide is the only Roc Grotesk variant allowed per the rebrand (the
       regular cut is forbidden); EB Garamond is the serif body face. */
    --font-roc-grotesk-wide: 'roc-grotesk-wide', 'Helvetica Neue', Verdana, Arial, sans-serif;
    --font-eb-garamond:      'eb-garamond', 'Helvetica Neue', Verdana, Arial, sans-serif;
    --max-width: 1450px;
}

/* =============================================
   Header
   ============================================= */
.page-header .panel.wrapper {
    background-color: var(--color-primary) !important;
}

/* Ames SVG logo — emitted by Ames_Branding::html/header/logo.phtml
   (template applied via Ames\Branding\Plugin\Layout\MergePlugin).
   The wordmark is now a true-vector SVG <img> whose paths use
   `fill="currentColor"`, so the brand colour is set here via `color:`
   without re-editing the asset. Aspect ratio is 201:12 (~16.75:1);
   only `height` is set so `width: auto` preserves it intrinsically. */
.ames-logo-img {
    display: block;
    width: auto;
    height: 24px;
    color: var(--color-black);
    vertical-align: middle;
}

/* =============================================
   Font Replacements
   Designer mapping (2026-05-23):
     Arial / Roboto / Montserrat  → EB Garamond
     Arkhip                       → Roc Grotesk Wide
   Headings and title-shaped elements (h1-h6, page titles, block titles,
   product card titles, slide titles, filter section titles, nav, buttons)
   use --font-roc-grotesk-wide. Body, paragraphs, breadcrumbs, prices,
   filter content, sidebar body, and form inputs use --font-eb-garamond.
   Roc Grotesk regular is forbidden — anywhere the theme would otherwise
   paint it, force one of the two brand faces.
   ============================================= */

/* Body default — Codazon paints body in Roboto; rebrand swaps to EB Garamond. */
body {
    font-family: var(--font-eb-garamond) !important;
}

/* Headings — Roc Grotesk Wide per the rebrand. Catches Codazon's @f_h1/
   @f_h2/@f_h3/@f_special (originally Montserrat) and any inherited h1/h2/h3
   defaults across the site. */
h1, h2, h3,
.product-item-name,
.page-title,
h1:not(.coming-soon-header){
    font-family: var(--font-roc-grotesk-wide) !important;
}

.coming-soon-header {
    font-family: var(--font-eb-garamond) !important;
}

/* h4, h5, h6 — heading-shaped, stay with the h1-h3 face. */
h4, h5, h6,
.h4, .h5, .h6 {
    font-family: var(--font-roc-grotesk-wide) !important;
}

/* Navigation menus — catches Roboto from @menu_font, @vermenu_font, @menu_drop_font.
   Nav is display-shaped per the rebrand (matches account bar + menu-link). */
.navigation,
.cdz-menu,
.cdz-horizontal-menu,
.groupmenu,
.groupmenu-drop {
    font-family: var(--font-roc-grotesk-wide) !important;
}


.cdz-menu .groupdrop-link li a:hover {
    background-color: var(--color-primary) !important;
}

/* Buttons — catches Roboto from @btn_default_font, @btn_primary_font, @btn_productitem_font.
   Matches the footer newsletter-submit pattern (wide cut on CTAs). */
button,
.action,
.btn,
a.action {
    font-family: var(--font-roc-grotesk-wide) !important;
}

/* Account-bar links — hardcoded Roboto in _header.less; the rebrand
   uses the wide cut of Roc Grotesk at regular weight. */
.header.panel .header.links > li,
.header.panel .header.links > li > a {
    font-family: var(--font-roc-grotesk-wide) !important;
    font-weight: 400 !important;
}

/* Header search field — placeholder is set in EB Garamond per the rebrand
   (Figma node 450:31). */
.ames-header__bar .block-search input[type="text"],
.ames-header__bar .block-search input[type="text"]::placeholder {
    font-family: var(--font-eb-garamond) !important;
    font-size: 18px !important;
}

/* Breadcrumbs — hardcoded Roboto in _breadcrumbs.less; rebrand uses
   EB Garamond per AME-99. */
.breadcrumbs {
    font-family: var(--font-eb-garamond) !important;
}

/* Sidebar — hardcoded Roboto in _blocksidebar.less; body-shaped content. */
.sidebar .block {
    font-family: var(--font-eb-garamond) !important;
}

/* Layered-nav filter block title (PLP "Shop By" header). Codazon's
   _filter.less binds the Roboto font shorthand to
   `.page-main .sidebar .block:not(.block-static-block).filter .title strong`
   at specificity (0,5,2), beating the generic `.sidebar .block` rule above.
   Mirror the same selector here so cascade order resolves it. Heading-shaped
   → Roc Grotesk Wide. */
.page-main .sidebar .block:not(.block-static-block).filter .title,
.page-main .sidebar .block:not(.block-static-block).filter .title strong {
    font-family: var(--font-roc-grotesk-wide) !important;
}

/* Home store sections — hardcoded Montserrat in _homestore.less; titles. */
.home-store-wrapper h2,
.home-store-wrapper h3,
.home-store-wrapper .title {
    font-family: var(--font-roc-grotesk-wide) !important;
}

/* Catalog listings — hardcoded Montserrat Semi-bold in _listings.less */
.products-grid .product-item-name a {
    font-family: var(--font-eb-garamond) !important;
}


/* Hero slide kicker text — formerly Arkhip; rebrand uses Roc Grotesk Wide. */
.slide-text {
    font-family: var(--font-roc-grotesk-wide) !important;
}

/* Home — category tile titles. */
.cms-index-index .cat-title a {
    font-family: var(--font-eb-garamond) !important;
    font-weight: 100 !important;
    font-size: 20px !important;
    color: var(--color-black) !important;
}


/* Single-row header menu */
.header-wrapper-content .header.content {
    max-width: none !important;
}

/* Nav menu links — rebrand uses the wide cut of Roc Grotesk at regular
   weight (Codazon's font shorthand otherwise forces roc-grotesk 600). */
a.menu-link,
a.menu-link span {
    font-family: var(--font-roc-grotesk-wide) !important;
    font-weight: 400 !important;
}

/* Block titles — hardcoded Roboto via Codazon font shorthand; title-shaped. */
.b-title,
.b-title span {
    font-family: var(--font-roc-grotesk-wide) !important;
}

.cms-index-index .b-title,
.cms-index-index .b-title span {
    text-transform: uppercase;
}

/* Form inputs — catches Roboto from font shorthand. Matches the footer
   newsletter-email pattern (EB Garamond on typed text + placeholder). */
input,
select,
textarea,
input::placeholder {
    font-family: var(--font-eb-garamond) !important;
}

/* Elfsight Instagram widget — title bar above the feed. */
.eapps-instagram-feed-title-container {
    font-family: var(--font-roc-grotesk-wide) !important;
}

.slide-title {
    font-family: var(--font-eb-garamond) !important;
}

.slide-title span {
    font-size: 20px !important;
}

/* Product prices — Codazon's price markup paints in Montserrat via the theme's
   font shorthand. Rebrand calls for EB Garamond on PLP cards, mini-cart, and
   the PDP price box (covers the price value and the "PRICE" table heading). */
.price-box,
.price-box .price,
.product-item .price,
.product-info-price,
.product-info-price th,
.product-info-price td {
    font-family: var(--font-eb-garamond) !important;
}

/* Layered-nav filter section labels — hardcoded Roboto in Codazon's
   _filter.less. Title is heading-shaped; content is body data. */
.filter-options-title {
    font-family: var(--font-roc-grotesk-wide) !important;
}

.filter-options-content {
    font-family: var(--font-eb-garamond) !important;
}

/* =============================================
   Background Colors
   ============================================= */

/* Menu background — overrides @menu_background #74777A.
   Desktop-only: `.header-wrapper-bottom` is also the mobile off-canvas
   drawer panel (Codazon reuses the same element below 768px). An
   unscoped white background whitens the drawer and makes its white
   menu text and white `.dropdown-toggle` chevron glyphs invisible
   (white-on-white). Below 768px the drawer keeps Codazon's default
   dark skin, which matches the live site. */
@media (min-width: 768px), print {
    .page-header .header-wrapper-bottom,
    .page-header .header-wrapper-content.sticky-menu.active {
        background-color: var(--color-white) !important;
    }

    .page-header .header-wrapper-bottom {
        border-top: 1px solid color-mix(in oklab, var(--color-black), transparent 80%) !important;
        border-bottom: 1px solid color-mix(in oklab, var(--color-black), transparent 80%) !important;
    }

    .page-header .header-wrapper-bottom .menu-link {
        background: var(--color-white) !important;
        color: var(--color-black) !important;
    }
}

/* Primary action button — black base, slate hover (rebrand).
   Codazon's `.action.primary` emits a `font:` shorthand
   (`500 16px/1.35 Roboto, Poppins, …`) that beats the bare `.action`
   font-family override by within-rule cascade; the explicit selector
   here + !important wins the shorthand. */
.action.primary,
a.action.primary {
    background-color: var(--color-black) !important;
    border-color: var(--color-black) !important;
    color: var(--color-white) !important;
    font-family: var(--font-roc-grotesk-wide) !important;
}

.action.primary:hover,
a.action.primary:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

/* Slideshow buttons */
.cdz-slideshow a.action.primary,
.coming-soon-section a.action.primary {
    background-color: var(--color-black) !important;
    border: none !important;
}


.cdz-slideshow .owl-carousel.owl-theme .owl-nav [class*='owl-'] {
    background-color: var(--color-primary) !important;
    border: none !important;
}

.cdz-slideshow .owl-theme .owl-dots .owl-dot span,
.cdz-slideshow .owl-theme .owl-dots .owl-dot.active span,
.cdz-slideshow .owl-theme .owl-dots .owl-dot:hover span {
    background-color: var(--color-primary) !important;
}

.cdz-slideshow a.action.primary:hover,
.coming-soon-section a.action.primary:hover {
    background-color: var(--color-primary) !important;
}

.coming-soon-section a:hover {
    color: var(--color-white) !important;
}

.cdz-slideshow .slide-btn a:hover {
    color: var(--color-white) !important;
}

.cms-index-index .categories-list ul li:hover .cat-title {
    background: var(--color-black) !important;
}

.cms-index-index .categories-list ul li:hover .cat-title a {
    color: var(--color-white) !important;
}


.featured-look-container .cdz-title .b-title {
    background-color: var(--color-accent) !important;
    box-shadow: none !important;
}

/* Page Builder button — match .action.primary styling */
.cms-page-view .page-main .tab-title {
    font-family: var(--font-roc-grotesk-wide) !important;
}

.cms-page-view .page-main a.pagebuilder-button-primary,
.cms-index-index .page-main a.pagebuilder-button-primary {
    display: inline-block;
    padding: 7px 15px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-white) !important;
    background-color: var(--color-black) !important;
    border: 1px solid var(--color-black) !important;
    border-radius: 0;
    cursor: pointer;
    vertical-align: top;
    margin-bottom: 5px;
    transition: all 0.3s ease;
}

.cms-page-view .page-main a.pagebuilder-button-primary:hover,
.cms-index-index .page-main a.pagebuilder-button-primary:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    text-decoration: none;
}

.cms-page-view .page-main a:not(.action) {
    color: var(--color-primary) !important;
}

/* =============================================
   Carousel — cdz-slideshow (hero) — AME-23
   Overrides Codazon theme rules in
   app/design/frontend/Codazon/fastest/amestile/
       web/css/source/layout/_slideshow.less
   ============================================= */

/* Hero arrows: half-pill flush with slider edges, Peppercorn bg, white chevron.
   The base rule resets the theme's 30×30 white-bordered luma button. */
.cdz-slideshow .owl-carousel.owl-theme .owl-nav [class*='owl-'] {
    width: 40px !important;
    height: 80px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2;
}

.cms-index-index .categories-list .owl-carousel .owl-nav [class*='owl-'].owl-next,
.cms-index-index .categories-list .owl-carousel .owl-nav [class*='owl-'].owl-prev {
    background: var(--color-primary) !important;
}

.cdz-slideshow .owl-carousel.owl-theme .owl-nav [class*='owl-'].owl-prev:before {
    transform: translateX(-0.3em) !important;
}

.cdz-slideshow .owl-carousel.owl-theme .owl-nav [class*='owl-'].owl-next:before {
    transform: translateX(0.3em) !important;
}

    /* Left arrow — flat side glued to slider's LEFT edge; rounded RIGHT side
       curves INTO the slider as a true semicircle (radius = height/2 per Figma 76:645). */
.cdz-slideshow .owl-carousel.owl-theme .owl-nav .owl-prev,
.cms-index-index .categories-list .owl-carousel .owl-nav [class*='owl-'].owl-prev {
    left: 0 !important;
    right: auto !important;
    border-top-right-radius: 40px !important;
    border-bottom-right-radius: 40px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Right arrow — flat side glued to slider's RIGHT edge; rounded LEFT side
   curves INTO the slider as a true semicircle (radius = height/2 per Figma 76:648). */
.cdz-slideshow .owl-carousel.owl-theme .owl-nav .owl-next,
.cms-index-index .categories-list .owl-carousel .owl-nav [class*='owl-'].owl-next {
    right: 0 !important;
    left: auto !important;
    border-top-left-radius: 40px !important;
    border-bottom-left-radius: 40px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Chevron glyph — keep the theme's luma-icons content (\e617 left, \e608 right)
   but resize and recolor for the new button. */
.cdz-slideshow .owl-carousel.owl-theme .owl-nav [class*='owl-']::before {
    font-size: 18px !important;
    line-height: 80px !important;
    color: var(--color-white) !important;
}

/* Hover state: subtle darken via opacity (no Figma hover spec; keep accessible feedback). */
.cdz-slideshow .owl-carousel.owl-theme .owl-nav [class*='owl-']:hover {
    background: var(--color-primary) !important;
    opacity: 0.85;
}

/* Disabled state preserves theme convention. */
.cdz-slideshow .owl-carousel.owl-theme .owl-nav [class*='owl-'].disabled {
    opacity: 0.2;
}

/* Pagination dots: hollow Peppercorn rings → solid on active.
   Suppress the theme's luma-icons glyph entirely; draw with border + bg instead. */
.cdz-slideshow .owl-carousel.owl-theme .owl-dots .owl-dot span {
    width: 10px !important;
    height: 10px !important;
    background: transparent !important;
    border: 1.5px solid var(--color-primary) !important;
    border-radius: 50% !important;
    margin: 0 5px !important;
    display: inline-block !important;
}

.cdz-slideshow .owl-carousel.owl-theme .owl-dots .owl-dot span::before {
    content: '' !important;
    display: none !important;
}

.cdz-slideshow .owl-carousel.owl-theme .owl-dots .owl-dot.active span {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Hover preview on inactive dots — match active fill for affordance. */
.cdz-slideshow .owl-carousel.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* =============================================
   Codazon MegaMenu — hide auto-injected "Go to <item>" row
   ---------------------------------------------
   Codazon's vendor JS (Codazon_MegaMenu/web/js/menu.js) prepends an
   <li class="item tablet-item visible-tablet"> with a "Go to <linkText>"
   anchor to every parent dropdown. Production hides this via a `<style>`
   block stored in core_config_data (design/head/includes, store_id=1) —
   admin-managed CSS that's invisible to git and easy to lose to DB ops.
   Codifying the same rule here so it ships with the code regardless of
   admin DB state.
   ============================================= */
li.item.tablet-item.visible-tablet:has(> a.menu-go-link) {
    display: none !important;
}

/* =============================================
   Header — Ames brand row
   ---------------------------------------------
   `.ames-header__bar` is an Ames-owned container created by
   Ames\Branding\Plugin\Layout\MergePlugin: the logo, search and minicart
   wrapper containers are moved into it, out of Codazon's fixed three-
   column header grid (.row.cdz-fix-left > .col-* left/mid/right-col).
   The emptied grid containers no longer render, so this is a flat flex
   row — every selector is scoped under the owned `.ames-header__bar`
   root, with no bare structural class to bleed site-wide.
   ============================================= */
.ames-header__bar {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Logo holds the left edge; search and minicart settle to the right. */
.ames-header__bar .header-wrapper-left,
.ames-header__bar .header-wrapper-center{
    flex-grow: 1;
}

/* Search field — Codazon frames it in a 2px primary-color box; the
   rebrand wants an open field with a single Peppercorn underline
   (Figma 450:30 / 508:210). Overrides scoped to the owned bar root. */
.ames-header__bar .search-wrapper {
    border: 0 !important;
    border-bottom: 1px solid var(--color-primary) !important;
}

/* Magnifier — drop Codazon's white button chrome; plain Peppercorn icon. */
.ames-header__bar .action.search {
    background: transparent !important;
    border: 0 !important;
}

.ames-header__bar .action.search:before {
    color: var(--color-primary) !important;
}

/* Open field — no Codazon focus glow, no inset shadow. */
.ames-header__bar .block-search input[type="text"],
.ames-header__bar .block-search input[type="text"]:focus {
    box-shadow: none !important;
}

/* "Search..." placeholder — Peppercorn, upright (Codazon's _header.less
   sets the desktop placeholder italic; mobile is unaffected). */
.ames-header__bar .block-search input[type="text"]::placeholder {
    color: var(--color-primary) !important;
    font-style: normal !important;
    opacity: 1;
}

.panel.header {
    padding-right: 0;
}

/* Account-bar links keep Codazon's inter-item spacing, but the last
   *visible* link sits flush with the search field's right edge. Codazon
   hides several links (.ecc-header-link / .greet.welcome / .wishlist),
   so `:last-child` is unreliable — instead match a visible link that
   has no visible link after it. */
.page-header .header.panel > .header.links
    > li:not(.ecc-header-link):not(.welcome):not(.wishlist):not(
        :has(~ li:not(.ecc-header-link):not(.welcome):not(.wishlist))
    ) {
    margin-right: 0;
}


.form.contact legend {
    font-family: var(--font-roc-grotesk-wide) !important;
}

.form.contact .note,
.form.contact input {
    font-family: var(--font-eb-garamond) !important;
    font-size: 16px !important;
}

@media (min-width: 768px), print {
    .ames-header__bar {
        gap: 24px;
        padding: 27px 0;
    }
}

/* Mobile: hamburger + logo (and minicart, when logged in) on the first
   line; search wraps to its own full-width row below. */
@media (max-width: 767px) {
    .ames-header__bar {
        flex-wrap: wrap;
        gap: 12px;
        padding: 15px 20px;
    }

    .ames-header__bar .header-wrapper-center {
        order: 9;
        flex: 1 0 100%;
    }

    /* Codazon's _header.less centres the mobile logo with 60px side
       margins and a calc() width — sized for its absolutely-positioned
       toggle. In the flat flex bar the logo just needs its natural size. */
    .ames-header__bar a.logo {
        width: auto;
        margin: 0;
        display: flex;
        align-items: center;
    }

    /* Codazon's _header.less hides the desktop search on mobile
       (`.search-wrapper { display: none }`) because the theme shipped a
       separate mobile search block — which the MergePlugin removes. The
       single search is the only one now, so un-hide it for mobile Row 3. */
    .ames-header__bar .search-wrapper {
        display: block;
    }

    /* Hamburger sits in-flow to the left of the logo (Figma 508:133).
       Codazon absolutely-positions .nav-toggle for its own header
       layout; reset it to flow — but keep `position: relative` so its
       three bars (drawn by ::before / span::before / span::after, all
       absolutely positioned) still anchor to the toggle box. */
    .ames-header__bar .logo-left {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    /* Smaller logo on mobile to free up room beside the menu. */
    .ames-logo-img {
        height: 18px;
    }

    /* Codazon's mobile search styles the input text grey (#bab9ba);
       the rebrand keeps it black, matching desktop. */
    .ames-header__bar .block-search input[type="text"] {
        color: var(--color-black) !important;
    }

    .ames-header__bar .nav-toggle {
        position: relative;
        left: auto;
        top: auto;
        margin: 0;
    }

    /* Codazon draws the toggle bars in navy (#036); the rebrand icon is
       black. The bars are the toggle's ::before and span::before/::after. */
    .ames-header__bar .nav-toggle:before,
    .ames-header__bar .nav-toggle span:before,
    .ames-header__bar .nav-toggle span:after {
        background: var(--color-black) !important;
    }

    /* The rebrand keeps the account label in the slate bar on mobile;
       Codazon's _navigation.less hides .header.links below desktop. */
    .page-header .panel.header .header.links {
        display: block;
    }

    .section-item-title {
        font-family: var(--font-roc-grotesk-wide) !important;
    }
}

/* ==============================================================
   Mega-menu flat columns — per-column typography + heading icon.
   Codazon's native .col-sm-* grid owns column layout (dropdown item
   layout="1,1,1,1"); there is NO .ames-mm/.ames-mm__col container.
   Values mirror Figma "Ames — Mega Menu" node 5:100 (column 7:487):
     heading  Roc Grotesk Wide Medium 14px rgba(0,0,0,.9) uppercase,
              with the subcategory's SVG (Ames_CategoryMenuIcon widget,
              24px) flush right; 1px rgba(0,0,0,.15) rule 8px below.
     items    EB Garamond 16px #000, 20px apart, no bullets, no icons.
     "All …"  EB Garamond SemiBold (600), no trailing arrow.
   The icon lives on the column heading ONLY, never on leaf items
   (the heading category carries the SVG; leaf categories do not).
   ============================================================== */
.cdz-menu.new-megamenu .ames-mm__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    font-family: var(--font-roc-grotesk-wide);
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    color: rgba(0, 0, 0, 0.9);
}
/* Heading may be authored as plain text (<h3>…) or as a Category-Link
   widget — both inherit the title typography above. */
.cdz-menu.new-megamenu .ames-mm__title a,
.cdz-menu.new-megamenu .ames-mm__title .block-category-link {
    font: inherit;
    color: inherit;
    text-transform: inherit;
    text-decoration: none;
    margin: 0;
}
.cdz-menu.new-megamenu .ames-mm__icon { flex: 0 0 auto; width: 24px; height: 24px; object-fit: contain; }
.cdz-menu.new-megamenu .ames-mm__list { list-style: none; margin: 0; padding: 0; }
.cdz-menu.new-megamenu .ames-mm__item { margin: 0 0 12px; padding: 0; }
.cdz-menu.new-megamenu .ames-mm__item:last-child { margin-bottom: 0; }
.cdz-menu.new-megamenu .ames-mm__list .block-category-link { margin: 0; }
.cdz-menu.new-megamenu .ames-mm__list a {
    font-family: var(--font-eb-garamond);
    font-size: 16px;
    line-height: 1.3;
    color: #000 !important;
    text-transform: none !important;
    text-decoration: none;
    display: inline-block;
}
.cdz-menu.new-megamenu .ames-mm__item--all a,
.cdz-menu.new-megamenu .ames-mm__item--cta a { font-weight: 600; }
.cdz-menu.new-megamenu .ames-mm__list a:hover { opacity: 0.5 !important; text-decoration: none; }

.cdz-menu.new-megamenu .ames-mm__group { border: 0; margin: 0; padding: 0; }
.cdz-menu.new-megamenu .ames-mm__title { list-style: none; cursor: pointer; }
.cdz-menu.new-megamenu .ames-mm__title::marker,
.cdz-menu.new-megamenu .ames-mm__title::-webkit-details-marker { content: none; display: none; }
.cdz-menu.new-megamenu .ames-mm__title::after {
    content: "\f105";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 27px;
    line-height: 1;
    text-align: center;
    width: 40px;
    display: inline-block;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}
.cdz-menu.new-megamenu .ames-mm__group[open] > .ames-mm__title::after { transform: rotate(90deg); }

/* Desktop always shows every column expanded (mm-accordion-desktop.js
   forces .open=true); the chevron and pointer cursor are mobile-only cues
   for the accordion interaction, so hide them at desktop widths. */
@media (min-width: 768px) {
    .cdz-menu.new-megamenu .ames-mm__title { cursor: default; }
    .cdz-menu.new-megamenu .ames-mm__title::after { display: none; }
}

.cdz-horizontal-menu.new-megamenu .groupmenu { max-width: var(--max-width) !important; margin: 0 auto; }
@media (min-width: 769px) {
	.cdz-horizontal-menu.new-megamenu .groupmenu li.item.level0 { position: static !important; }
}
.cdz-menu.new-megamenu .groupmenu-drop.slidedown { left: 0 !important; top: 48px !important; }
.cdz-navigation:has(.cdz-menu.new-megamenu) { max-width: var(--max-width) !important; }
.cdz-horizontal-menu.new-megamenu .groupmenu li.level0 > a.menu-link { padding-left: 0 !important; padding-right: 48px !important; font-size: 16px !important; }
.cdz-horizontal-menu.new-megamenu .groupmenu li.item.level0 > .menu-link span { text-transform: capitalize !important; }
.cdz-horizontal-menu.new-megamenu .groupmenu li.item.level0.parent > .menu-link span { text-transform: uppercase !important; }
.cdz-horizontal-menu.new-megamenu .groupmenu li.item.level0.parent.open > .menu-link { opacity: 0.5 !important; transition: none !important; }
.cdz-horizontal-menu.new-megamenu .groupmenu li.item.level0.nav-group-end { margin-left: auto !important; }

@media only screen and (max-width: 767px) {
  .nav-sections-item-content {
    margin-top: 0 !important;
  }

  .nav-open .nav-sections {
    background: var(--color-white) !important;
  }

  .cdz-menu.new-megamenu .item.level-top > .menu-link, .cdz-menu.new-megamenu .item.level-top .dropdown-toggle {
    color: var(--color-black) !important;
  }

  .page-header .cdz-horizontal-menu.new-megamenu .groupmenu li.level0 > a.menu-link {
    padding: 16px 20px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
  }

  .cdz-menu.new-megamenu .groupmenu-drop {
    padding: 0 !important;
  }

  .cdz-menu.new-megamenu .ames-mm__title {
    padding: 16px 20px !important;
    justify-content: left;
  }

  .cdz-menu.new-megamenu .ames-mm__title::after {
    width: 0;
    margin-left: auto !important;
    padding-right: 5px !important;
  }

  .cdz-menu.new-megamenu .ames-mm__item {
    padding: 16px 20px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
  }

  .cdz-menu.new-megamenu .item.level-top > .dropdown-toggle:before {
    margin-top: 12px !important;
  }

  .cdz-menu.new-megamenu .ames-mm__icon {
    order: -1;
    margin-right: 14px;
  }

  .cdz-horizontal-menu.new-megamenu .groupmenu li.item.level0.parent.open > .menu-link {
    opacity: revert !important;
  }
}