/*
Theme Name: Comfy Stop Child
Theme URI: https://comfystop.co.uk/
Description: Custom child theme for Comfy Stop
Author: Comfy Stop
Template: hello-elementor
Version: 1.0.0
Text Domain: comfy-stop-child
*/


/* =========================================================
   FOUNDATION
========================================================= */

.cs-header,
.cs-header *,
.cs-header *::before,
.cs-header *::after {
    box-sizing: border-box;
}

.cs-header {
    --cs-black: #151515;
    --cs-text: #202020;
    --cs-muted: #666666;
    --cs-border: #e8e8e8;
    --cs-light: #f7f7f7;
    --cs-accent: #8b5cf6;
    --cs-white: #ffffff;

    position: relative;
    z-index: 9999;

    width: 100%;

    background: #191919;
    color: #ffffff;

    font-family: inherit;
}

.cs-header a {
    color: inherit;
}

.cs-header button,
.cs-header summary {
    font: inherit;
}


/* =========================================================
   CONTAINER
========================================================= */

.cs-container {
    width: min(1280px, calc(100% - 48px));
    margin-inline: auto;
}


/* =========================================================
   ANNOUNCEMENT BAR — ROTATING MESSAGES
========================================================= */

.cs-announcement {
    width: 100%;

    background: var(--cs-black);
    color: var(--cs-white);

    overflow: hidden;
}

.cs-announcement-inner {
    position: relative;

    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.cs-announcement-slider {
    position: relative;

    width: 100%;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-announcement-text {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 100%;

    margin: 0;
    padding: 0 20px;

    color: var(--cs-white);

    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;

    transform: translate(-50%, -50%);

    opacity: 0;

    /* 6 messages × 8 seconds = 48 seconds */
    animation: csAnnouncementRotate 48s infinite;
}


/* ---------------------------------------------------------
   MESSAGE TIMING
--------------------------------------------------------- */

/* Message 1 */
.cs-announcement-text:nth-child(1) {
    animation-delay: 0s;
}

/* Message 2 */
.cs-announcement-text:nth-child(2) {
    animation-delay: 8s;
}

/* Message 3 */
.cs-announcement-text:nth-child(3) {
    animation-delay: 16s;
}

/* Message 4 */
.cs-announcement-text:nth-child(4) {
    animation-delay: 24s;
}

/* Message 5 */
.cs-announcement-text:nth-child(5) {
    animation-delay: 32s;
}

/* Message 6 */
.cs-announcement-text:nth-child(6) {
    animation-delay: 40s;
}


/* ---------------------------------------------------------
   ROTATION ANIMATION
--------------------------------------------------------- */

@keyframes csAnnouncementRotate {

    /* Start slightly below and hidden */
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(10px);
    }

    /* Smooth fade/slide in */
    2% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }

    /* Stay fully visible */
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }

    /* Smooth fade/slide out */
    16.5% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-10px);
    }

    /* Remain hidden until its next turn */
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-10px);
    }

}

/* =========================================================
   MAIN HEADER
========================================================= */

.cs-header-main {
    position: relative;
    width: 100%;
   background: #191919;
    border-bottom: 1px solid #333333;
}

.cs-header-inner {
    min-height: 90px;

    display: flex;
    align-items: center;

    gap: 0px;
}


/* =========================================================
   LOGO
========================================================= */

.cs-logo {
    flex: 0 0 auto;

    width: auto;
    min-width: 0;
}

.cs-logo .custom-logo-link {
    display: inline-flex;
    align-items: center;

    max-width: 100%;

    text-decoration: none;
}

.cs-logo .custom-logo {
    display: block;

    width: auto;
    max-width: 300px;
    max-height: 78px;

    height: auto;
}

.cs-logo-text-link {
    display: inline-flex;
    align-items: center;

    color: var(--cs-black);
    text-decoration: none;
}

.cs-logo-text {
    display: block;

    color: var(--cs-black);

    font-size: 27px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: -0.03em;

    white-space: nowrap;
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */
.cs-navigation {
    flex: 0 0 auto;

    min-width: 0;

    display: flex;
    align-items: center;

    justify-content: flex-start;

    margin-left: 15px;

    overflow: visible;
}

.cs-menu {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 26px;

    width: auto;
    max-width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}

.cs-menu > li {
    position: relative;

    flex: 0 0 auto;

    margin: 0;
    padding: 0;
}

.cs-menu > li > a {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 90px;

    color: #ffffff;
    font-size: 14px;
    font-weight: 600;

    line-height: 1.3;

    text-decoration: none;

    white-space: nowrap;

    transition: color 0.2s ease;
}

.cs-menu > li > a:hover,
.cs-menu > li > a:focus-visible {
    color: #ffffff;
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.cs-actions {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 4px;

    width: auto;

    margin-left: auto;
}

.cs-icon-button {
    position: relative;

    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

   color: #ffffff;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.cs-icon-button:hover,
.cs-icon-button:focus-visible {
    background: #2a2a2a;
    color: #ffffff;
}

.cs-icon-button svg {
    display: block;

    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   NORMAL WORDPRESS DROPDOWNS
========================================================= */

.cs-menu > li:not(.cs-mega-parent) {
    position: relative;
}

.cs-menu > li:not(.cs-mega-parent) > .sub-menu {
    position: absolute;

    top: 100%;
    left: 0;

    min-width: 230px;

    margin: 0;
    padding: 10px 0;

    background: var(--cs-white);

    border: 1px solid var(--cs-border);
    border-radius: 0 0 8px 8px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.10);

    list-style: none;

    opacity: 0;
    visibility: hidden;

    transform: translateY(8px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;

    z-index: 10000;
}

.cs-menu > li:not(.cs-mega-parent):hover > .sub-menu,
.cs-menu > li:not(.cs-mega-parent):focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.cs-menu .sub-menu {
    margin: 0;
    padding: 0;

    list-style: none;
}

.cs-menu .sub-menu li {
    position: relative;

    margin: 0;
    padding: 0;
}

.cs-menu .sub-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 11px 18px;

    color: var(--cs-text);

    font-size: 14px;
    font-weight: 500;

    line-height: 1.4;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.cs-menu .sub-menu a:hover,
.cs-menu .sub-menu a:focus-visible {
    background: var(--cs-light);
    color: #151515;
}
.cs-menu .sub-menu .sub-menu {
    top: -11px;
    left: 100%;
}


/* =========================================================
   WORDPRESS DROPDOWN ARROW
========================================================= */

.cs-menu > li:not(.cs-mega-parent).menu-item-has-children > a::after {
    content: "";

    width: 7px;
    height: 7px;

    margin-left: 9px;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg) translateY(-2px);

    transition: transform 0.2s ease;
}

.cs-menu > li:not(.cs-mega-parent).menu-item-has-children:hover > a::after,
.cs-menu > li:not(.cs-mega-parent).menu-item-has-children:focus-within > a::after {
    transform: rotate(225deg) translateY(-1px);
}


/* =========================================================
   SHOP MEGA MENU
========================================================= */

.cs-mega-parent {
    position: static !important;
}

.cs-mega-trigger {
    gap: 8px;
}

.cs-chevron {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg) translateY(-2px);

    transition: transform 0.25s ease;
}

.cs-mega-parent:hover .cs-chevron,
.cs-mega-parent:focus-within .cs-chevron {
    transform: rotate(225deg) translateY(-1px);
}


/* =========================================================
   MEGA MENU CONTAINER
========================================================= */

.cs-mega-menu {
    position: absolute;

    top: 100%;
    left: 0;
    right: 0;

    width: 100%;

    background: var(--cs-white);

    border-top: 1px solid var(--cs-border);
    border-bottom: 1px solid var(--cs-border);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.10);

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    pointer-events: none;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease,
        transform 0.22s ease;

    z-index: 9998;
}

.cs-mega-parent:hover > .cs-mega-menu,
.cs-mega-parent:focus-within > .cs-mega-menu {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}


/* =========================================================
   MEGA MENU INNER
========================================================= */

.cs-mega-inner {
    width: min(1180px, calc(100% - 48px));

    margin-inline: auto;

    padding: 38px 0 42px;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 50px;
}


/* =========================================================
   MEGA MENU COLUMN
========================================================= */

.cs-mega-column {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cs-mega-column h3 {
    margin: 0 0 18px;

    color: var(--cs-black);

    font-size: 16px;
    font-weight: 700;

    line-height: 1.3;

    letter-spacing: -0.01em;
}

.cs-mega-column a {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin: 0 0 12px;

    color: #3a3a3a;

    font-size: 13px;
    font-weight: 550;

    line-height: 1.5;

    letter-spacing: 0.005em;

    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.cs-mega-column a:last-child {
    margin-bottom: 0;
}

.cs-mega-column a:hover,
.cs-mega-column a:focus-visible {
    color: #151515;

    transform: translateX(3px);
}

.cs-mega-column a:focus-visible {
    outline: 2px solid #151515;
    outline-offset: 3px;
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.cs-icon-button {
    position: relative;

    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: var(--cs-text);

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.cs-icon-button:hover,
.cs-icon-button:focus-visible {
    background: var(--cs-light);
    color: #151515;
}

.cs-icon-button:focus-visible {
    outline: 2px solid #151515;
    outline-offset: 2px;
}

.cs-icon-button svg {
    display: block;

    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   CART COUNT
========================================================= */

.cs-cart-count {
    position: absolute;

    top: 1px;
    right: 0;

    min-width: 17px;
    height: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 4px;

    border-radius: 999px;

    background: var(--cs-accent);
    color: var(--cs-white);

    font-size: 10px;
    font-weight: 700;

    line-height: 1;

    pointer-events: none;
}


/* =========================================================
   MOBILE TOGGLE
========================================================= */

/*
 * VERY IMPORTANT:
 * Hidden on desktop/tablet.
 * Elementor/other theme styles cannot accidentally
 * make this visible.
 */

.cs-header .cs-mobile-toggle {
    display: none !important;

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    padding: 8px;

    margin: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}

.cs-header .cs-mobile-toggle span {
    display: block;

    width: 22px;
    height: 3px;

    margin: 3px 0;

    border-radius: 2px;

    background: #ffffff;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.cs-header .cs-mobile-toggle:hover span {
   background: #ffffff;
}

.cs-header .cs-mobile-toggle:focus-visible {
    outline: 2px solid var(--cs-accent);
    outline-offset: 2px;
}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

.cs-mobile-navigation {
    display: none;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1201px) {

    .cs-menu {
        gap: 24px;
    }

}

/* =========================================================
   DESKTOP / SMALL LAPTOP
========================================================= */

@media (max-width: 1200px) and (min-width: 901px) {

    .cs-header-inner {
        gap: 0;
    }

    .cs-logo {
        width: auto;
    }

    .cs-logo img,
    .cs-logo .custom-logo {
        max-width: 205px;
        max-height: 56px;
    }

    .cs-navigation {
        margin-left: 20px;
    }

    .cs-menu {
        gap: 17px;
    }

    .cs-menu > li > a {
        font-size: 13px;
    }

    .cs-actions {
        gap: 0;
    }

    .cs-icon-button {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

    .cs-icon-button svg {
        width: 19px;
        height: 19px;
    }
}
/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 900px) {

    .cs-container {
        width: min(100% - 32px, 700px);
    }

    .cs-header-inner {
        min-height: 74px;
        gap: 8px;
    }


    /* ---------------------------------------------
       Announcement
    --------------------------------------------- */

   .cs-announcement-inner {
    min-height: 34px;
}

.cs-announcement-slider {
    height: 34px;
}

.cs-announcement-text {
    padding: 0 12px;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.035em;

    white-space: nowrap;
}

    .cs-announcement-link {
        display: none;
    }


    /* ---------------------------------------------
       Main Header
    --------------------------------------------- */

    .cs-header-inner {
        min-height: 70px;

        gap: 8px;
    }


    /* ---------------------------------------------
       Mobile Button
    --------------------------------------------- */

    .cs-header .cs-mobile-toggle {
        display: flex !important;

        flex: 0 0 42px;

        width: 42px;
        height: 42px;
    }


    /* ---------------------------------------------
       Desktop Navigation
    --------------------------------------------- */

    .cs-navigation {
        display: none !important;
    }



   /* ---------------------------------------------
       Logo
    --------------------------------------------- */

    .cs-logo {
        flex: 0 1 auto;

        width: auto;
        min-width: 0;

        margin-left: 2px;
    }

    .cs-logo .custom-logo-link {
        max-width: 100%;
    }

    .cs-logo .custom-logo {
        max-width: 185px;
        max-height: 50px;
    }

    .cs-logo-text {
        font-size: 23px;
    }



/* ---------------------------------------------
       Actions
    --------------------------------------------- */

    .cs-actions {
        margin-left: auto;

        width: auto;

        flex: 0 0 auto;

        gap: 2px;

        justify-content: flex-end;
    }

    .cs-icon-button {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

    .cs-icon-button svg {
        width: 19px;
        height: 19px;
    }



    /* ---------------------------------------------
       Mobile Navigation
    --------------------------------------------- */

    .cs-mobile-navigation {
        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        display: block;

        max-height: 0;

        overflow: hidden;

        background: var(--cs-white);

        border-bottom: 1px solid var(--cs-border);

        box-shadow:
            0 15px 35px rgba(0, 0, 0, 0.08);

        opacity: 0;
        visibility: hidden;

        transition:
            max-height 0.3s ease,
            opacity 0.2s ease,
            visibility 0.2s ease;
    }

    .cs-header.mobile-open .cs-mobile-navigation {
        max-height: calc(100vh - 108px);

        overflow-y: auto;

        opacity: 1;
        visibility: visible;
    }



    /* ---------------------------------------------
       Mobile Menu
    --------------------------------------------- */

    .cs-mobile-menu {
        margin: 0;

        padding: 10px 0 24px;

        list-style: none;
    }

    .cs-mobile-menu > li {
        margin: 0;
        padding: 0;

        list-style: none;
    }


    /* ---------------------------------------------
       Mobile Normal Links
    --------------------------------------------- */

    .cs-mobile-menu > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;

        padding: 14px 4px;

        border-bottom: 1px solid #eeeeee;

        color: var(--cs-text);

        font-size: 15px;
        font-weight: 600;

        line-height: 1.4;

        text-decoration: none;

        transition: color 0.2s ease;
    }

    .cs-mobile-menu > li > a:hover,
    .cs-mobile-menu > li > a:focus-visible {
        color: var(--cs-accent);
    }


    /* ---------------------------------------------
       Mobile WP Submenus
    --------------------------------------------- */

    .cs-mobile-menu .sub-menu {
        margin: 0;

        padding: 0 0 5px 15px;

        list-style: none;
    }

    .cs-mobile-menu .sub-menu a {
        display: flex;
        align-items: center;

        padding: 11px 4px;

        color: var(--cs-muted);

        font-size: 14px;
        font-weight: 500;

        line-height: 1.4;

        text-decoration: none;
    }

    .cs-mobile-menu .sub-menu a:hover {
        color: var(--cs-accent);
    }


    /* ---------------------------------------------
       Mobile WP Dropdown Indicator
    --------------------------------------------- */

    .cs-mobile-menu .menu-item-has-children > a::after {
        content: "+";

        margin-left: auto;

        color: var(--cs-muted);

        font-size: 20px;
        font-weight: 400;

        line-height: 1;
    }


    /* ---------------------------------------------
       Custom Mobile Shop
    --------------------------------------------- */

    .cs-mobile-shop {
        border-bottom: 1px solid #eeeeee;
    }

    .cs-mobile-shop details {
        margin: 0;
        padding: 0;
    }

    .cs-mobile-shop summary {
        display: flex;
        align-items: center;
        justify-content: space-between;

        min-height: 50px;

        padding: 14px 4px;

        color: var(--cs-text);

        font-size: 15px;
        font-weight: 600;

        line-height: 1.4;

        cursor: pointer;

        list-style: none;

        user-select: none;
    }

    .cs-mobile-shop summary::-webkit-details-marker {
        display: none;
    }

    .cs-mobile-shop summary:focus-visible {
        outline: 2px solid var(--cs-accent);
        outline-offset: 2px;
    }

    .cs-mobile-chevron {
        position: relative;

        width: 10px;
        height: 10px;

        flex: 0 0 auto;

        margin-right: 4px;

        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;

        transform: rotate(45deg) translateY(-2px);

        transition: transform 0.2s ease;
    }

    .cs-mobile-shop details[open] .cs-mobile-chevron {
        transform: rotate(225deg) translateY(-1px);
    }


    /* ---------------------------------------------
       Mobile Shop Content
    --------------------------------------------- */

    .cs-mobile-shop-content {
        padding: 2px 0 18px 15px;
    }

    .cs-mobile-category {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        padding: 9px 0;
    }

    .cs-mobile-category h3 {
        margin: 0 0 8px;

        color: var(--cs-black);

        font-size: 13px;
        font-weight: 700;

        line-height: 1.4;
    }

    .cs-mobile-category a {
        display: block;

        padding: 6px 0;

        color: var(--cs-muted);

        font-size: 14px;
        font-weight: 500;

        line-height: 1.4;

        text-decoration: none;

        transition: color 0.2s ease;
    }

    .cs-mobile-category a:hover {
        color: var(--cs-accent);
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .cs-container {
        width: calc(100% - 24px);
    }

    .cs-header-inner {
        gap: 4px;
    }

    .cs-header .cs-mobile-toggle {
        width: 38px;
        height: 38px;

        flex-basis: 38px;

        padding: 6px;
    }

    .cs-mobile-toggle span {
        width: 20px;
    }

    .cs-logo-text {
        font-size: 20px;
    }

    .cs-logo img,
    .cs-logo .custom-logo {
        max-width: 150px;
        max-height: 42px;
    }

    .cs-icon-button {
        width: 34px;
        height: 34px;

        flex-basis: 34px;
    }

    .cs-icon-button svg {
        width: 18px;
        height: 18px;
    }

    .cs-cart-count {
        top: -1px;
        right: -1px;
    }

    .cs-mobile-menu > li > a {
        padding: 13px 2px;
    }

}

/* =========================================================
   FINAL HEADER DESKTOP ALIGNMENT
   Logo + Navigation LEFT / Actions RIGHT
========================================================= */

@media (min-width: 901px) {

    /* -----------------------------------------------------
       HEADER ROW
    ----------------------------------------------------- */

    .cs-header-inner {
        display: flex;
        align-items: center;

        gap: 0;
    }


    /* -----------------------------------------------------
       LOGO
       Stays naturally on the left.
    ----------------------------------------------------- */

    .cs-logo {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
    }

    .cs-logo .custom-logo-link {
        display: inline-flex;
        align-items: center;
    }

    .cs-logo .custom-logo {
        display: block;

        width: auto;
        max-width: 235px;
        max-height: 62px;
        height: auto;
    }


    /* -----------------------------------------------------
       NAVIGATION
       Starts after logo with breathing space.
    ----------------------------------------------------- */

    .cs-navigation {
        flex: 0 0 auto !important;

        min-width: 0;
        width: auto !important;

        display: flex !important;
        align-items: center;

        justify-content: flex-start !important;

        margin-left: 28px !important;
        margin-right: 0 !important;
    }

    .cs-navigation .cs-menu {
        display: flex !important;
        align-items: center;

        justify-content: flex-start !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 26px;
    }


    /* -----------------------------------------------------
       ACTIONS
       Push Search / Account / Cart completely RIGHT.
    ----------------------------------------------------- */

    .cs-actions {
        flex: 0 0 auto !important;

        width: auto !important;

        margin-left: auto !important;
        margin-right: 0 !important;

        display: flex !important;
        align-items: center;

        justify-content: flex-end;

        gap: 4px;
    }

}

/* =========================================================
   FINAL HEADER ICON COLORS
   Clean black icons — no purple/pink focus border
========================================================= */

.cs-header .cs-actions .cs-icon-button,
.cs-header .cs-actions .cs-icon-button:visited {
    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.cs-header .cs-actions .cs-icon-button:hover {
     color: #ffffff !important;
    background: #2a2a2a !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.cs-header .cs-actions .cs-icon-button:focus,
.cs-header .cs-actions .cs-icon-button:focus-visible,
.cs-header .cs-actions .cs-icon-button:active {
    color: #ffffff !important;
    background: #2a2a2a !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.cs-header .cs-actions .cs-icon-button svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* =========================================================
   LIVE PRODUCT SEARCH
========================================================= */

.cs-live-search {
    position: absolute;

    top: 100%;
    left: 0;
    right: 0;

    z-index: 9997;

    width: 100%;

    background: var(--cs-white);

    border-bottom: 1px solid var(--cs-border);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.10);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-8px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
}

.cs-live-search.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}


/* ---------------------------------------------------------
   SEARCH INNER
--------------------------------------------------------- */

.cs-live-search-inner {
    width: min(760px, calc(100% - 40px));

    margin-inline: auto;

    padding: 18px 0 22px;
}


/* =========================================================
   SEARCH INPUT - FIX ICON / TEXT OVERLAP
========================================================= */

.cs-live-search-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.cs-live-search-icon {
    position: absolute !important;

    left: 18px !important;
    top: 50% !important;

    width: 19px !important;
    height: 19px !important;

    transform: translateY(-50%) !important;

    margin: 0 !important;
    padding: 0 !important;

    fill: none !important;

    stroke: #222 !important;
    stroke-width: 1.8 !important;

    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    pointer-events: none !important;

    z-index: 2 !important;
}

#cs-live-search-input {
    display: block !important;

    width: 100% !important;
    height: 50px !important;

    margin: 0 !important;

    /*
     * 60px left padding gives the text plenty
     * of space after the search icon.
     */
    padding-top: 0 !important;
    padding-right: 55px !important;
    padding-bottom: 0 !important;
    padding-left: 60px !important;

    border: 1px solid #d8d8d8 !important;
    border-radius: 4px !important;

    background: #fff !important;

    color: #111 !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 500 !important;

    line-height: 1.4 !important;

    text-indent: 0 !important;

    outline: none !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
}

#cs-live-search-input::placeholder {
    color: #777 !important;
    opacity: 1 !important;
}

/* ---------------------------------------------------------
   CLOSE BUTTON
--------------------------------------------------------- */

.cs-live-search-close {
    position: absolute;

    top: 50%;
    right: 7px;

    width: 34px;
    height: 34px;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    transform: translateY(-50%);

    border: 0 !important;
    border-radius: 50% !important;

    background: transparent !important;

    color: #222 !important;

    font-family: Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 300 !important;

    line-height: 1 !important;

    text-align: center !important;

    cursor: pointer;

    outline: none !important;
    box-shadow: none !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.cs-live-search-close:hover {
    background: #f2f2f2 !important;

    color: #000 !important;
}

.cs-live-search-close:focus,
.cs-live-search-close:focus-visible,
.cs-live-search-close:active {
    background: transparent !important;

    color: #222 !important;

    outline: none !important;
    box-shadow: none !important;
}


/* ---------------------------------------------------------
   SEARCH RESULTS GRID
--------------------------------------------------------- */

.cs-live-search-results {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-top: 14px;
}


/* ---------------------------------------------------------
   PRODUCT RESULT
--------------------------------------------------------- */

.cs-search-product {
    display: flex;
    align-items: center;

    min-width: 0;

    padding: 9px;

    border: 1px solid #e5e5e5;

    background: var(--cs-white);

    color: var(--cs-black);

    text-decoration: none;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.cs-search-product:hover {
    border-color: #cfcfcf;

    background: #fafafa;

    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   PRODUCT IMAGE
--------------------------------------------------------- */

.cs-search-product-image {
    flex: 0 0 64px;

    width: 64px;
    height: 64px;

    overflow: hidden;

    background: #f5f5f5;
}

.cs-search-product-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ---------------------------------------------------------
   PRODUCT INFORMATION
--------------------------------------------------------- */

.cs-search-product-info {
    min-width: 0;

    padding-left: 12px;
}

.cs-search-product-name {
    display: -webkit-box;

    overflow: hidden;

    margin-bottom: 4px;

    color: var(--cs-black);

    font-size: 13px;
    font-weight: 600;

    line-height: 1.35;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cs-search-product-price {
    display: block;

    margin-top: 2px;

    color: #222;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;
}

.cs-search-product-price del {
    color: #777;
    opacity: 0.7;
}

.cs-search-product-price ins {
    color: #111;
    text-decoration: none;
    font-weight: 700;
}


/* ---------------------------------------------------------
   SEARCH STATES
--------------------------------------------------------- */

.cs-search-loading,
.cs-search-no-results,
.cs-search-error {
    grid-column: 1 / -1;

    padding: 12px 2px;

    color: #666;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.5;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .cs-live-search-inner {
        width: min(680px, calc(100% - 32px));

        padding: 15px 0 20px;
    }

    .cs-live-search-input {
        height: 48px;

        padding-left: 54px;

        font-size: 14px;
    }

    .cs-live-search-icon {
        left: 15px;

        width: 18px;
        height: 18px;
    }

    .cs-live-search-results {
        grid-template-columns: 1fr;

        gap: 8px;

        margin-top: 12px;
    }

    .cs-search-product {
        padding: 8px;
    }

    .cs-search-product-image {
        flex-basis: 60px;

        width: 60px;
        height: 60px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .cs-live-search-inner {
        width: calc(100% - 24px);

        padding: 12px 0 17px;
    }

    .cs-live-search-input {
        height: 46px;

        padding-left: 51px;
        padding-right: 47px;

        font-size: 14px;
    }

    .cs-live-search-icon {
        left: 15px;

        width: 18px;
        height: 18px;
    }

    .cs-live-search-close {
        right: 5px;

        width: 32px;
        height: 32px;

        font-size: 22px !important;
    }

    .cs-search-product-image {
        flex-basis: 56px;

        width: 56px;
        height: 56px;
    }

    .cs-search-product-info {
        padding-left: 11px;
    }

    .cs-search-product-name {
        font-size: 13px;
    }

    .cs-search-product-price {
        font-size: 12px;
    }

}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cs-header *,
    .cs-header *::before,
    .cs-header *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}

/* =========================================================
   CUSTOM SITE FOOTER
   ========================================================= */

/* =========================================================
   CUSTOM SITE FOOTER — FULL WIDTH
   ========================================================= */

.site-footer {
	background: #191919;
	color: #ffffff;

	/* Break out of Elementor / theme boxed containers */
	width: 100vw;
	max-width: 100vw;

	/* Center the 100vw footer against any constrained parent */
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;

	padding: 0;

	position: relative;
	left: 0;
	right: 0;

	display: block;
	clear: both;

	overflow: hidden;
}

.site-footer *,
.site-footer *::before,
.site-footer *::after {
	box-sizing: border-box;
}


/* ---------------------------------------------------------
   MAIN FOOTER
   --------------------------------------------------------- */

.site-footer__main {
	padding: 4.5rem 1.5rem 4rem;
}

.site-footer__container {
	display: grid;
	grid-template-columns: 1.5fr repeat(3, 1fr) 1.25fr;
	gap: 3rem;
	margin: 0 auto;
	max-width: 1250px;
	width: 100%;
}


/* ---------------------------------------------------------
   BRAND
   --------------------------------------------------------- */

.site-footer__brand {
	min-width: 0;
}

.site-footer__logo {
	align-items: center;
	display: inline-flex;
	text-decoration: none;
}

.site-footer__logo .custom-logo {
	display: block;
	height: auto;
	max-height: 85px;
	max-width: 250px;
	width: auto;
}

.site-footer__brand-name {
	color: #ffffff;
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.site-footer__description {
	color: #b7b2aa;
	font-size: 0.88rem;
	line-height: 1.7;
	margin: 1.25rem 0 0;
	max-width: 300px;
}


/* ---------------------------------------------------------
   FOOTER HEADINGS
   --------------------------------------------------------- */

.site-footer__heading {
	color: #ffffff;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.3;
	margin: 0 0 1.25rem;
	text-transform: uppercase;
}


/* ---------------------------------------------------------
   LINKS
   --------------------------------------------------------- */

.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__links li {
	margin: 0;
	padding: 0;
}

.site-footer__links a {
	color: #b7b2aa;
	display: inline-block;
	font-size: 0.86rem;
	line-height: 1.5;
	padding: 0.3rem 0;
	text-decoration: none;
	transition:
		color 180ms ease,
		transform 180ms ease;
}

.site-footer__links a:hover {
	color: #ffffff;
	transform: translateX(3px);
}


/* ---------------------------------------------------------
   CONTACT
   --------------------------------------------------------- */

.site-footer__contact-item {
	align-items: flex-start;
	display: flex;
	gap: 0.75rem;
	margin-bottom: 1.1rem;
}

.site-footer__contact-icon {
	align-items: center;
	border: 1px solid #4a4a4a;
	border-radius: 50%;
	display: inline-flex;
	flex: 0 0 34px;
	font-size: 0.85rem;
	height: 34px;
	justify-content: center;
	width: 34px;
}

.site-footer__contact-item > div {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.site-footer__contact-label {
	color: #77736d;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 0.2rem;
	text-transform: uppercase;
}

.site-footer__contact-item a,
.site-footer__contact-item div > span:last-child {
	color: #d7d3cd;
	font-size: 0.84rem;
	line-height: 1.5;
	text-decoration: none;
	word-break: break-word;
}

.site-footer__contact-item a:hover {
	color: #ffffff;
}


/* ---------------------------------------------------------
   SOCIAL
   --------------------------------------------------------- */

.site-footer__social {
	display: flex;
	gap: 0.55rem;
	margin-top: 1.5rem;
}

.site-footer__social-link {
	align-items: center;
	border: 1px solid #4a4a4a;
	border-radius: 50%;
	color: #ffffff;
	display: inline-flex;
	font-size: 0.72rem;
	font-weight: 700;
	height: 36px;
	justify-content: center;
	text-decoration: none;
	transition:
		background-color 180ms ease,
		border-color 180ms ease,
		color 180ms ease;
	width: 36px;
}

.site-footer__social-link:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #191919;
}


/* ---------------------------------------------------------
   BOTTOM BAR
   --------------------------------------------------------- */

.site-footer__bottom {
	border-top: 1px solid #393939;
	padding: 1.35rem 1.5rem;
	width: 100%;
}

.site-footer__bottom-container {
	align-items: center;
	display: flex;
	gap: 1.5rem;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1250px;
	width: 100%;
}

.site-footer__copyright {
	color: #77736d;
	font-size: 0.74rem;
	line-height: 1.5;
	margin: 0;
}

.site-footer__bottom-links {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.site-footer__bottom-links a {
	color: #77736d;
	font-size: 0.74rem;
	text-decoration: none;
	transition: color 180ms ease;
}

.site-footer__bottom-links a:hover {
	color: #ffffff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

	.site-footer__container {
		grid-template-columns: 1.4fr repeat(2, 1fr);
		gap: 2.5rem 2rem;
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}

	.site-footer__description {
		max-width: 500px;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

	.site-footer__main {
		padding: 3.25rem 1.1rem 2.75rem;
	}

	.site-footer__container {
		display: grid;
		gap: 2.25rem;
		grid-template-columns: 1fr 1fr;
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}

	.site-footer__description {
		font-size: 0.84rem;
		max-width: 100%;
	}

	.site-footer__heading {
		font-size: 0.76rem;
		margin-bottom: 0.85rem;
	}

	.site-footer__links a {
		font-size: 0.81rem;
	}

	.site-footer__contact {
		grid-column: 1 / -1;
	}

	.site-footer__contact-item {
		margin-bottom: 0.9rem;
	}

	.site-footer__bottom {
		padding: 1.2rem 1.1rem;
	}

	.site-footer__bottom-container {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.75rem;
	}

	.site-footer__bottom-links {
		gap: 1rem;
	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

	.site-footer__main {
		padding-left: 0.9rem;
		padding-right: 0.9rem;
	}

	.site-footer__container {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.site-footer__brand,
	.site-footer__contact {
		grid-column: auto;
	}

	.site-footer__social-link {
		height: 34px;
		width: 34px;
	}

	.site-footer__bottom {
		padding-left: 0.9rem;
		padding-right: 0.9rem;
	}

}

/* =========================================================
   FOOTER — ELEMENTOR / HELLO THEME FULL-WIDTH OVERRIDE
   ========================================================= */

/* Remove common theme/container restrictions around footer */
body > .site-footer,
#site-footer {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Make sure Elementor does not restrict the footer itself */
.elementor-location-footer,
.elementor-location-footer > .elementor,
.elementor-location-footer .elementor-section,
.elementor-location-footer .elementor-container,
.elementor-location-footer .e-con,
.elementor-location-footer .e-con-inner {
	max-width: none !important;
	width: 100% !important;
}

/* The custom footer controls its own inner width */
#site-footer .site-footer__container,
#site-footer .site-footer__bottom-container {
	width: 100%;
	max-width: 1250px;
	margin-left: auto;
	margin-right: auto;
}

/* =========================================================
   COMFY STOP — MOBILE NAVIGATION
   CLEAN MOBILE VERSION
   ========================================================= */

/* =========================================================
   MOBILE HEADER
   ========================================================= */

@media (max-width: 900px) {

    /* Keep header above mobile drawer */
    .cs-header {
        position: relative !important;
        z-index: 9999 !important;
    }

    .cs-header-main {
        position: relative !important;
        z-index: 10001 !important;
    }

    .cs-header-inner {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        min-height: 70px !important;
        overflow: visible !important;
    }


    /* -----------------------------------------------------
       HAMBURGER
    ----------------------------------------------------- */

    .cs-mobile-toggle {
        display: flex !important;

        position: relative !important;
        z-index: 10005 !important;

        flex: 0 0 42px !important;

        width: 42px !important;
        height: 42px !important;

        padding: 8px !important;
        margin: 0 !important;

        appearance: none !important;
        -webkit-appearance: none !important;

        border: 0 !important;
        outline: 0 !important;

        background: transparent !important;
        background-color: transparent !important;

        box-shadow: none !important;

        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 5px !important;

        cursor: pointer;

        -webkit-tap-highlight-color: transparent !important;
    }


    .cs-mobile-toggle:hover,
    .cs-mobile-toggle:focus,
    .cs-mobile-toggle:focus-visible,
    .cs-mobile-toggle:active {
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }


    .cs-mobile-toggle span {
        display: block !important;

        width: 22px !important;
        height: 3px !important;

        padding: 0 !important;
        margin: 0 !important;

        background: #ffffff !important;

        border: 0 !important;
        border-radius: 999px !important;

        opacity: 1 !important;
    }


    /* Hamburger → X */

    .cs-header.mobile-open .cs-mobile-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }

    .cs-header.mobile-open .cs-mobile-toggle span:nth-child(2) {
        opacity: 0 !important;
    }

    .cs-header.mobile-open .cs-mobile-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }


    /* -----------------------------------------------------
       LOGO
    ----------------------------------------------------- */

    .cs-logo {
        display: flex !important;
        align-items: center !important;

        flex: 1 1 auto !important;

        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }


    .cs-logo a {
        display: flex !important;
        align-items: center !important;

        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .cs-logo img,
    .cs-logo .custom-logo {
        display: block !important;

        width: auto !important;
        max-width: 300px !important;

        height: auto !important;
        max-height: 100px !important;

        object-fit: contain !important;
    }


    .cs-logo-text-link {
        text-decoration: none !important;
    }


    .cs-logo-text {
        font-size: 22px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }


    /* -----------------------------------------------------
       DESKTOP NAV HIDDEN
    ----------------------------------------------------- */

    .cs-navigation {
        display: none !important;
    }


    /* -----------------------------------------------------
       HEADER ACTIONS
    ----------------------------------------------------- */

    .cs-actions {
        display: flex !important;
        align-items: center !important;

        flex: 0 0 auto !important;

        margin-left: auto !important;
    }

}


/* =========================================================
   MOBILE DRAWER
   ========================================================= */

@media (max-width: 900px) {

    .cs-mobile-navigation {
        position: fixed !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100dvh !important;

        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        background: transparent !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        overflow: hidden !important;

        z-index: 100000 !important;

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease;
    }


    .cs-header.mobile-open .cs-mobile-navigation {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }


    /* -----------------------------------------------------
       DARK OVERLAY
    ----------------------------------------------------- */

    .cs-mobile-navigation::before {
        content: "" !important;

        position: absolute !important;
        inset: 0 !important;

        background: rgba(0, 0, 0, 0.42) !important;

        opacity: 1 !important;

        pointer-events: none !important;
    }


    /* -----------------------------------------------------
       REMOVE ORIGINAL CONTAINER SIZING
    ----------------------------------------------------- */

    .cs-mobile-navigation > .cs-container {
        position: relative !important;

        width: 100% !important;
        max-width: none !important;

        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* -----------------------------------------------------
       DRAWER PANEL
    ----------------------------------------------------- */

    .cs-mobile-navigation nav {
        position: absolute !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: min(88vw, 390px) !important;
        height: 100% !important;

        margin: 0 !important;

        padding: 0 0 30px !important;

        background: #ffffff !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        transform: translateX(-100%) !important;

        transition:
            transform 0.3s cubic-bezier(.22, .61, .36, 1) !important;

        box-shadow: 10px 0 35px rgba(0, 0, 0, 0.15) !important;

        z-index: 2 !important;
    }


    .cs-header.mobile-open .cs-mobile-navigation nav {
        transform: translateX(0) !important;
    }


    /* -----------------------------------------------------
       CLOSE BUTTON
    ----------------------------------------------------- */

    .cs-mobile-drawer-close {
        position: absolute !important;

        top: 18px !important;
        right: 18px !important;

        width: 42px !important;
        height: 42px !important;

        padding: 0 !important;
        margin: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border: 0 !important;
        outline: 0 !important;

        background: transparent !important;
        background-color: transparent !important;

        box-shadow: none !important;

        z-index: 20 !important;

        cursor: pointer;

        -webkit-tap-highlight-color: transparent !important;
    }


    .cs-mobile-drawer-close:hover,
    .cs-mobile-drawer-close:focus,
    .cs-mobile-drawer-close:focus-visible,
    .cs-mobile-drawer-close:active {
        background: transparent !important;
        background-color: transparent !important;

        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }


    .cs-mobile-drawer-close::before,
    .cs-mobile-drawer-close::after {
        content: "" !important;

        position: absolute !important;

        width: 22px !important;
        height: 2px !important;

        background: #151515 !important;

        border-radius: 999px !important;
    }


    .cs-mobile-drawer-close::before {
        transform: rotate(45deg) !important;
    }


    .cs-mobile-drawer-close::after {
        transform: rotate(-45deg) !important;
    }

}


/* =========================================================
   MOBILE MENU RESET
   ========================================================= */

@media (max-width: 900px) {

    .cs-mobile-menu {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 20px !important;

        list-style: none !important;
    }


    .cs-mobile-menu > li {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;

        border-bottom: 1px solid #eeeeee !important;
    }


    .cs-mobile-menu li::before,
    .cs-mobile-menu li::after {
        display: none !important;
    }

}


/* =========================================================
   SHOP ACCORDION
   ========================================================= */

@media (max-width: 900px) {

    .cs-mobile-shop {
        background: transparent !important;
    }


    .cs-mobile-shop details {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
    }


    /* VERY IMPORTANT:
       Prevent theme from showing content when closed. */

    .cs-mobile-shop details:not([open])
    .cs-mobile-shop-content {
        display: none !important;
    }


    .cs-mobile-shop details[open]
    .cs-mobile-shop-content {
        display: block !important;
    }


    /* -----------------------------------------------------
       SHOP BUTTON
    ----------------------------------------------------- */

    .cs-mobile-shop summary {
        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
        min-height: 58px !important;

        margin: 0 !important;
        padding: 0 4px !important;

        color: #151515 !important;

        background: transparent !important;
        background-color: transparent !important;

        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;

        font-family: inherit !important;
        font-size: 16px !important;
        font-weight: 600 !important;

        cursor: pointer;

        list-style: none !important;

        -webkit-tap-highlight-color: transparent !important;
    }


    .cs-mobile-shop summary:hover,
    .cs-mobile-shop summary:focus,
    .cs-mobile-shop summary:focus-visible,
    .cs-mobile-shop summary:active {
        color: #151515 !important;

        background: transparent !important;
        background-color: transparent !important;

        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }


    .cs-mobile-shop summary::-webkit-details-marker {
        display: none !important;
    }


    .cs-mobile-shop summary::marker {
        display: none !important;
    }


    /* -----------------------------------------------------
       SHOP CHEVRON
    ----------------------------------------------------- */

    .cs-mobile-chevron {
        display: block !important;

        flex: 0 0 auto !important;

        width: 9px !important;
        height: 9px !important;

        margin-right: 5px !important;

        border-right: 1.5px solid #151515 !important;
        border-bottom: 1.5px solid #151515 !important;

        transform: rotate(45deg) !important;

        transition: transform 0.25s ease !important;
    }


    .cs-mobile-shop details[open]
    .cs-mobile-chevron {
        transform: rotate(225deg) !important;
    }


    /* -----------------------------------------------------
       SHOP CONTENT
    ----------------------------------------------------- */

    .cs-mobile-shop-content {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 4px 18px !important;

        background: #ffffff !important;
    }


    .cs-mobile-category {
        display: block !important;

        width: 100% !important;

        margin: 0 0 18px !important;
        padding: 0 !important;
    }


    .cs-mobile-category:last-child {
        margin-bottom: 0 !important;
    }


   .cs-mobile-category h3 {
    display: block !important;

    margin: 0 0 8px !important;
    padding: 0 !important;

    color: #151515 !important;

    font-size: 12px !important;
    line-height: 1.3 !important;

    font-weight: 800 !important;

    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;

    background: transparent !important;
}


    .cs-mobile-category a {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 7px 0 !important;

        color: #444444 !important;

        background: transparent !important;
        background-color: transparent !important;

        font-size: 14px !important;
        line-height: 1.4 !important;

        text-decoration: none !important;

        border: 0 !important;
        box-shadow: none !important;
    }


    .cs-mobile-category a:hover,
    .cs-mobile-category a:focus,
    .cs-mobile-category a:active {
        color: #151515 !important;

        background: transparent !important;
        background-color: transparent !important;

        box-shadow: none !important;
    }

}


/* =========================================================
   WORDPRESS MENU
   ========================================================= */

@media (max-width: 900px) {

    .cs-mobile-menu > li > a,
    .cs-mobile-menu > li > .cs-mobile-submenu-trigger {
        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
        min-height: 58px !important;

        margin: 0 !important;
        padding: 0 4px !important;

        color: #151515 !important;

        background: transparent !important;
        background-color: transparent !important;

        border: 0 !important;
        box-shadow: none !important;

        font-family: inherit !important;
        font-size: 16px !important;
        font-weight: 500 !important;

        text-decoration: none !important;
    }


    .cs-mobile-menu > li > a:hover,
    .cs-mobile-menu > li > a:focus,
    .cs-mobile-menu > li > a:focus-visible,
    .cs-mobile-menu > li > a:active {
        color: #151515 !important;

        background: transparent !important;
        background-color: transparent !important;

        box-shadow: none !important;
    }


    /* -----------------------------------------------------
       WORDPRESS SUBMENUS CLOSED
    ----------------------------------------------------- */

    .cs-mobile-menu .sub-menu {
        display: none !important;

        width: 100% !important;

        margin: 0 0 12px !important;
        padding: 0 0 0 14px !important;

        list-style: none !important;

        border-left: 1px solid #eeeeee !important;
    }


    /* -----------------------------------------------------
       WORDPRESS SUBMENU OPEN
    ----------------------------------------------------- */

    .cs-mobile-menu
    .menu-item.cs-mobile-submenu-open
    > .sub-menu {
        display: block !important;
    }


    .cs-mobile-menu .sub-menu li {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    .cs-mobile-menu .sub-menu a {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 7px 0 !important;

        color: #555555 !important;

        background: transparent !important;
        background-color: transparent !important;

        font-size: 14px !important;

        text-decoration: none !important;

        border: 0 !important;
        box-shadow: none !important;
    }


    .cs-mobile-menu .sub-menu a:hover,
    .cs-mobile-menu .sub-menu a:focus,
    .cs-mobile-menu .sub-menu a:active {
        color: #151515 !important;

        background: transparent !important;
        background-color: transparent !important;

        box-shadow: none !important;
    }

}


/* =========================================================
   WORDPRESS ACCORDION BUTTON
   ========================================================= */

@media (max-width: 900px) {

    .cs-mobile-submenu-trigger {
        appearance: none !important;
        -webkit-appearance: none !important;

        cursor: pointer;

        -webkit-tap-highlight-color: transparent !important;
    }


    .cs-mobile-submenu-trigger:hover,
    .cs-mobile-submenu-trigger:focus,
    .cs-mobile-submenu-trigger:focus-visible,
    .cs-mobile-submenu-trigger:active {
        background: transparent !important;
        background-color: transparent !important;

        color: #151515 !important;

        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }


    .cs-mobile-submenu-chevron {
        display: block !important;

        width: 9px !important;
        height: 9px !important;

        margin-right: 5px !important;

        border-right: 1.5px solid #151515 !important;
        border-bottom: 1.5px solid #151515 !important;

        transform: rotate(45deg) !important;

        transition: transform 0.25s ease !important;
    }


    .cs-mobile-submenu-trigger[aria-expanded="true"]
    .cs-mobile-submenu-chevron {
        transform: rotate(225deg) !important;
    }

}


/* =========================================================
   BODY LOCK
   ========================================================= */

body.cs-mobile-menu-open {
    overflow: hidden !important;
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .cs-mobile-navigation nav {
        width: 91vw !important;
    }


    .cs-mobile-menu {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }


    .cs-logo img,
    .cs-logo .custom-logo {
        max-width: 180px !important;
        max-height: 46px !important;
    }


    .cs-logo-text {
        font-size: 20px !important;
    }

}

/* =========================================================
   MOBILE DRAWER HEADER
   ========================================================= */

@media (max-width: 900px) {

    .cs-mobile-drawer-header {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 70px !important;
        margin: 0 !important;
        padding: 12px 20px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #eeeeee !important;
        box-sizing: border-box !important;
    }

    .cs-mobile-drawer-logo {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        max-width: 180px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-decoration: none !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .cs-mobile-drawer-logo img {
        display: block !important;
        width: auto !important;
        max-width: 155px !important;
        height: auto !important;
        max-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
    }

    .cs-mobile-drawer-logo:hover,
    .cs-mobile-drawer-logo:focus,
    .cs-mobile-drawer-logo:active {
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    .cs-mobile-drawer-header
    .cs-mobile-drawer-close {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

}


/* =========================================================
 * COMFY STOP - CART PAGE UI/UX REDESIGN & TABLE ALIGNMENT
 * ========================================================= */

.woocommerce-cart .button,
.woocommerce-cart button[type="submit"],
.woocommerce-cart input[type="submit"],
.woocommerce-cart .checkout-button,
.woocommerce-cart a.button,
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart input[name="update_cart"] {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    border-radius: 4px !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.woocommerce-cart .button:hover,
.woocommerce-cart button[type="submit"]:hover,
.woocommerce-cart input[type="submit"]:hover,
.woocommerce-cart .checkout-button:hover,
.woocommerce-cart a.button:hover,
.woocommerce-cart button[name="update_cart"]:hover,
.woocommerce-cart input[name="update_cart"]:hover {
    background-color: #222222 !important;
    color: #ffffff !important;
    border-color: #222222 !important;
    transform: translateY(-1px);
}

/* 2. FIX: Remove Vertical Gap Between Table Headers (Price/Quantity/Subtotal) & Values */
.woocommerce-cart table.shop_table_responsive thead th,
.woocommerce-cart table.cart thead th {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #e5e5e5 !important;
    vertical-align: middle !important;
}

.woocommerce-cart table.shop_table_responsive tbody td,
.woocommerce-cart table.cart tbody td {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    vertical-align: middle !important;
}

/* 3. FIX: Product Variations Key-Value Inline Alignment */
.woocommerce-cart td.product-name dl.variation {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.woocommerce-cart td.product-name dl.variation dt,
.woocommerce-cart td.product-name dl.variation dd {
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
}

.woocommerce-cart td.product-name dl.variation dt {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin-right: 6px !important;
}

.woocommerce-cart td.product-name dl.variation dd,
.woocommerce-cart td.product-name dl.variation dd p {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #555555 !important;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. Instruction Text & Cart Messages */
.cs-shipping-instruction {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #222222 !important;
    margin: 8px 0 12px 0 !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

.woocommerce-shipping-destination,
.shipping-calculator-button + p,
.woocommerce-cart .woocommerce-message {
    display: none !important;
}

/* 5. FIX: Prevent Floating Label Collisions in Shipping Calculator */
.woocommerce-shipping-calculator .form-row,
.shipping-calculator-form .form-row {
    margin-bottom: 16px !important;
    position: relative !important;
    float: none !important;
    width: 100% !important;
    clear: both !important;
}

.woocommerce-shipping-calculator .form-row label,
.shipping-calculator-form .form-row label,
.shipping-calculator-form label {
    display: block !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #222222 !important;
    text-align: left !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    line-height: 1.2 !important;
}

/* 6. Style Inputs, Selects & Dropdowns */
/* Ensure input, select, and coupon form elements share matching heights */
.woocommerce-shipping-calculator input[type="text"],
.woocommerce-shipping-calculator select,
.shipping-calculator-form input[type="text"],
.shipping-calculator-form select,
.shipping-calculator-form .select2-container--default .select2-selection--single,
.woocommerce-cart .coupon input[type="text"] {
    width: 100% !important;
    height: 42px !important;
    padding: 8px 12px !important;
    border: 1px solid #cccccc !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Align Coupon wrapper and match button height to input */
.woocommerce-cart .coupon {
    display: flex !important;
    align-items: center !important;
}

.woocommerce-cart .coupon button {
    height: 42px !important;
    padding: 0 16px !important;
    line-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.woocommerce-shipping-calculator input[type="text"]:focus,
.woocommerce-shipping-calculator select:focus,
.shipping-calculator-form input[type="text"]:focus,
.shipping-calculator-form select:focus {
    border-color: #000000 !important;
    outline: none !important;
}

.woocommerce-cart .checkout-button {
    width: 100% !important;
    text-align: center !important;
    padding: 15px 20px !important;
    font-size: 15px !important;
}

/* =========================================================
 * 7. COMFY STOP - DEDICATED MOBILE CART UI/UX (MAX-WIDTH: 768PX)
 * ========================================================= */
@media (max-width: 768px) {

    /* --- A. Product Image & Container --- */
    .woocommerce-cart table.cart tr.cart_item {
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        background: #ffffff !important;
        border: 1px solid #e2e2e2 !important;
        border-radius: 8px !important;
        padding: 16px !important;
        margin-bottom: 16px !important;
    }

    .woocommerce-cart table.cart td.product-thumbnail {
        text-align: center !important;
        padding: 0 0 12px 0 !important;
    }

    .woocommerce-cart table.cart td.product-thumbnail img {
        max-width: 140px !important;
        height: auto !important;
        border-radius: 6px !important;
        margin: 0 auto !important;
    }

    /* Clean 'Remove' (X) button positioning */
    .woocommerce-cart table.cart td.product-remove {
        position: absolute !important;
        top: 10px !important;
        right: 12px !important;
        padding: 0 !important;
    }

    .woocommerce-cart table.cart td.product-remove a.remove {
        font-size: 20px !important;
        color: #999999 !important;
        text-decoration: none !important;
    }

    /* --- B. Product Title & Price Row --- */
    .woocommerce-cart table.cart td.product-name {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #111111 !important;
        padding: 0 0 10px 0 !important;
        text-align: center !important;
    }

    /* Flex row for Price, Quantity, Subtotal */
    .woocommerce-cart table.cart td.product-price,
    .woocommerce-cart table.cart td.product-quantity,
    .woocommerce-cart table.cart td.product-subtotal {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 0 !important;
        border-top: 1px solid #f0f0f0 !important;
        width: 100% !important;
        font-size: 14px !important;
    }

    .woocommerce-cart table.cart td.product-price::before {
        content: "Price:" !important;
        font-weight: 600 !important;
        color: #666666 !important;
    }

    .woocommerce-cart table.cart td.product-quantity::before {
        content: "Quantity:" !important;
        font-weight: 600 !important;
        color: #666666 !important;
    }

    .woocommerce-cart table.cart td.product-subtotal::before {
        content: "Subtotal:" !important;
        font-weight: 700 !important;
        color: #111111 !important;
    }

    .woocommerce-cart table.cart td.product-subtotal {
        font-weight: 700 !important;
        font-size: 15px !important;
        color: #000000 !important;
    }

    /* --- C. Coupon Section & Action Buttons --- */
    .woocommerce-cart .coupon {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 12px !important;
    }

    .woocommerce-cart .coupon input[type="text"] {
        width: 100% !important;
        height: 44px !important;
        text-align: center !important;
    }

    .woocommerce-cart .coupon button {
        width: 100% !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        line-height: normal !important;
        text-align: center !important;
    }

    .woocommerce-cart button[name="update_cart"] {
        width: 100% !important;
        margin-top: 12px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        line-height: normal !important;
        text-align: center !important;
    }

    /* --- D. Cart Totals & Shipment Layout --- */
    .woocommerce-cart .cart_totals {
        width: 100% !important;
        padding: 0 !important;
    }

    .woocommerce-cart .cart_totals table.shop_table {
        width: 100% !important;
    }

    /* --- E. FIX: WhatsApp & Contact Overlay Clearance --- */
    .woocommerce-cart {
        padding-bottom: 80px !important;
    }

    .cart-collaterals,
    .woocommerce-shipping-calculator {
        margin-bottom: 40px !important;
    }
}


/* =========================================================
   REMOVE CHECKOUT COUPON SECTION & MARGINS
   ========================================================= */
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-checkout .woocommerce-coupon-form {
    display: none !important;
}

body.woocommerce-checkout #customer_details {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* =========================================================
   COMFY STOP - UNIFIED CHECKOUT DESIGN (DESKTOP & MOBILE)
   ========================================================= */

/* 1. Hide default duplicate sections */
body.woocommerce-checkout form.checkout > #order_review_heading,
body.woocommerce-checkout form.checkout > #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order:not(.checkout-sidebar-right #order_review),
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout form.checkout_coupon {
    display: none !important;
}

/* 2. Main Flex Container */
@media (min-width: 992px) {
    body.woocommerce-checkout form.checkout {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 24px !important;
        width: 100% !important;
    }

    /* Left Column: Styled Billing Details Card */
    body.woocommerce-checkout #customer_details {
        width: 58% !important;
        max-width: 58% !important;
        float: left !important;
        margin: 0 !important;
        background: #ffffff !important;
        padding: 24px !important;
        border: 1px solid #e2e2e2 !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
        box-sizing: border-box !important;
    }

    /* Right Column: Styled Order Review Card */
    body.woocommerce-checkout .checkout-sidebar-right {
        width: 39% !important;
        max-width: 39% !important;
        float: right !important;
        background: #ffffff !important;
        padding: 24px !important;
        border: 1px solid #e2e2e2 !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
        box-sizing: border-box !important;
        position: sticky !important;
        top: 20px !important;
    }
}

body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* 3. Section Headings (Matching YOUR ORDER Style) */
body.woocommerce-checkout #customer_details h3,
body.woocommerce-checkout .checkout-sidebar-right h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #222222 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    letter-spacing: 0.5px !important;
}

/* 4. Billing Form Inputs Grid (2 Fields Per Row) */
@media (min-width: 600px) {
    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }

    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper p.form-row {
        width: 100% !important;
    }

    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper #billing_first_name_field,
    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper #billing_last_name_field,
    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper #billing_city_field,
    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper #billing_postcode_field,
    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper #billing_phone_field,
    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper #billing_email_field {
        width: 48.5% !important;
        display: inline-block !important;
    }
}

/* Input Fields & Labels Styling */
body.woocommerce-checkout label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    margin-bottom: 6px !important;
}

body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout textarea,
body.woocommerce-checkout select {
    border-radius: 6px !important;
    border: 1px solid #dcdcdc !important;
    padding: 11px 14px !important;
    background-color: #fafafa !important;
    font-size: 14px !important;
    color: #222222 !important;
    transition: all 0.2s ease-in-out !important;
}

body.woocommerce-checkout input[type="text"]:focus,
body.woocommerce-checkout input[type="email"]:focus,
body.woocommerce-checkout input[type="tel"]:focus,
body.woocommerce-checkout textarea:focus {
    background-color: #ffffff !important;
    border-color: #000000 !important;
    outline: none !important;
}

/* 5. Product Thumbnails & Order Table Styling */
body.woocommerce-checkout .cs-checkout-item-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

body.woocommerce-checkout img.cs-checkout-product-thumb {
    width: 50px !important;
    height: 50px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    border: 1px solid #eaeaea !important;
    flex-shrink: 0 !important;
}

body.woocommerce-checkout .checkout-sidebar-right table.shop_table {
    border-collapse: collapse !important;
    width: 100% !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 1px solid #e5e5e5 !important;
    margin-bottom: 20px !important;
}

body.woocommerce-checkout .checkout-sidebar-right table.shop_table th {
    background-color: #f8f8f8 !important;
    color: #222222 !important;
    font-weight: 700 !important;
    padding: 12px !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

body.woocommerce-checkout .checkout-sidebar-right table.shop_table td {
    padding: 12px !important;
    border-bottom: 1px solid #eeeeee !important;
    font-size: 14px !important;
    color: #333333 !important;
}

/* 6. Highly Readable Payment Box Styling */
body.woocommerce-checkout #payment {
    background: #f9f9f9 !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 8px !important;
    padding: 20px !important;
}

body.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid #e2e2e2 !important;
    padding-bottom: 15px !important;
    margin-bottom: 15px !important;
    list-style: none !important;
}

body.woocommerce-checkout #payment ul.payment_methods label {
    color: #111111 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* FIX: Clear & High-Contrast Payment Box Text */
body.woocommerce-checkout #payment div.payment_box {
    background: #ffffff !important;
    color: #222222 !important; /* Dark text for high contrast */
    border: 1px solid #cccccc !important;
    border-radius: 6px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    margin-top: 10px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

body.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: #cccccc !important; /* Matches border arrow */
}

/* Black Place Order Button */
body.woocommerce-checkout #payment #place_order,
body.woocommerce-checkout button.button.alt#place_order {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 15px 24px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease-in-out !important;
}

body.woocommerce-checkout #payment #place_order:hover {
    background-color: #222222 !important;
}

/* 7. Mobile Responsive Layout */
@media (max-width: 991px) {
    body.woocommerce-checkout form.checkout {
        flex-direction: column !important;
    }

    body.woocommerce-checkout #customer_details,
    body.woocommerce-checkout .checkout-sidebar-right {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }

    body.woocommerce-checkout .checkout-sidebar-right {
        margin-top: 24px !important;
        position: static !important;
    }
}


/* =========================================================
   COMFY STOP - THANK YOU / ORDER RECEIVED PAGE STYLING
   ========================================================= */

/* 1. Main Container Alignment */
body.woocommerce-order-received .woocommerce-order {
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 20px 0 !important;
}

/* 2. Top "Thank you. Your order has been received." Banner */
body.woocommerce-order-received p.woocommerce-notice--success {
    background: #ffffff !important;
    border: 1px solid #e2e2e2 !important;
    border-left: 4px solid #000000 !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #222222 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 24px !important;
}

/* 3. Top Overview Meta Bar (Order Number, Date, Total, Payment Method) */
body.woocommerce-order-received ul.woocommerce-order-overview {
    background: #ffffff !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    list-style: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 30px !important;
}

body.woocommerce-order-received ul.woocommerce-order-overview li {
    font-size: 12px !important;
    text-transform: uppercase !important;
    color: #777777 !important;
    font-weight: 600 !important;
    border-right: 1px solid #eeeeee !important;
    padding-right: 20px !important;
    margin-right: 20px !important;
}

body.woocommerce-order-received ul.woocommerce-order-overview li:last-child {
    border-right: none !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
}

body.woocommerce-order-received ul.woocommerce-order-overview li strong {
    display: block !important;
    font-size: 16px !important;
    color: #111111 !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
    text-transform: none !important;
}

/* 4. Headings Styling */
body.woocommerce-order-received h2.woocommerce-order-details__title,
body.woocommerce-order-received h2.woocommerce-column__title {
    font-size: 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #222222 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 16px !important;
}

/* 5. Order Details Table Card */
body.woocommerce-order-received section.woocommerce-order-details {
    background: #ffffff !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 8px !important;
    padding: 24px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 30px !important;
}

body.woocommerce-order-received table.shop_table.order_details {
    border-collapse: collapse !important;
    width: 100% !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

body.woocommerce-order-received table.shop_table.order_details th {
    background-color: #f8f8f8 !important;
    color: #222222 !important;
    font-weight: 700 !important;
    padding: 14px !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

body.woocommerce-order-received table.shop_table.order_details td {
    padding: 14px !important;
    border-bottom: 1px solid #eeeeee !important;
    font-size: 14px !important;
    color: #333333 !important;
}

body.woocommerce-order-received table.shop_table.order_details td a {
    color: #000000 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Product Thumbnails Layout */
body.woocommerce-order-received .cs-thankyou-item-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

body.woocommerce-order-received img.cs-thankyou-product-thumb {
    width: 50px !important;
    height: 50px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    border: 1px solid #eaeaea !important;
    flex-shrink: 0 !important;
}

/* 6. Billing & Shipping Address Cards Grid */
body.woocommerce-order-received section.woocommerce-customer-details {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
}

body.woocommerce-order-received section.woocommerce-customer-details .woocommerce-column {
    flex: 1 !important;
    min-width: 280px !important;
    background: #ffffff !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 8px !important;
    padding: 24px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

body.woocommerce-order-received address {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    font-style: normal !important;
    line-height: 1.6 !important;
    color: #444444 !important;
    font-size: 14px !important;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    body.woocommerce-order-received ul.woocommerce-order-overview {
        flex-direction: column !important;
        gap: 12px !important;
    }

    body.woocommerce-order-received ul.woocommerce-order-overview li {
        border-right: none !important;
        border-bottom: 1px solid #eeeeee !important;
        padding-right: 0 !important;
        padding-bottom: 8px !important;
        margin-right: 0 !important;
    }

    body.woocommerce-order-received section.woocommerce-customer-details {
        flex-direction: column !important;
    }
}