/* =============================================
   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;
}

/* =============================================
   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: 1200px;
    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;
    }
}