/*
Theme Name:   Whiskers Child
Theme URI:    http://cmsmasters.net/whiskers-child/
Author:       cmsmasters
Author URI:   http://cmsmasters.net/
Description:  Whiskers Child Theme
Template:     whiskers
Version:      1.0.0
License:
License URI:
Text Domain:  whiskers-child
Tags:         one-column, two-columns, three-columns, four-columns, left-sidebar,
              right-sidebar, custom-background, custom-colors, custom-header,
              custom-menu, editor-style, featured-image-header, featured-images,
              flexible-header, full-width-template, microformats, post-formats,
              rtl-language-support, sticky-post, theme-options, threaded-comments,
              translation-ready
*/


/* ================================================================
   NATPET — CHILD THEME CUSTOM STYLES
   ----------------------------------------------------------------
   Scope   :  .np-styled-page  (added via functions.php)
              Applies to standard pages ONLY.
              Does NOT affect: home, shop, blog, archives.
   Font    :  Nunito — loaded via functions.php (Google Fonts)
   Colours :  Purple  #856384  |  Green  #4A5728
   ================================================================ */


/* ----------------------------------------------------------------
   DESIGN TOKENS
   ---------------------------------------------------------------- */
:root {
    /* Brand colours */
    --np-purple        : #856384;
    --np-purple-dark   : #5e4460;
    --np-purple-mid    : #a07e9e;
    --np-purple-light  : #c9b4c8;
    --np-purple-pale   : #f6f1f6;

    --np-green         : #4A5728;
    --np-green-dark    : #323c1b;
    --np-green-mid     : #6b7d3e;
    --np-green-light   : #afc07c;
    --np-green-pale    : #f1f4ea;

    /* Neutrals */
    --np-text          : #2a2a2a;
    --np-text-mid      : #555555;
    --np-text-light    : #888888;
    --np-white         : #ffffff;
    --np-bg-soft       : #fafaf8;

    /* Font */
    --np-font          : 'Nunito', sans-serif;

    /* Shape */
    --np-radius        : 14px;
    --np-radius-sm     : 8px;

    /* Shadow */
    --np-shadow        : 0 4px 24px rgba(133, 99, 132, 0.10);
    --np-shadow-hover  : 0 10px 40px rgba(133, 99, 132, 0.22);

    /* Motion */
    --np-ease          : cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --np-duration      : 0.32s;
    --np-transition    : var(--np-duration) var(--np-ease);
}


/* ----------------------------------------------------------------
   KEYFRAME ANIMATIONS
   ---------------------------------------------------------------- */

/* Sections / cards enter from below */
@keyframes np-fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Page-title banner slides down */
@keyframes np-slideInDown {
    from { opacity: 0; transform: translateY(-22px); }
    to   { opacity: 1; transform: translateY(0);     }
}

/* Same animation but preserves translate(-50%,-50%) centering for pseudo-elements */
@keyframes np-slideInDown-centered {
    from { opacity: 0; transform: translate(-50%, calc(-50% - 22px)); }
    to   { opacity: 1; transform: translate(-50%, -50%);              }
}

/* Decorative underline grows outward */
@keyframes np-growLine {
    from { width: 0;    opacity: 0; }
    to   { width: 56px; opacity: 1; }
}

/* Subtle button breathing pulse */
@keyframes np-pulse {
    0%, 100% { box-shadow: 0 4px 18px rgba(133, 99, 132, 0.20); }
    50%       { box-shadow: 0 8px 32px rgba(133, 99, 132, 0.38); }
}


/* ----------------------------------------------------------------
   OVERRIDE ELEMENTOR GLOBAL COLOUR TOKENS (scoped to styled pages)
   The kit already has purple & green registered; this updates them
   to the user's exact brand values without touching other pages.
   ---------------------------------------------------------------- */
body.np-styled-page {
    --e-global-color-da973a8 : #856384;   /* main purple  */
    --e-global-color-0317b8e : #4A5728;   /* main green   */
}


/* ================================================================
   HOME PAGE — smooth video load (no black flash)
   Video starts invisible so the white container shows instead.
   JS fades it in once playing. Fallback: shows after 4s.
   ================================================================ */
.elementor-background-video-container {
    background-color : #ffffff !important;
}

video.elementor-background-video-hosted {
    opacity    : 0;
    transition : opacity 1.2s ease !important;
}

/* ================================================================
   BASE — font & selection colour
   ================================================================ */

body.np-styled-page #middle,
body.np-styled-page .headline {
    font-family: var(--np-font);
}

body.np-styled-page ::selection {
    background : var(--np-purple);
    color      : var(--np-white);
}


/* ================================================================
   PAGE TITLE BANNER  (.headline)
   ================================================================ */

body.np-styled-page .headline {
    background : linear-gradient(
        135deg,
        var(--np-purple-dark) 0%,
        var(--np-purple)      50%,
        var(--np-green)       100%
    );
    position : relative;
    overflow : hidden;
}

/* Decorative translucent orbs — purely visual, no content */
body.np-styled-page .headline::before,
body.np-styled-page .headline::after {
    content        : '';
    position       : absolute;
    border-radius  : 50%;
    pointer-events : none;
}
body.np-styled-page .headline::before {
    width      : 420px;
    height     : 420px;
    top        : -140px;
    right      : -60px;
    background : rgba(255, 255, 255, 0.06);
}
body.np-styled-page .headline::after {
    width      : 240px;
    height     : 240px;
    bottom     : -90px;
    left       : 4%;
    background : rgba(255, 255, 255, 0.04);
}

/* Subtle top accent stripe */
body.np-styled-page .headline_color {
    height     : 3px;
    background : linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.10) 100%
    );
    position : absolute;
    top  : 0;
    left : 0;
    right: 0;
}

body:not(.home) .headline_outer {
    display         : flex !important;
    flex-direction  : column;
    justify-content : flex-end;
    padding         : 20px 30px 40px;
    position        : relative;
    z-index         : 1;
}

/* Disable the theme's inline-block vertical-centering trick on all non-home pages */
body:not(.home) .headline_aligner {
    display : none !important;
}

body:not(.home) .headline_inner {
    margin     : 0 !important;
    width      : 100% !important;
    text-align : center;
}

/* Animate the inner block in on load */
body.np-styled-page .headline_inner {
    animation : np-slideInDown 0.55s var(--np-ease) both;
}

/* Page H1 */
body.np-styled-page h1.entry-title {
    font-family  : var(--np-font) !important;
    color        : var(--np-white) !important;
    font-size    : clamp(1.75rem, 4vw, 2.75rem);
    font-weight  : 700;
    letter-spacing : -0.02em;
    line-height  : 1.2;
    margin       : 0 0 10px;
    text-shadow  : 0 2px 16px rgba(0, 0, 0, 0.18);
}

/* Animated underline accent below H1 */
body.np-styled-page h1.entry-title::after {
    content       : '';
    display       : block;
    height        : 3px;
    background    : rgba(255, 255, 255, 0.55);
    border-radius : 2px;
    margin        : 14px auto 0;
    animation     : np-growLine 0.5s 0.35s var(--np-ease) both;
}

/* Breadcrumbs */
body.np-styled-page .cmsmasters_breadcrumbs_inner,
body.np-styled-page .cmsmasters_breadcrumbs_inner a,
body.np-styled-page .cmsmasters_breadcrumbs_inner span,
body.np-styled-page .cmsmasters_breadcrumbs_inner .breadcrumbs_sep {
    font-family    : var(--np-font);
    font-size      : 0.82rem;
    font-weight    : 400;
    letter-spacing : 0.04em;
    color          : rgba(255, 255, 255, 0.72) !important;
}
body.np-styled-page .cmsmasters_breadcrumbs_inner a:hover {
    color           : rgba(255, 255, 255, 1) !important;
    text-decoration : none;
}


/* ================================================================
   MIDDLE / CONTENT WRAPPER
   ================================================================ */

body.np-styled-page .middle_inner {
    background : var(--np-bg-soft);
}


/* ================================================================
   ELEMENTOR SECTIONS — LAYOUT & SCROLL ANIMATIONS
   ================================================================ */

/* Alternate very subtle background tints between sections */
body.np-styled-page .elementor-top-section:nth-child(even) {
    background-color : var(--np-purple-pale);
}

/* ── Scroll-driven entrance animation (Chrome/Edge 115+, Safari 18+) ─ */
@supports (animation-timeline: view()) {

    body.np-styled-page .elementor-top-section {
        animation        : np-fadeInUp 0.65s var(--np-ease) both;
        animation-timeline : view();
        animation-range  : entry 0% entry 22%;
    }

    /* Disable on mobile — avoids jank on low-power devices */
    @media (max-width: 767px) {
        body.np-styled-page .elementor-top-section {
            animation : none;
            opacity   : 1;
        }
    }
}

/* ── Fallback for Firefox / older browsers ─────────────────────── */
/* All sections fade-in together shortly after page load */
@supports not (animation-timeline: view()) {

    body.np-styled-page .elementor-top-section {
        animation : np-fadeInUp 0.7s var(--np-ease) both;
    }
    body.np-styled-page .elementor-top-section:nth-child(1) { animation-delay: 0.00s; }
    body.np-styled-page .elementor-top-section:nth-child(2) { animation-delay: 0.07s; }
    body.np-styled-page .elementor-top-section:nth-child(3) { animation-delay: 0.14s; }
    body.np-styled-page .elementor-top-section:nth-child(4) { animation-delay: 0.21s; }
    body.np-styled-page .elementor-top-section:nth-child(5) { animation-delay: 0.28s; }
    body.np-styled-page .elementor-top-section:nth-child(6) { animation-delay: 0.30s; }
}


/* ================================================================
   TYPOGRAPHY — TEXT EDITOR WIDGETS
   ================================================================ */

body.np-styled-page .elementor-widget-text-editor {
    font-family : var(--np-font);
}

/* Body paragraphs */
body.np-styled-page .elementor-widget-text-editor p {
    font-family  : var(--np-font);
    font-size    : 1rem;
    line-height  : 1.88;
    color        : var(--np-text);
    margin-bottom: 0.9em;
}

/* H2 — major section heading */
body.np-styled-page .elementor-widget-text-editor h2 {
    font-family    : var(--np-font) !important;
    color          : var(--np-purple) !important;
    font-size      : clamp(1.4rem, 3vw, 1.9rem);
    font-weight    : 700;
    letter-spacing : -0.01em;
    line-height    : 1.3;
    margin-bottom  : 0.6em;
}

/* H3 — sub-section heading */
body.np-styled-page .elementor-widget-text-editor h3 {
    font-family   : var(--np-font) !important;
    color         : var(--np-green) !important;
    font-size     : clamp(1.1rem, 2.5vw, 1.45rem);
    font-weight   : 700;
    line-height   : 1.4;
    margin-bottom : 0.5em;
}

/* H5, H6 — small-caps label style */
body.np-styled-page .elementor-widget-text-editor h5,
body.np-styled-page .elementor-widget-text-editor h6 {
    font-family    : var(--np-font);
    color          : var(--np-text-mid);
    font-size      : 0.78rem;
    font-weight    : 700;
    text-transform : uppercase;
    letter-spacing : 0.10em;
    margin-bottom  : 0.4em;
}

/* Inline links */
body.np-styled-page .elementor-widget-text-editor a {
    color           : var(--np-purple);
    text-decoration : none;
    border-bottom   : 1.5px solid var(--np-purple-light);
    transition      : color var(--np-transition), border-color var(--np-transition);
    padding-bottom  : 1px;
}
body.np-styled-page .elementor-widget-text-editor a:hover {
    color        : var(--np-green);
    border-color : var(--np-green-light);
}

/* ── Sandy's tip / recommendation notes ───────────────────────── */
/* Targets paragraphs that contain only an <em> child (italic tip) */
body.np-styled-page .elementor-widget-text-editor p:has(> em:only-child),
body.np-styled-page .elementor-widget-text-editor p:has(> em:first-child:last-child) {
    background    : var(--np-purple-pale);
    border-left   : 3px solid var(--np-purple-mid);
    border-radius : 0 var(--np-radius-sm) var(--np-radius-sm) 0;
    padding       : 10px 16px;
    font-size     : 0.88rem;
    line-height   : 1.6;
    margin-top    : 14px;
    color         : var(--np-purple-dark);
}
body.np-styled-page .elementor-widget-text-editor p:has(> em:only-child) em,
body.np-styled-page .elementor-widget-text-editor p:has(> em:first-child:last-child) em {
    font-style : italic;
    color      : var(--np-purple-dark);
}


/* ================================================================
   DIVIDERS
   ================================================================ */

body.np-styled-page .elementor-divider-separator {
    border-color  : var(--np-purple-light) !important;
    border-width  : 1.5px !important;
    opacity       : 0.65;
}


/* ================================================================
   IMAGES
   ================================================================ */

body.np-styled-page .elementor-widget-image .elementor-image {
    overflow      : hidden;
    border-radius : var(--np-radius);
    display       : inline-block;
}
body.np-styled-page .elementor-widget-image .elementor-image img {
    border-radius : var(--np-radius);
    display       : block;
    box-shadow    : var(--np-shadow);
    transition    : transform var(--np-transition),
                    box-shadow var(--np-transition);
}
body.np-styled-page .elementor-widget-image .elementor-image:hover img {
    transform  : scale(1.04);
    box-shadow : var(--np-shadow-hover);
}


/* ================================================================
   BUTTONS
   ================================================================ */

body.np-styled-page .elementor-button,
body.np-styled-page .elementor-button-wrapper .elementor-button {
    font-family    : var(--np-font) !important;
    background     : var(--np-purple) !important;
    color          : var(--np-white) !important;
    border         : none !important;
    border-radius  : 50px !important;
    font-size      : 0.9rem !important;
    font-weight    : 700 !important;
    letter-spacing : 0.05em !important;
    text-transform : none !important;
    padding        : 13px 34px !important;
    box-shadow     : 0 4px 18px rgba(133, 99, 132, 0.25) !important;
    animation      : np-pulse 3.5s ease-in-out infinite;
    transition     : background var(--np-transition),
                     transform  var(--np-transition),
                     box-shadow var(--np-transition) !important;
}
body.np-styled-page .elementor-button:hover,
body.np-styled-page .elementor-button-wrapper .elementor-button:hover {
    background : var(--np-green) !important;
    transform  : translateY(-3px) !important;
    box-shadow : 0 10px 32px rgba(74, 87, 40, 0.30) !important;
    animation  : none;
}


/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */

/* ── Tablet (≤ 1024 px) ─────────────────────────────────────────── */
@media (max-width: 1024px) {

    body:not(.home) .headline_outer {
        padding : 16px 24px 34px;
    }
}

/* ── Mobile landscape / small tablet (≤ 767 px) ─────────────────── */
@media (max-width: 767px) {

    body:not(.home) .headline_outer {
        padding : 12px 20px 28px;
    }

    body.np-styled-page .elementor-widget-text-editor p {
        font-size   : 0.95rem;
        line-height : 1.78;
    }

    body.np-styled-page .elementor-button,
    body.np-styled-page .elementor-button-wrapper .elementor-button {
        padding   : 11px 26px !important;
        font-size : 0.85rem !important;
    }

    body.np-styled-page .elementor-widget-image .elementor-image,
    body.np-styled-page .elementor-widget-image .elementor-image img {
        border-radius : var(--np-radius-sm);
    }

    /* Reduce heavy shadows on mobile */
    body.np-styled-page .elementor-widget-image .elementor-image img {
        box-shadow : 0 2px 14px rgba(133, 99, 132, 0.08);
    }
}

/* ── Small mobile (≤ 480 px) ─────────────────────────────────────── */
@media (max-width: 480px) {

    body:not(.home) .headline_outer {
        padding : 10px 16px 22px;
    }

    body.np-styled-page h1.entry-title {
        letter-spacing : -0.01em;
    }

    body.np-styled-page .elementor-button,
    body.np-styled-page .elementor-button-wrapper .elementor-button {
        width     : 100% !important;
        padding   : 12px 20px !important;
        font-size : 0.88rem !important;
    }
}

/* ── Profile column blend (consultation section) ─────────────────────────── */

body.np-styled-page .np-profile-col {
    position   : relative;
    min-height : 480px;
}

body.np-styled-page .np-profile-col::before {
    content    : '';
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 140px;
    height     : 100%;
    background : linear-gradient(to right, #ffffff 0%, transparent 100%);
    z-index    : 1;
    pointer-events : none;
}

@media (max-width: 767px) {
    body.np-styled-page .np-profile-col {
        min-height : 320px;
    }
    body.np-styled-page .np-profile-col::before {
        width      : 0;
        background : linear-gradient(to bottom, transparent 0%, #ffffff 90%);
        width      : 100%;
        height     : 80px;
        top        : auto;
        bottom     : 0;
        left       : 0;
    }
}

/* ── Universal page banner (all pages except home) ─────────────────────────── */
body:not(.home) .headline_outer {
    display             : flex !important;
    flex-direction      : column !important;
    justify-content     : flex-end !important;
    min-height          : 260px !important;
    background-image    : url('https://yty.myt.mycrazydomains.me/wp-content/uploads/2026/06/HeadingBanner_new3.webp') !important;
    background-size     : cover !important;
    background-position : center center !important;
}

/* ── Banner title: use Nunito font ─────────────────────────────────────────── */
body:not(.home) .headline_outer h1,
body:not(.home) .headline_outer .entry-title {
    font-family : 'Nunito', sans-serif !important;
}

/* ── Shop archive: hide duplicate "Shop" heading below banner ───────────────── */
body.woocommerce-shop .woocommerce-products-header__title {
    display : none !important;
}

/* ── Hide breadcrumbs on all pages ─────────────────────────────────────────── */
.cmsmasters_breadcrumbs,
.woocommerce-breadcrumb {
    display : none !important;
}

/* ── Blog archive: inject page title into banner ────────────────────────────── */
body.blog .headline_outer::after {
    content        : 'Blog';
    position       : absolute;
    bottom         : 40px;
    left           : 0;
    right          : 0;
    text-align     : center;
    font-family    : 'Nunito', sans-serif;
    font-size      : 42px;
    font-weight    : 700;
    color          : #ffffff;
    white-space    : nowrap;
    pointer-events : none;
    animation      : np-slideInDown 0.55s var(--np-ease) both;
}

/* ── Shop / archive banners: animate heading + underline to match other pages ── */
body.woocommerce-shop .headline_outer .entry-title,
body.post-type-archive-product .headline_outer .entry-title {
    animation : np-slideInDown 0.55s var(--np-ease) both;
}

body.woocommerce-shop .headline_outer .entry-title::after,
body.post-type-archive-product .headline_outer .entry-title::after {
    content       : '';
    display       : block;
    height        : 3px;
    background    : rgba(255, 255, 255, 0.55);
    border-radius : 2px;
    margin        : 14px auto 0;
    animation     : np-growLine 0.5s 0.35s var(--np-ease) both;
}

/* ── Blog banner: underline below injected title ────────────────────────────── */
body.blog .headline_outer::before {
    content       : '';
    position      : absolute;
    bottom        : 23px;
    left          : 0;
    right         : 0;
    margin        : 0 auto;
    display       : block;
    height        : 3px;
    width         : 56px;
    background    : rgba(255, 255, 255, 0.55);
    border-radius : 2px;
    animation     : np-growLine 0.5s 0.35s var(--np-ease) both;
}

/* ════════════════════════════════════════════════════════════════════════════
   SHOP PRODUCT CARDS — IMAGE FLIP
   ════════════════════════════════════════════════════════════════════════════ */

.np-flip-container {
    perspective : 900px;
}

.np-flip-inner {
    position          : relative;
    width             : 100%;
    aspect-ratio      : 1 / 1;
    transform-style   : preserve-3d;
    transition        : transform 0.55s ease;
}

.np-flip-container:hover .np-flip-inner {
    transform : rotateY(180deg);
}

.np-flip-front,
.np-flip-back {
    position            : absolute;
    inset               : 0;
    backface-visibility : hidden;
    border-radius       : 12px;
    overflow            : hidden;
}

.np-flip-front img,
.np-flip-back img {
    width         : 100%;
    height        : 100%;
    object-fit    : cover;
    display       : block;
    border-radius : 12px;
}

.np-flip-back {
    transform : rotateY(180deg);
}

/* ════════════════════════════════════════════════════════════════════════════
   SHOP PRODUCT CARDS
   ════════════════════════════════════════════════════════════════════════════ */

/* JS moves .cmsmasters_product_add_wrap to end of .cmsmasters_product_inner —
   flex order here just ensures title comes before price in header_wrap */
.cmsmasters_product_header_wrap {
    display        : flex !important;
    flex-direction : column !important;
}
.cmsmasters_product_header {
    order : 1 !important;
}

/* Rounded corners on product images */
.cmsmasters_product_img,
.cmsmasters_product_img a,
.cmsmasters_product_img img {
    border-radius : 12px !important;
    overflow      : hidden !important;
}

/* Hide category and star rating */
.cmsmasters_product_cat,
.cmsmasters_star_rating {
    display : none !important;
}

/* Add to Cart button — always visible, brand styled */
.cmsmasters_product_add_wrap {
    display    : block !important;
    opacity    : 1 !important;
    visibility : visible !important;
    position   : static !important;
    padding    : 10px 0 4px;
}

.cmsmasters_product_add_wrap .add_to_cart_button,
.cmsmasters_product_add_wrap .button {
    display          : block !important;
    width            : 100% !important;
    padding          : 10px 20px !important;
    margin           : 0 !important;
    background-color : #856384 !important;
    color            : #ffffff !important;
    text-align       : center !important;
    border-radius    : 6px !important;
    font-family      : 'Nunito', sans-serif !important;
    font-weight      : 700 !important;
    font-size        : 0.9rem !important;
    text-decoration  : none !important;
    border           : none !important;
    box-sizing       : border-box !important;
    transition       : background-color 0.2s ease !important;
}

.cmsmasters_product_add_wrap .add_to_cart_button:hover,
.cmsmasters_product_add_wrap .button:hover {
    background-color : #4A5728 !important;
}

/* Fix product title — prevent hover hiding, make it a normal link */
.cmsmasters_product_title a,
.cmsmasters_product_title a:hover {
    opacity    : 1 !important;
    visibility : visible !important;
    color      : inherit !important;
    transform  : none !important;
}


/* =====================================================
   CART COUNT + TOTAL DISPLAY
   Sits inside .cmsmasters_dynamic_cart, left of the icon.
   ===================================================== */

/* Cart widget — match background so it blends with our display pill */
.cmsmasters_dynamic_cart {
    background-color : rgba(133, 99, 132, 0.45) !important;
    border-radius    : 0 !important;
}

/* Show mini-cart dropdown when hovering our pill (mirrors theme :hover behaviour) */
.cmsmasters_dynamic_cart.np-hovered .widget_shopping_cart_content {
    visibility : visible !important;
    opacity    : 1 !important;
}

/* ── Mini cart dropdown styling ── */

/* Transparent purple container */
.widget_shopping_cart_content {
    background-color : rgba(133, 99, 132, 0.45) !important;
}

/* Mini cart product name links — replace theme blue with brand green */
.woocommerce-mini-cart-item a:not(.remove) {
    color           : #2a2a2a !important;
    text-decoration : none !important;
}
.woocommerce-mini-cart-item a:not(.remove):hover {
    color           : #4A5728 !important;
    text-decoration : none !important;
}

/* ── Global WooCommerce link colour override (replaces default blue) ── */
/* Covers product titles, pagination, account links, notice links, etc. */
a,
.woocommerce a,
.woocommerce-loop-product__title a,
.woocommerce .woocommerce-loop-product__title,
.woocommerce-page a {
    color : inherit;
}
.woocommerce a:hover,
.woocommerce-page a:hover,
.woocommerce .woocommerce-loop-product__title:hover {
    color : #4A5728 !important;
}

/* WooCommerce notices / info links */
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
    color : #4A5728 !important;
}
.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover {
    color : #856384 !important;
}

/* ══════════════════════════════════════════════════════
   CHECKOUT PAGE
   ══════════════════════════════════════════════════════ */

/* Mandatory field star — brand purple */
.woocommerce-checkout span.required,
.woocommerce form .form-row .required {
    color : #856384 !important;
}

/* Payment radio buttons — brand purple (accent-color works in all modern browsers) */
.woocommerce-checkout .payment_methods input[type="radio"] {
    accent-color : #856384 !important;
}

/* Place Order button — brand purple → green on hover */
#place_order,
.woocommerce #payment #place_order {
    background-color : #856384 !important;
    color            : #ffffff !important;
    border-color     : #856384 !important;
    font-family      : 'Nunito', sans-serif !important;
    font-weight      : 700 !important;
}
#place_order:hover,
.woocommerce #payment #place_order:hover {
    background-color : #4A5728 !important;
    border-color     : #4A5728 !important;
}

/* ══════════════════════════════════════════════════════
   CART PAGE — remove all blue, apply brand colours
   ══════════════════════════════════════════════════════ */

/* Table header row — purple background, white text */
.woocommerce-cart-form .shop_table thead th,
.woocommerce table.shop_table thead th,
.woocommerce table.shop_table thead td {
    background-color : #856384 !important;
    color            : #ffffff !important;
    border-color     : #856384 !important;
}

/* Cart totals "Subtotal" header row — same purple, white text */
.cart_totals table.shop_table .cart-subtotal th,
.cart_totals table.shop_table .cart-subtotal td,
.cart_totals table.shop_table thead th {
    background-color : #856384 !important;
    color            : #ffffff !important;
    border-color     : #856384 !important;
}

/* Cart item row values — brand green (price, subtotal, qty) */
.woocommerce-cart-form .shop_table tbody .product-price,
.woocommerce-cart-form .shop_table tbody .product-subtotal,
.woocommerce-cart-form .shop_table tbody td.product-price .woocommerce-Price-amount,
.woocommerce-cart-form .shop_table tbody td.product-subtotal .woocommerce-Price-amount,
.woocommerce-cart-form .shop_table tbody td.product-subtotal .woocommerce-Price-amount bdi {
    color : #4A5728 !important;
}

/* Cart totals subtotal amount (the $165.60 in blue) */
.cart-subtotal .woocommerce-Price-amount,
.cart-subtotal .woocommerce-Price-amount bdi,
.order-total .woocommerce-Price-amount,
.order-total .woocommerce-Price-amount bdi {
    color : #4A5728 !important;
}

/* Product name links in cart table */
.woocommerce-cart-form .product-name a,
td.product-name a {
    color           : #2a2a2a !important;
    text-decoration : underline !important;
}
.woocommerce-cart-form .product-name a:hover,
td.product-name a:hover {
    color : #4A5728 !important;
}

/* Shipping options link / text */
.woocommerce-shipping-destination,
.woocommerce-shipping-destination a,
.shipping td a,
.shipping .woocommerce-Price-amount {
    color : #4A5728 !important;
}

/* "Update Cart" button */
.woocommerce-cart-form button[name="update_cart"],
button.button[name="update_cart"] {
    background-color : #856384 !important;
    color            : #ffffff !important;
    border-color     : #856384 !important;
}
.woocommerce-cart-form button[name="update_cart"]:hover {
    background-color : #4A5728 !important;
    border-color     : #4A5728 !important;
}

/* Hide the stray <br> the theme injects before the button text */
.wc-proceed-to-checkout a.checkout-button br {
    display : none !important;
}

/* "Proceed to Checkout" button */
.wc-proceed-to-checkout a.checkout-button,
.wc-proceed-to-checkout .checkout-button {
    background-color : #856384 !important;
    color            : #ffffff !important;
    border-color     : #856384 !important;
    font-family      : 'Nunito', sans-serif !important;
    font-weight      : 700 !important;
    display          : inline-block !important;
    width            : auto !important;
    padding          : 10px 28px !important;
    font-size        : 0.9rem !important;
}
.wc-proceed-to-checkout a.checkout-button:hover,
.wc-proceed-to-checkout .checkout-button:hover {
    background-color : #4A5728 !important;
    border-color     : #4A5728 !important;
}

/* Subtotal amount — brand green */
.woocommerce-mini-cart__total .woocommerce-Price-amount,
.woocommerce-mini-cart__total .woocommerce-Price-amount bdi,
.woocommerce-mini-cart__total .woocommerce-Price-amount span {
    color : #4A5728 !important;
}

/* VIEW CART button — brand green */
.woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout) {
    background-color : #4A5728 !important;
    color            : #ffffff !important;
    border-color     : #4A5728 !important;
}
.woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout):hover {
    background-color : #3a4420 !important;
    border-color     : #3a4420 !important;
}

/* CHECKOUT button — brand purple */
.woocommerce-mini-cart__buttons .button.checkout {
    background-color : #856384 !important;
    color            : #ffffff !important;
    border-color     : #856384 !important;
}
.woocommerce-mini-cart__buttons .button.checkout:hover {
    background-color : #6b4f6a !important;
    border-color     : #6b4f6a !important;
}

/* Cart icon — green */
.cmsmasters_dynamic_cart_button,
.cmsmasters_dynamic_cart_button::before {
    color : #4A5728 !important;
}

/* Our display — fixed via CSS vars set by JS (survives WC fragment updates) */
.np-cart-display {
    position         : fixed !important;
    top              : var(--np-cart-top,   230px) !important;
    right            : var(--np-cart-right,  45px) !important;
    height           : var(--np-cart-h,      45px) !important;
    display          : inline-flex !important;
    align-items      : center !important;
    gap              : 8px !important;
    padding          : 0 14px !important;
    background-color : rgba(133, 99, 132, 0.45) !important;
    border-radius    : 30px 0 0 30px !important;
    z-index          : 9999 !important;
    white-space      : nowrap !important;
}

/* ── Mobile (≤1024px): pill sits inline in nav bar, no container ── */
@media only screen and (max-width: 1024px) {
    .np-cart-display {
        position         : static !important;
        float            : right !important;
        top              : auto !important;
        right            : auto !important;
        height           : auto !important;
        background-color : transparent !important;
        border-radius    : 0 !important;
        padding          : 0 10px !important;
        display          : inline-flex !important;
        align-items      : center !important;
        gap              : 6px !important;
        cursor           : pointer;
        line-height      : 71px;
    }
}

/* ── Phone (≤768px): hamburger left, cart right ── */
@media only screen and (max-width: 768px) {
    /* Hamburger → left */
    #header .header_mid .resp_mid_nav_wrap {
        float   : left !important;
        display : block !important;
        margin  : 0 !important;
    }
    /* Cart icon → right */
    #header .header_mid .cmsmasters_header_cart_link {
        float   : right !important;
        display : block !important;
        margin  : 0 !important;
    }
    /* Our pill line-height matches cart icon height */
    .np-cart-display {
        line-height : 42px;
    }
}

/* Count — round badge in lighter green */
.np-cart-count {
    display          : inline-flex;
    align-items      : center;
    justify-content  : center;
    width            : 26px;
    height           : 26px;
    border-radius    : 50%;
    background-color : #8aad3e;
    color            : #ffffff;
    font-family      : 'Nunito', sans-serif;
    font-weight      : 700;
    font-size        : 0.8rem;
    flex-shrink      : 0;
}

/* Total price — dark green text */
.np-cart-total,
.np-cart-total bdi,
.np-cart-total span {
    color          : #4A5728 !important;
    font-family    : 'Nunito', sans-serif;
    font-weight    : 700;
    font-size      : 0.9rem;
    vertical-align : middle !important;
    line-height    : 1 !important;
}