/* =============================================
   Ames Branding — CSS Variables
   ============================================= */
:root {
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-primary: #4B5C6C;
    --color-accent: #E3D8C4;
    --font-display: 'Arkhip', sans-serif;
    --font-heading: 'arno-pro', 'Helvetica Neue', Verdana, Arial, sans-serif;
    --font-body: 'roc-grotesk', 'Helvetica Neue', Verdana, Arial, sans-serif;
}

/* =============================================
   Font Face
   ============================================= */
@font-face {
    font-family: 'Arkhip';
    src: url('../fonts/Arkhip_font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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

a.logo img.main-logo,
a.logo img.small-logo {
    display: none !important;
}

a.logo::after {
    content: 'AMES TILE & STONE';
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--color-black);
    letter-spacing: 2px;
    white-space: nowrap;
}

/* =============================================
   Font Replacements
   Montserrat → Arno Pro (headings, specials)
   Roboto → Roc Grotesk (body, menus, buttons)
   ============================================= */

/* Body default — catches Roboto from @f_default */
body {
    font-family: var(--font-body) !important;
}

/* Headings — catches Montserrat from @f_h1, @f_h2, @f_h3, @f_special */
h1, h2, h3,
.product-item-name,
.page-title,
h1:not(.coming-soon-header){
    font-family: var(--font-heading) !important;
}

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

/* h4, h5, h6 — catches Roboto from @f_h4, @f_h5, @f_h6 */
h4, h5, h6,
.h4, .h5, .h6 {
    font-family: var(--font-body) !important;
}

/* Navigation menus — catches Roboto from @menu_font, @vermenu_font, @menu_drop_font */
.navigation,
.cdz-menu,
.cdz-horizontal-menu,
.groupmenu,
.groupmenu-drop {
    font-family: var(--font-body) !important;
}

/* Buttons — catches Roboto from @btn_default_font, @btn_primary_font, @btn_productitem_font */
button,
.action,
.btn,
a.action {
    font-family: var(--font-body) !important;
}

/* Header links and search — hardcoded Roboto in _header.less */
.header.panel .header.links > li,
.header.panel .header.links > li > a,
.block-search input[type="text"],
.block-search input[type="text"]::placeholder {
    font-family: var(--font-body) !important;
}

/* Breadcrumbs — hardcoded Roboto in _breadcrumbs.less */
.breadcrumbs {
    font-family: var(--font-body) !important;
}

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

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

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

.slide-text {
    font-family: var(--font-display) !important;
}

/* Home */
.cat-title a {
    font-family: var(--font-heading) !important;
    font-weight: 100 !important;
    font-size: 20px !important;
    color: var(--color-black) !important;
}

/* Menu links — hardcoded Roboto via Codazon font shorthand */
a.menu-link,
a.menu-link span,
.b-title,
.b-title span {
    font-family: var(--font-body) !important;
}

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

/* Form inputs — catches Roboto from font shorthand */
input,
select,
textarea,
input::placeholder {
    font-family: var(--font-body) !important;
}

/* Elfsight Instagram widget */
.eapps-instagram-feed-title-container {
    font-family: var(--font-body) !important;
}

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

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

/* Menu background — overrides @menu_background #74777A */
.header-wrapper-bottom,
.header-wrapper-content.sticky-menu.active {
    background-color: var(--color-primary) !important;
}
.menu-link {
    background: var(--color-primary) !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;
}

.owl-theme .owl-dots .owl-dot span,
.owl-theme .owl-dots .owl-dot.active span,
.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;
}

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

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

.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;
}