/* === Custom CSS for Professional Awesome ===
   Last Updated: 2026-07-27
   Purpose: Layout balance, branding, and clean mobile stacking
*/

/* === General Site Styling & Global Centering === */
.site-title a {
    display: none;
}

body:not(.home) .custom-header {
    display: none;
}

/* Standardize container width and ensure all main sections are centered */
.site-header .size-karuna-hero,
.custom-header,
.site-content,
footer.site-footer {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* === Branding Colors & Typography === */
.cwginstock-subscribe-form .panel-primary {
    border-color: #6636cc;
}

.cwginstock-subscribe-form .panel-primary > .panel-heading {
    background-color: #6636cc;
    border-color: #6636cc;
}

figcaption {
    font-size: 14px;
    line-height: 1.5;
    color: #666666;
}

h2, h3 {
    margin-bottom: 0.3em; 
}

.better-line-height {
    line-height: 1.6;
}

/* === Layout Tweaks === */
.no-sidebar:not(.page-template-full-width-page):not(.page-template-front-page) .content-area {
    max-width: 100%;
}

/* Improve readability of long product descriptions */
.single-product #tab-description {
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.page-id-28864 div#content.site-content {
    padding-top: 0px;
    max-width: 100vw;
}

footer.site-footer::before {
  content: "";
  display: block;
  height: 1px;
  background: #ccc;
  margin: 40px 0 20px;
}

/* === Plugin Fixes === */
.open-user-map .box-wrap .map-wrap .leaflet-map .leaflet-popup-content-wrapper .leaflet-popup-content .oum_location_image img {
    object-fit: contain !important;
    aspect-ratio: auto !important;
}

/* === General WooCommerce Customizations === */
table.shop_table th {
    background: #6636cc;
}

li.additional_information_tab,
li.pwb_tab_tab,
.pwb-single-product-brands,
.site-header-cart .cart-contents {
    display: none !important;
    padding-top: 1em;
}

.woocommerce-Tabs-panel--description > h2:first-child {
    display: none !important;
}

/* Keep customers oriented on the main shop and product-category screens. */
.woocommerce-products-header {
    margin: 0 0 1.75rem;
}

.woocommerce-products-header__title.page-title {
    color: #27272d;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    margin: 0.25em 0 0.4em;
}

.woocommerce-products-header .term-description {
    color: #55555d;
    max-width: 48rem;
}

.woocommerce div.product p.price, 
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce div.product .stock {
    color: #6636cc; 
}

.woocommerce div.product .stock {
    font-weight: bold; 
}

.woocommerce ul.products li.product {
    position: relative !important;
}

/* Custom WooCommerce Product Badges */
.pa-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #6a00ff;
    color: white;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 3px;
    z-index: 10;
    font-weight: 600;
}

.pa-badge.runs-small {
    top: 40px;
    background-color: #d00000;
}

.woocommerce span.onsale {
    background-color: #6636cc !important;
    color: #ffffff !important;
    border-radius: 2px !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    font-size: 11px !important; 
    letter-spacing: 1px;
    padding: 4px 8px !important; 
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    min-height: auto !important;
    min-width: auto !important;
    width: fit-content !important;
    line-height: 1 !important;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.2) !important;
    z-index: 9 !important;
}

/* === WooCommerce Variations Table Styling === */
.woocommerce div.product form.cart .variations, 
.woocommerce div.product form.cart .variations tbody {
    display: block !important;
    width: 100% !important;
}

.woocommerce div.product form.cart .variations tr {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important; 
    margin-bottom: 22px !important;
    border: none !important;
    width: 100% !important;
}

.woocommerce div.product form.cart .variations .label {
    display: block !important;
    flex: 0 0 125px !important; 
    max-width: 125px !important;
    padding-right: 15px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    text-align: left !important;
    margin: 0 !important;
    padding-top: 5px !important; 
}

.woocommerce div.product form.cart .variations .value {
    display: block !important; 
    flex: 1 1 auto !important;
    padding: 0 !important;
}

.woocommerce div.product form.cart .variations select {
    display: block !important;
    width: 300px !important; 
    height: 45px !important;
    padding: 8px 12px !important; 
    border-radius: 4px !important;
    border: 1px solid #ccc !important;
    font-size: 16px !important;
    background-color: #fff !important;
}

.reset_variations {
    display: inline-flex !important;
    align-items: center;
    margin-top: 15px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    color: #444 !important; 
    background: #f4f4f4 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    text-decoration: none !important;
}

/* === Shop Page Category Layout === */
.woocommerce .product-category {
    text-align: center;
    transition: transform 0.3s ease !important;
}

.woocommerce .product-category:hover {
    transform: translateY(-5px); 
}

.product-category a h3 {
    background: #f9f9f9 !important; 
    margin-top: 0 !important;
    padding: 15px 10px !important;
    font-size: 14px !important;
    border: 1px solid #eee !important;
    border-top: none !important; 
    transition: all 0.3s ease !important;
}

.product-category a:hover h3 {
    background: #6636cc !important; 
    color: #ffffff !important;
    border-color: #6636cc !important;
}

/* === Mobile Layouts (Max Width: 768px) === */
@media (max-width: 768px) {
    .site-description {
        white-space: normal;
        text-align: center;
        font-size: 13px;
        line-height: 1.5;
    }

    .single-post article {
        width: 100%;
    }

    /* Stacked 1-Column Grid for Mobile Shop Page */
    .site-main ul.products {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 15px !important;
        margin: 0 !important;
    }

    .site-main ul.products li.product {
        width: 100% !important;
        max-width: 450px !important; /* Prevents oversized layout on tablets */
        margin: 0 auto 30px !important; 
        text-align: center; 
    }

    .product-category a img {
        width: 100% !important;
        height: auto !important;
    }
}

/* === Tablet & Desktop Layouts (Min Width: 768px) === */
@media screen and (min-width: 768px) {
    .single-post article,
    .blog article {
        width: 900px !important;
        max-width: 90%;
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }

    .blog .attachment-karuna-featured-image {
        width: 100%;
        height: auto;
    }

    .blog .entry-footer {
        width: 100%;
        margin: 0 auto;
    }
}

/* === WooCommerce Gallery Photo Link Fixes === */
.woocommerce-product-gallery__image a {
	pointer-events: none;
}

body.pa-mwl-ready .woocommerce-product-gallery__image a {
	pointer-events: auto;
}

/*
 * WooCommerce initially hides galleries until its slider is ready. Some
 * optimization/plugin combinations leave the wrapper at zero opacity even
 * after the images have loaded, so guarantee that the primary buying imagery
 * remains visible.
 */
.woocommerce div.product div.images.woocommerce-product-gallery {
    opacity: 1 !important;
}
/* === WooCommerce Product Grid "Card" Styling === */
.site-main ul.products li.product {
    background: #f8f6fc; /* very light lavender tint */
    border: 1px solid #e6def7; /* slightly more visible outline */
    padding-bottom: 20px !important;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
}

/* Adds a soft shadow when hovering to make it feel interactive */
.site-main ul.products li.product:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}

/* Creates the container for the text/price/button below the image */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .button {
    margin-left: 15px !important;
    margin-right: 15px !important;
}

/* Gives the product title a bit more weight and consistent height */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    min-height: 45px;
    margin-top: 15px !important;
    line-height: 1.3;
}

/* Styles the Price area */
.woocommerce ul.products li.product .price {
    display: block;
    margin-bottom: 15px !important;
    font-weight: 700;
}

/* Standardizes the 'Select Options' / 'Read More' buttons */
.woocommerce ul.products li.product .button {
    background-color: #ede7fa !important;
    color: #4a3a73 !important;
    text-transform: uppercase;
    font-size: 12px !important;
    letter-spacing: 1px;
    font-weight: 700 !important;
    padding: 12px !important;
    border-radius: 2px !important;
    text-align: center;
    margin-top: auto !important;
}

.woocommerce ul.products li.product .button:hover {
    background-color: #6636cc !important;
    color: #ffffff !important;
}
/* YouTube Center Fix - Boxy Format */
.wp-block-embed-youtube {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
}

.wp-block-embed-youtube iframe, 
.wp-block-embed-youtube .wp-block-embed__wrapper iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 1.75 !important;
    display: block;
    margin: 0 auto;
}
/* Instagram Center Fix */
.wp-block-embed-instagram,
.wp-block-embed-instagram .wp-block-embed__wrapper,
.wp-block-embed-instagram .instagram-media {
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Checkout: add red "(required)" text after the shipping phone label */
body.page-id-1759.woocommerce-checkout 
.wp-block-woocommerce-checkout-shipping-address-block 
label[for="shipping-phone"]::after {
    content: " (required)";
    color: #d63638;
    font-weight: 700;
}
/* Keep the floating cart clear of the reCAPTCHA badge */
#fkcart-floating-toggler {
    bottom: 90px !important;
}

/* === Sitewide Table of Contents === */
.pa-product-toc {
    margin: 2em 0 2.5em;
    padding: 1.25em 1.5em;
    background: #f8f6fc;
    border: 1px solid #e6def7;
    border-left: 4px solid #6636cc;
    border-radius: 6px;
}

.pa-product-toc__title {
    margin: 0 0 0.75em;
    color: #2f2447;
    font-size: 1.1em;
    font-weight: 700;
}

.pa-product-toc__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75em 2em;
}

.pa-product-toc ul {
    margin: 0;
    padding-left: 1.25em;
}

.pa-product-toc ul ul {
    margin-top: 0.35em;
}

.pa-product-toc li {
    margin-bottom: 0.35em;
}

.pa-product-toc a {
    color: #5a2fba;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.pa-product-toc a:hover,
.pa-product-toc a:focus {
    color: #351a78;
}

/* Prevent anchored headings from hiding beneath the site header. */
[id^="rods-"],
[id^="quick-release-"],
[id^="diy-downforce-"] {
    scroll-margin-top: 110px;
}

@media (max-width: 600px) {
    .pa-product-toc {
        padding: 1em 1.1em;
    }

    .pa-product-toc__grid {
        grid-template-columns: 1fr;
        gap: 0.5em;
    }
}

/* === Mobile Header & Submenu Controls === */
.top-bar-wrapper {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.top-bar .site-description {
    flex: 1 1 auto;
    float: none;
    width: auto;
}

.top-bar .pa-social-navigation {
    flex: 0 0 auto;
    float: none;
    margin-left: auto;
    text-align: right;
    width: auto;
}

.top-bar .pa-social-navigation ul {
    align-items: center;
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
}

.top-bar .pa-social-navigation li {
    line-height: 1;
    padding: 0;
}

.top-bar .pa-social-navigation a {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    line-height: 1;
    width: 36px;
}

.top-bar .pa-social-navigation a:focus-visible {
    border-radius: 2px;
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .top-bar {
        padding: 0.55em 0;
    }

    .top-bar-wrapper {
        flex-direction: column;
        gap: 0.45rem;
    }

    .top-bar-wrapper .site-description {
        display: block;
        font-size: 12px;
        flex: 0 0 auto;
        line-height: 1.35;
        margin: 0;
        text-align: center;
        width: 100%;
    }

    .top-bar .pa-social-navigation {
        margin: 0;
        text-align: center;
        width: 100%;
    }

    .top-bar .pa-social-navigation ul {
        justify-content: center;
    }

    .top-bar .pa-social-navigation a {
        height: 44px;
        width: 44px;
    }

    .main-navigation.toggled ul ul {
        display: none;
    }

    .main-navigation.toggled li.submenu-open > ul {
        display: block;
    }

    .main-navigation .menu-item-has-children > a,
    .main-navigation .page_item_has_children > a {
        padding-right: 3.5rem;
    }

    .main-navigation .submenu-toggle {
        background: transparent;
        border: 0;
        border-left: 1px solid #dddddd;
        border-radius: 0;
        box-shadow: none;
        color: #333333;
        height: 44px;
        margin: 0;
        min-width: 44px;
        padding: 0;
        position: absolute;
        right: 0;
        text-shadow: none;
        top: 0;
        transform: none;
        width: 44px;
        z-index: 2;
    }

    .main-navigation .submenu-toggle::before {
        content: "+";
        display: block;
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 1;
    }

    .main-navigation .submenu-toggle[aria-expanded="true"]::before {
        content: "\2212";
    }

    .main-navigation .submenu-toggle:hover,
    .main-navigation .submenu-toggle:focus {
        background: #f4f0fc;
        color: #351a78;
        opacity: 1;
    }
}

@media (min-width: 768px) {
    .main-navigation .submenu-toggle {
        display: none;
    }
}
.site-title a {
    display: none;
}

/* Cookie preferences are available in the footer. */
button.cmplz-manage-consent.cmplz-btn {
    display: none !important;
}
/* Compact and vertically align the desktop header */
@media (min-width: 769px) {

	.site-branding-wrapper {
		align-items: center !important;
	}

	.site-branding {
		margin-left: 0 !important;
		padding-top: 12px !important;
		padding-bottom: 12px !important;
		line-height: 0;
		text-align: left;
	}

	/* Remove Karuna's invisible empty title line */
	.site-branding .site-title {
		display: none !important;
	}

	.site-branding .custom-logo-link {
		display: block;
		line-height: 0;
	}

	.site-branding .custom-logo {
		display: block;
		width: 250px !important;
		height: auto !important;
		margin: 0 !important;
	}

	.main-navigation {
		align-self: center;
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}
}