/*
 * Smoking Rolling Paper — Legacy Brand Refresh 0.3.2
 *
 * Keeps the familiar red, orange, charcoal and grey identity
 * while presenting it in a cleaner modern layout.
 */

:root {
    --csm-brand-red: #ed1c24;
    --csm-brand-red-dark: #bd1118;
    --csm-brand-orange: #f58212;
    --csm-brand-charcoal: #292525;
    --csm-brand-grey: #8d8d8d;
    --csm-brand-light: #f5f6f8;

    --csm-red: var(--csm-brand-red);
    --csm-red-dark: var(--csm-brand-red-dark);
    --csm-orange: var(--csm-brand-orange);
    --csm-dark: var(--csm-brand-charcoal);
    --csm-page-bg: var(--csm-brand-light);
}

/*
 * Header and legacy logo
 */

.csm-site-header {
    position: relative !important;
    background: #ffffff !important;
    border-bottom: 0 !important;
    box-shadow:
        0 4px 18px rgba(41, 37, 37, 0.08) !important;
}

.csm-site-header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    height: 5px;
    background:
        linear-gradient(
            90deg,
            var(--csm-brand-orange) 0 22%,
            var(--csm-brand-red) 22% 92%,
            var(--csm-brand-grey) 92% 100%
        );
    pointer-events: none;
}

.csm-brand {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    text-decoration: none !important;
}

.csm-brand-mark {
    width: 300px !important;
    height: 72px !important;
    max-width: 32vw !important;
    display: block !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
    background-image:
        url("../images/smoking-rolling-paper-logo.png") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
}

/*
 * Prevent the previous inline SVG from expanding across the screen.
 */

.csm-brand-mark > *,
.csm-brand-mark svg {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.csm-brand-copy,
.csm-brand-text,
.csm-brand-title,
.csm-brand-subtitle {
    display: none !important;
}

.csm-site-header svg {
    width: 21px !important;
    height: 21px !important;
    max-width: 21px !important;
    max-height: 21px !important;
    display: block !important;
    overflow: hidden !important;
}

/*
 * Navigation
 */

.csm-site-header nav a,
.csm-site-header .menu a {
    color: var(--csm-brand-charcoal) !important;
    font-weight: 750 !important;
}

.csm-site-header nav a:hover,
.csm-site-header .menu a:hover,
.csm-site-header .current-menu-item > a,
.csm-site-header .current-menu-ancestor > a {
    color: var(--csm-brand-red) !important;
}

.csm-site-header button:hover,
.csm-site-header .csm-cart-link:hover,
.csm-site-header .csm-account-link:hover {
    color: var(--csm-brand-red) !important;
}

/*
 * Homepage and global interface
 */

.csm-home-hero strong,
.csm-home-hero em,
.csm-section-eyebrow,
.csm-catalog-eyebrow {
    color: var(--csm-brand-orange) !important;
}

.csm-home-hero h1,
.csm-category-card h2,
.csm-category-card h3,
.csm-catalog-heading h1 {
    color: var(--csm-brand-charcoal) !important;
}

.csm-home-hero .button,
.csm-primary-button,
button.csm-primary-button,
a.csm-primary-button {
    border-color: var(--csm-brand-red) !important;
    background: var(--csm-brand-red) !important;
    color: #ffffff !important;
}

.csm-home-hero .button:hover,
.csm-primary-button:hover {
    border-color: var(--csm-brand-red-dark) !important;
    background: var(--csm-brand-red-dark) !important;
}

/*
 * WooCommerce products, prices and actions
 */

.woocommerce ul.products li.product .price,
.single-product div.product .price {
    color: var(--csm-brand-red) !important;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.single-product div.product .single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order {
    background: var(--csm-brand-red) !important;
    color: #ffffff !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover,
.single-product div.product .single_add_to_cart_button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover {
    background: var(--csm-brand-red-dark) !important;
}

.woocommerce span.onsale {
    background: var(--csm-brand-red) !important;
}

.csm-catalog-heading {
    border-top: 4px solid var(--csm-brand-orange);
}

.woocommerce ul.products li.product:hover {
    border-color:
        rgba(237, 28, 36, 0.38) !important;
}

/*
 * Footer
 */

.csm-site-footer {
    background: var(--csm-brand-charcoal) !important;
}

.csm-site-footer h2,
.csm-site-footer h3,
.csm-site-footer strong {
    color: #ffffff !important;
}

.csm-site-footer a:hover {
    color: var(--csm-brand-orange) !important;
}

.csm-service-strip {
    border-top: 4px solid var(--csm-brand-red) !important;
}

/*
 * Mobile layout
 */

@media (max-width: 1050px) {
    .csm-brand-mark {
        width: 235px !important;
        height: 58px !important;
        max-width: 42vw !important;
    }
}

@media (max-width: 780px) {
    .csm-brand-mark {
        width: 205px !important;
        height: 50px !important;
        max-width: 58vw !important;
    }

    .csm-site-header::after {
        height: 4px;
    }
}

@media (max-width: 420px) {
    .csm-brand-mark {
        width: 175px !important;
        height: 43px !important;
        max-width: 57vw !important;
    }
}