:root {
    --shadow-1: 0px 0px 1px rgba(40, 41, 61, 0.08), 0px 0.5px 2px rgba(96, 97, 112, 0.16);
    --shadow-2: 0px 0px 1px rgba(40, 41, 61, 0.04), 0px 2px 4px rgba(96, 97, 112, 0.16);
    --shadow-3: 0px 0px 2px rgba(40, 41, 61, 0.04), 0px 4px 8px rgba(96, 97, 112, 0.16);
    --shadow-4: 0px 2px 4px rgba(40, 41, 61, 0.04), 0px 8px 16px rgba(96, 97, 112, 0.16);
    --shadow-5: 0px 2px 8px rgba(40, 41, 61, 0.04), 0px 16px 24px rgba(96, 97, 112, 0.16);
    --shadow-6: 0px 2px 8px rgba(40, 41, 61, 0.08), 0px 20px 32px rgba(96, 97, 112, 0.24);
}

/* ===== Link hover =====
   The Wolmart theme ships `a:hover { color: #1914fe }` — its own default blue.
   `a` itself was re-pointed at the Q2U gold when the theme was rebranded, but the
   hover was missed, so every link without an explicit hover rule (the hero
   "Shop now" among them) flashed blue. Buttons that define their own hover colour
   are more specific and still win. */
a:hover {
    color: var(--q2u-primary-dark, #c09c35);
}

/* ===== Buttons Css ===== */
.pricing-style-one .primary-btn {
    background: var(--q2u-primary);
    color: var(--bs-white);
    box-shadow: var(--shadow-2);
}

.pricing-style-one .active.primary-btn,
.pricing-style-one .primary-btn:hover,
.pricing-style-one .primary-btn:focus {
    background: var(--q2u-primary);
    color: var(--bs-white);
    box-shadow: var(--shadow-4);
}

/* .pricing-style-one .deactive.primary-btn {
    background: var(--gray-4);
    color: var(--dark-3);
    pointer-events: none;
} */

/*===== PRICING STYLE ONE =====*/
.pricing-one {
    padding: 100px 0;
}

.pricing-style-one {
    box-shadow: var(--shadow-4);
    padding: 45px 30px;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: var(--white);
    margin-top: 50px;
    display: flex;
    flex-direction: column;
}

.pricing-btn .btn {
    border: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
    .pricing-style-one {
        padding: 35px 30px;
    }
}

.pricing-style-one .sub-title {
    font-size: 16px;
    position: relative;
    padding: 6px 20px;
    display: inline-block;
    border: 2px solid var(--q2u-primary);
    border-radius: 30px;
}

.pricing-style-one .price {
    display: block;
    font-size: 55px;
    font-weight: 600;
    line-height: 80px;
    margin-top: 25px;
    color: var(--bs-black);
}

@media (max-width: 767px) {
    .pricing-style-one .price {
        font-size: 45px;
        margin-top: 16px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .pricing-style-one .price {
        font-size: 50px;
        margin-top: 20px;
    }
}

.pricing-style-one .year {
    color: var(--dark-3);
    margin-top: 3px;
}

.pricing-style-one .pricing-list {
    margin-top: 40px;
}

.pricing-style-one .pricing-list li {
    margin-top: 16px;
    list-style: none;
}

.pricing-style-one .pricing-list li i {
    color: var(--primary);
    margin-right: 8px;
}

.pricing-style-one .pricing-btn {
    margin-top: 42px;
}

.pricing-style-one .bottom-shape {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 101%;
    z-index: -1;
}

.pac-container {
    z-index: 9999;
}

.product-media {
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-media img.product-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* keep aspect ratio inside box */
}

.minipopup-box .product.product-cart .product-media {
    height: 100%;
}

.product-show-page .nav .nav-link:hover {
    border-color: white;
}
.product-show-page .nav .nav-link:focus {
    border-color: white;

}
.product-show-page .nav .nav-item:hover {
    border-color: white;

}
.product-show-page .nav .nav-item:hover {
    border-color: white;

}

.product-show-page .nav .nav-item .active {
    border-color: white;
}

.shop-results-summary {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    color: #333;
}

.shop-results-summary strong {
    color: #000;
}

/* Product card: left-align the text details (media stays centered) */
.product-wrap .product.text-center .product-details,
.product-wrap .product.text-center .product-details .product-price {
    text-align: left;
}

.product-wrap .product.text-center .product-details .ratings-container {
    justify-content: flex-start;
}

/* Product card: subtle grow on hover */
.product-wrap .product {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}

.product-wrap .product:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    z-index: 2;
}

/* Product card: media image fills the whole top area, flush to the edges */
.product-wrap .product > .product-media {
    height: 26rem;
    margin: 0;
    display: block;
    overflow: hidden;
}

.product-wrap .product > .product-media > a {
    display: block;
    width: 100%;
    height: 100%;
}

.product-wrap .product > .product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Mobile header =====
   The .header-kebab trigger sizing + caret reset moved to header.css so it also
   applies on the home page (which loads a demo stylesheet instead of this file).
   The header account menu (desktop "My Account" + mobile 3-dot) is likewise
   styled as `.dropdown-box.acct-menu` in header.css so both share one treatment. */

/* ===== Mobile off-canvas menu: brand logo + quick links ===== */
.mobile-menu-logo {
    display: block;
    padding: 0.5rem 0 1.6rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid #2e3237;
}

.mobile-menu-logo img {
    display: block;
    width: 112px;
    height: auto;
}

/* "Latest Products" / "Directory Listing" shortcuts at the top of the list */
.mobile-menu > li.mm-extra > a,
.category-menu > li.mm-extra > a {
    font-weight: 600;
}

.mobile-menu > li.mm-extra.mm-extra-last {
    border-bottom: 2px solid #2e3237;
}

.category-menu > li.mm-extra.mm-extra-last > a {
    border-bottom-width: 2px;
}

.mobile-menu > li.mm-extra > a > .fas,
.category-menu > li.mm-extra > a > .fas {
    color: var(--q2u-primary, #cfad3c);
}

@media (max-width: 767px) {
    /* Keep the right-hand icon cluster on a single row */
    .header-middle .header-right {
        flex-wrap: nowrap;
    }

    .header-middle .header-left {
        flex: 1;
    }

    /* The kebab dropdown is toggled via Alpine's .show class */
    .header-kebab.show .dropdown-box {
        visibility: visible;
        opacity: 1;
        top: 100%;
        transform: translate3d(0, 0, 0);
    }
}


/* ===== Shop toolbox custom selects ===== */
.shop-select {
    position: relative;
    display: inline-block;
}

.shop-select-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 15rem;
    padding: 0.7rem 3.2rem 0.7rem 1.3rem;
    border: 1px solid #dee2e6;
    border-radius: 0.4rem;
    background: #fff;
    color: #333;
    font-size: 1.3rem;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.shop-select-toggle > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-select-toggle::after {
    content: "";
    position: absolute;
    right: 1.3rem;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -3px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #6c757d;
    transition: transform 0.15s ease;
}

.shop-select-toggle.is-open::after {
    transform: rotate(180deg);
}

.shop-select-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1050;
    min-width: 100%;
    margin: 0;
    padding: 0.4rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 0.6rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.shop-select-menu[x-cloak] {
    display: none !important;
}

.shop-select-end .shop-select-menu {
    left: auto;
    right: 0;
}

.shop-select-option {
    display: block;
    width: 100%;
    padding: 0.7rem 1.4rem;
    border: 0;
    background: none;
    color: #333;
    font-size: 1.3rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.shop-select-option:hover {
    background: #f5f7fa;
}

.shop-select-option.is-selected {
    color: var(--q2u-primary, #cfad3c);
    font-weight: 600;
}

/* ===== Empty state (no products) ===== */
.empty-state {
    max-width: 440px;
    margin: 4rem auto;
    padding: 3rem 2rem;
    text-align: center;
}

.empty-state-icon {
    width: 9rem;
    height: 9rem;
    margin: 0 auto 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(207, 173, 60, 0.12);
    color: var(--q2u-primary, #cfad3c);
    font-size: 3.6rem;
}

.empty-state-title {
    margin: 0 0 0.6rem;
    font-size: 2rem;
    font-weight: 600;
    color: #222;
}

.empty-state-text {
    margin: 0 auto 2rem;
    max-width: 32rem;
    color: #8a8a8a;
    font-size: 1.4rem;
    line-height: 1.7;
}

/* Multi-level category tree (shop / category / vendor sidebar) */
.shop-sidebar .category-tree,
.shop-sidebar .category-subtree,
.vendor-sidebar .category-tree,
.vendor-sidebar .category-subtree {
    list-style: none;
}

.shop-sidebar .category-subtree,
.vendor-sidebar .category-subtree {
    margin: 0.6rem 0 0.9rem;
    padding-left: 1.4rem;
    border-left: 1px solid #ececec;
}

.shop-sidebar .category-tree li,
.vendor-sidebar .category-tree li {
    margin-bottom: 0.5rem;
}

.shop-sidebar .category-tree li:last-child,
.vendor-sidebar .category-tree li:last-child {
    margin-bottom: 0;
}

.shop-sidebar .category-tree li > a,
.vendor-sidebar .category-tree li > a {
    display: block;
    padding: 0.4rem 0;
    line-height: 1.4;
    transition: color 0.15s ease;
}

.shop-sidebar .category-tree a:hover,
.vendor-sidebar .category-tree a:hover {
    color: var(--q2u-primary, #cfad3c);
}

/* Active category */
.shop-sidebar .filter-items li.active > a,
.shop-sidebar .category-tree li.active > a,
.shop-sidebar .category-subtree li.active > a,
.vendor-sidebar .filter-items li.active > a,
.vendor-sidebar .category-tree li.active > a,
.vendor-sidebar .category-subtree li.active > a {
    color: var(--q2u-primary, #cfad3c);
    font-weight: 600;
}

/* Categories widget on the shop sidebar: card treatment (.widget-card opts a
   widget into this look without touching the plain-list vendor-sidebar widgets
   that share the base .category-tree rules above). */
.shop-sidebar .widget-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 0.8rem;
    padding: 1.8rem 2rem 2rem;
    box-shadow: var(--shadow-1);
}

.shop-sidebar .widget-card .widget-title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.4rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid #f0f0f0;
    font-size: 1.6rem;
    font-weight: 600;
    color: #222;
}

.shop-sidebar .widget-card .widget-title i {
    font-size: 1.7rem;
    color: var(--q2u-primary, #cfad3c);
}

.shop-sidebar .widget-card .category-tree li > a {
    padding: 0.55rem 0.8rem;
    border-radius: 0.6rem;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.shop-sidebar .widget-card .category-tree a:hover {
    background-color: rgba(207, 173, 60, 0.08);
}

.shop-sidebar .widget-card .filter-items li.active > a,
.shop-sidebar .widget-card .category-tree li.active > a,
.shop-sidebar .widget-card .category-subtree li.active > a {
    background-color: rgba(207, 173, 60, 0.12);
}

.shop-sidebar .widget-card + .widget {
    margin-top: 1.6rem;
}

/* Wider gutter between product cards (extra inner padding, no negative margin = no overflow) */
.product-wrapper.row > * {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Active (current) breadcrumb item */
.breadcrumb-nav .breadcrumb > li:last-child,
.breadcrumb-nav .breadcrumb > li.active {
    color: var(--q2u-primary, #cfad3c);
    font-weight: 600;
}

/* Product detail page: no right sidebar, main content spans full width */
.row .main-content.product-detail-content {
    max-width: 100%;
}

.more-products-section .swiper-slide {
    height: auto;
}

/* Product detail: variant + quantity rows — shared label column, aligned controls */
.product-variation-forms {
    display: grid;
    grid-template-columns: 8rem 1fr;
    align-items: center;
    gap: 0.9rem 1.2rem;
    margin-bottom: 1.6rem;
}

.product-variation-forms .product-variation-form {
    display: contents;
}

.product-variation-forms .product-variation-form label {
    margin: 0;
    max-width: none;
    white-space: nowrap;
}

/* Quantity row: label in the same 8rem column as the variant labels, then the
   theme's native stepper at its normal width. */
.product-sticky-content .product-qty-form.with-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
    flex: 0 0 24rem;
    max-width: 24rem;
    margin-bottom: 1.4rem;
}

.product-sticky-content .product-qty-form.with-label > small {
    flex: 0 0 100%;
    margin: -0.4rem 0 0 9.2rem;
}

.product-sticky-content .btn-primary {
    margin-top: 0.6rem;
}

.product-sticky-content .product-qty-form.with-label > label {
    flex: 0 0 8rem;
    max-width: none;
    margin: 0;
    white-space: nowrap;
}

.product-sticky-content .product-qty-form.with-label .input-group {
    flex: 1;
    width: auto;
    min-width: 0;
}

.product-variation-form .product-variant-select {
    min-width: 20rem;
}

.product-variation-form .product-variant-select .shop-select-toggle {
    width: 100%;
}

.product-variation-form .product-variant-select .shop-select-menu {
    max-height: 24rem;
    overflow-y: auto;
}

/* Product detail: keep Add to Cart in the primary colour in every state.
   Bootstrap's .btn:disabled (0,2,0) otherwise wins over the theme's .btn-primary
   and paints the button its default blue (--bs-btn-disabled-bg) while no variant
   is selected. */
.product-sticky-content .btn-primary,
.product-sticky-content .btn-primary:disabled,
.product-sticky-content .btn-primary[disabled],
.product-sticky-content .btn-primary.disabled,
.product-sticky-content .btn-primary.added,
.product-sticky-content .btn-primary.loading {
    background-color: var(--q2u-primary, #cfad3c) !important;
    border-color: var(--q2u-primary, #cfad3c) !important;
    color: #fff !important;
    opacity: 1 !important;
}

/* Darker primary on hover / focus (only when the button is actually enabled) */
.product-sticky-content .btn-primary:not(:disabled):not(.disabled):hover,
.product-sticky-content .btn-primary:not(:disabled):not(.disabled):focus,
.product-sticky-content .btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--q2u-primary-active, #ba992e) !important;
    border-color: var(--q2u-primary-active, #ba992e) !important;
    color: #fff !important;
}

.product-sticky-content .btn-primary:disabled,
.product-sticky-content .btn-primary[disabled],
.product-sticky-content .btn-primary.disabled {
    cursor: not-allowed;
}

/* Product detail: full-width Add to Cart on mobile */
@media (max-width: 767px) {
    .product-sticky-content .btn-primary {
        display: block;
        width: 100%;
    }
}

/* Product detail: pick the section from a custom dropdown on mobile */
.product-tabs-select {
    display: block;
    width: 100%;
}

.product-tabs-select .shop-select-toggle {
    width: 100%;
    min-width: 0;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 1.1rem 3.6rem 1.1rem 1.5rem;
}

.product-tabs-select .shop-select-toggle::after {
    right: 1.6rem;
    border-left-width: 6px;
    border-right-width: 6px;
    border-top-width: 7px;
}

.product-tabs-select .shop-select-menu {
    font-size: 1.5rem;
}

.product-tabs-select .shop-select-option {
    padding: 1.1rem 1.6rem;
    font-weight: 600;
}

@media (max-width: 767px) {
    .product-tabs .tab-content .tab-pane {
        border: 1px solid #eee;
        border-radius: 0.4rem;
        padding: 1.5rem;
    }
}

/* Product detail: space "From The Same Shop" away from the tabs above */
.product-show-page .vendor-product-section {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid #eee;
}

/* "More Products" sidebar: image fills the full card height */
.widget-products .product-widget {
    align-items: stretch;
    overflow: hidden;
}

.widget-products .product-widget .product-media {
    align-self: stretch;
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.widget-products .product-widget .product-media a {
    display: block;
    width: 100%;
    height: 100%;
}

.widget-products .product-widget .product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* "More Products" sidebar: hover grow on each item (kept inside the carousel) */
.widget-products .product-widget {
    position: relative;
    z-index: 0;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.widget-products .product-widget:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    border-radius: 0.4rem;
    z-index: 5;
}

/* "From The Same Shop": let the hover-grown card overflow the swiper */
.vendor-product-section .swiper,
.vendor-product-section .swiper-container,
.vendor-product-section .swiper-wrapper,
.vendor-product-section .swiper-slide {
    overflow: visible;
}

.vendor-product-section .swiper-slide .product-wrap .product:hover {
    z-index: 5;
}

/* ===== Customer account page banner ===== */
.q2u-acct-header {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0 4rem;
    margin-bottom: 3rem;
    background-color: #faf7f0;
    text-align: left;
    text-transform: none;
}

.q2u-acct-header__glow {
    position: absolute;
    top: -220px;
    right: -120px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background-color: #f4eedd;
    opacity: 0.75;
    pointer-events: none;
}

.q2u-acct-header .container {
    position: relative;
}

.q2u-acct-header .breadcrumb-nav,
.my-account .q2u-acct-header .breadcrumb-nav {
    margin-bottom: 1.4rem;
}

.q2u-acct-header .breadcrumb {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.q2u-acct-header__title {
    margin: 0 0 1rem;
    font-size: 3.6rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.25px;
    color: #333;
}

.q2u-acct-header__text {
    max-width: 560px;
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.7;
    color: #666;
    text-wrap: pretty;
}

@media (max-width: 991px) {
    .q2u-acct-header {
        padding: 3.4rem 0 3rem;
    }

    .q2u-acct-header__title {
        font-size: 3rem;
    }
}

@media (max-width: 767px) {
    .q2u-acct-header {
        padding: 2.6rem 0 2.4rem;
    }

    .q2u-acct-header__title {
        font-size: 2.6rem;
    }

    .q2u-acct-header__text {
        font-size: 1.5rem;
    }
}

/* ===== Customer account dashboard ===== */
.dash-welcome {
    margin-bottom: 2.4rem;
}

.dash-welcome h3 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: #222;
}

.dash-welcome p {
    margin: 0;
    color: #888;
}

.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
    margin-bottom: 3rem;
}

@media (max-width: 991px) {
    .dash-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .dash-stats {
        grid-template-columns: 1fr;
    }
}

.dash-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.2rem 1.9rem;
    border: 1px solid #eee;
    border-radius: 0.9rem;
    background: #fff;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dash-stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
    border-color: var(--q2u-primary, #cfad3c);
    color: inherit;
}

.dash-stat-icon {
    width: 4.6rem;
    height: 4.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(207, 173, 60, 0.12);
    color: var(--q2u-primary, #cfad3c);
    font-size: 2.1rem;
    margin-bottom: 1.4rem;
}

.dash-stat-value {
    display: block;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    color: #222;
}

.dash-stat-label {
    display: block;
    margin-top: 0.5rem;
    color: #777;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dash-stat-link {
    display: inline-block;
    margin-top: 1.3rem;
    color: var(--q2u-primary, #cfad3c);
    font-size: 1.3rem;
    font-weight: 600;
}

.dash-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.dash-quick a,
.dash-quick button {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1.6rem;
    border: 1px solid #e5e5e5;
    border-radius: 0.5rem;
    background: #fff;
    color: #444;
    font-size: 1.35rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.dash-quick a:hover,
.dash-quick button:hover {
    border-color: var(--q2u-primary, #cfad3c);
    color: var(--q2u-primary, #cfad3c);
}

/* ===== Customer order history ===== */
.orders-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding-bottom: 1.4rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #eee;
}

.orders-head-title {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.orders-head h3 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #222;
}

.orders-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.orders-toolbar .orders-select .shop-select-toggle {
    min-width: 16rem;
}

@media (max-width: 575px) {
    .orders-toolbar {
        width: 100%;
    }

    .orders-toolbar .orders-select {
        flex: 1;
    }

    .orders-toolbar .orders-select .shop-select-toggle {
        width: 100%;
        min-width: 0;
    }
}

/* ===== Account sidebar nav =====
   Desktop: a self-contained card with an identity header and an icon menu.
   Mobile: a toggle button that opens a custom dropdown, styled to match the
   site's other custom selects (.shop-select-menu / .cat-select-menu). */
.account-nav-toggle {
    display: none;
}

/* Hidden by default; the desktop card reveals it. */
.account-nav-head {
    display: none;
}

/* Menu rows are icon + label on every breakpoint. */
.account-nav .nav-tabs .link-item > a {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.account-nav .nav-tabs .link-item > a > i {
    flex: none;
    width: 1.8rem;
    font-size: 1.35rem;
    text-align: center;
}

/* ---------- Desktop: card ---------- */
@media (min-width: 768px) {
    .my-account .tab-vertical .account-nav {
        /* .row.gutter-lg gives siblings a 1.5rem side gutter; the card has
           padding: 0, so re-add that as margin to line up with page content. */
        width: calc(24.41% - 1.5rem);
        margin-left: 1.5rem;
        align-self: flex-start;
        margin-top: 1.6rem;
        padding: 0;
        background: #fff;
        border: 1px solid #ececec;
        border-radius: 1rem;
        box-shadow: 0 6px 22px rgba(30, 30, 40, 0.06);
        overflow: hidden;
        position: sticky;
        top: 2rem;
    }

    /* Drop the theme's divider that would hang beside the card. */
    .my-account .tab-vertical .tab-content {
        border-top: 0;
    }

    .account-nav-head {
        display: flex;
        align-items: center;
        gap: 1.1rem;
        padding: 1.5rem 1.6rem;
        background: linear-gradient(180deg, #faf7ef, #fff);
        border-bottom: 1px solid #f0efe9;
    }

    .account-nav-avatar {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.6rem;
        height: 3.6rem;
        border-radius: 50%;
        background: var(--q2u-primary, #cfad3c);
        color: #fff;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1;
    }

    .account-nav-identity {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .account-nav-name {
        font-size: 1.4rem;
        font-weight: 700;
        color: #222;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .account-nav-email {
        font-size: 1.15rem;
        color: #999;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .my-account .tab-vertical .account-nav .nav-tabs {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0.6rem;
        border: 0;
    }

    .my-account .tab-vertical .account-nav .nav-tabs .link-item {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        line-height: 1.2;
    }

    .my-account .tab-vertical .account-nav .nav-tabs .link-item > a {
        gap: 1.1rem;
        padding: 1.05rem 1.2rem;
        border-radius: 0.6rem;
        color: #4a4a4a;
        font-size: 1.4rem;
        font-weight: 500;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .my-account .tab-vertical .account-nav .nav-tabs .link-item > a > i {
        color: var(--q2u-primary-dark, #c09c35);
        transition: color 0.15s ease;
    }

    .my-account .tab-vertical .account-nav .nav-tabs .link-item > a:hover {
        background: #f6f3ea;
        color: var(--q2u-primary-dark, #c09c35);
    }

    .my-account .tab-vertical .account-nav .nav-tabs .link-item.active > a {
        background: var(--q2u-primary, #cfad3c);
        color: #fff;
        font-weight: 600;
    }

    .my-account .tab-vertical .account-nav .nav-tabs .link-item.active > a > i {
        color: #fff;
    }

    .my-account .tab-vertical .account-nav .nav-tabs .link-item-logout {
        margin-top: 0.4rem;
        padding-top: 0.5rem;
        border-top: 1px solid #f1f1f1;
    }

    .my-account .tab-vertical .account-nav .nav-tabs .link-item-logout > a,
    .my-account .tab-vertical .account-nav .nav-tabs .link-item-logout > a > i {
        color: #b1442f;
    }

    .my-account .tab-vertical .account-nav .nav-tabs .link-item-logout > a:hover {
        background: #fbecea;
        color: #b1442f;
    }
}

/* ---------- Mobile: dropdown ---------- */
@media (max-width: 767px) {
    /* The .row.gutter-lg parent adds 1.5rem side padding to put content in line
       with the page. Swap that padding for margin so the absolutely-positioned
       dropdown (inset from the padding box) lines up with the toggle button. */
    .my-account .tab-vertical .account-nav {
        position: relative;
        width: auto;
        margin: 0 1.5rem 1.5rem;
        padding-left: 0;
        padding-right: 0;
    }

    /* Toggle — an icon chip + current section, styled to echo the desktop card */
    .account-nav-toggle {
        position: relative;
        display: flex;
        align-items: center;
        gap: 1.1rem;
        width: 100%;
        padding: 0.9rem 1.1rem;
        border: 1px solid #ececec;
        border-radius: 0.9rem;
        background: linear-gradient(180deg, #fffdf7, #fff);
        color: #333;
        line-height: 1.2;
        text-align: left;
        cursor: pointer;
        box-shadow: 0 2px 12px rgba(30, 30, 40, 0.06);
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .account-nav-toggle.is-open {
        border-color: var(--q2u-primary, #cfad3c);
        box-shadow: 0 6px 18px rgba(207, 173, 60, 0.18);
    }

    .account-nav-toggle-icon {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.4rem;
        height: 3.4rem;
        border-radius: 0.7rem;
        background: rgba(207, 173, 60, 0.14);
        color: var(--q2u-primary-dark, #c09c35);
        font-size: 1.4rem;
    }

    .account-nav-toggle-text {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }

    .account-nav-toggle-eyebrow {
        font-size: 1rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #a2a2a2;
    }

    .account-nav-toggle-label {
        font-size: 1.45rem;
        font-weight: 700;
        color: #222;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .account-nav-toggle .account-nav-caret {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 50%;
        background: rgba(207, 173, 60, 0.14);
        font-size: 1.1rem;
        color: var(--q2u-primary-dark, #c09c35);
        transition: transform 0.2s ease;
    }

    .account-nav-toggle.is-open .account-nav-caret {
        transform: rotate(180deg);
    }

    /* Dropdown card — mirrors .shop-select-menu */
    .my-account .tab-vertical .account-nav .nav-tabs {
        display: block;
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        z-index: 1050;
        margin: 0;
        padding: 0.4rem 0;
        background: #fff;
        border: 1px solid #e7e7e7;
        border-radius: 0.6rem;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    }

    .my-account .tab-vertical .account-nav .nav-tabs.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Option rows — mirror .shop-select-option */
    .my-account .tab-vertical .account-nav .nav-tabs .link-item {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        line-height: 1.2;
    }

    .my-account .tab-vertical .account-nav .nav-tabs .link-item > a {
        width: 100%;
        padding: 0.9rem 1.4rem;
        border: 0;
        background: none;
        color: #333;
        font-size: 1.35rem;
        line-height: 1.2;
        text-align: left;
        white-space: nowrap;
    }

    .my-account .tab-vertical .account-nav .nav-tabs .link-item > a > i {
        color: var(--q2u-primary-dark, #c09c35);
    }

    .my-account .tab-vertical .account-nav .nav-tabs .link-item > a:hover {
        background: #f5f7fa;
    }

    .my-account .tab-vertical .account-nav .nav-tabs .link-item.active > a {
        color: var(--q2u-primary, #cfad3c);
        font-weight: 600;
    }

    .my-account .tab-vertical .account-nav .nav-tabs .link-item.active > a > i {
        color: inherit;
    }
}

.orders-count {
    color: #999;
    font-size: 1.35rem;
}

.orders-pagination {
    margin: 3rem 0 1rem;
}

/* Footer row: "Go Shop" on the left, pager on the right. */
.orders-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin-top: 3rem;
}

.orders-footer .orders-pagination {
    margin: 0;
}

.orders-footer .q2u-pager {
    justify-content: flex-end;
}

@media (max-width: 767px) {
    .orders-footer {
        flex-direction: column-reverse;
        align-items: center;
        gap: 2rem;
    }

    .orders-footer .q2u-pager {
        justify-content: center;
    }
}

/* ===== Pager (livewire.partials.pagination) ===== */
.q2u-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.q2u-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    height: 4rem;
    padding: 0 1.1rem;
    border: 1px solid #e6e6e6;
    border-radius: 0.9rem;
    background: #fff;
    color: #555;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease,
        box-shadow 0.18s ease, transform 0.18s ease;
}

.q2u-pager__btn:hover:not(:disabled):not(.is-active) {
    border-color: var(--q2u-primary, #cfad3c);
    color: var(--q2u-primary, #cfad3c);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(207, 173, 60, 0.2);
}

.q2u-pager__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.q2u-pager__btn.is-active {
    background: var(--q2u-primary, #cfad3c);
    border-color: var(--q2u-primary, #cfad3c);
    color: #fff;
    box-shadow: 0 4px 14px rgba(207, 173, 60, 0.35);
}

.q2u-pager__btn--edge {
    color: #999;
}

.q2u-pager__dots {
    padding: 0 0.3rem;
    color: #b3b3b3;
    font-weight: 700;
    letter-spacing: 0.05em;
}

@media (max-width: 575px) {
    .q2u-pager {
        gap: 0.4rem;
    }

    .q2u-pager__btn {
        min-width: 3.4rem;
        height: 3.4rem;
        padding: 0 0.8rem;
        font-size: 1.3rem;
    }
}

/* Per-vendor order card (one card per shop within an order) */
.vorder-card {
    margin-bottom: 2rem;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 0.9rem;
    overflow: hidden;
}

.vorder-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem 1.5rem;
    padding: 1.2rem 1.8rem;
    background: #fafafa;
    border-bottom: 1px solid #eee;
}

.vorder-shop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
}

.vorder-shop-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #222;
}

.vorder-shop-name:hover {
    color: var(--q2u-primary, #cfad3c);
}

.vorder-date {
    font-size: 1.2rem;
    color: #888;
}

.vorder-head-btn {
    padding: 0.35rem 1rem;
    font-size: 1.15rem;
}

.vorder-head-status {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.vorder-ship {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.3rem;
    color: #26aa99;
}

.vorder-status {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #888;
}

.vorder-status.is-pending {
    color: #a9861f;
}

.vorder-status.is-processing,
.vorder-status.is-shipped {
    color: var(--q2u-primary, #cfad3c);
}

.vorder-status.is-delivered,
.vorder-status.is-completed {
    color: #198754;
}

.vorder-status.is-cancelled,
.vorder-status.is-failed {
    color: #dc3545;
}

.vorder-items {
    padding: 0.6rem 1.8rem;
}

.vorder-item {
    display: flex;
    gap: 1.4rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid #f2f2f2;
}

.vorder-item:last-child {
    border-bottom: 0;
}

.vorder-item-media {
    flex: 0 0 8rem;
}

.vorder-item-media img {
    width: 8rem;
    height: 8rem;
    object-fit: cover;
    border: 1px solid #eee;
    border-radius: 0.5rem;
}

.vorder-item-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.vorder-item-name {
    font-size: 1.4rem;
    font-weight: 600;
    color: #333;
    line-height: 1.35;
}

.vorder-item-name:hover {
    color: var(--q2u-primary, #cfad3c);
}

.vorder-item-attrs {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 1.15rem;
    color: #999;
}

.vorder-item-qty {
    font-size: 1.2rem;
    color: #666;
}

.vorder-item-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 0.3rem;
}

.vorder-link {
    padding: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--q2u-primary, #cfad3c);
    background: none;
    border: 0;
    cursor: pointer;
}

.vorder-link:hover {
    text-decoration: underline;
}

.vorder-link.is-muted {
    color: #aaa;
    font-weight: 400;
    cursor: default;
}

.vorder-item-price {
    flex: 0 0 auto;
    text-align: right;
    font-size: 1.4rem;
    font-weight: 600;
    color: #222;
}

.vorder-item-price del {
    display: block;
    font-size: 1.15rem;
    font-weight: 400;
    color: #bbb;
}

.vorder-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem 1.5rem;
    padding: 1.4rem 1.8rem;
    background: #fafafa;
    border-top: 1px solid #eee;
}

.vorder-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    text-align: right;
}

.vorder-subtotal {
    font-size: 1.2rem;
    color: #999;
}

.vorder-total {
    font-size: 1.35rem;
    color: #666;
}

.vorder-total strong {
    font-size: 1.7rem;
    color: var(--q2u-primary, #cfad3c);
}

.vorder-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.vorder-card .btn.btn-sm {
    padding: 0.7rem 1.8rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 0.5rem;
}

.vorder-card .btn.btn-outline.btn-default {
    border: 1px solid var(--q2u-primary, #cfad3c);
    color: var(--q2u-primary, #cfad3c);
    background: #fff;
}

.vorder-card .btn.btn-outline.btn-default:hover,
.vorder-card .btn.btn-outline.btn-default:focus {
    border-color: var(--q2u-primary, #cfad3c);
    color: #fff;
    background: var(--q2u-primary, #cfad3c);
}

.orders-empty {
    max-width: 42rem;
    margin: 3rem auto;
    text-align: center;
}

.orders-empty-icon {
    width: 8rem;
    height: 8rem;
    margin: 0 auto 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(207, 173, 60, 0.12);
    color: var(--q2u-primary, #cfad3c);
    font-size: 3rem;
}

.orders-empty h4 {
    margin: 0 0 0.5rem;
    font-size: 1.9rem;
    font-weight: 600;
    color: #222;
}

.orders-empty p {
    margin: 0 0 1.8rem;
    color: #8a8a8a;
}

@media (max-width: 767px) {
    .vorder-head,
    .vorder-foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .vorder-foot {
        align-items: stretch;
    }

    .vorder-totals {
        align-items: flex-start;
        text-align: left;
    }

    .vorder-actions .btn {
        flex: 1;
    }

    .vorder-item-price {
        text-align: left;
    }
}

/* ===== Customer addresses ===== */
.addr-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid #eee;
}

.addr-head-title {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.addr-head h3 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #222;
}

.addr-count {
    font-size: 1.3rem;
    color: #999;
}

.addr-head .btn i {
    margin-right: 0.5rem;
}

.addr-intro {
    margin: 1.4rem 0 2.2rem;
    color: #888;
}

.addr-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem;
}

@media (max-width: 767px) {
    .addr-grid {
        grid-template-columns: 1fr;
    }
}

.addr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 2.2rem;
    border: 1px solid #eee;
    border-radius: 0.9rem;
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.addr-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
    border-color: var(--q2u-primary, #cfad3c);
}

.addr-card.is-default {
    border-color: var(--q2u-primary, #cfad3c);
    box-shadow: inset 0 0 0 1px var(--q2u-primary, #cfad3c);
}

.addr-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.addr-card-name {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1.55rem;
    font-weight: 700;
    color: #222;
}

.addr-card-name i {
    color: var(--q2u-primary, #cfad3c);
    font-size: 1.7rem;
}

.addr-badge {
    align-self: flex-start;
    margin-top: 0.8rem;
    padding: 0.25rem 0.9rem;
    border-radius: 10rem;
    background: rgba(207, 173, 60, 0.14);
    color: var(--q2u-primary, #cfad3c);
    font-size: 1.15rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.addr-card-body {
    margin: 1.2rem 0 0;
    font-style: normal;
    color: #555;
    line-height: 1.7;
}

.addr-card-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.6rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed #ececec;
    font-size: 1.3rem;
    color: #777;
}

.addr-card-contact i {
    margin-right: 0.4rem;
    color: var(--q2u-primary, #cfad3c);
}

.addr-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.6rem;
}

.addr-card-actions .btn.btn-sm {
    padding: 0.7rem 1.6rem;
    font-size: 1.25rem;
    line-height: 1.2;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.addr-card-actions .btn.btn-outline.btn-default {
    border: 1px solid #d7d7d7;
    color: #444;
    background: #fff;
}

.addr-card-actions .btn.btn-outline.btn-default:hover {
    border-color: var(--q2u-primary, #cfad3c);
    color: var(--q2u-primary, #cfad3c);
    background: #fff;
}

.addr-card-actions .addr-delete {
    color: #b98f8f;
    font-weight: 600;
    margin-left: auto;
}

.addr-card-actions .addr-delete:hover {
    color: #dc3545;
}

/* kebab menu + larger dropdown options */
.addr-menu-btn {
    border: 0;
    background: transparent;
    padding: 0.4rem 0.8rem;
    color: #9a9a9a;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 0.4rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.addr-menu-btn:hover {
    background: #f4f4f4;
    color: var(--q2u-primary, #cfad3c);
}

.addr-menu.dropdown-menu {
    min-width: 15rem;
    padding: 0.6rem 0;
    border: 1px solid #ececec;
    border-radius: 0.6rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.addr-menu .dropdown-item {
    padding: 0.9rem 1.6rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: #444;
}

.addr-menu .dropdown-item:hover,
.addr-menu .dropdown-item:focus {
    background: rgba(207, 173, 60, 0.1);
    color: var(--q2u-primary, #cfad3c);
}

.addr-menu .dropdown-item.text-danger:hover,
.addr-menu .dropdown-item.text-danger:focus {
    background: rgba(220, 53, 69, 0.08);
    color: #dc3545;
}

.addr-empty {
    grid-column: 1 / -1;
    max-width: 42rem;
    margin: 3rem auto;
    text-align: center;
}

.addr-empty-icon {
    width: 8rem;
    height: 8rem;
    margin: 0 auto 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(207, 173, 60, 0.12);
    color: var(--q2u-primary, #cfad3c);
    font-size: 3rem;
}

.addr-empty h4 {
    margin: 0 0 0.5rem;
    font-size: 1.9rem;
    font-weight: 600;
    color: #222;
}

.addr-empty p {
    margin: 0 0 1.8rem;
    color: #8a8a8a;
}

/* ===== Customer recently viewed ===== */
.recent-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid #eee;
}

.recent-head-title {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.recent-head h3 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #222;
}

.recent-count {
    font-size: 1.3rem;
    color: #999;
}

.recent-head .btn.btn-sm {
    padding: 0.7rem 1.6rem;
    font-size: 1.25rem;
    font-weight: 600;
    border-radius: 0.5rem;
}

.recent-head .btn.btn-outline.btn-default:hover {
    border-color: var(--q2u-primary, #cfad3c);
    color: var(--q2u-primary, #cfad3c);
    background: #fff;
}

.recent-head .btn i {
    margin-right: 0.5rem;
}

.recent-intro {
    margin: 1.4rem 0 2.4rem;
    color: #888;
}

.recent-empty {
    max-width: 42rem;
    margin: 3rem auto;
    text-align: center;
}

.recent-empty-icon {
    width: 8rem;
    height: 8rem;
    margin: 0 auto 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(207, 173, 60, 0.12);
    color: var(--q2u-primary, #cfad3c);
    font-size: 3rem;
}

.recent-empty h4 {
    margin: 0 0 0.5rem;
    font-size: 1.9rem;
    font-weight: 600;
    color: #222;
}

.recent-empty p {
    margin: 0 0 1.8rem;
    color: #8a8a8a;
}

/* remove-from-recent button on the product card */
#recent-products .product-wrap .product .product-media {
    position: relative;
}

.recent-remove-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    padding: 0;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    background: #fff;
    color: #666;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-0.4rem);
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#recent-products .product-wrap:hover .recent-remove-btn,
.recent-remove-btn:focus-visible {
    opacity: 1;
    transform: translateY(0);
}

.recent-remove-btn:hover,
.recent-remove-btn:focus {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

@media (max-width: 767px) {
    .recent-remove-btn {
        opacity: 1;
        transform: none;
    }
}

/* ===== Customer wishlist ===== */
.wl-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid #eee;
}

.wl-head-title {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.wl-head h3 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #222;
}

.wl-count {
    font-size: 1.3rem;
    color: #999;
}

.wl-intro {
    margin: 1.4rem 0 2.4rem;
    color: #888;
}

.wishlist-page .product-wrap .product .product-media {
    position: relative;
}

.wishlist-page .product.is-unavailable .product-media a {
    pointer-events: none;
}

.wishlist-page .product.is-unavailable .product-media img {
    opacity: 0.5;
    filter: grayscale(0.4);
}

.wl-unavailable-badge,
.wl-sale-badge {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 3;
    padding: 0.3rem 0.9rem;
    border-radius: 10rem;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wl-unavailable-badge {
    background: #dc3545;
}

.wl-sale-badge {
    background: var(--q2u-primary, #cfad3c);
}

.wl-remove-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    padding: 0;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    background: #fff;
    color: #666;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-0.4rem);
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wishlist-page .product-wrap:hover .wl-remove-btn,
.wl-remove-btn:focus-visible {
    opacity: 1;
    transform: translateY(0);
}

.wl-remove-btn:hover,
.wl-remove-btn:focus {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

@media (max-width: 767px) {
    .wl-remove-btn {
        opacity: 1;
        transform: none;
    }
}

.wl-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.35rem 1rem;
    border-radius: 10rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.wl-stock i {
    font-size: 1.1rem;
}

.wl-stock.is-in {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.wl-stock.is-out {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.wl-pagination {
    margin-top: 2.6rem;
}

.wl-empty {
    max-width: 42rem;
    margin: 3rem auto;
    text-align: center;
}

.wl-empty-icon {
    width: 8rem;
    height: 8rem;
    margin: 0 auto 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(207, 173, 60, 0.12);
    color: var(--q2u-primary, #cfad3c);
    font-size: 3rem;
}

.wl-empty h4 {
    margin: 0 0 0.5rem;
    font-size: 1.9rem;
    font-weight: 600;
    color: #222;
}

.wl-empty p {
    margin: 0 0 1.8rem;
    color: #8a8a8a;
}

/* ===== Customer change password ===== */
.pw-head {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding-bottom: 1.6rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #eee;
}

.pw-head-icon {
    flex-shrink: 0;
    width: 4.6rem;
    height: 4.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(207, 173, 60, 0.12);
    color: var(--q2u-primary, #cfad3c);
    font-size: 1.9rem;
}

.pw-head h3 {
    margin: 0 0 0.2rem;
    font-size: 2rem;
    font-weight: 700;
    color: #222;
}

.pw-head p {
    margin: 0;
    color: #888;
}

.pw-alert {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 2rem;
    padding: 1rem 1.4rem;
    border-radius: 0.6rem;
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
    font-weight: 600;
}

.pw-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28rem;
    gap: 2.4rem;
    align-items: start;
}

@media (max-width: 991px) {
    .pw-grid {
        grid-template-columns: 1fr;
    }

    /* Stacked layout: show the tips above the form. */
    .pw-grid .pw-tips {
        order: -1;
    }
}

.pw-card {
    padding: 2.4rem;
    border: 1px solid #eee;
    border-radius: 0.9rem;
    background: #fff;
}

.pw-card .form-group {
    margin-bottom: 1.6rem;
}

.pw-card label {
    display: block;
    margin-bottom: 0.6rem;
    font-weight: 600;
}

.pw-show {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.4rem 0 2rem;
    font-size: 1.3rem;
    color: #666;
    cursor: pointer;
}

.pw-show input {
    width: auto;
}

.pw-submit {
    font-weight: 600;
}

.pw-tips {
    padding: 2rem;
    border: 1px solid #eee;
    border-radius: 0.9rem;
    background: #fafafa;
}

.pw-tips h4 {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
}

.pw-tips ul {
    margin: 0;
    padding-left: 1.6rem;
    color: #777;
    font-size: 1.3rem;
    line-height: 1.9;
}

/* ===== Vendor storefront: tab nav padding ===== */
.tab-vendor-wcfm .nav-tabs {
    gap: 0.5rem;
    border-bottom: 1px solid #eee;
}

.tab-vendor-wcfm .nav-link {
    padding: 1.3rem 1.8rem;
}

.tab-vendor-wcfm .nav-item:not(:last-child) {
    margin-right: 0.25rem;
}

/* Toast notifications (replaces native browser alert()) */
#app-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-width: 360px;
}

.app-toast {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.2rem 1.6rem;
    background: #fff;
    border-radius: 8px;
    border-left: 4px solid var(--q2u-primary, #cfad3c);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    font-size: 1.3rem;
    color: #333;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.app-toast.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.app-toast i {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.app-toast-success {
    border-left-color: #28a745;
}

.app-toast-success i {
    color: #28a745;
}

.app-toast-warning {
    border-left-color: #e0a800;
}

.app-toast-warning i {
    color: #e0a800;
}

.app-toast-error {
    border-left-color: #dc3545;
}

.app-toast-error i {
    color: #dc3545;
}

.app-toast-primary {
    border-left-color: var(--q2u-primary, #cfad3c);
}

.app-toast-primary i {
    color: var(--q2u-primary, #cfad3c);
}

/* Shared circular modal close button (Write a Review, Add Address, ...). Bootstrap 5
   dropped .close (renamed to .btn-close, which has its own unrelated background-image
   X icon), so the old "close btn btn-outline-primary btn-sm" combo rendered as a plain,
   oversized bordered box sized to fit the raw × character. */
.modal-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    background: #fff;
    color: #666;
    font-size: 1.3rem;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.modal-close-btn:hover {
    background-color: var(--q2u-primary, #cfad3c);
    border-color: var(--q2u-primary, #cfad3c);
    color: #fff;
}

/* Write a Review modal — star rating */
.rating-input {
    display: flex;
    flex-direction: row-reverse;
    gap: 4px;
}

.rating-input .star-label {
    margin: 0;
    cursor: pointer;
}

.rating-input .star-label i {
    font-size: 2.8rem;
    color: #e2e2e2;
    transition: color 0.15s ease, transform 0.15s ease;
}

.rating-input input:checked ~ .star-label i,
.rating-input .star-label:hover i,
.rating-input .star-label:hover ~ .star-label i {
    color: var(--q2u-primary, #cfad3c);
}

.rating-input .star-label:hover i {
    transform: scale(1.15);
}

/* Write a Review modal — photo upload */
.review-photo-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0;
    padding: 1.4rem;
    border: 1.5px dashed #d8d8d8;
    border-radius: 6px;
    color: #888;
    font-size: 1.3rem;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.review-photo-dropzone:hover {
    border-color: var(--q2u-primary, #cfad3c);
    color: var(--q2u-primary, #cfad3c);
    background-color: rgba(207, 173, 60, 0.05);
}

.review-photo-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.review-photo-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #eee;
}

.review-photo-thumb-wrap .btn-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    padding: 0;
    background: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
}

.review-photo-thumb-wrap .btn-close i {
    color: #333;
    font-size: 12px;
    font-weight: 600;
}

.review-photo-thumb-wrap .btn-close:hover i {
    color: var(--q2u-primary, #cfad3c);
}

/* .custom-control-label (style.min.css) sets padding-left:3rem and positions its own
   checkbox/radio glyph (::after) with left:0; top:50% — but never declares itself as
   the positioning context those offsets are relative to. Most of the time the nearest
   positioned ancestor happens to be close enough that this goes unnoticed, but inside
   a sticky sidebar (e.g. checkout's payment method radio) the glyph resolves against
   that much wider ancestor instead, landing at its far-left edge with a large gap
   before the label text. Restoring position:relative here (present in real Bootstrap 4,
   apparently dropped from this theme's build) fixes every .custom-control instance at
   once with no visual side effect of its own. */
.custom-control-label {
    position: relative;
}