:root {

    --theme-purple: #B57BE8;
    --theme-dark-purple: #9C5FE0;
    --theme-light-purple: #F6EEFF;
    --section-bg: #FAF8FC;
    --main-bg: #FFFFFF;
    --theme-border: #E9DDF7;
    --main-text: #1F1F1F;
    --sec-text: #666666;
    --mute-text: #999999;

    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* TYPOGRAPHY */

    --font-page-title: 32px;
    --font-section-title: 20px;
    --font-card-title: 14px;
    --font-body-size: 14px;
    --font-small: 13px;
    --font-button: 14px;
    --font-price: 20px;

    /* Header specific variables */

    --header-top-bg: var(--theme-purple);
    --header-top-text: var(--main-text);
    --header-main-bg: var(--main-bg);
    --header-nav-bg: var(--theme-purple);
    --header-nav-text: var(--main-bg);
    --header-badge-bg: var(--theme-purple);

    --transition-fast: 0.2s ease;
    --radius-lg: 16px;

    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
}

body {
    font-family: var(--font-body);
    background-color: var(--main-bg);
    color: var(--main-text);
    margin: 0;
    padding: 0;
}

/* --- Header Styles --- */
.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Top Bar */
.header-top-bar {
    background-color: var(--header-top-bg);
    color: var(--header-top-text);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0;
    font-size: 0.85rem;
    font-weight: 500;
}

.top-bar-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Main Bar */
.header-main-bar {
    background-color: var(--header-main-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
}

.logo-area {

    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}

.logo-area picture {
    display: flex;
    align-items: center;
}

.header-logo {
    display: block;
    height: auto;
    max-width: 100%;
}


.site-logo {

    width: 64px;
    height: auto;
    object-fit: contain;
}

.header-logo {
    height: 60px;
    width: auto;
}

.site-title-area {
    display: flex;
    flex-direction: column;
}

.site-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.site-subtitle {
    font-size: 0.8rem;
    color: var(--mute-text);
}

/* Search Area */
.search-area {
    flex-grow: 1;
    max-width: 500px;
    margin: 0 30px;
}

.search-form {
    display: flex;
    width: 100%;
    border: 1px solid var(--theme-border);
    border-radius: 20px;
    overflow: hidden;
}

.search-input {
    flex-grow: 1;
    border: none;
    padding: 10px 20px;
    font-size: 0.9rem;
    outline: none;
    font-family: var(--font-body);
}

.search-button {
    background-color: var(--theme-purple);
    color: white;
    border: none;
    padding: 0 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-button:hover {
    background-color: var(--theme-dark-purple);
}

/* Actions Area */
.actions-area {
    display: flex;
    align-items: center;
    gap: 25px;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--main-text);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.action-item:hover {
    color: var(--theme-dark-purple);
}

.action-item i {
    font-size: 1.2rem;
}

.cart-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: var(--header-badge-bg);
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.theme-alert{
    display:none;
    position:fixed;
    inset:0;
    z-index:999999999;
}

.theme-alert-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(3px);
}

.theme-alert-box{
    position:absolute;
    top:80px;
    left:50%;
    transform:translateX(-50%);

    width:500px;
    max-width:90%;

    background:#fff;
    border-radius:20px;
    padding:40px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.15);
}


.theme-alert-icon{
    width:90px;
    height:90px;
    margin:0 auto 20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
}

.theme-alert-icon.success{
    color:#28a745;
    background:#eefbf1;
}

.theme-alert-icon.error{
    color:#dc3545;
    background:#fff0f1;
}

.theme-alert-icon.warning{
    color:#f59e0b;
    background:#fff8e7;
}

.theme-alert-icon.info{
    color:var(--theme-purple);
    background:#f6f0ff;
}

.theme-alert-box h3{
    font-size:32px;
    margin-bottom:12px;
    font-weight:700;
}

.theme-alert-box p{
    font-size:14px;
    color:#666;
    line-height:1.6;
    margin-bottom:30px;
}

.theme-alert-buttons{
    display:flex;
    justify-content:center;
    gap:12px;
}

.theme-alert-btn{
    min-width:140px;
    height:48px;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}

.theme-alert-cancel{
    background:#fff;
    border:1px solid var(--theme-purple);
    color:var(--theme-purple);
}

.theme-alert-confirm{
    border:none;
    color:#fff;
    background:linear-gradient(
        90deg,
        #7c3aed,
        #9333ea
    );
}

#siteLoader{
    display:none;
    position:fixed;
    inset:0;
    z-index:9999999;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(3px);
}

.site-loader-content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
}

.site-loader-content img{
    width:120px;
    height:auto;
}

.site-loader-content div{
    margin-top:15px;
    font-size:14px;
    color:#666;
}

/* Nav Bar */
.header-nav-bar {
    background-color: var(--header-nav-bg);
}

.main-nav {
    max-width: 1200px;
    margin: 0 auto;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
}

.nav-item {
    position: relative;
}

.nav-item > a {
    display: block;
    padding: 15px 20px;
    color: var(--header-nav-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: background-color 0.2s;
}

.nav-item > a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-chevron {
    font-size: 0.7rem;
    margin-left: 5px;
}

/* Dropdown Menu */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--main-bg);
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 0 0 8px 8px;
    padding: 10px 0;
    z-index: 1001;
    list-style: none;
}

.has-dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li a {
    display: block;
    padding: 8px 20px;
    color: var(--main-text);
    text-decoration: none;
    transition: background-color 0.2s;
}

.dropdown-menu li a:hover {
    background-color: var(--section-bg);
    color: var(--theme-dark-purple);
}

/* Mega Menu */
.mega-menu {
    min-width: 550px;
    padding: 20px;
}

.mega-menu-content {
    display: flex;
    gap: 20px;
}

.mega-menu-list {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.categories-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

.categories-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    color: var(--main-text);
    text-decoration: none;
    font-size: 0.95rem;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s;
}

.categories-list li a .cat-icon {
    width: 20px;
    height: auto;
    object-fit: contain;
}

.categories-list li a:hover {
    background-color: var(--section-bg);
    color: var(--theme-dark-purple);
}

.view-all-link {
    color: var(--theme-dark-purple);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 10px;
    display: inline-block;
    transition: opacity 0.2s;
}

.view-all-link:hover {
    opacity: 0.8;
}

.mega-menu-featured {
    flex: 1;
    background-color: var(--theme-light-purple);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mega-menu-featured .featured-img {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    margin: 0 auto 15px auto;
    display: block;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.mega-menu-featured h4 {
    margin: 0 0 8px 0;
    font-size: 1rem;
    color: var(--main-text);
}

.mega-menu-featured p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--sec-text);
    line-height: 1.4;
}

/* Bands Grid List Specific */
.bands-grid-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 20px;
}

.bands-grid-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px;
    color: var(--main-text);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s;
}

.bands-grid-list li a .band-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.bands-grid-list li a .more-icon {
    background-color: var(--section-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-text);
    font-weight: bold;
    border: 1px solid var(--theme-border);
}

.bands-grid-list li a:hover {
    background-color: var(--section-bg);
    color: var(--theme-dark-purple);
}

/* Bands Featured Specific */
.bands-featured {
    justify-content: flex-start;
    padding: 30px;
    position: relative;
    overflow: hidden;
}

.bands-featured .featured-text-area {
    position: relative;
    z-index: 2;
}

.bands-featured h4 {
    font-size: 1.2rem;
    line-height: 1.3;
    margin-bottom: 12px;
    color: var(--main-text);
}

.bands-featured p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--sec-text);
}

.bands-featured .featured-band-img {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 90%;
    height: auto;
    max-width: none;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    z-index: 1;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* =========================================
   HERO BANNER
========================================= */

.hero-banner-section {
    width: 100%;
    background-color: var(--main-bg);
    padding: 0;
}

.hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Slides Wrapper */

.hero-slides {
    position: relative;
    width: 100%;
    height: 540px;
}

/* Individual Slide */

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Image */

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Navigation Buttons */

.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.92);
    color: var(--main-text);
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition-fast);
}

.hero-nav i {
    font-size: 14px;
}

.hero-nav:hover {
    background-color: white;
    color: var(--theme-purple);
}

.prev-btn {
    left: 25px;
}

.next-btn {
    right: 25px;
}

/* Dots */

.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 5;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: var(--transition-fast);
}

.hero-dot.active {
    width: 26px;
    border-radius: 20px;
    background-color: white;
}

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

@media (max-width: 992px) {
    .hero-slides {
        height: 420px;
    }

}

@media (max-width: 768px) {
    .hero-slides {
        height: 320px;
    }

    .hero-nav {
        width: 40px;
        height: 40px;
    }

    .prev-btn {
        left: 15px;
    }

    .next-btn {
        right: 15px;
    }

}

@media (max-width: 576px) {
    .hero-slides {
        height: 240px;
    }

}

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

.search-area {
    position: relative;
}

/* Dropdown */

/* =========================================
   LIVE SEARCH DROPDOWN
========================================= */

.live-search-results {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    background: white;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.16);
    z-index: 9999;
    display: none;
    padding: 26px;
    max-height: 650px;
    overflow-y: auto;
}

/* GRID */

.live-search-grid {

    display: grid;
    grid-template-columns:
        repeat(5, 1fr);
    gap: 24px;
}
/* PRODUCT CARD */

.search-result-card {

    text-decoration: none;
    color: inherit;
    display: block;
}

/* IMAGE */

.search-card-image {

    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    background: #f8f8f8;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}

.search-card-image img {

    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PRODUCT NAME */

.search-product-name {

    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: #222;
    margin-bottom: 6px;
    min-height: 42px;
}

/* STOCK */

.search-out-stock {

    display: inline-block;
    background: #f1f1f1;
    color: #555;
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 4px;
    margin-bottom: 8px;
}

/* Empty */

.search-empty {

    padding: 18px;
    text-align: center;
    color: #777;
    font-size: 14px;
}

/* ON HAND */

.search-on-hand {

    display: inline-block;
    background: var(--theme-purple);
    color: white;
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-weight: 500;
}

/* =========================================
   PRODUCTS PAGE
========================================= */

.products-page-layout {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    width: 100%;
}

.products-content {

    flex: 1;
    min-width: 0;
}


/* =========================================
   BREADCRUMB
========================================= */

.breadcrumb-area {

    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    font-size: 14px;
}

.breadcrumb-area a {

    color: #777;
    text-decoration: none;
}

.breadcrumb-area .active {

    color: #222;
    font-weight: 500;
}


/* =========================================
   SIDEBAR
========================================= */

.products-sidebar {
    flex: 0 0 220px;
    width: 220px;

    background: #fff;
    border: 1px solid #eee;
    border-radius: 18px;
    padding: 24px;

    height: fit-content;
    box-sizing: border-box;
}


.filter-box {

    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #f1f1f1;
}

.filter-title {

    font-size: 16px;
    font-weight: 700;
    margin-bottom: 18px;
}

.filter-options {

    display: flex;
    flex-direction: column;
    gap: 14px;
}

.filter-option {

    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
}

.filter-option input {

    accent-color: var(--theme-purple);
}


/* RESET */

.reset-filter-btn {

    width: 100%;
    height: 46px;
    border: none;
    border-radius: 12px;
    background: #f5efff;
    color: var(--theme-purple);
    font-weight: 600;
    cursor: pointer;
}


/* =========================================
   RIGHT CONTENT
========================================= */

.products-topbar {

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}

.products-page-title {

    font-size: 38px;
    font-weight: 700;
    margin-bottom: 10px;
}

.products-count {

    color: #777;
    font-size: 14px;
}


/* SORT */

.products-sort select {

    height: 46px;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 0 18px;
    font-size: 14px;
    outline: none;
}


/* =========================================
   PRODUCTS GRID
========================================= */

.products-grid {

    display: grid;
    grid-template-columns:
        repeat(5, minmax(220px, 1fr));
    gap: 20px;
    width: 100%;
}
/* LAPTOP */

@media(max-width: 1400px){

    .products-grid {
        grid-template-columns:
            repeat(3, 1fr);

    }

}


/* TABLET */

@media(max-width: 1100px){

    .products-grid {
        grid-template-columns:
            repeat(2, 1fr);

    }

}


/* MOBILE */

@media(max-width: 700px){

    .products-grid {
        grid-template-columns:
            repeat(1, 1fr);

    }

}


/* CARD */

.product-card {

    position: relative;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 18px;
    overflow: hidden;
    transition: 0.2s ease;
    width: 100%;
}


.product-card:hover {

    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}


/* LABEL */

.product-label {

    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    z-index: 2;
}

/* ON HAND */

.product-label.on-hand {

    background: #daf5e5;
    color: #12824c;
}

/* PREORDER */

.product-label.pre-order {

    background: var(--theme-purple);
    color: white;
}

/* OUT OF STOCK */

.product-label.out-stock {

    background: #e9e9e9;
    color: #555;
}


/* IMAGE */

.product-image {

    display: block;
    aspect-ratio: 1/1;
    overflow: hidden;
}

.product-image img {

    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* CONTENT */

.product-content {

    padding: 18px;
}

.product-title {

    display: block;
    color: #222;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 14px;
    min-height: 48px;
}

.product-price {

    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
}

/* ACTIONS */

.product-actions {

    display: flex;
    gap: 10px;
}

.add-cart-btn {

    flex: 1;
    height: 46px;
    border: none;
    border-radius: 12px;
    background: var(--theme-purple);
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.wishlist-btn {

    width: 46px;
    height: 46px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: white;
    cursor: pointer;
}

/* =========================================
   PAGINATION
========================================= */

.products-pagination-wrap {

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}


/* PER PAGE */

.products-per-page {

    display: flex;
    align-items: center;
    gap: 12px;
}

.products-per-page select {

    height: 42px;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 0 14px;
}


/* PAGINATION */

.products-pagination {

    display: flex;
    align-items: center;
    gap: 10px;
}

.products-pagination button {

    width: 42px;
    height: 42px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: white;
    cursor: pointer;
}

.products-pagination button.active {

    background: var(--theme-purple);
    color: white;
    border-color: var(--theme-purple);
}

/* PRICE WRAP */

.product-price-wrap {

    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

/* OLD PRICE */

.product-old-price {

    color: #999;
    text-decoration: line-through;
    font-size: 15px;
}

/* CURRENT PRICE */

.product-price {

    font-size: 22px;
    font-weight: 700;
    color: #111;
}

/* PRODUCT CARD */

.product-card {

    display: flex;
    flex-direction: column;
    height: 100%;
}


/* PRODUCT CONTENT */

.product-content {

    display: flex;
    flex-direction: column;
    flex: 1;
}


/* PRODUCT TITLE */

.product-title {

    margin-bottom: 14px;
    line-height: 1.5;
}


/* PRICE */

.product-price-wrap,
.product-price {

    margin-bottom: 18px;
}


/* ACTIONS */

.product-actions {

    margin-top: auto;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* =========================================
    SHOP BY SECTION
========================================= */

.shopby-section {

    padding: 70px 0;
}


/* GRID */

.shopby-grid {

    display: grid;

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

    gap: 28px;
}


/* BOX */

.shopby-box {

    background: #fff;

    border: 1px solid #eee;

    border-radius: 22px;

    padding: 28px;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.04);
}


/* HEADER */

.shopby-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 28px;
}


/* TITLE */

.shopby-header h2 {

    font-size: 24px;

    font-weight: 700;

    color: #111;

    margin: 0;
}


/* VIEW ALL */

.view-all-btn {

    display: flex;

    align-items: center;

    gap: 8px;

    text-decoration: none;

    color: #9b6cf3;

    font-weight: 600;

    font-size: 15px;

    transition: 0.2s;
}

.view-all-btn:hover {

    opacity: 0.8;
}


/* =========================================
    CATEGORY GRID
========================================= */

.category-grid {

    display: grid;

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

    gap: 18px;
}


/* CATEGORY CARD */

.category-card {

    background: #faf7ff;

    border-radius: 18px;

    padding: 20px 14px;

    text-decoration: none;

    transition: 0.25s;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 14px;

    text-align: center;

    border: 1px solid transparent;
}

.category-card:hover {

    transform: translateY(-4px);

    border-color: #d8c2ff;

    background: #fff;
}


/* CATEGORY IMAGE */

.category-image {

    width: 74px;

    height: 74px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.category-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;
}


/* CATEGORY NAME */

.category-name {

    font-size: 15px;

    font-weight: 600;

    color: #222;

    line-height: 1.4;
}


/* =========================================
    BRAND GRID
========================================= */

.brand-grid {

    display: grid;

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

    gap: 22px;
}


/* BRAND CARD */

.brand-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    transition: 0.25s;
}

.brand-card:hover {

    transform: translateY(-4px);
}


/* BRAND IMAGE */

.brand-image {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    overflow: hidden;

    background: #f7f7f7;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #eee;
}

.brand-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}


/* BRAND NAME */

.brand-name {

    font-size: 15px;

    font-weight: 600;

    color: #222;

    text-align: center;
}


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

@media(max-width: 1200px){

    .shopby-grid {

        grid-template-columns: 1fr;
    }

}


@media(max-width: 768px){

    .category-grid,
    .brand-grid {

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

}

/* =========================================
    CATEGORY PAGE LAYOUT
========================================= */

.category-page-layout {

    display: flex;

    align-items: flex-start;

    gap: 34px;

    padding: 20px 0 70px;
}


/* =========================================
    SIDEBAR
========================================= */

.category-sidebar {

    width: 270px;

    flex-shrink: 0;
}


.category-sidebar-box {

    background: #fff;

    border: 1px solid #eee;

    border-radius: 22px;

    padding: 24px;
}


/* TITLE */

.category-sidebar-title {

    font-size: 24px;
    font-weight: 700;
    color: #111;
    margin-bottom: 20px;
}


/* LIST */

.category-sidebar-list {

    display: flex;
    flex-direction: column;
    gap: 6px;
}


/* ITEM */

.category-sidebar-item {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    text-decoration: none;
    transition: 0.2s;
    color: #222;
}


/* ACTIVE */

.category-sidebar-item.active {

    background: #f3ebff;
    color: #8b5cf6;
}


/* HOVER */

.category-sidebar-item:hover {

    background: #faf7ff;
}


/* LEFT */

.category-sidebar-left {

    display: flex;
    align-items: center;
    gap: 12px;
}


.category-sidebar-left img {

    width: 22px;
    height: 22px;
    object-fit: contain;
}


/* NAME */

.category-sidebar-left span {

    font-size: 15px;
    font-weight: 500;
}


/* COUNT */

.category-sidebar-count {

    font-size: 14px;
    color: #888;
}



/* =========================================
    RIGHT CONTENT
========================================= */

.category-products-content {

    flex: 1;
    min-width: 0;
}


/* TOPBAR */

.category-products-topbar {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}


/* TITLE */

.category-page-title {

    font-size: 42px;

    font-weight: 700;

    color: #111;

    margin-bottom: 8px;
}


/* COUNT */

.category-page-count {

    font-size: 16px;

    color: #777;
}



/* =========================================
    PAGINATION
========================================= */

.pagination-dots {

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    color: #999;
    font-weight: 600;
}



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

@media(max-width: 1200px){

    .category-page-layout {

        flex-direction: column;
    }

    .category-sidebar {

        width: 100%;
    }

}


@media(max-width: 768px){

    .category-products-topbar {

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

}

/* PARENT */

.category-parent-title {

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: #111;
    opacity: 0.95;
    font-weight: 700;
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 4px;
}


/* ICON */

.category-parent-title img {

    width: 22px;
    height: 22px;
    object-fit: contain;
}


/* =========================================
    SUBCATEGORY
========================================= */

.subcategory-item {

    position: relative;
    margin-left: 34px;
    padding-left: 22px !important;
    font-size: 14px;
    opacity: 0.85;
}


/* TREE LINE */

.subcategory-item::before {

    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 1.5px;
    background: #b9a8db;
    transform: translateY(-50%);
}


/* SMALL DOT */

.subcategory-item::after {

    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9b6cf3;
    transform: translateY(-50%);
}


/* HOVER */

.subcategory-item:hover {

    background: #faf7ff;
}


/* ACTIVE */

.subcategory-item.active {

    background: #f3ebff;
    color: #8b5cf6;
}

/* =========================================
    HOME PRODUCT SECTION
========================================= */

.home-products-section {

    padding: 70px 0;
}


/* GRID */

.home-products-grid {

    display: grid;

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

    gap: 28px;
}


/* BOX */

.home-products-box {

    background: #fff;

    border: 1px solid #eee;

    border-radius: 22px;

    padding: 28px;

    overflow: hidden;
}


/* HEADER */

.home-products-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 26px;
}


/* TITLE */

.home-products-header h2 {

    font-size: 24px;

    font-weight: 700;

    color: #111;
    margin: 0;
}


/* =========================================
    SLIDER
========================================= */

.home-slider-wrap {

    position: relative;
}


/* PRODUCTS SLIDER */

.home-products-slider {

    display: flex;
    gap: 18px;
    overflow-x: hidden;
    scroll-behavior: smooth;
}


/* SINGLE SLIDE */

.home-product-slide {

    min-width: calc((100% - 36px) / 3);
    max-width: calc((100% - 36px) / 3);
    flex-shrink: 0;
}


/* =========================================
    ARROWS
========================================= */

.home-slider-arrow {

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: #fff;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.12);

    cursor: pointer;
    z-index: 5;
    transition: 0.2s;
}


.home-slider-arrow:hover {

    background: #9b6cf3;
    color: #fff;
}


/* LEFT */

.home-slider-arrow.left {

    left: -18px;
}


/* RIGHT */

.home-slider-arrow.right {

    right: -18px;
}



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

@media(max-width: 1200px){

    .home-products-grid {

        grid-template-columns: 1fr;
    }

}


@media(max-width: 768px){

    .home-product-slide {

        min-width: calc((100% - 18px) / 2);
    }

}


@media(max-width: 550px){

    .home-product-slide {

        min-width: 100%;
    }

}

/* =========================================
    HOME SLIDER PRODUCT CARD FIX
========================================= */

.home-product-slide .product-card {

    height: auto;
    min-height: unset;
    padding: 14px;
    display: flex;
    flex-direction: column;
}


/* IMAGE */

.home-product-slide .product-image {

    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 14px;
    border-radius: 14px;
    background: #fafafa;
}

.home-product-slide .product-image img {

    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* CONTENT */

.home-product-slide .product-content {

    display: flex;
    flex-direction: column;
    flex: 1;
}


/* TITLE */

.home-product-slide .product-title {

    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 10px;
    min-height: 44px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* PRICE */

.home-product-slide .product-price {

    font-size: 22px;
    font-weight: 700;
    margin-bottom: 14px;
}


/* ACTIONS */

.home-product-slide .product-actions {

    margin-top: auto;
}


/* BUTTON */

.home-product-slide .add-cart-btn {

    width: 100%;
    height: 42px;
    font-size: 13px;
}

/* FEATURED */

.featured-section{
    padding:20px 0;
}

.featured-box{
    background:#fff;
    border:1px solid #eee;
    border-radius:20px;
    padding:24px;
    overflow:hidden;
}

.featured-layout{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:20px;
    align-items:center;
}

.featured-left{
    display:flex;
    align-items:flex-start;
    height:100%;
}

.featured-title{
    font-size:22px;
    font-weight:700;
    line-height:1.3;
}

.featured-right{
    min-width:0;
}

.featured-slider-wrap{
    position:relative;
}

.featured-slider{
    display:flex;
    gap:20px;
    overflow:hidden;
    scroll-behavior:smooth;
}

.featured-card{
    min-width:calc((100% - 40px)/3);
    max-width:calc((100% - 40px)/3);
    background:#fafafa;
    border-radius:14px;
    overflow:hidden;
    text-decoration:none;
    color:#111;
    flex-shrink:0;
    transition:.3s;
}

.featured-card:hover{
    transform:translateY(-4px);
}

.featured-img{
    height:170px;
    background:#fff;
    overflow:hidden;
}

.featured-img img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.featured-content{
    padding:12px;
}

.featured-name{
    font-size:15px;
    font-weight:600;
    line-height:1.4;
    margin-bottom:6px;
    height:42px;
    overflow:hidden;
}

.featured-price{
    font-size:14px;
    color:#666;
}

.featured-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
    cursor:pointer;
    z-index:2;
}

.featured-arrow.left{
    left:-18px;
}

.featured-arrow.right{
    right:-18px;
}

.featured-arrow:hover{
    background:#9b6cf3;
    color:#fff;
}

/* =========================================
    ALL BRANDS
========================================= */

.bands-page{
padding:40px 0 60px;
}

.bands-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:30px;
gap:30px;
}

.bands-header h1{
margin:0 0 8px;
font-size:40px;
font-weight:700;
}

.bands-count{
color:#777;
font-size:14px;
}

.bands-search-wrap{
position:relative;
width:320px;
}

.bands-search{
width:100%;
height:48px;
padding:0 16px;
border:1px solid #ddd;
border-radius:10px;
}

.brand-suggestions{
position:absolute;
top:55px;
left:0;
right:0;
background:#fff;
border:1px solid #eee;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,.08);
display:none;
z-index:100;
}

.brand-suggestion{
display:block;
padding:12px 16px;
text-decoration:none;
color:#222;
}

.brand-suggestion:hover{
background:#f5f0ff;
}

.bands-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:24px;
width:100%;
}

.band-card{
background:#fff;
border:1px solid #eee;
border-radius:16px;
padding:20px;
text-align:center;
text-decoration:none;
color:#222;
transition:.2s;
}

.band-card:hover{
transform:translateY(-4px);
box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.band-image{
width:90px;
height:90px;
margin:0 auto 15px;
border-radius:50%;
overflow:hidden;
background:#fafafa;
display:flex;
align-items:center;
justify-content:center;
border:1px solid #eee;
}

.band-image img{
width:100%;
height:100%;
object-fit:contain;
padding:8px;
}

.band-name{
font-size:15px;
font-weight:600;
line-height:1.4;
}

.brands-pagination{
display:flex;
justify-content:center;
gap:8px;
margin-top:40px;
flex-wrap:wrap;
}

.page-btn{
width:42px;
height:42px;
border:1px solid #ddd;
background:#fff;
border-radius:10px;
cursor:pointer;
}

.page-btn.active{
background:#9b6cf3;
border-color:#9b6cf3;
color:#fff;
}

/* LOGIN */

.login-page{
padding:50px 0 70px;
}

.login-wrapper{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
}

.login-info-card,
.login-form-card{
background:#fff;
border:1px solid #eee;
border-radius:20px;
padding:45px;
text-align:center;
}

.login-icon{
width:75px;
height:75px;
margin:0 auto 18px;
border-radius:50%;
background:#f4ebff;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
color:#9b6cf3;
}

.login-info-card h2,
.login-form-card h2{
font-size:20px;
font-weight:700;
margin-bottom:8px;
letter-spacing:.5px;
}

.login-info-card p,
.login-form-card p{
font-size:14px;
line-height:1.6;
color:#666;
margin-bottom:20px;
}

.login-divider{
height:1px;
background:#eee;
margin:25px 0;
}

.login-benefits{
list-style:none;
padding:0;
margin:0 0 30px;
text-align:left;
font-size:14px;
}

.login-benefits li{
margin-bottom:12px;
padding-left:22px;
position:relative;
}

.login-benefits li:before{
content:"✓";
position:absolute;
left:0;
color:#9b6cf3;
font-weight:700;
}

.form-group{
margin-bottom:18px;
}

.form-group input{
width:100%;
height:48px;
padding:0 15px;
border:1px solid #ddd;
border-radius:10px;
font-size:14px;
}

.forgot-password{
text-align:right;
margin-bottom:20px;
}

.forgot-password a{
color:#9b6cf3;
text-decoration:none;
font-size:13px;
}

.auth-btn{
display:block;
width:100%;
height:48px;
line-height:48px;
border:none;
border-radius:10px;
background:#9b6cf3;
color:#fff;
font-size:14px;
font-weight:600;
text-decoration:none;
cursor:pointer;
}

/* =========================================
   GLOBAL TYPOGRAPHY OVERRIDES
========================================= */

/* PAGE TITLES */

.products-page-title,
.category-page-title,
.bands-header h1{
    font-size:var(--font-page-title) !important;
}

/* SECTION TITLES */

.shopby-header h2,
.home-products-header h2,
.featured-title,
.category-sidebar-title,
.login-info-card h2,
.login-form-card h2{
    font-size:var(--font-section-title) !important;
}

/* CARD TITLES */

.product-title,
.home-product-slide .product-title,
.category-name,
.brand-name,
.band-name,
.search-product-name{
    font-size:var(--font-card-title) !important;
}

/* BODY TEXT */

.products-count,
.category-page-count,
.bands-count,
.login-info-card p,
.login-form-card p,
.login-benefits,
.category-sidebar-left span{
    font-size:var(--font-body-size) !important;
}

/* SMALL TEXT */

.site-subtitle,
.forgot-password a,
.product-old-price{
    font-size:var(--font-small) !important;
}

/* BUTTONS */

.auth-btn,
.add-cart-btn,
.reset-filter-btn,
.view-all-btn{
    font-size:var(--font-button) !important;
}

/* PRICES */

.product-price{
    font-size:var(--font-price) !important;
}

/* REDUCE HOME PAGE SPACING */

.shopby-section{
    padding:50px 0 !important;
}

.home-products-section{
    padding:50px 0 !important;
}

/* REGISTER */

.register-page{
padding:40px 0 60px;
}

.register-card{
max-width:900px;
margin:auto;
padding:50px;
background:#fff;
border:1px solid #eee;
border-radius:20px;
}

.register-header{
text-align:center;
margin-bottom:35px;
}

.register-icon{
width:80px;
height:80px;
margin:auto auto 20px;
border-radius:50%;
background:#f4ebff;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
color:#9b6cf3;
}

.register-header h1{
font-size:20px;
font-weight:700;
text-transform:uppercase;
margin-bottom:8px;
}

.register-header p{
font-size:14px;
color:#666;
}

.register-form{
display:flex;
flex-direction:column;
gap:16px;
}

.form-row{
display:grid;
grid-template-columns:180px 1fr;
gap:20px;
align-items:center;
}

.form-row label{
font-size:14px;
font-weight:500;
}

.form-row label span{
color:#dc3545;
}

.form-row input,
.form-row select{
height:48px;
padding:0 14px;
border:1px solid #ddd;
border-radius:8px;
font-size:14px;
width:100%;
}

.register-terms{
margin:25px 0;
text-align:center;
font-size:14px;
}

.register-terms a{
color:#9b6cf3;
font-weight:600;
text-decoration:none;
}

.register-login{
margin-top:20px;
text-align:center;
font-size:14px;
}

.register-login a{
color:#9b6cf3;
font-weight:600;
text-decoration:none;
}

.readonly-input{
background:#f8f8f8;
cursor:not-allowed;
}

.field-error{
    color:#dc3545;
    font-size:12px;
    margin-top:4px;
    min-height:18px;
}

.input-error{
    border:1px solid #dc3545 !important;
}

.verify-section{
    margin-bottom:28px;
}

.verify-title{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:14px;
    font-size:14px;
}

.verify-title i{
    color:var(--theme-purple);
    font-size:22px;
}

.verify-title a{
    margin-left:auto;
    color:var(--theme-purple);
    font-size:13px;
    text-decoration:none;
}


.verify-modal{
    position:fixed;
    inset:0;
    z-index:99999;
}

.verify-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
}

.verify-popup{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:900px;
    max-width:90%;
    background:#fff;
    border-radius:20px;
    padding:50px;
    box-shadow:0 15px 40px rgba(0,0,0,.15);
}

.verify-close{
    position:absolute;
    top:20px;
    right:20px;
    background:none;
    border:none;
    cursor:pointer;
    color:var(--theme-purple);
    font-size:22px;
}

.verify-header{
    display:flex;
    gap:30px;
    align-items: flex-start;
    margin-bottom:40px;
}

.verify-icon{
    width:100px;
    height:100px;
    border-radius:50%;
    background:#f6f0ff;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--theme-purple);
    font-size:30px;
    flex-shrink: 0;
}

.verify-header h2{
    font-size:var(--font-heading-md);
    margin-bottom:6px;
}

.verify-header p{
    font-size:var(--font-sm);
    color:#666;
}

.verify-section{
    margin-bottom:24px;
}

.verify-title{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:12px;
    font-size:var(--font-sm);
}

.verify-title i{
    color:var(--theme-purple);
    font-size:20px;
}

.verify-title a{
    margin-left:auto;
    font-size:var(--font-xs);
    color:var(--theme-purple);
    text-decoration:none;
}

.verify-subtitle{
    color:#666;
    font-size:var(--font-xs);
}

.otp-input{
    width:100%;
    height:48px;
    border:1px solid #ddd;
    border-radius:10px;
    padding:0 16px;
    font-size:16px;
    text-align:center;
    letter-spacing:4px;
}

.otp-group{
    display:flex;
    gap:12px;
    margin-top:16px;
}

.otp-box{
    width:70px;
    height:70px;
    border:1px solid #ddd;
    border-radius:12px;
    text-align:center;
    font-size:28px;
    font-weight:600;
}

.otp-box:focus{
    border-color:var(--theme-purple);
    outline:none;
}
.verify-btn{
    width:100%;
    height:58px;
    border:none;
    border-radius:12px;
    background:linear-gradient(
        90deg,
        #7c3aed,
        #9333ea
    );
    color:#fff;
    font-size:18px;
    font-weight:600;
    cursor:pointer;
    margin-top:30px;
}

.verify-divider{
    border:none;
    border-top:1px solid #eee;
    margin:30px 0;
}

/* =========================================
   PRE-ORDER PAGE
========================================= */

.preorder-page {
    padding: 20px 0 70px;
}

.preorder-note {
    color: var(--theme-purple);
    font-weight: 600;
    font-size: 13px;
}

.preorder-page .products-sort {
    display: flex;
    align-items: center;
    gap: 10px;
}

.preorder-page .products-sort label {
    font-size: 14px;
    font-weight: 600;
}
/* PRE-ORDER PAGE */
.preorder-page .products-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.preorder-page .products-page-title h1 {
    font-size: var(--font-page-title);
    margin: 0 0 8px;
}

.preorder-page .products-page-title p {
    font-size: var(--font-body-size);
    margin: 0 0 10px;
}

.preorder-page .preorder-notice {
    font-size: var(--font-body-size);
    font-weight: 600;
}

@media (max-width: 1400px) {
    .preorder-page .products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .preorder-page .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .preorder-page .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .preorder-page .products-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.hide-out-stock {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
}

.hide-out-stock input {
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* =========================
   ACCOUNT PAGE
========================= */

.account-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 0 60px;
}


/* BREADCRUMB */

.account-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    font-size: 13px;
    color: #6f7185;
}

.account-breadcrumb a {
    color: #6f7185;
    text-decoration: none;
}

.account-breadcrumb i {
    font-size: 9px;
    color: #9b9caf;
}


/* MAIN LAYOUT */

.account-layout {
    display: grid;
    grid-template-columns: 165px minmax(0, 1fr);
    gap: 22px;
}


/* SIDEBAR */

.account-sidebar {
    display: flex;
    flex-direction: column;
}

.account-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 0 8px;
    color: #15182b;
    text-decoration: none;
    font-size: 14px;
    border-radius: 9px;
}

.account-menu-item i {
    width: 20px;
    text-align: center;
    font-size: 18px;
}

.account-menu-item.active {
    color: #8b4ddd;
    background: #f5edfc;
    font-weight: 600;
}

.account-menu-divider {
    height: 1px;
    background: #e8e6ed;
    margin: 18px 0;
}


/* CONTENT */

.account-content {
    min-width: 0;
}


/* PROFILE */

.account-profile-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 22px;
    border: 1px solid #eeeaf3;
    border-radius: 11px;
    background: #fff;
}

.profile-info {
    display: flex;
    align-items: center;
    gap: 22px;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f5edfc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9457dc;
}

.profile-avatar i {
    font-size: 38px;
}

.profile-details h1 {
    margin: 0 0 10px;
    font-size: 21px;
}

.profile-details p {
    margin: 0 0 8px;
    font-size: 14px;
}

.edit-profile-btn {
    height: 38px;
    padding: 0 18px;
    border: 1px solid #9859df;
    background: #fff;
    color: #8b4ddd;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}


/* GENERIC SECTION */

.account-section {
    margin-top: 18px;
    border: 1px solid #eeeaf3;
    border-radius: 11px;
    background: #fff;
}

.account-section h2 {
    margin: 0;
    font-size: 17px;
}


/* PASSWORD */

.password-section {
    padding: 28px 22px 24px;
}

.password-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 20px;
}

.password-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
}

.password-input-wrap {
    position: relative;
}

.password-input-wrap input {
    width: 100%;
    height: 42px;
    padding: 0 38px 0 12px;
    border: 1px solid #dddbe5;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}

.password-input-wrap i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #85839a;
}

.password-button-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.account-primary-btn,
.reward-item button,
.coupon-item button {
    border: 0;
    background: #9a5be0;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
}

.account-primary-btn {
    padding: 12px 22px;
}


/* REWARDS / COUPONS */

.account-rewards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.rewards-card,
.coupons-card {
    padding: 22px 16px 20px;
}

.account-section-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.account-section-heading i {
    color: #9a5be0;
    font-size: 21px;
}

.rewards-summary,
.coupons-summary {
    padding: 17px 16px;
    background: #f7f0fc;
}

.rewards-summary strong,
.coupons-summary strong {
    color: #8d50d3;
    font-size: 13px;
}

.rewards-summary p,
.coupons-summary p {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.6;
}


/* REWARDS */

.reward-list {
    border: 1px solid #e7e4eb;
    border-top: 0;
}

.reward-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
    padding: 12px 16px;
    border-top: 1px solid #e7e4eb;
}

.reward-value {
    font-size: 20px;
    font-weight: 600;
}

.reward-description {
    margin-top: 5px;
    font-size: 11px;
    color: #55566a;
}

.reward-item button {
    padding: 10px 15px;
}


/* COUPONS */

.coupon-list {
    border: 1px solid #e7e4eb;
    border-top: 0;
}

.coupon-item {
    display: grid;
    grid-template-columns: 85px minmax(0, 1fr) 70px;
    align-items: center;
    min-height: 95px;
    border-top: 1px solid #e7e4eb;
}

.coupon-discount {
    padding: 0 14px;
}

.coupon-discount strong {
    display: block;
    font-size: 22px;
}

.coupon-discount span {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
}

.coupon-info {
    padding: 12px;
    border-left: 1px dashed #ddd9e2;
}

.coupon-info strong {
    font-size: 12px;
}

.coupon-info p {
    margin: 6px 0;
    font-size: 10px;
}

.coupon-info small {
    display: block;
    font-size: 9px;
}

.coupon-validity {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 7px;
    border-radius: 10px;
    background: #eee1fb;
    color: #8b4ddd;
    font-size: 9px;
}

.coupon-item button {
    margin-right: 12px;
    padding: 10px 12px;
}


/* VIEW ALL */

.account-view-all {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: #8b4ddd;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

/* =========================================
   ACCOUNT PAGE
========================================= */

.account-page{
    padding:40px 0 70px;
}

.account-breadcrumb{
    margin-bottom:30px;
}


/* =========================================
   ACCOUNT LAYOUT
========================================= */

.account-layout{
    display:grid;
    grid-template-columns:165px 1fr;
    gap:30px;
    align-items:start;
}

.account-sidebar{
    padding-top:5px;
}

.account-menu-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 8px;
    color:#222;
    text-decoration:none;
    font-size:14px;
    margin-bottom:4px;
}

.account-menu-item i{
    width:20px;
    text-align:center;
    font-size:16px;
}

.account-menu-item:hover,
.account-menu-item.active{
    color:#9b6cf3;
}

.account-menu-divider{
    height:1px;
    background:#eee;
    margin:20px 0;
}

.logout-item{
    color:#222;
}


/* =========================================
   ACCOUNT CONTENT
========================================= */

.account-content{
    min-width:0;
}


/* =========================================
   PROFILE CARD
========================================= */

.account-profile-card{
    display:flex;
    align-items:center;
    gap:18px;
    background:#fff;
    border:1px solid #eee;
    border-radius:12px;
    padding:25px;
    margin-bottom:16px;
}

.profile-avatar{
    width:70px;
    height:70px;
    flex-shrink:0;
    border-radius:50%;
    background:#f4ebff;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9b6cf3;
    font-size:28px;
}

.profile-details{
    flex:1;
}

.profile-details h2{
    font-size:20px;
    font-weight:600;
    margin:0 0 8px;
}

.profile-wave{
    font-size:18px;
}

.profile-details p{
    margin:5px 0;
    font-size:13px;
    color:#666;
}

.profile-details p i{
    width:18px;
    margin-right:5px;
    color:#333;
}

.edit-profile-btn{
    height:40px;
    padding:0 18px;
    border:1px solid #9b6cf3;
    border-radius:7px;
    background:#fff;
    color:#9b6cf3;
    font-size:13px;
    cursor:pointer;
}

.edit-profile-btn i{
    margin-right:6px;
}


/* =========================================
   ACCOUNT SECTIONS
========================================= */

.account-section{
    background:#fff;
    border:1px solid #eee;
    border-radius:12px;
    padding:16px;
    margin-bottom:16px;
}

.account-section-header{
    margin-bottom:18px;
}

.account-section-header > div{
    display:flex;
    align-items:center;
    gap:10px;
}

.account-section-header > div > i{
    color:#222;
    font-size:16px;
}

.account-section-header h3{
    margin:0;
    font-size:18px;
    font-weight:600;
}


/* =========================================
   CHANGE PASSWORD
========================================= */

.password-form{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    align-items:end;
}

.password-form .form-group{
    margin:0;
}

.password-form label{
    display:block;
    font-size:14px;
    margin-bottom:6px;
    color:#333;
}

.password-input-wrap{
    position:relative;
}

.password-input-wrap input{
    width:100%;
    height:40px;
    padding:0 40px 0 12px;
    border:1px solid #ddd;
    border-radius:7px;
    font-size:13px;
    box-sizing:border-box;
}

.password-input-wrap input:focus{
    outline:none;
    border-color:#9b6cf3;
}

.password-toggle{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:none;
    padding:0;
    margin:0;
    width:auto;
    height:auto;
    color:#888;
    cursor:pointer;
    font-size:13px;
}

.password-toggle:hover{
    color:#9b6cf3;
}

.password-button-wrap{
    grid-column:1 / -1;
    display:flex;
    justify-content:flex-start;
    margin-top:2px;
}

.change-password-btn{
    height:40px;
    padding:0 18px;
    border:none;
    border-radius:7px;
    background:#9b6cf3;
    color:#fff;
    font-size:13px;
    font-weight:500;
    cursor:pointer;
}

.change-password-btn:hover{
    opacity:.9;
}

.change-password-btn i{
    margin-right:6px;
}


/* =========================================
   REWARDS + COUPONS
========================================= */

.account-cards-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    align-items:start;
}

.account-cards-grid .account-section{
    margin-bottom:0;
}


/* =========================================
   REWARDS
========================================= */

.rewards-summary,
.coupon-summary{
    background:#f7efff;
    padding:15px;
    margin-bottom:0;
}

.reward-points strong,
.store-credit strong{
    color:#9b6cf3;
    font-size:16px;
    font-weight:600;
}

.reward-points span,
.store-credit span{
    font-size:14px;
    margin-left:3px;
}

.rewards-summary p,
.coupon-summary p{
    font-size:12px;
    color:#444;
    margin:8px 0 0;
}


/* =========================================
   REWARD / COUPON ITEMS
========================================= */

.reward-list,
.coupon-list{
    border-left:1px solid #eee;
    border-right:1px solid #eee;
}

.reward-item,
.coupon-item{
    display:flex;
    align-items:center;
    min-height:70px;
    padding:12px 14px;
    border-bottom:1px solid #eee;
}

.reward-icon,
.coupon-icon{
    width:30px;
    flex-shrink:0;
    color:#222;
    font-size:15px;
}

.reward-info,
.coupon-info{
    flex:1;
    display:flex;
    align-items:center;
    gap:5px;
}

.reward-info strong,
.coupon-info strong{
    font-size:14px;
    font-weight:600;
}

.reward-info span,
.coupon-info span{
    font-size:14px;
    color:#333;
}

.reward-action,
.coupon-action{
    height:32px;
    padding:0 14px;
    border:none;
    border-radius:5px;
    background:#9b6cf3;
    color:#fff;
    font-size:12px;
    font-weight:500;
    cursor:pointer;
}

.account-status-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
}

.account-status-notice i {
    margin-top: 2px;
    flex-shrink: 0;
}

.account-status-notice.on-hold {
    background: #fff8e6;
    color: #8a6500;
}

.account-status-notice.blacklisted {
    background: #fff0f0;
    color: #a12626;
}

/* =========================================
   ACCOUNT STORE CREDIT
========================================= */

.account-store-credit {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 13px 16px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #333;
}

.account-store-credit i {
    color: #5425c8;
    font-size: 15px;
}

.account-store-credit strong {
    color: #5425c8;
    font-weight: 600;
}


/* =========================================
   NO ACTIVE COUPONS
========================================= */

.account-no-coupons {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #eee;
    color: #777d9d;
    font-size: 13px;
}

.account-no-coupons i {
    font-size: 22px;
    color: #9b6cf3;
}

/* =========================================
   EDIT PROFILE MODAL
========================================= */

.account-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.account-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 35, 0.45);
}

.account-modal-box {
    position: relative;
    width: 460px;
    max-width: calc(100% - 40px);
    margin: 12vh auto 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 15px 45px rgba(30, 20, 70, 0.18);
    overflow: hidden;
}

.account-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #eee;
}

.account-modal-header > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.account-modal-header > div > i {
    color: #5425c8;
    font-size: 16px;
}

.account-modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #171a31;
}

.account-modal-close {
    border: 0;
    background: transparent;
    padding: 4px;
    color: #777d9d;
    font-size: 17px;
    cursor: pointer;
}

.account-modal-close:hover {
    color: #171a31;
}

.account-modal-body {
    padding: 20px;
}

.account-modal-description {
    margin: 0 0 18px;
    font-size: 13px;
    color: #697092;
}

.account-edit-profile-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.account-edit-profile-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #333;
}

.account-edit-profile-group input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #dedfeb;
    border-radius: 7px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 13px;
    color: #171a31;
    outline: none;
}

.account-edit-profile-group input:focus {
    border-color: #5425c8;
}

.account-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid #eee;
}

.account-modal-cancel,
.account-modal-save {
    height: 38px;
    padding: 0 17px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.account-modal-cancel {
    border: 1px solid #dedfeb;
    background: #fff;
    color: #555;
}

.account-modal-save {
    border: 1px solid #5425c8;
    background: #5425c8;
    color: #fff;
}

.account-modal-save i {
    margin-right: 5px;
}

.reward-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.coupon-copy-toast {
    display: none;
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 10000;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    background: #171a31;
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    font-size: 13px;
}

.coupon-copy-toast i {
    font-size: 14px;
}

.theme-alert-input-wrap{
    width:100%;
    margin-bottom:15px;
}

.theme-alert-input{
    width:100%;
    height:48px;
    padding:0 15px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:14px;
    font-family:var(--font-body);
    outline:none;
    box-sizing:border-box;
}

.theme-alert-input:focus{
    border-color:var(--theme-purple);
}

.theme-alert-input::placeholder{
    color:#aaa;
}

#themeInputAlertBtn{
    width:100%;
}

/* =========================================================
   ACCOUNT ADDRESSES
   ========================================================= */

.account-addresses {
    width: 100%;
}


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

.account-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #eee8f7;
}

.account-content-header h2 {
    margin: 0 0 5px;
    font-size: 22px;
    font-weight: 700;
    color: #17132b;
}

.account-content-header p {
    margin: 0;
    font-size: 13px;
    color: #5f5a70;
}


/* Add Address button */

.account-add-address-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    height: 38px;
    padding: 0 16px;

    border: 1px solid #9b62e8;
    border-radius: 6px;

    background: #fff;
    color: #713dcc;

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

    cursor: pointer;
    transition: all 0.2s ease;
}

.account-add-address-btn:hover {
    background: #f8f1ff;
}

.account-add-address-btn i {
    font-size: 12px;
}


/* ---------------------------------------------------------
   Address List
   --------------------------------------------------------- */

.account-address-list {
    padding: 10px;
}


/* ---------------------------------------------------------
   Address Card
   --------------------------------------------------------- */

.account-address-card {
    display: flex;
    align-items: center;

    min-height: 150px;
    margin-bottom: 10px;
    padding: 22px 24px;

    border: 1px solid #eeeaf4;
    border-radius: 8px;

    background: #fff;

    box-sizing: border-box;
}

.account-address-card:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   Address Icon
   --------------------------------------------------------- */

.account-address-icon {
    width: 54px;
    height: 54px;

    flex: 0 0 54px;

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

    margin-right: 20px;

    border-radius: 50%;

    background: #f7efff;
}

.account-address-icon i {
    color: #9555e8;
    font-size: 22px;
}


/* ---------------------------------------------------------
   Address Details
   --------------------------------------------------------- */

.account-address-details {
    flex: 1;
    min-width: 0;
}

.account-address-details h3 {
    margin: 0 0 8px;

    color: #17132b;

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

.account-address-details p {
    margin: 0 0 5px;

    color: #29253a;

    font-size: 13px;
    line-height: 1.45;
}

.account-address-details p:last-child {
    margin-bottom: 0;
}


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

.account-address-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;

    width: 98px;
    margin-left: 20px;
}

.account-address-actions button {
    width: 98px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    background: #fff;

    border-radius: 6px;

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

    cursor: pointer;
    transition: all 0.2s ease;
}


/* Edit */

.account-address-edit {
    border: 1px solid #9b62e8;
    color: #713dcc;
}

.account-address-edit:hover {
    background: #f8f1ff;
}


/* Delete */

.account-address-delete {
    border: 1px solid #ff6b75;
    color: #ef3948;
}

.account-address-delete:hover {
    background: #fff4f4;
}


/* ---------------------------------------------------------
   No Addresses
   --------------------------------------------------------- */

.account-no-addresses {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 280px;

    text-align: center;
}

.account-no-addresses > i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    margin-bottom: 15px;

    border-radius: 50%;

    background: #f7efff;

    color: #9555e8;
    font-size: 25px;
}

.account-no-addresses h3 {
    margin: 0 0 7px;

    color: #17132b;
    font-size: 17px;
}

.account-no-addresses p {
    margin: 0 0 18px;

    color: #6b6678;
    font-size: 13px;
}


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

@media (max-width: 700px) {

    .account-content-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .account-address-card {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 18px;
    }

    .account-address-details {
        width: calc(100% - 74px);
    }

    .account-address-actions {
        width: 100%;
        margin: 18px 0 0 74px;
        flex-direction: row;
    }

    .account-address-actions button {
        width: 100px;
    }

}

.account-address-set-default {
    width: 98px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 1px solid #9b62e8;
    border-radius: 6px;

    background: #fff;
    color: #713dcc;

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

    cursor: pointer;
    transition: all 0.2s ease;
}

.account-address-set-default:hover {
    background: #f8f1ff;
}

.account-address-set-default i {
    font-size: 11px;
}


.account-address-default {
    width: 98px;
    min-height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    border: 1px solid #d9c5f2;
    border-radius: 6px;

    background: #f8f1ff;
    color: #713dcc;

    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.account-address-default i {
    font-size: 11px;
}

/* =========================================
   ADD ADDRESS MODAL
========================================= */

.address-modal-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(20,10,40,.45);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
}

.address-modal{
    width:100%;
    max-width:760px;
    max-height:90vh;
    background:#fff;
    border-radius:18px;
    box-shadow:0 20px 60px rgba(50,20,90,.25);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.address-modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    padding:25px 30px;
    border-bottom:1px solid #eee;
}

.address-modal-header h2{
    margin:0 0 6px;
    font-size:24px;
    font-weight:700;
    color:#171321;
}

.address-modal-header p{
    margin:0;
    font-size:14px;
    color:#777;
}

.address-modal-close{
    width:38px;
    height:38px;
    border:none;
    border-radius:50%;
    background:#f6f0ff;
    color:#6f3fc0;
    font-size:17px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.address-modal-close:hover{
    background:#eee1ff;
}

.address-modal-body{
    padding:25px 30px;
    overflow-y:auto;
}

.address-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.address-form-group{
    margin-bottom:18px;
}

.address-form-group label{
    display:block;
    margin-bottom:7px;
    font-size:13px;
    font-weight:600;
    color:#252032;
}

.address-form-group label span{
    color:#e5484d;
}

.address-form-group label .optional{
    color:#888;
    font-weight:400;
}

.address-form-group input,
.address-form-group select{
    width:100%;
    height:46px;
    padding:0 13px;
    border:1px solid #ddd5e9;
    border-radius:8px;
    background:#fff;
    color:#272033;
    font-size:14px;
    outline:none;
    box-sizing:border-box;
}

.address-form-group input:focus,
.address-form-group select:focus{
    border-color:#9258d6;
    box-shadow:0 0 0 3px rgba(146,88,214,.10);
}

.address-form-group select:disabled{
    background:#f7f7f8;
    color:#999;
    cursor:not-allowed;
}

.address-phone-wrap{
    display:grid;
    grid-template-columns:72px 1fr;
    gap:8px;
}

.address-phone-code{
    height:46px;
    border:1px solid #ddd5e9;
    border-radius:8px;
    background:#faf9fc;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    color:#3a3150;
}

.address-fixed-field{
    height:46px;
    padding:0 13px;
    border:1px solid #ddd5e9;
    border-radius:8px;
    background:#f8f7fa;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#444;
    font-size:14px;
}

.address-fixed-field i{
    color:#aaa;
    font-size:12px;
}

.address-default-wrap{
    margin-top:4px;
    padding:15px;
    border:1px solid #eee5f8;
    border-radius:10px;
    background:#fbf8ff;
}

.address-checkbox{
    display:flex;
    align-items:flex-start;
    gap:11px;
    cursor:pointer;
}

.address-checkbox input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.address-checkbox-box{
    width:19px;
    height:19px;
    min-width:19px;
    border:1px solid #c9bfd8;
    border-radius:4px;
    background:#fff;
    margin-top:1px;
    position:relative;
}

.address-checkbox input:checked + .address-checkbox-box{
    background:#8c4fd2;
    border-color:#8c4fd2;
}

.address-checkbox input:checked + .address-checkbox-box:after{
    content:"";
    position:absolute;
    left:6px;
    top:2px;
    width:5px;
    height:10px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.address-checkbox-text{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.address-checkbox-text strong{
    font-size:13px;
    color:#302442;
}

.address-checkbox-text small{
    font-size:12px;
    color:#777;
}

.address-modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    padding:20px 30px;
    border-top:1px solid #eee;
}

.address-cancel-btn,
.address-save-btn{
    height:44px;
    padding:0 24px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}

.address-cancel-btn{
    background:#fff;
    border:1px solid #9258d6;
    color:#7d43c4;
}

.address-save-btn{
    background:#8c4fd2;
    border:1px solid #8c4fd2;
    color:#fff;
}

.address-save-btn:hover{
    background:#793fc0;
}


/* MOBILE */
@media(max-width:700px){

    .address-modal-overlay{
        padding:15px;
    }

    .address-modal{
        max-height:94vh;
    }

    .address-modal-header,
    .address-modal-body,
    .address-modal-footer{
        padding-left:20px;
        padding-right:20px;
    }

    .address-form-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .address-modal-footer{
        flex-direction:column-reverse;
    }

    .address-cancel-btn,
    .address-save-btn{
        width:100%;
    }

}


/* =========================================================
   ORDER DETAILS
========================================================= */

.account-order-details-page {
    padding: 20px 0 60px;
}


/* Breadcrumb */

.account-order-details-page .search-breadcrumb {
    margin-bottom: 25px;
}


/* Main card */

.order-details-card {
    background: #fff;
    border: 1px solid #eee8f8;
    border-radius: 8px;
    padding: 20px;
}


/* Header */

.order-details-header {
    padding: 0 5px 18px;
}

.order-details-header h1 {
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 700;
}

.order-meta {
    display: flex;
    align-items: center;
    gap: 24px;
}

.order-meta-item {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 13px;
}

.order-meta-item strong {
    font-weight: 700;
}

.order-meta-divider {
    width: 1px;
    height: 25px;
    background: #ddd;
}

.order-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
}

.order-status-badge i {
    font-size: 7px;
}

.status-active {
    background: #dff6e5;
    color: #18863b;
}

.status-cancelled {
    background: #ffe5e5;
    color: #d52d2d;
}


.account-order-invoice-btn {
            display: inline-flex;

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

            gap: 7px;

            background: none;
            border: none;

            color: var(--theme-purple);

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

            cursor: pointer;
}

/* =========================================================
   ADDRESSES
========================================================= */

.order-addresses {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    background: #faf8ff;
    border: 1px solid #eee8f8;
    border-radius: 7px;
    padding: 18px 14px;
    margin-bottom: 12px;
}

.order-address {
    padding: 0 0 0 0;
}

.order-address:first-child {
    padding-right: 25px;
}

.order-address:last-child {
    padding-left: 25px;
}

.order-address h3 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
}

.address-content {
    font-size: 13px;
    line-height: 1.55;
}

.order-address-divider {
    width: 1px;
    background: #ddd7eb;
}


/* =========================================================
   PRODUCTS
========================================================= */

.order-products-box {
    border: 1px solid #eee8f8;
    border-radius: 7px;
    overflow: hidden;
    margin-bottom: 12px;
}

.order-products-header,
.order-product-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px 80px 120px;
    align-items: center;
}

.order-products-header {
    min-height: 38px;
    padding: 0 14px;
    background: #faf8ff;
    font-size: 12px;
    font-weight: 700;
}

.order-products-header > div:not(:first-child),
.order-product-row > div:not(:first-child) {
    text-align: right;
}

.order-product-row {
    min-height: 88px;
    padding: 8px 14px;
    border-top: 1px solid #eee8f8;
    font-size: 13px;
}

.order-product-info {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

.order-product-image {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
}

.order-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.order-product-name {
    line-height: 1.4;
}

.order-product-price,
.order-product-qty,
.order-product-total {
    font-size: 13px;
}


/* =========================================================
   SUMMARY
========================================================= */

.order-summary-box {
    background: #faf8ff;
    border: 1px solid #eee8f8;
    border-radius: 7px;
    padding: 15px 18px 10px;
    margin-bottom: 12px;
}

.order-summary-box h2 {
    margin: 0 0 12px;
    font-size: 16px;
}

.order-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 13px;
}

.summary-discount {
    color: #159447;
}

.order-summary-total {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #ddd7eb;
    margin-top: 7px;
    padding-top: 9px;
    font-size: 16px;
}


/* =========================================================
   PAYMENT / SHIPPING
========================================================= */

.order-payment-box,
.order-shipping-box {
    display: flex;
    align-items: center;
    min-height: 55px;
    background: #faf8ff;
    border: 1px solid #eee8f8;
    border-radius: 7px;
    margin-bottom: 12px;
}

.order-payment-box {
    padding: 0 15px;
}

.order-info-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    color: #8145d9;
    font-size: 20px;
}

.order-info-title {
    font-size: 13px;
    font-weight: 700;
    min-width: 125px;
}

.order-info-value {
    font-size: 13px;
}


.order-shipping-box {
    padding: 10px 15px;
}

.order-shipping-content {
    flex: 1;
}

.shipping-detail-row {
    display: flex;
    gap: 35px;
    font-size: 13px;
    line-height: 1.7;
}

.shipping-detail-row span {
    width: 125px;
}

.shipping-detail-row strong {
    font-weight: 400;
}

.order-track-btn {
    min-width: 120px;
    height: 38px;
    background: #fff;
    border: 1px solid #8145d9;
    border-radius: 5px;
    color: #8145d9;
    font-weight: 600;
    cursor: pointer;
}

.order-notes-section {
    margin-top: 12px;

    padding: 16px 18px;

    border: 1px solid #e8e2f3;
    border-radius: 8px;

    background: #faf8ff;
}

.order-notes-header {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 10px;

    font-size: 13px;
    color: #17172b;
}

.order-notes-header i {
    color: var(--theme-purple);
    font-size: 16px;
}

.order-notes-content {
    padding-left: 26px;

    font-size: 12px;
    line-height: 1.6;

    color: #444;
    white-space: normal;
}


/* =========================================================
   CANCEL
========================================================= */

.order-cancel-btn {
    width: 100%;
    height: 38px;
    border: 1px solid #ff3434;
    border-radius: 5px;
    background: #fff;
    color: #e52424;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.order-cancel-btn:hover {
    background: #fff5f5;
}


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

@media (max-width: 768px) {

    .order-details-card {
        padding: 12px;
    }

    .order-meta {
        flex-wrap: wrap;
        gap: 12px;
    }

    .order-meta-divider {
        display: none;
    }

    .order-addresses {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .order-address:first-child,
    .order-address:last-child {
        padding: 0;
    }

    .order-address-divider {
        width: 100%;
        height: 1px;
    }

    .order-products-box {
        overflow-x: auto;
    }

    .order-products-header,
    .order-product-row {
        min-width: 650px;
    }

    .order-shipping-box {
        flex-wrap: wrap;
        gap: 10px;
    }

    .order-track-btn {
        margin-left: 50px;
    }

}

/* =========================================================
   SHIPPING DETAILS ACCORDION
========================================================= */

.order-shipping-box {
    background: #faf8ff;
    border: 1px solid #eee8f8;
    border-radius: 7px;
    margin-bottom: 12px;
    overflow: hidden;
}


/* Header */

.order-shipping-header {
    min-height: 55px;
    display: flex;
    align-items: center;
    padding: 8px 15px;
}


.shipping-expandable .order-shipping-header {
    cursor: pointer;
}


.shipping-expandable .order-shipping-header:hover {
    background: #f6f2fc;
}


.order-shipping-header-content {
    flex: 1;
}


.order-shipping-header-content .order-info-title {
    min-width: 0;
}


.order-shipping-status {
    margin-top: 3px;
    font-size: 11px;
    color: #888;
}


/* Arrow */

.order-shipping-arrow {
    width: 35px;
    height: 35px;

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

    color: #666;

    font-size: 13px;

    transition: transform 0.2s ease;
}


/* Expanded content */

.shipping-details-content {
    display: none;

    padding: 12px 20px 15px 65px;

    border-top: 1px solid #eee8f8;
}


.shipping-details-content .shipping-detail-row {
    display: flex;
    gap: 35px;

    font-size: 13px;
    line-height: 1.8;
}


.shipping-details-content .shipping-detail-row span {
    width: 125px;
    color: #666;
}


.shipping-details-content .shipping-detail-row strong {
    font-weight: 500;
}


.shipping-details-content .order-track-btn {
    margin-top: 10px;
}

.shipping-arrow-up {
        transform: rotate(180deg);
    }
    
    .order-details-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-details-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-details-title-row h1 {
    margin: 0;
    line-height: 34px;
}

.order-back-btn {
    width: 34px;
    height: 34px;

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

    padding: 0;

    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 50%;

    color: #555;
    font-size: 13px;

    cursor: pointer;
    flex-shrink: 0;
}

.order-back-btn:hover {
    border-color: var(--theme-purple);
    color: var(--theme-purple);
    background: #faf7ff;
}

/* =========================================================
   ORDER CHAT ACCORDION
========================================================= */

.order-chat-box {
    background: #faf8ff;
    border: 1px solid #eee8f8;
    border-radius: 7px;
    margin-bottom: 12px;
    overflow: hidden;
}


/* Header */

.order-chat-header {
    min-height: 55px;
    display: flex;
    align-items: center;
    padding: 8px 15px;
    cursor: pointer;
}


.order-chat-header:hover {
    background: #f6f2fc;
}


.order-chat-header-content {
    flex: 1;
}


.order-chat-header-content .order-info-title {
    min-width: 0;
}


/* Arrow */

.order-chat-arrow {
    width: 35px;
    height: 35px;

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

    color: #666;

    font-size: 13px;

    transition: transform 0.2s ease;
}


/* Expanded content */

.order-chat-content {
    display: none;

    padding: 12px 20px 15px 65px;

    border-top: 1px solid #eee8f8;
}


.order-chat-arrow-up {
    transform: rotate(180deg);
}

/* =========================================================
   ORDER CHAT MESSAGES
========================================================= */

.order-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* Individual message */

.order-chat-message {
    display: flex;
    width: 100%;
}


/* Support = left */

.order-chat-message.support-message {
    justify-content: flex-start;
}


/* User = right */

.order-chat-message.user-message {
    justify-content: flex-end;
}


/* Message bubble */

.order-chat-message-bubble {
    max-width: 75%;
    padding: 9px 13px;

    border-radius: 10px;

    font-size: 13px;
    line-height: 1.5;
}


/* Support bubble */

.support-message .order-chat-message-bubble {
    background: #ffffff;
    border: 1px solid #eee8f8;
}


/* User bubble */

.user-message .order-chat-message-bubble {
    background: #f6eeff;
    border: 1px solid #e9ddf7;
}


/* Message text */

.order-chat-message-text {
    color: #1f1f1f;
    word-break: break-word;
}


/* Date */

.order-chat-message-date {
    margin-top: 4px;

    font-size: 10px;
    color: #999;

    text-align: right;
}


/* Empty state */

.order-chat-empty {
    color: #999;
    font-size: 13px;
    padding: 5px 0;
}
.order-chat-title-icon {
    color: #8a45d1;
    margin-right: 8px;
    font-size: 15px;
}

.order-chat-message {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 8px;
}


/* Support message stays on the left */

.order-chat-message.support-message {
    justify-content: flex-start;
}


/* User message stays on the right */

.order-chat-message.user-message {
    justify-content: flex-end;
}


/* Sender label */

.order-chat-sender {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    padding-top: 10px;
    white-space: nowrap;
}


/* Message bubble */

.order-chat-message-bubble {
    max-width: 75%;
    padding: 9px 13px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
}

/* =========================================================
   ORDER CHAT
========================================================= */

.order-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* Message row */

.order-chat-message {
    display: flex;
    width: 100%;
}


/* User message */

.order-chat-user {
    justify-content: flex-end;
}


/* Support message */

.order-chat-support {
    justify-content: flex-start;
}


/* Message bubble */

.order-chat-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
}


/* User bubble */

.order-chat-user .order-chat-bubble {
    background: #f6eeff;
    border: 1px solid #e9ddf7;
}


/* Support bubble */

.order-chat-support .order-chat-bubble {
    background: #ffffff;
    border: 1px solid #eee8f8;
}


/* Sender */

.order-chat-sender {
    font-size: 12px;
    font-weight: 600;
    color: #9c5fe0;
    margin-bottom: 3px;
}


/* Message */

.order-chat-text {
    color: #333;
    word-break: break-word;
}


/* Date */

.order-chat-date {
    margin-top: 5px;
    font-size: 10px;
    color: #999;
    text-align: right;
}


/* Empty */

.order-chat-empty {
    text-align: center;
    padding: 15px 0;
    font-size: 12px;
    color: #999;
}


/* =========================================================
   CHAT COMPOSE
========================================================= */

.order-chat-compose {
    display: flex;
    align-items: flex-end;
    gap: 10px;

    margin-top: 15px;
    padding-top: 12px;

    border-top: 1px solid #eee8f8;
}


/* Text box */

.order-chat-input {
    flex: 1;

    min-height: 42px;
    max-height: 120px;

    padding: 10px 12px;

    border: 1px solid #e9ddf7;
    border-radius: 7px;

    background: #ffffff;

    color: #333;
    font-family: 'Inter', sans-serif;
    font-size: 13px;

    resize: vertical;

    outline: none;

    transition: border-color 0.2s ease,
                box-shadow 0.2s ease;
}


.order-chat-input:focus {
    border-color: #b57be8;

    box-shadow: 0 0 0 2px rgba(181, 123, 232, 0.12);
}


.order-chat-input::placeholder {
    color: #aaa;
}


/* Send button */

.order-chat-send-btn {
    height: 42px;

    padding: 0 18px;

    border: none;
    border-radius: 7px;

    background: #b57be8;
    color: #ffffff;

    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    transition: background 0.2s ease;
}


.order-chat-send-btn:hover {
    background: #9c5fe0;
}


.order-chat-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* =========================================================
   WISHLISTS
========================================================= */

.wishlist-page {
    width: 100%;
}


/* Header */

.wishlist-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 28px 24px;
    background: #ffffff;
    border-bottom: 1px solid #f0edf5;
}


.wishlist-page-header h1 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: #171717;
}


.wishlist-page-header p {
    margin: 0;
    font-size: 13px;
    color: #555;
}


/* New Wishlist */

.wishlist-new-btn {
    height: 40px;
    padding: 0 17px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    background: #ffffff;
    border: 1px solid var(--theme-purple);
    border-radius: 6px;

    color: var(--theme-purple);

    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;
}


.wishlist-new-btn:hover {
    background: var(--theme-light-purple);
}


.wishlist-new-btn i {
    font-size: 13px;
}


/* Wishlist List */

.wishlist-list {
    background: #ffffff;
}


/* Wishlist Card */

.wishlist-card {
    min-height: 122px;

    display: flex;
    align-items: center;

    padding: 18px 24px;

    border-bottom: 1px solid #f0edf5;

    box-sizing: border-box;

    cursor: pointer;
}

.wishlist-card:hover {
    background: #fdfbff;
}


/* Heart */

.wishlist-card-icon {
    width: 56px;
    height: 56px;

    flex: 0 0 56px;

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

    margin-right: 22px;

    border-radius: 50%;

    background: var(--theme-light-purple);

    color: var(--theme-purple);

    font-size: 24px;
}


.wishlist-card-icon i {
    font-size: 23px;
}
/* =========================================================
   WISHLIST CARD - FINAL OVERRIDE
========================================================= */

/* =========================================================
   WISHLISTS
========================================================= */

.wishlist-page {
    width: 100%;
}


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

.wishlist-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    padding: 28px 24px;

    background: #ffffff;
    border-bottom: 1px solid #f0edf5;

    box-sizing: border-box;
}


.wishlist-page-header h1 {
    margin: 0 0 8px;

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

    color: #171717;
}


.wishlist-page-header p {
    margin: 0;

    font-size: 13px;
    color: #555;
}


/* =========================================================
   NEW WISHLIST BUTTON
========================================================= */

.wishlist-new-btn {
    height: 40px;

    padding: 0 17px;

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

    gap: 8px;

    background: #ffffff;

    border: 1px solid var(--theme-purple);
    border-radius: 6px;

    color: var(--theme-purple);

    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;
}


.wishlist-new-btn:hover {
    background: var(--theme-light-purple);
}


.wishlist-new-btn i {
    font-size: 13px;
}


/* =========================================================
   WISHLIST LIST
========================================================= */

.wishlist-list {
    width: 100%;

    background: #ffffff;
}


/* =========================================================
   WISHLIST CARD
========================================================= */

.wishlist-card {
    width: 100%;
    min-height: 122px;

    display: flex;
    align-items: center;

    padding: 18px 24px;

    box-sizing: border-box;

    border-bottom: 1px solid #f0edf5;

    background: #ffffff;

    cursor: pointer;

    transition: background 0.2s ease;
}


.wishlist-card:hover {
    background: #fdfbff;
}


/* =========================================================
   WISHLIST ICON
========================================================= */

.wishlist-card-icon {
    width: 56px;
    height: 56px;

    flex: 0 0 56px;

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

    margin-right: 22px;

    border-radius: 50%;

    background: var(--theme-light-purple);

    color: var(--theme-purple);
}


.wishlist-card-icon i {
    font-size: 23px;
}


/* =========================================================
   WISHLIST INFORMATION
========================================================= */

.wishlist-card-info {
    width: 170px;

    flex: 0 0 170px;

    display: flex;
    flex-direction: column;

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

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


.wishlist-card-info h3 {
    display: block;

    width: 100%;

    margin: 0 0 7px;
    padding: 0;

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

    font-weight: 700;

    color: #171717;
}


.wishlist-card-info span {
    display: block;

    margin: 0;
    padding: 0;

    font-size: 12px;
    line-height: 1.4;

    color: #555;
}


/* =========================================================
   PRODUCT PREVIEW
========================================================= */

.wishlist-product-preview {
    flex: 1;

    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 0 20px;

    box-sizing: border-box;
}


.wishlist-preview-image {
    width: 58px;
    height: 70px;

    flex: 0 0 58px;

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

    overflow: hidden;

    border-radius: 4px;

    background: #faf8fc;
}


.wishlist-preview-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}


.wishlist-more-count {
    width: 38px;
    height: 54px;

    flex: 0 0 38px;

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

    border-radius: 5px;

    background: var(--theme-light-purple);

    color: #222;

    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   DELETE BUTTON
========================================================= */

.wishlist-delete-btn {
    width: 88px;
    height: 34px;

    flex: 0 0 88px;

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

    gap: 7px;

    background: #ffffff;

    border: 1px solid #ff7777;
    border-radius: 5px;

    color: #ef4444;

    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;
}


.wishlist-delete-btn:hover {
    background: #fff5f5;
}


.wishlist-delete-btn i {
    font-size: 13px;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.wishlist-empty {
    padding: 70px 30px;

    text-align: center;
}


.wishlist-empty-icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 18px;

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

    border-radius: 50%;

    background: var(--theme-light-purple);

    color: var(--theme-purple);

    font-size: 27px;
}


.wishlist-empty h3 {
    margin: 0 0 8px;

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

    color: #171717;
}


.wishlist-empty p {
    max-width: 420px;

    margin: 0 auto 20px;

    font-size: 13px;
    line-height: 1.6;

    color: #666;
}


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

@media (max-width: 900px) {

    .wishlist-card-info {
        width: 140px;
        flex-basis: 140px;
    }

    .wishlist-preview-image {
        width: 50px;
        height: 62px;

        flex-basis: 50px;
    }

    .wishlist-product-preview {
        gap: 8px;
        padding: 0 10px;
    }

}


@media (max-width: 700px) {

    .wishlist-page-header {
        padding: 20px 15px;
    }


    .wishlist-card {
        padding: 15px;

        flex-wrap: wrap;

        gap: 12px;
    }


    .wishlist-card-info {
        flex: 1;

        width: auto;
    }


    .wishlist-product-preview {
        order: 3;

        width: 100%;

        flex-basis: 100%;

        padding: 0;
        padding-left: 78px;
    }


    .wishlist-delete-btn {
        margin-left: auto;
    }

}

/* =========================================================
   WISHLIST DETAIL
========================================================= */

.wishlist-detail-page {
    width: 100%;
}


/* Back */

.wishlist-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 18px;

    color: var(--theme-purple);

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

    text-decoration: none;
}


.wishlist-detail-back:hover {
    color: var(--theme-dark-purple);
}


.wishlist-detail-back i {
    font-size: 12px;
}


/* Header */

.wishlist-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 5px 20px;
}


.wishlist-detail-title-wrap {
    min-width: 0;
}


.wishlist-detail-title-wrap h1 {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 7px;

    font-size: 27px;
    line-height: 1.2;
    font-weight: 700;

    color: #171717;
}


.wishlist-rename-btn {
    width: 25px;
    height: 25px;

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

    padding: 0;

    border: none;
    background: transparent;

    color: var(--theme-purple);

    cursor: pointer;
}


.wishlist-rename-btn i {
    font-size: 13px;
}


.wishlist-detail-meta {
    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 13px;
    color: #555;
}


.wishlist-detail-divider {
    color: #aaa;
}


.wishlist-detail-rename-button {
    height: 38px;
    min-width: 90px;

    padding: 0 18px;

    background: #fff;

    border: 1px solid var(--theme-purple);
    border-radius: 6px;

    color: var(--theme-purple);

    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;
}


.wishlist-detail-rename-button:hover {
    background: var(--theme-light-purple);
}


/* Items */

.wishlist-detail-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* Item Row */

.wishlist-detail-item {
    min-height: 92px;

    display: flex;
    align-items: center;

    padding: 12px 15px;

    background: #fff;

    border: 1px solid #f0edf5;
    border-radius: 7px;

    box-sizing: border-box;

    cursor: pointer;

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


.wishlist-detail-item:hover {
    background: #fdfbff;
    border-color: #e5d8f5;
}


/* Product Image */

.wishlist-detail-product-image {
    width: 82px;
    height: 82px;

    flex: 0 0 82px;

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

    overflow: hidden;
}


.wishlist-detail-product-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}


/* Product Information */

.wishlist-detail-product-info {
    flex: 1;

    min-width: 0;

    padding: 0 25px;
}


.wishlist-detail-product-info h3 {
    margin: 0 0 6px;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    color: #171717;
}


.wishlist-detail-product-info span {
    display: block;

    font-size: 13px;
    line-height: 1.4;

    color: #555;
}


/* Actions */

.wishlist-detail-actions {
    display: flex;
    align-items: center;
    gap: 18px;

    flex: 0 0 auto;
}


.wishlist-fulfill-btn,
.wishlist-detail-delete-btn {
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 0 14px;

    border-radius: 5px;

    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    background: #fff;

    transition: all 0.2s ease;
}


/* Fulfilled */

.wishlist-fulfill-btn {
    border: 1px solid var(--theme-purple);
    color: var(--theme-purple);
}


.wishlist-fulfill-btn:hover {
    background: var(--theme-light-purple);
}


.wishlist-fulfill-btn i {
    font-size: 14px;
}


/* Delete */

.wishlist-detail-delete-btn {
    min-width: 88px;

    border: 1px solid #ff6666;
    color: #ef4444;
}


.wishlist-detail-delete-btn:hover {
    background: #fff5f5;
}


.wishlist-detail-delete-btn i {
    font-size: 13px;
}


/* Empty */

.wishlist-detail-empty {
    padding: 70px 30px;

    text-align: center;

    background: #fff;

    border: 1px solid #f0edf5;
    border-radius: 7px;
}


.wishlist-detail-empty-icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 18px;

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

    border-radius: 50%;

    background: var(--theme-light-purple);

    color: var(--theme-purple);

    font-size: 27px;
}


.wishlist-detail-empty h3 {
    margin: 0 0 8px;

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

    color: #171717;
}


.wishlist-detail-empty p {
    margin: 0;

    font-size: 13px;
    color: #666;
}


/* Responsive */

@media (max-width: 850px) {

    .wishlist-detail-item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .wishlist-detail-product-info {
        padding: 10px 15px;
    }

    .wishlist-detail-actions {
        width: 100%;
        flex-basis: 100%;

        padding-left: 97px;
    }

}


@media (max-width: 600px) {

    .wishlist-detail-header {
        align-items: flex-start;
        gap: 15px;
    }

    .wishlist-detail-title-wrap h1 {
        font-size: 22px;
    }

    .wishlist-detail-meta {
        flex-wrap: wrap;
    }

    .wishlist-detail-actions {
        padding-left: 0;
        gap: 8px;
    }

    .wishlist-fulfill-btn,
    .wishlist-detail-delete-btn {
        flex: 1;
    }

}

.wishlist-detail-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}


.wishlist-move-cart-btn,
.wishlist-notify-btn,
.wishlist-fulfilled-btn,
.wishlist-item-delete-btn {
    height: 34px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s ease;
}


/* Move to Cart */

.wishlist-move-cart-btn {
    background: var(--theme-purple);
    border: 1px solid var(--theme-purple);
    color: #fff;
}

.wishlist-move-cart-btn:hover {
    background: var(--theme-dark-purple);
    border-color: var(--theme-dark-purple);
}


/* Notify Me */

.wishlist-notify-btn {
    background: #fff;
    border: 1px solid #bbb;
    color: #444;
}

.wishlist-notify-btn:hover {
    background: #f7f7f7;
}


/* Fulfilled */

.wishlist-fulfilled-btn {
    height: 34px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--theme-purple);
    border: 1px solid var(--theme-purple);
    border-radius: 5px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.wishlist-fulfilled-btn:hover {
    background: var(--theme-dark-purple);
    border-color: var(--theme-dark-purple);
}

.wishlist-fulfilled-btn.fulfilled {
    background: #e5e5e5;
    border-color: #e5e5e5;
    color: #888;
    cursor: default;
}


/* Delete */

.wishlist-item-delete-btn {
    background: #fff;
    border: 1px solid #ff7777;
    color: #ef4444;
}

.wishlist-item-delete-btn:hover {
    background: #fff5f5;
}

/* =========================================
   PRODUCT DETAIL PAGE
========================================= */

.product-detail-breadcrumb {

    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 24px;
    margin-bottom: 24px;

    font-size: 13px;
    color: #777;
}

.product-detail-breadcrumb a {

    color: #777;
    text-decoration: none;
}

.product-detail-breadcrumb a:hover {

    color: var(--theme-purple);
}

.product-detail-breadcrumb i {

    font-size: 9px;
    color: #aaa;
}

.product-detail-breadcrumb span {

    color: #555;
}


/* =========================================
   PRODUCT TOP
========================================= */

.product-detail-top {

    display: grid;
    grid-template-columns: 48% 52%;

    gap: 30px;

    width: 100%;
    margin-bottom: 50px;
}


/* =========================================
   PRODUCT IMAGE
========================================= */

.product-detail-image-section {

    width: 100%;
}

.product-detail-image {

    position: relative;

    width: 100%;
    aspect-ratio: 1 / 1;

    background: #faf8fc;
    border-radius: 10px;

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

    overflow: hidden;
}

.product-detail-image img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}

.product-image-zoom-btn {

    position: absolute;

    top: 15px;
    right: 15px;

    width: 40px;
    height: 40px;

    border: none;
    border-radius: 50%;

    background: #fff;

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

    color: #444;

    font-size: 14px;

    cursor: pointer;

    box-shadow: 0 3px 10px rgba(0,0,0,0.10);

    transition: all 0.2s ease;
}

.product-image-zoom-btn:hover {

    color: var(--theme-purple);
    transform: scale(1.05);
}

.product-detail-no-image {

    color: #bbb;
    font-size: 50px;
}


/* =========================================
   PRODUCT INFORMATION
========================================= */

.product-detail-info {

    padding: 5px 0 0 0;
}


/* PRE-ORDER */

.product-detail-preorder-tag {

    display: inline-block;

    padding: 5px 9px;

    margin-bottom: 8px;

    background: var(--theme-light-purple);
    color: var(--theme-dark-purple);

    border-radius: 4px;

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

    letter-spacing: 0.2px;
}


/* TITLE */

.product-detail-title {

    margin: 0 0 8px;

    color: #171717;

    font-family: var(--font-heading);

    font-size: 26px;
    line-height: 1.3;

    font-weight: 600;
}


/* =========================================
   PRICE
========================================= */

.product-detail-price-wrap {

    margin-bottom: 15px;
}

.product-detail-price {

    color: var(--theme-dark-purple);

    font-size: 25px;
    line-height: 1.2;

    font-weight: 700;
}

.product-detail-discount-price {

    color: #e53935;

    font-size: 25px;
    line-height: 1.2;

    font-weight: 700;
}

.product-detail-original-price {

    margin-top: 4px;

    color: #999;

    font-size: 13px;

    text-decoration: line-through;
}


/* =========================================
   META
========================================= */

.product-detail-meta {

    margin-bottom: 22px;
}

.product-detail-meta-row {

    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 7px;

    font-size: 13px;
    color: #555;
}

.product-detail-meta-row i {

    width: 15px;

    color: var(--theme-purple);

    font-size: 13px;
}

.product-detail-meta-row strong {

    color: #333;
    font-weight: 500;
}


/* =========================================
   QUANTITY
========================================= */

.product-detail-quantity-row {

    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 18px;
}

.product-detail-quantity-label {

    font-size: 13px;
    color: #555;
}

.product-detail-quantity {

    display: flex;
    align-items: center;

    height: 38px;

    border: 1px solid #ddd;
    border-radius: 5px;

    overflow: hidden;
}

.product-detail-quantity button {

    width: 35px;
    height: 100%;

    border: none;
    background: #fff;

    color: #444;

    font-size: 16px;

    cursor: pointer;
}

.product-detail-quantity button:hover {

    background: var(--theme-light-purple);
    color: var(--theme-purple);
}

.product-detail-quantity span {

    min-width: 32px;

    text-align: center;

    font-size: 13px;
    color: #333;
}

.product-detail-max {

    font-size: 12px;
    color: #888;
}


/* =========================================
   CART BUTTON
========================================= */

.product-detail-cart-btn,
.product-detail-notify-btn {

    width: 100%;
    height: 48px;

    border-radius: 5px;

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

    gap: 8px;

    font-family: var(--font-body);

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

    cursor: pointer;

    transition: all 0.2s ease;

    box-sizing: border-box;
}

.product-detail-cart-btn {

    border: 1px solid var(--theme-purple);

    background: var(--theme-purple);

    color: #fff;
}

.product-detail-cart-btn:hover {

    background: var(--theme-dark-purple);
    border-color: var(--theme-dark-purple);
}

.product-detail-notify-btn {

    border: 1px solid #999;

    background: #fff;

    color: #555;
}

.product-detail-notify-btn:hover {

    background: #f7f7f7;
}


/* =========================================
   WISHLIST
========================================= */

.product-detail-wishlist-btn {

    width: 100%;
    height: 48px;

    margin-top: 9px;

    border: 1px solid var(--theme-purple);
    border-radius: 5px;

    background: #fff;

    color: var(--theme-dark-purple);

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

    gap: 8px;

    font-family: var(--font-body);

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

    cursor: pointer;

    transition: all 0.2s ease;
}

.product-detail-wishlist-btn:hover {

    background: var(--theme-light-purple);
}


/* =========================================
   SHARE
========================================= */

.product-detail-share {

    display: flex;
    align-items: center;

    gap: 18px;

    margin-top: 20px;
}

.product-detail-share > span {

    font-size: 12px;
    color: #666;
}

.product-detail-share-icons {

    display: flex;
    align-items: center;

    gap: 18px;
}

.product-detail-share-icons button {

    width: 20px;
    height: 20px;

    padding: 0;

    border: none;
    background: transparent;

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

    color: #555;

    font-size: 15px;

    cursor: pointer;

    transition: color 0.2s ease;
}

.product-detail-share-icons button:hover {

    color: var(--theme-purple);
}


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

@media(max-width: 900px){

    .product-detail-top {

        grid-template-columns: 1fr;

        gap: 30px;
    }

    .product-detail-image {

        max-width: 600px;
        margin: 0 auto;
    }

}

@media(max-width: 600px){

    .product-detail-title {

        font-size: 22px;
    }

    .product-detail-price,
    .product-detail-discount-price {

        font-size: 22px;
    }

    .product-detail-share {

        flex-wrap: wrap;
    }

}

/* =========================================
   PRODUCT DETAIL STATUS TAGS
========================================= */

.product-detail-stock-tag {

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

    padding: 5px 9px;
    margin-bottom: 8px;

    border-radius: 4px;

    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.2px;
}


/* PRE-ORDER */

.product-detail-stock-tag.pre-order {

    background: #F6EEFF;
    color: #9C5FE0;
}


/* ON-HAND */

.product-detail-stock-tag.on-hand {

    background: #EEF9F1;
    color: #2E8B57;
}


/* DISCOUNTED */

.product-detail-stock-tag.discounted {

    background: #FFF1F1;
    color: #E53935;
}


/* OUT OF STOCK */

.product-detail-stock-tag.out-of-stock {

    background: #F2F2F2;
    color: #777;
}

/* =========================================
   PRODUCT DETAIL LOWER SECTIONS
========================================= */

.product-detail-sections {
    width:100%;
    margin-bottom:60px;
}

.product-detail-section {
    width:100%;
    margin-bottom:40px;
}

.product-detail-section-title {
    margin:0 0 18px;
    color:#222;
    font-family:var(--font-heading);
    font-size:20px;
    line-height:1.3;
    font-weight:600;
}

.product-detail-additional-images {
    width:100%;
}

.product-detail-additional-images img {
    display:block;
    width:100%;
    height:auto;
    margin-bottom:15px;
}

.product-detail-description {
    color:#555;
    font-family:var(--font-body);
    font-size:14px;
    line-height:1.7;
}

.product-detail-fixed-image {
    width:100%;
}

.product-detail-fixed-image img {
    display:block;
    width:100%;
    height:auto;
}

/* =========================================
   PRODUCT DETAIL TABS
========================================= */

.product-detail-tabs {
    width:100%;
    margin-bottom:60px;
}

.product-detail-tab-buttons {
    display:flex;
    align-items:center;
    gap:0;
    border-bottom:1px solid #e5e5e5;
    margin-bottom:18px;
}

.product-detail-tab {
    position:relative;
    border:none;
    background:transparent;
    padding:12px 18px;
    font-family:var(--font-body);
    font-size:12px;
    font-weight:500;
    color:#777;
    cursor:pointer;
    transition:color 0.2s ease;
}

.product-detail-tab:first-child {
    padding-left:0;
}

.product-detail-tab:hover {
    color:var(--theme-purple);
}

.product-detail-tab.active {
    color:var(--theme-dark-purple);
    font-weight:600;
}

.product-detail-tab.active::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:2px;
    background:var(--theme-purple);
}

.product-detail-tab-content {
    width:100%;
}

.product-detail-tab-content img {
    display:block;
    width:100%;
    height:auto;
}

.product-detail-tab-content#productDetails img {
    margin:0 auto 15px;
}

.product-detail-tab-content#description {
    color:#555;
    font-family:var(--font-body);
    font-size:14px;
    line-height:1.7;
}

.product-detail-no-description-image {
    padding:40px 20px;
    text-align:center;
    color:#999;
    font-size:13px;
}

/* =========================================
   PRODUCT DETAIL REVIEWS
========================================= */

.product-detail-reviews {
    width:100%;
    margin-bottom:60px;
}

.product-detail-review-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}

.product-detail-review-count {
    font-family:var(--font-heading);
    font-size:20px;
    font-weight:600;
    color:#222;
    margin-bottom:8px;
}

.product-detail-review-rating {
    display:flex;
    align-items:center;
    gap:10px;
}

.product-detail-review-rating strong {
    font-size:24px;
    font-weight:700;
    color:#333;
}

.product-detail-review-stars {
    display:flex;
    gap:3px;
    color:var(--theme-purple);
    font-size:15px;
}


/* Review cards */

.product-detail-reviews-scroll {
    display:flex;
    gap:18px;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:8px;
    scroll-behavior:smooth;
}

.product-detail-reviews-scroll::-webkit-scrollbar {
    height:6px;
}

.product-detail-reviews-scroll::-webkit-scrollbar-track {
    background:#f2f2f2;
    border-radius:10px;
}

.product-detail-reviews-scroll::-webkit-scrollbar-thumb {
    background:#d5c0eb;
    border-radius:10px;
}

.product-detail-review-card {
    flex:0 0 calc((100% - 36px) / 3);
    min-height:170px;
    padding:20px;
    border:1px solid #e8e8e8;
    border-radius:8px;
    background:#fff;
    box-sizing:border-box;
}

.product-detail-review-card-stars {
    display:flex;
    gap:3px;
    margin-bottom:12px;
    color:var(--theme-purple);
    font-size:13px;
}

.product-detail-review-title {
    margin-bottom:8px;
    color:#222;
    font-family:var(--font-heading);
    font-size:14px;
    font-weight:600;
}

.product-detail-review-text {
    color:#666;
    font-family:var(--font-body);
    font-size:13px;
    line-height:1.6;
}


/* No reviews */

.product-detail-no-reviews {
    padding:45px 20px;
    border:1px solid #e8e8e8;
    border-radius:8px;
    text-align:center;
}

.product-detail-no-reviews-title {
    margin-bottom:6px;
    color:#333;
    font-family:var(--font-heading);
    font-size:17px;
    font-weight:600;
}

.product-detail-no-reviews-text {
    margin-bottom:18px;
    color:#888;
    font-size:13px;
}

.product-detail-write-review-btn {
    height:38px;
    padding:0 20px;
    border:1px solid var(--theme-purple);
    border-radius:5px;
    background:#fff;
    color:var(--theme-dark-purple);
    font-family:var(--font-body);
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s ease;
}

.product-detail-write-review-btn:hover {
    background:var(--theme-light-purple);
}


@media(max-width:900px){

    .product-detail-review-card {
        flex:0 0 calc((100% - 18px) / 2);
    }

}

@media(max-width:600px){

    .product-detail-review-header {
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
    }

    .product-detail-rating-breakdown {
        width:100%;
        max-width:300px;
    }

    .product-detail-review-card {
        flex:0 0 100%;
    }

}

.product-detail-review-header {
    display:flex;
    align-items:center;
    gap:70px;
    margin-bottom:20px;
}

.product-detail-review-summary {
    min-width:190px;
}

.product-detail-review-count {
    font-family:var(--font-heading);
    font-size:20px;
    font-weight:600;
    color:#222;
    margin-bottom:6px;
}

.product-detail-review-rating {
    display:flex;
    align-items:center;
    gap:9px;
}

.product-detail-review-rating strong {
    font-size:24px;
    font-weight:700;
    color:#333;
}

.product-detail-review-stars {
    display:flex;
    gap:2px;
    color:var(--theme-purple);
    font-size:15px;
}

.product-detail-review-based {
    margin-top:4px;
    color:#888;
    font-size:12px;
}


/* Rating breakdown */

.product-detail-rating-breakdown {
    width:280px;
}

.product-detail-rating-row {
    display:flex;
    align-items:center;
    gap:8px;
    height:20px;
}

.product-detail-rating-number {
    width:35px;
    flex-shrink:0;
    color:#555;
    font-size:12px;
    text-align:left;
}

.product-detail-rating-number i {
    color:var(--theme-purple);
    font-size:10px;
}

.product-detail-rating-bar {
    flex:1;
    height:6px;
    background:#ededed;
    border-radius:10px;
    overflow:hidden;
}

.product-detail-rating-bar-fill {
    height:100%;
    background:var(--theme-purple);
    border-radius:10px;
}

.product-detail-rating-count {
    width:20px;
    color:#666;
    font-size:12px;
    text-align:right;
}

/* =========================================
   PRODUCT REVIEW SLIDER
========================================= */

.product-detail-reviews-slider {
    position:relative;
    display:flex;
    align-items:center;
    gap:15px;
    width:100%;
}

.product-detail-reviews-scroll {
    display:flex;
    gap:18px;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scrollbar-width:none;
}

.product-detail-reviews-scroll::-webkit-scrollbar {
    display:none;
}

.product-detail-review-card {
    flex:0 0 calc((100% - 36px) / 3);
    min-height:170px;
    padding:20px;
    border:1px solid #e8e8e8;
    border-radius:8px;
    background:#fff;
    box-sizing:border-box;
}

.product-detail-review-arrow {
    flex:0 0 36px;
    width:36px;
    height:36px;
    border:1px solid #ddd;
    border-radius:50%;
    background:#fff;
    color:#555;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    transition:all 0.2s ease;
    z-index:2;
}

.product-detail-review-arrow:hover {
    color:var(--theme-purple);
    border-color:var(--theme-purple);
    background:var(--theme-light-purple);
}

.product-detail-write-review-wrap {
    display:flex;
    justify-content:flex-end;
    margin-top:18px;
}

/* =========================================
   WRITE REVIEW MODAL
========================================= */

.review-modal {
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;
}

.review-modal-overlay {
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45);
}

.review-modal-box {
    position:relative;
    width:90%;
    max-width:520px;
    max-height:90vh;
    overflow-y:auto;
    margin:5vh auto 0;
    padding:30px;
    background:#fff;
    border-radius:10px;
    box-shadow:0 10px 40px rgba(0,0,0,0.18);
    box-sizing:border-box;
}

.review-modal-close {
    position:absolute;
    top:15px;
    right:15px;
    width:32px;
    height:32px;
    border:none;
    background:transparent;
    color:#777;
    font-size:16px;
    cursor:pointer;
}

.review-modal-close:hover {
    color:#333;
}

.review-modal-title {
    margin-bottom:5px;
    color:#222;
    font-family:var(--font-heading);
    font-size:21px;
    font-weight:600;
}

.review-modal-product {
    margin-bottom:24px;
    color:#888;
    font-size:12px;
}

.review-form-group {
    margin-bottom:18px;
}

.review-form-group label {
    display:block;
    margin-bottom:7px;
    color:#444;
    font-size:13px;
    font-weight:500;
}

.review-form-group label span {
    color:#e53935;
}

.review-star-selector {
    display:flex;
    gap:6px;
}

.review-star-selector button {
    padding:0;
    border:none;
    background:transparent;
    color:var(--theme-purple);
    font-size:25px;
    cursor:pointer;
}

.review-form-group input,
.review-form-group textarea {
    width:100%;
    padding:11px 12px;
    border:1px solid #ddd;
    border-radius:5px;
    background:#fff;
    color:#333;
    font-family:var(--font-body);
    font-size:13px;
    box-sizing:border-box;
    outline:none;
}

.review-form-group input:focus,
.review-form-group textarea:focus {
    border-color:var(--theme-purple);
}

.review-form-group textarea {
    resize:vertical;
    min-height:110px;
}

.review-submit-btn {
    width:100%;
    height:44px;
    margin-top:5px;
    border:1px solid var(--theme-purple);
    border-radius:5px;
    background:var(--theme-purple);
    color:#fff;
    font-family:var(--font-body);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s ease;
}

.review-submit-btn:hover {
    background:var(--theme-dark-purple);
    border-color:var(--theme-dark-purple);
}

/* =========================================
   PRODUCT RECOMMENDATIONS
========================================= */

.product-detail-recommendations {
    width:100%;
    margin-bottom:60px;
}

.product-detail-recommendations-title {
    margin-bottom:20px;
    color:#222;
    font-family:var(--font-heading);
    font-size:20px;
    font-weight:600;
}

.product-detail-recommendations-grid {
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:20px;
    width:100%;
}

.product-detail-recommendations-grid .product-card {
    width:100%;
}


@media(max-width:1200px){

    .product-detail-recommendations-grid {
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }

}


@media(max-width:900px){

    .product-detail-recommendations-grid {
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

}


@media(max-width:600px){

    .product-detail-recommendations-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

}

/* Wishlist Modal */
.wishlist-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.wishlist-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.wishlist-modal-box {
    position: relative;
    width: calc(100% - 30px);
    max-width: 420px;
    margin: 10vh auto 0;
    padding: 24px;
    background: var(--main-bg);
    border: 1px solid var(--theme-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.wishlist-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.wishlist-modal-header h3 {
    margin: 0;
    color: var(--main-text);
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
}

.wishlist-modal-header button {
    border: none;
    background: transparent;
    color: var(--sec-text);
    font-size: 20px;
    cursor: pointer;
}

.wishlist-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    margin-bottom: 18px;
    border: 1px solid var(--theme-purple);
    border-radius: 8px;
    background: var(--theme-light-purple);
    color: var(--theme-dark-purple);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.wishlist-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.wishlist-loading {
    padding: 20px 0;
    color: var(--sec-text);
    text-align: center;
    font-size: var(--font-small);
}


.wishlist-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 12px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: var(--main-bg);
    color: var(--main-text);
    text-align: left;
    font-family: var(--font-body);
    font-size: var(--font-body-size);
    cursor: pointer;
    transition: background 0.2s ease;
}

.wishlist-option:hover {
    background: var(--theme-light-purple);
}

.wishlist-option span {
    flex: 1;
}

.wishlist-option > i:first-child {
    color: var(--theme-purple);
    font-size: 16px;
}

.wishlist-option > i:last-child {
    color: var(--mute-text);
    font-size: 12px;
}

.wishlist-empty {
    padding: 20px 10px;
    color: var(--sec-text);
    text-align: center;
    font-size: var(--font-small);
}


/* EMPTY CART PAGE */

.empty-cart-page {
    width: 100%;
    min-height: 65vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 60px;
    text-align: center;
    box-sizing: border-box;
}

.empty-cart-illustration,
.empty-cart-heading-wrap {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0;
}

.empty-cart-illustration {
    margin-bottom: 20px;
}

.empty-cart-icon {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

.empty-cart-heading-wrap {
    margin-bottom: 18px;
}

.empty-cart-heading {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

.empty-cart-message,
.empty-cart-description {
    display: block;
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    color: #21145f;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
    text-align: center;
}

.empty-cart-description {
    margin-top: 2px;
    margin-bottom: 28px;
}

.empty-cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: auto;
    min-width: 300px;
    max-width: 100%;
    padding: 17px 30px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(110deg, #9650df, #a044df);
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(128, 80, 223, 0.22);
    box-sizing: border-box;
}

.empty-cart-button:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

@media (max-width: 576px) {
    .empty-cart-page {
        min-height: 60vh;
        padding: 30px 12px 45px;
    }

    .empty-cart-icon {
        max-width: 300px;
    }

    .empty-cart-heading {
        max-width: 100%;
    }

    .empty-cart-message,
    .empty-cart-description {
        font-size: 15px;
        line-height: 1.6;
    }

    .empty-cart-description {
        margin-bottom: 24px;
    }

    .empty-cart-button {
        width: 100%;
        max-width: 310px;
        min-width: 0;
        padding: 15px 20px;
        gap: 10px;
        font-size: 16px;
    }
}


.add-to-cart-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(30, 25, 40, 0.55);
}

.add-to-cart-popup {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 36px 28px 28px;
    border-radius: 18px;
    background: #faf6f0;
    color: #30283e;
    text-align: center;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2);
}

.add-to-cart-close {
    position: absolute;
    top: 10px;
    right: 15px;
    border: 0;
    background: transparent;
    color: #62596d;
    font-size: 28px;
    cursor: pointer;
}

.add-to-cart-icon {
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #e9e0f5;
    color: #7451a6;
    font-size: 25px;
}

.add-to-cart-popup h2 {
    margin: 0 0 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 23px;
    font-weight: 600;
}

.add-to-cart-popup p {
    margin: 0 0 24px;
    color: #6c6475;
    font-size: 14px;
}

.add-to-cart-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.add-to-cart-actions button {
    width: 100%;
    min-height: 46px;
    border-radius: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.add-to-cart-actions button:hover {
    opacity: 0.88;
}

.add-to-cart-go {
    border: 1px solid #7451a6;
    background: #7451a6;
    color: #fff;
}

.add-to-cart-continue {
    border: 1px solid #d9cde8;
    background: transparent;
    color: #7451a6;
}

@media (max-width: 480px) {
    .add-to-cart-popup {
        padding: 32px 20px 22px;
    }
}


.cart-page {
    padding-top: 35px;
    padding-bottom: 60px;
}

.cart-page-heading {
    margin-bottom: 28px;
}

.cart-page-heading h1 {
    margin: 0 0 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    color: #30283e;
}

.cart-page-heading p {
    margin: 0;
    color: #766d7d;
    font-size: 14px;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 28px;
    align-items: start;
}

.cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cart-item {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border: 1px solid #e8e0ed;
    border-radius: 12px;
    background: #fffdfb;
}

.cart-item-image {
    display: flex;
    width: 100px;
    height: 110px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f6f1f7;
    color: #8c7a9d;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.cart-item-details {
    min-width: 0;
}

.cart-item-name {
    display: block;
    margin-bottom: 10px;
    color: #30283e;
    font-weight: 600;
    text-decoration: none;
}

.cart-item-price {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    margin-bottom: 10px;
}

.cart-item-current-price {
    color: #7451a6;
    font-weight: 600;
}

.cart-item-old-price {
    color: #93899a;
    font-size: 13px;
    text-decoration: line-through;
}

.cart-item-quantity {
    color: #766d7d;
    font-size: 13px;
}

.cart-item-total {
    align-self: start;
    padding-top: 4px;
    color: #30283e;
    font-weight: 600;
    white-space: nowrap;
}

.cart-summary {
    padding: 24px;
    border: 1px solid #e8e0ed;
    border-radius: 12px;
    background: #fffdfb;
}

.cart-summary h2 {
    margin: 0 0 22px;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #30283e;
}

.cart-summary-row,
.cart-summary-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    color: #665d70;
    font-size: 14px;
}

.cart-summary-total {
    padding-top: 18px;
    border-top: 1px solid #e8e0ed;
    color: #30283e;
    font-size: 16px;
    font-weight: 700;
}

.cart-summary-note {
    color: #766d7d;
    font-size: 12px;
    line-height: 1.6;
}

.cart-checkout-btn {
    width: 100%;
    min-height: 46px;
    margin-top: 12px;
    border: 0;
    border-radius: 8px;
    background: #7451a6;
    color: #fff;
    font-weight: 600;
    opacity: 0.55;
    cursor: not-allowed;
}

.cart-continue-link {
    display: block;
    margin-top: 16px;
    color: #7451a6;
    text-align: center;
    font-size: 14px;
    text-decoration: none;
}

@media (max-width: 850px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        max-width: none;
    }
}

@media (max-width: 520px) {
    .cart-item {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .cart-item-image {
        width: 76px;
        height: 90px;
    }

    .cart-item-total {
        grid-column: 2;
        padding-top: 0;
    }

    .cart-page-heading h1 {
        font-size: 25px;
    }
}


.cart-page {
    background: #fcfaff;
    padding: 30px 3% 40px;
    color: #101638;
    font-family: 'Inter', sans-serif;
}

.cart-page * {
    box-sizing: border-box;
}

.cart-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.cart-heading {
    display: flex;
    align-items: center;
    gap: 18px;
}

.cart-heading-icon {
    color: #4c5685;
    font-size: 54px;
}

.cart-heading h1 {
    font-size: 32px;
    font-weight: 750;
    margin: 0 0 6px;
}

.cart-heading p {
    margin: 0;
    color: #35416d;
    font-size: 16px;
}

.cart-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    border: 1px solid #d8b8ff;
    border-radius: 9px;
    color: #843fe0;
    background: transparent;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(280px, 0.95fr);
    gap: 16px;
    align-items: start;
}

.cart-items-panel,
.cart-summary,
.cart-coupon {
    background: #fff;
    border: 1px solid #eee8fb;
    border-radius: 13px;
    box-shadow: 0 3px 16px rgba(82, 51, 135, 0.04);
    overflow: hidden;
}

.cart-table-head {
    display: grid;
    grid-template-columns: 30px minmax(150px, 1fr) 85px 105px 85px 22px;
    gap: 12px;
    align-items: center;
    padding: 15px 20px;
    background: #f5effd;
    font-size: 13px;
    font-weight: 700;
}

.cart-select-all {
    accent-color: #8e4ddd;
    width: 17px;
    height: 17px;
}

.cart-item {
    display: grid;
    grid-template-columns: 30px minmax(150px, 1fr) 85px 105px 85px 22px;
    gap: 12px;
    align-items: center;
    padding: 17px 20px;
    border-bottom: 1px solid #eeeaf5;
    min-height: 125px;
}

.cart-item:last-of-type {
    border-bottom: 0;
}

.cart-item-check {
    width: 17px;
    height: 17px;
    accent-color: #8e4ddd;
}

.cart-product {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

.cart-product img {
    width: 108px;
    height: 96px;
    object-fit: contain;
    background: #f5f3f9;
    border-radius: 10px;
    flex-shrink: 0;
}

.cart-product-info {
    min-width: 0;
}

.cart-product-name {
    color: #111735;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 3px;
}

.cart-product-version {
    font-size: 13px;
    color: #50577c;
    margin-bottom: 8px;
}

.cart-stock {
    display: inline-block;
    color: #137b37;
    background: #e8f8ed;
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 12px;
}

.cart-price,
.cart-line-total {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.cart-old-price {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #8b8da5;
    text-decoration: line-through;
    margin-top: 3px;
}

.cart-quantity {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ded5ef;
    border-radius: 9px;
    height: 37px;
    overflow: hidden;
}

.cart-quantity button {
    width: 29px;
    height: 35px;
    border: 0;
    background: #fff;
    color: #515980;
    font-size: 17px;
}

.cart-quantity span {
    min-width: 30px;
    text-align: center;
    font-size: 13px;
}

.cart-remove {
    border: 0;
    background: transparent;
    color: #50577c;
    font-size: 19px;
    cursor: pointer;
}

.cart-remove-selected {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    border-top: 1px solid #eeeaf5;
    color: #50577c;
    font-size: 13px;
}

.cart-summary {
    padding: 18px;
}

.cart-summary h2 {
    font-size: 18px;
    margin: 0 0 23px;
    font-weight: 750;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    margin-bottom: 13px;
}

.cart-summary-row strong {
    white-space: nowrap;
}

.cart-muted {
    color: #6f7390;
}

.cart-discount {
    color: #15913a;
}

.cart-summary-divider {
    border: 0;
    border-top: 1px solid #eeeaf5;
    margin: 20px 0;
}

.cart-total-row {
    align-items: flex-start;
    margin-bottom: 18px;
}

.cart-total-row > strong {
    font-size: 25px;
    line-height: 1.1;
}

.cart-total-caption {
    font-size: 11px;
    font-weight: 400;
    color: #666b88;
    display: block;
    margin-top: 6px;
    text-align: right;
}

.cart-primary-btn,
.cart-secondary-btn {
    width: 100%;
    min-height: 46px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    margin-top: 8px;
}

.cart-primary-btn {
    color: #fff;
    background: linear-gradient(100deg, #9c56e8, #8241d7);
    border: 1px solid #8c4cde;
}

.cart-secondary-btn {
    color: #8743dd;
    background: #f5edff;
    border: 1px solid #cda7fa;
}

.cart-free-shipping {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 16px;
    padding: 14px;
    border-radius: 10px;
    background: #f5effd;
}

.cart-free-shipping i {
    font-size: 30px;
    color: #9450e2;
}

.cart-free-shipping strong {
    display: block;
    font-size: 13px;
    color: #8743dd;
    margin-bottom: 4px;
}

.cart-free-shipping small {
    font-size: 11px;
}

.cart-coupon {
    margin-top: 10px;
    padding: 17px;
}

.cart-coupon h3 {
    font-size: 14px;
    margin: 0 0 14px;
}

.cart-coupon-form {
    display: flex;
    gap: 7px;
}

.cart-coupon-form input {
    min-width: 0;
    width: 100%;
    border: 1px solid #ded5ef;
    border-radius: 8px;
    padding: 11px;
    font-size: 12px;
}

.cart-coupon-form button {
    border: 0;
    border-radius: 8px;
    background: #b18add;
    color: white;
    padding: 0 15px;
}

.cart-recommendations {
    margin-top: 34px;
}

.cart-recommendations h2 {
    font-size: 21px;
    margin: 0 0 18px;
}

.cart-empty {
    text-align: center;
    padding: 55px 20px;
}

.cart-empty img {
    max-width: 180px;
    max-height: 150px;
    object-fit: contain;
}

.cart-empty h2 {
    margin: 15px 0 8px;
    font-size: 24px;
}

.cart-empty p {
    color: #686d8d;
    margin-bottom: 22px;
}

.cart-empty .cart-primary-btn {
    max-width: 220px;
    margin: 0 auto;
}

@media (max-width: 1000px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-table-head,
    .cart-item {
        grid-template-columns: 25px minmax(140px, 1fr) 75px 100px 75px 20px;
        gap: 8px;
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (max-width: 650px) {
    .cart-page {
        padding: 22px 12px 30px;
    }

    .cart-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .cart-heading-icon {
        font-size: 40px;
    }

    .cart-heading h1 {
        font-size: 25px;
    }

    .cart-table-head {
        display: none;
    }

    .cart-item {
        grid-template-columns: 22px minmax(0, 1fr) 22px;
        gap: 9px;
        padding: 15px 12px;
    }

    .cart-product {
        grid-column: 2;
    }

    .cart-item-check {
        grid-column: 1;
        grid-row: 1;
    }

    .cart-remove {
        grid-column: 3;
        grid-row: 1;
    }

    .cart-product img {
        width: 82px;
        height: 82px;
    }

    .cart-price,
    .cart-quantity,
    .cart-line-total {
        grid-row: 2;
    }

    .cart-price {
        grid-column: 2;
    }

    .cart-quantity {
        grid-column: 2;
        justify-self: start;
        margin-top: 40px;
    }

    .cart-line-total {
        grid-column: 2;
        margin-top: 40px;
        margin-left: 115px;
    }

    .cart-heading p {
        font-size: 14px;
    }
}
.cart-heading-icon {
    width: 70px;
    height: 70px;
    object-fit: contain;
    flex-shrink: 0;
}


.cart-recommendations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
}

.cart-recommendations-header h2 {
    font-size: 21px;
    font-weight: 750;
    margin: 0;
}

.cart-recommendations-header h2 i {
    color: #f05c83;
    margin-right: 5px;
}

.cart-view-all {
    color: #8a42dc;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.cart-recommendations-slider {
    position: relative;
}

.cart-recommendations-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.cart-recommendation-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #f0eafa;
    border-radius: 12px;
    background: #fff;
    padding: 12px;
}

.cart-recommendation-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 145px;
    background: #f6f1fc;
    border-radius: 9px;
    margin-bottom: 12px;
    overflow: hidden;
}

.cart-recommendation-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.cart-recommendation-wishlist {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
    border: 0;
    background: rgba(255, 255, 255, 0.9);
    color: #35416d;
    font-size: 17px;
    cursor: pointer;
    padding: 4px;
}

.cart-recommendation-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
}

.cart-recommendation-title {
    color: #101638;
    font-size: 12px;
    line-height: 1.5;
    text-decoration: none;
    min-height: 36px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-recommendation-price {
    color: #101638;
    font-size: 15px;
    font-weight: 750;
}

.cart-recommendation-prices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.cart-recommendation-old-price {
    color: #8b8da5;
    font-size: 11px;
    text-decoration: line-through;
}

.cart-recommendation-add {
    width: 100%;
    padding: 10px 6px;
    border: 0;
    border-radius: 8px;
    background: #f1e7fc;
    color: #853fd8;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    margin-top: auto;
}

.cart-recommendation-add:hover {
    background: #e6d3fa;
}

.cart-recommendation-arrow {
    position: absolute;
    z-index: 2;
    top: 42%;
    width: 40px;
    height: 40px;
    border: 1px solid #eee8f7;
    border-radius: 50%;
    background: #fff;
    color: #101638;
    box-shadow: 0 2px 10px rgba(20, 20, 50, 0.12);
    cursor: pointer;
}

.cart-recommendation-arrow.left {
    left: -18px;
}

.cart-recommendation-arrow.right {
    right: -18px;
}

@media (max-width: 900px) {
    .cart-recommendations-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 500px) {
    .cart-recommendations-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .cart-recommendation-card {
        padding: 8px;
    }

    .cart-recommendation-image {
        height: 120px;
    }

    .cart-recommendation-arrow {
        width: 32px;
        height: 32px;
    }

    .cart-recommendation-arrow.left {
        left: -8px;
    }

    .cart-recommendation-arrow.right {
        right: -8px;
    }
}


.shipping-calculator {
    margin: -4px 0 16px;
    padding: 16px;
    background: #faf7f3;
    border: 1px solid #e9dfd5;
    border-radius: 10px;
}

.shipping-calculator[hidden] {
    display: none !important;
}

.shipping-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.shipping-field label {
    font-size: 13px;
    font-weight: 600;
    color: #40364a;
}

.shipping-field select,
.shipping-field input {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid #ded5cc;
    border-radius: 7px;
    background: #fff;
    color: #302b35;
    font: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.shipping-field select:disabled {
    background: #f0ede9;
    color: #888;
    cursor: not-allowed;
}

.shipping-submit-btn {
    width: 100%;
    margin-top: 2px;
    justify-content: center;
}

.shipping-calculator-message {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.shipping-calculator-message.error {
    color: #b42318;
}

.shipping-calculator-message.success {
    color: #287348;
}

    
/* =========================================
   CHECKOUT PAGE
========================================= */

.checkout-page {
    background: linear-gradient(135deg, #fbfaff 0%, #f7f5ff 100%);
    padding: 24px 20px 36px;
    min-height: 500px;
}

.checkout-container {
    max-width: 1400px;
    margin: 0 auto;
}

.checkout-page-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 22px;
    color: #11133e;
    font-family: var(--font-heading);
    font-size: 1.8rem;
}

.checkout-page-title > i {
    color: #9854ed;
    font-size: 2.1rem;
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(380px, 0.92fr);
    align-items: start;
    gap: 18px;
}

.checkout-left,
.checkout-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.checkout-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #ebe7f7;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 3px 12px rgba(56, 36, 100, 0.035);
    min-width: 0;
}

.checkout-card-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    color: #11133e;
}

.checkout-card-heading > i {
    color: #11133e;
    font-size: 1.35rem;
    width: 26px;
    text-align: center;
}

.checkout-card-heading h2 {
    margin: 0;
    color: #11133e;
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 700;
    flex: 1;
}

.checkout-card-heading h2 span {
    font-size: 0.9rem;
    font-weight: 500;
}

.checkout-text-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: #9148ed;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.checkout-info-panel {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: #f5efff;
    border-radius: 9px;
    padding: 15px 18px;
    color: #17183f;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.checkout-address-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkout-address-option {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid #e8e4f2;
    border-radius: 9px;
    cursor: pointer;
    color: #303153;
    font-size: 0.84rem;
    line-height: 1.55;
    min-width: 0;
}

.checkout-address-option.selected {
    border-color: #bf8cff;
    background: #fbf8ff;
}

.checkout-address-option input[type="radio"],
.checkout-payment-option input[type="radio"] {
    accent-color: #9650ed;
    width: 18px;
    height: 18px;
    margin: 4px 0 0;
}

.checkout-address-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.checkout-address-content strong {
    color: #15163f;
}

.checkout-default-tag {
    align-self: flex-start;
    background: #9854ed;
    color: white;
    border-radius: 4px;
    padding: 1px 8px;
    margin-bottom: 5px;
    font-size: 0.72rem;
}

.checkout-same-address {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
}

.checkout-same-address input {
    accent-color: #9650ed;
    width: 18px;
    height: 18px;
}

.checkout-notes {
    width: 100%;
    box-sizing: border-box;
    min-height: 90px;
    resize: vertical;
    border: 1px solid #e4dff0;
    border-radius: 8px;
    padding: 12px;
    font: inherit;
    font-size: 0.85rem;
    color: #252548;
    background: #fff;
}

.checkout-notes:focus,
.checkout-inline-form input:focus {
    outline: 2px solid #d8baff;
    border-color: #a86df0;
}

.checkout-notes-count {
    text-align: right;
    color: #77779b;
    font-size: 0.72rem;
    margin-top: 4px;
}

.checkout-item-count {
    color: #9148ed;
    font-size: 0.82rem;
    font-weight: 600;
}

.checkout-empty {
    padding: 20px 10px;
    color: #77779b;
    font-size: 0.85rem;
    text-align: center;
    background: #fbfaff;
    border-radius: 8px;
}

.checkout-summary-lines {
    border-top: 1px solid #eeeaf6;
    margin-top: 14px;
    padding-top: 10px;
}

.checkout-summary-row,
.checkout-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #222348;
    font-size: 0.86rem;
    padding: 5px 0;
}

.checkout-summary-row strong {
    color: #11133e;
    text-align: right;
}

.checkout-summary-row .checkout-discount {
    color: #18a34a;
}

.checkout-total-row {
    border-top: 1px solid #e8e3f2;
    margin-top: 8px;
    padding-top: 14px;
    font-size: 1rem;
    font-weight: 700;
}

.checkout-total-row .checkout-grand-total {
    color: #11133e;
    font-size: 1.45rem;
}

.checkout-tax-note {
    text-align: right;
    margin: 0;
    color: #77779b;
    font-size: 0.72rem;
}

.checkout-compact-card {
    padding: 14px;
}

.checkout-compact-card .checkout-card-heading {
    margin-bottom: 12px;
}

.checkout-inline-form {
    display: flex;
    gap: 8px;
    min-width: 0;
}

.checkout-inline-form input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    border: 1px solid #e4dff0;
    border-radius: 7px;
    padding: 11px 12px;
    font: inherit;
    font-size: 0.84rem;
    background: white;
}

.checkout-primary-button {
    flex-shrink: 0;
    border: 0;
    border-radius: 7px;
    background: #9450e5;
    color: white;
    padding: 0 18px;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.checkout-primary-button:hover,
.checkout-place-order:hover {
    background: #7938c8;
}

.checkout-store-credit {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #56567d;
    font-size: 0.8rem;
}

.checkout-payment-options {
    border: 1px solid #e8e1f3;
    border-radius: 9px;
    overflow: hidden;
}

.checkout-payment-option {
    display: grid;
    grid-template-columns: 20px 28px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 13px 12px;
    border-bottom: 1px solid #eeeaf5;
    cursor: pointer;
}

.checkout-payment-option:last-child {
    border-bottom: 0;
}

.checkout-payment-option.selected {
    background: #f7f0ff;
    outline: 1px solid #c99aff;
    outline-offset: -1px;
}

.checkout-payment-option > i {
    color: #11133e;
    font-size: 1.25rem;
    text-align: center;
}

.checkout-payment-option span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.checkout-payment-option strong {
    color: #11133e;
    font-size: 0.82rem;
}

.checkout-payment-option small {
    color: #69698d;
    font-size: 0.72rem;
}

.checkout-place-order {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
    border: 0;
    border-radius: 8px;
    background: #9450e5;
    color: white;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.checkout-terms {
    margin: 12px 0 0;
    color: #69698d;
    font-size: 0.7rem;
    line-height: 1.6;
    text-align: center;
}

.checkout-terms a {
    color: #9148ed;
    font-weight: 600;
}

@media (max-width: 900px) {
    .checkout-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .checkout-right {
        order: -1;
    }
}

@media (max-width: 600px) {
    .checkout-page {
        padding: 18px 12px 28px;
    }

    .checkout-page-title {
        font-size: 1.5rem;
    }

    .checkout-card {
        padding: 14px;
    }

    .checkout-card-heading {
        gap: 9px;
    }

    .checkout-card-heading h2 {
        font-size: 0.98rem;
    }

    .checkout-address-option {
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 9px;
        padding: 12px;
    }

    .checkout-address-option > .checkout-text-button {
        grid-column: 2;
        justify-self: start;
    }

    .checkout-same-address {
        width: 100%;
        margin-top: 5px;
    }

    .checkout-total-row .checkout-grand-total {
        font-size: 1.2rem;
    }

    .checkout-primary-button {
        padding: 0 13px;
    }
}

.checkout-no-address {
    padding: 16px;
    margin: 0;
    border-radius: 8px;
    background: #fbf8ff;
    color: #69698d;
    font-size: 0.88rem;
}

.checkout-info-panel i {
    margin-right: 6px;
    color: #9148ed;
}

/* Scrollable address sections on checkout */
.shipping-address-list,
.billing-address-list {
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: #c8b9d9 transparent;
}

/* Optional: style scrollbar in Chrome/Edge */
.shipping-address-list::-webkit-scrollbar,
.billing-address-list::-webkit-scrollbar {
    width: 6px;
}

.shipping-address-list::-webkit-scrollbar-thumb,
.billing-address-list::-webkit-scrollbar-thumb {
    background: #c8b9d9;
    border-radius: 10px;
}

.shipping-address-list::-webkit-scrollbar-track,
.billing-address-list::-webkit-scrollbar-track {
    background: transparent;
}


/* Checkout product items */
.checkout-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checkout-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eee7f4;
}

.checkout-item-image {
    width: 75px;
    height: 75px;
    flex: 0 0 75px;
    object-fit: contain;
    border-radius: 6px;
    background: #f8f5fb;
}

.checkout-item-details {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.checkout-item-details strong {
    font-size: 13px;
    line-height: 1.4;
}

.checkout-item-details span {
    font-size: 12px;
    color: #777;
}

.checkout-item-total {
    flex-shrink: 0;
    font-size: 13px;
    white-space: nowrap;
}
.checkout-recommended-courier {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 400;
    color: #81758f;
}
.checkout-cod-notice {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #9a5b19;
    background: #fff8ed;
    border: 1px solid #f3dfbf;
    border-radius: 6px;
    padding: 9px 11px;
}


/* Remove Store Credit Button */
#removeStoreCreditButton {
    margin-top: 10px;
    padding: 9px 14px;
    border: 1px solid #d8c5bd;
    border-radius: 8px;
    background-color: transparent;
    color: #8a5a50;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease;
}

#removeStoreCreditButton:hover {
    background-color: #f8eeeb;
    border-color: #c99e92;
    color: #704238;
}

#removeStoreCreditButton:focus-visible {
    outline: 2px solid #8a5a50;
    outline-offset: 3px;
}

#removeStoreCreditButton[hidden] {
    display: none;
}


#couponMessage {
    margin: 10px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

#removeCouponButton {
    margin-top: 10px;
    padding: 9px 14px;
    border: 1px solid #d8c5bd;
    border-radius: 8px;
    background: transparent;
    color: #8a5a50;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease;
}

#removeCouponButton:hover {
    background-color: #f8eeeb;
    border-color: #c99e92;
    color: #704238;
}

#removeCouponButton:focus-visible {
    outline: 2px solid #8a5a50;
    outline-offset: 3px;
}

#removeCouponButton[hidden] {
    display: none;
}


.checkout-address-option.selected:not(:has(input[type="radio"]:checked)) {
    border-color: #e5dfd5;
    background-color: #fff;
}

.checkout-address-option:has(input[type="radio"]:checked) {
    border-color: #b477e8;
    background-color: #fbf7ff;
}

/* Back in stock notification section */
.notify-section {
    width: 100%;
    margin-bottom: 12px;
    padding: 14px 12px 10px;
    border: 1px solid #eee8fa;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
}

.notify-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 6px 14px;
}

.notify-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5edff;
    color: #9654f5;
    font-size: 25px;
}

.notify-heading h3 {
    margin: 0 0 5px;
    color: #171321;
    font-size: 18px;
    font-weight: 700;
}

.notify-heading p {
    margin: 0;
    color: #29205c;
    font-size: 12px;
    line-height: 18px;
}

.notify-list {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 3px;
}

.notify-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    margin-bottom: 4px;
    padding: 6px 10px;
    border: 1px solid #f0ebf8;
    border-radius: 5px;
    box-sizing: border-box;
}

.notify-item:last-child {
    margin-bottom: 0;
}

.notify-product-image {
    width: 72px;
    min-width: 72px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notify-product-image img {
    max-width: 100%;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.notify-product-details {
    flex: 1;
    min-width: 0;
}

.notify-product-name {
    color: #171321;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    overflow-wrap: anywhere;
}

.notify-remove-btn {
    flex-shrink: 0;
    padding: 8px 12px;
    border: 1px solid #ff6377;
    border-radius: 4px;
    background: #fff;
    color: #ff334f;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

.notify-remove-btn i {
    margin-right: 5px;
}

.notify-remove-btn:hover {
    background: #fff2f4;
}

.notify-empty {
    padding: 25px 10px;
    text-align: center;
    color: #77718c;
    font-size: 13px;
}

.notify-empty i {
    color: #9654f5;
    font-size: 25px;
}

.notify-empty p {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .notify-section {
        padding: 12px 8px 8px;
    }

    .notify-header {
        gap: 10px;
        padding: 0 4px 12px;
    }

    .notify-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 21px;
    }

    .notify-heading h3 {
        font-size: 16px;
    }

    .notify-heading p {
        font-size: 11px;
    }

    .notify-list {
        max-height: 280px;
    }

    .notify-item {
        gap: 8px;
        padding: 6px;
    }

    .notify-product-image {
        width: 48px;
        min-width: 48px;
        height: 44px;
    }

    .notify-product-image img {
        max-height: 44px;
    }

    .notify-product-name {
        font-size: 11px;
    }

    .notify-remove-btn {
        padding: 7px 8px;
        font-size: 10px;
    }
}



/* ==========================================
   KPM MOBILE HOMEPAGE
   Mobile browsers only — desktop unchanged
   ========================================== */

@media (max-width: 768px) {

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

    .header-top-bar,
    .header-nav-bar {
        display: none !important;
    }

    .header-main-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        width: 100%;
        box-sizing: border-box;
        background: #fff;
    }


    .logo-area {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        min-width: 0;
        text-decoration: none;
    }

    .header-logo {
        width: 43px;
        height: 43px;
        object-fit: contain;
    }

    .site-title-area {
        display: none;
    }

    /* Search uses the remaining available space */
    .search-area {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        position: relative;
    }

    .search-form {
        display: flex;
        align-items: center;
        width: 100%;
        height: 38px;
        border: 1px solid #e5dcef;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
    }

    .search-input {
        width: 100%;
        min-width: 0;
        height: 100%;
        padding: 0 9px;
        border: 0;
        outline: none;
        background: transparent;
        font-size: 12px;
    }

    .search-button {
        flex: 0 0 36px;
        height: 100%;
        border: 0;
        background: #a56ae0;
        color: #fff;
        font-size: 15px;
    }

    .actions-area {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 0 0 auto;
    }

    .actions-area .user-greeting,
    .actions-area .action-item > span:not(.cart-badge) {
        display: none;
    }

    .actions-area .action-item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: #171321;
        text-decoration: none;
    }

    .actions-area .action-item > i,
    .cart-icon-wrapper > i {
        font-size: 21px;
    }

    .cart-icon-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .cart-badge {
        position: absolute;
        top: -9px;
        right: -8px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 17px;
        height: 17px;
        padding: 0 3px;
        border-radius: 50%;
        background: #a56ae0;
        color: #fff;
        font-size: 10px;
        line-height: 1;
    }
}

/* Mobile navigation additions only */
.mobile-menu-toggle,
.mobile-menu-panel,
.mobile-menu-backdrop {
    display: none;
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 30px;
        width: 30px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #171321;
        font-size: 23px;
        cursor: pointer;
    }

    .mobile-menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 9998;
        background: rgba(20, 15, 30, .4);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease;
    }

    .mobile-menu-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    .mobile-menu-panel {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        width: min(88vw, 380px);
        padding: 18px 16px;
        overflow-y: auto;
        background: #fff;
        box-shadow: 8px 0 24px rgba(0, 0, 0, .12);
        transform: translateX(-105%);
        transition: transform .25s ease;
    }

    .mobile-menu-panel.is-open {
        transform: translateX(0);
    }

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

    .mobile-menu-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 0 18px;
        border-bottom: 1px solid #eee8f5;
        font-size: 17px;
        font-weight: 700;
    }
    
        /* Home link in menu heading */
    .mobile-menu-heading .mobile-menu-link {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        width: auto;
        min-height: auto;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
        text-decoration: none;
        flex: 1;
    }

    /* Small logo icon */
    .mobile-menu-heading .mobile-menu-link img {
        display: block;
        width: 24px;
        height: 24px;
        max-width: 24px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .mobile-menu-heading .mobile-menu-link span {
        display: inline;
        font-size: 15px;
        font-weight: 600;
    }

    .mobile-menu-heading button {
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 50%;
        background: #f5effb;
        font-size: 18px;
    }

    .mobile-menu-accordion,
    .mobile-menu-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-height: 52px;
        padding: 12px 8px;
        border: 0;
        border-bottom: 1px solid #eeeaf2;
        background: #fff;
        color: #191522;
        font-size: 15px;
        text-align: left;
        text-decoration: none;
    }

    .mobile-menu-accordion > span,
    .mobile-menu-link > span {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-menu-accordion > span > i,
    .mobile-menu-link > i:first-child {
        width: 22px;
        font-size: 18px;
    }

    .mobile-menu-accordion.is-open {
        color: #702bbd;
        background: #f6effd;
    }

    .mobile-menu-accordion.is-open > i:last-child {
        transform: rotate(180deg);
    }

    .mobile-menu-submenu {
        display: none;
        padding: 4px 0 10px 10px;
    }

    .mobile-menu-submenu.is-open {
        display: block;
    }

    .mobile-menu-submenu a {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 44px;
        padding: 8px;
        border-bottom: 1px solid #f0edf3;
        color: #252032;
        font-size: 13px;
        text-decoration: none;
    }

    .mobile-menu-submenu a img {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

    .mobile-menu-submenu a span {
        flex: 1;
    }

    .mobile-menu-submenu a.mobile-view-all {
        color: #873de0;
        font-weight: 600;
    }

    .mobile-menu-link > i:last-child {
        font-size: 12px;
    }
}



/* =====================================================
   KPM HOME PAGE — MOBILE RESPONSIVE STYLES
   Desktop styles remain unchanged.
   ===================================================== */

@media screen and (max-width: 768px) {

    /* -----------------------------------------------
       1. PRE-ORDER AND ON-HAND SECTION LAYOUT
       ----------------------------------------------- */

    .home-products-section {
        width: 100%;
        box-sizing: border-box;
        padding: 12px 0 24px;
    }

    .home-products-section .home-products-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    .home-products-section .home-products-box {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 20px 14px !important;
        margin: 0 !important;
        border-radius: 24px;
        box-sizing: border-box;
    }

    /* Section heading and View All link */

    .home-products-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
        margin-bottom: 20px !important;
        box-sizing: border-box;
    }

    .home-products-header h2 {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 !important;
        font-size: 18px !important;
        line-height: 1.35 !important;
        font-weight: 700;
    }

    .home-products-header .view-all-btn {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 13px !important;
        line-height: 1.4;
        white-space: nowrap;
    }

    /* -----------------------------------------------
       2. PRE-ORDER AND ON-HAND CAROUSELS
       ----------------------------------------------- */

    #preorderSlider,
    #onhandSlider {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 12px !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;

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

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

        box-sizing: border-box !important;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #preorderSlider::-webkit-scrollbar,
    #onhandSlider::-webkit-scrollbar {
        display: none;
    }

    /* Each outer slide takes exactly half the available width */

    #preorderSlider > .home-product-slide,
    #onhandSlider > .home-product-slide {
        display: flex !important;
        flex: 0 0 calc((100% - 12px) / 2) !important;
        flex-direction: column !important;

        width: calc((100% - 12px) / 2) !important;
        min-width: calc((100% - 12px) / 2) !important;
        max-width: calc((100% - 12px) / 2) !important;

        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;

        position: relative !important;
        float: none !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;

        box-sizing: border-box !important;
        scroll-snap-align: start;
    }

    /* Product card stacks its content vertically */

    #preorderSlider .product-card,
    #onhandSlider .product-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;

        padding: 10px !important;
        margin: 0 !important;
        position: relative !important;
        box-sizing: border-box !important;
        overflow: hidden !important;

        border-radius: 20px;
    }

    /* Product label */

    #preorderSlider .product-label,
    #onhandSlider .product-label {
        align-self: flex-start;
        position: relative !important;
        z-index: 1;
        max-width: 100%;
        margin: 0 0 8px !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        padding: 6px 9px !important;
        box-sizing: border-box;
    }

    /* Image sits above product information */

    #preorderSlider .product-image,
    #onhandSlider .product-image {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        flex: 0 0 auto !important;

        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #preorderSlider .product-image img,
    #onhandSlider .product-image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }

    /* Product name, price and actions */

    #preorderSlider .product-content,
    #onhandSlider .product-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        flex: 1 1 auto !important;

        padding: 10px 2px 2px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #preorderSlider .product-title,
    #onhandSlider .product-title {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 2.7em;
        max-width: 100% !important;

        overflow: hidden !important;
        overflow-wrap: anywhere;

        font-size: 14px !important;
        line-height: 1.35 !important;
        font-weight: 600;
        text-decoration: none;
        box-sizing: border-box;
    }

    #preorderSlider .product-price,
    #onhandSlider .product-price {
        width: 100%;
        min-width: 0;
        margin-top: 6px !important;

        font-size: 15px !important;
        line-height: 1.35 !important;
        font-weight: 700;
        overflow-wrap: anywhere;
        box-sizing: border-box;
    }

    /* -----------------------------------------------
       3. ADD TO CART / PRE-ORDER AND WISHLIST BUTTONS
       ----------------------------------------------- */

    #preorderSlider .product-actions,
    #onhandSlider .product-actions,
    #featuredSlider .product-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 6px !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-top: 10px !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    #preorderSlider .product-actions .add-cart-btn,
    #onhandSlider .product-actions .add-cart-btn,
    #featuredSlider .product-actions .add-cart-btn {
        display: flex !important;
        flex: 1 1 0 !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 36px !important;
        height: auto !important;

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

        padding: 8px 5px !important;
        font-size: 10px !important;
        line-height: 1.3 !important;
        font-weight: 600;

        white-space: normal !important;
        overflow-wrap: anywhere;
        box-sizing: border-box !important;
        border-radius: 12px !important;
    }

    #preorderSlider .product-actions .wishlist-btn,
    #onhandSlider .product-actions .wishlist-btn,
    #featuredSlider .product-actions .wishlist-btn {
        display: flex !important;
        flex: 0 0 36px !important;

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

        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;

        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* -----------------------------------------------
       4. FEATURED PICKS SECTION
       ----------------------------------------------- */

    .featured-section {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px 0 24px !important;
        box-sizing: border-box !important;
    }

    .featured-section .featured-box {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding: 20px 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Stack the desktop title and product columns */

    .featured-section .featured-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .featured-section .featured-left {
        display: block !important;
        flex: 0 0 auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .featured-section .featured-title {
        width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
        font-size: 22px !important;
        line-height: 1.3 !important;
        font-weight: 700;
    }

    .featured-section .featured-right,
    .featured-section .featured-slider-wrap {
        display: block !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Featured carousel */

    .featured-section #featuredSlider {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 12px !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 4px 2px 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;

        box-sizing: border-box !important;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .featured-section #featuredSlider::-webkit-scrollbar {
        display: none;
    }

    /* Two featured cards visible */

    .featured-section #featuredSlider > a.featured-card {
        display: flex !important;
        flex: 0 0 calc((100% - 12px) / 2) !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: calc((100% - 12px) / 2) !important;
        min-width: calc((100% - 12px) / 2) !important;
        max-width: calc((100% - 12px) / 2) !important;

        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 10px !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
        scroll-snap-align: start;
        text-decoration: none;
        border-radius: 20px;
    }

    /* Featured image */

    .featured-section #featuredSlider .featured-img {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        flex: 0 0 auto !important;

        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .featured-section #featuredSlider .featured-img img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }

    /* Featured product details */

    .featured-section #featuredSlider .featured-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        padding: 10px 2px 2px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .featured-section #featuredSlider .featured-name {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 2.7em;

        overflow: hidden !important;
        overflow-wrap: anywhere;

        font-size: 14px !important;
        line-height: 1.35 !important;
        font-weight: 600;
    }

    .featured-section #featuredSlider .featured-price {
        width: 100%;
        min-width: 0;
        margin-top: 6px !important;

        font-size: 15px !important;
        line-height: 1.35 !important;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    /* -----------------------------------------------
       5. HIDE DESKTOP CAROUSEL ARROWS ON MOBILE
       ----------------------------------------------- */

    .home-products-section .home-slider-arrow,
    .featured-section .featured-arrow {
        display: none !important;
    }
}


/* =====================================================
   KPM HOMEPAGE — MOBILE CATEGORY & BRAND GRIDS
   3 cards per row, up to 2 rows per section
   ===================================================== */

@media screen and (max-width: 768px) {

    /* Section containers */
    .shop-category-section,
    .shop-brand-section,
    .category-section,
    .brand-section {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Section headings: same scale as Featured Picks */
    .shop-category-section h2,
    .shop-brand-section h2,
    .category-section h2,
    .brand-section h2 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
    }

    /* Grid: exactly 3 cards per row */
    .shop-category-grid,
    .shop-brand-grid,
    .category-grid,
    .brand-grid,
    .categories-grid,
    .brands-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        gap: 10px !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    /* Cards */
    .shop-category-grid > *,
    .shop-brand-grid > *,
    .category-grid > *,
    .brand-grid > *,
    .categories-grid > *,
    .brands-grid > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;

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

        padding: 10px 5px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Category and brand images/logos */
    .shop-category-grid img,
    .shop-brand-grid img,
    .category-grid img,
    .brand-grid img,
    .categories-grid img,
    .brands-grid img {
        display: block !important;
        width: 100% !important;
        max-width: 76px !important;
        height: 76px !important;
        object-fit: contain !important;
        margin: 0 auto 8px !important;
    }

    /* Text matches Featured Picks product name */
    .shop-category-grid a,
    .shop-brand-grid a,
    .category-grid a,
    .brand-grid a,
    .categories-grid a,
    .brands-grid a {
        font-size: 14px !important;
        line-height: 1.35 !important;
        font-weight: 600 !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    /* If the card uses a separate title element */
    .shop-category-grid .category-name,
    .shop-brand-grid .brand-name,
    .category-grid .category-name,
    .brand-grid .brand-name,
    .categories-grid .category-name,
    .brands-grid .brand-name {
        font-size: 14px !important;
        line-height: 1.35 !important;
        font-weight: 600 !important;
        text-align: center !important;
    }
}


/* =====================================================
   KPM LIVE SEARCH — MOBILE POPUP
   Desktop remains unchanged
   ===================================================== */

@media screen and (max-width: 768px) {

    /* Popup spans the viewport below the header */
    .search-area {
        position: static !important;
    }

    .live-search-results {
        position: fixed !important;
        top: var(--mobile-search-popup-top, 125px) !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;

        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - var(--mobile-search-popup-top, 125px) - 20px) !important;

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

        display: none;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;

        background: #fff !important;
        border-radius: 0 0 18px 18px !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;

        z-index: 99999 !important;
        box-sizing: border-box !important;
    }

    /* Two product cards per row */
    .live-search-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;

        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Product card */
    .search-result-card {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        color: #1f1f1f !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    /* Product image */
    .search-card-image {
        position: relative !important;
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;

        margin: 0 0 8px !important;
        overflow: hidden !important;
        border-radius: 12px !important;
        background: #f5f5f5 !important;
        box-sizing: border-box !important;
    }

    .search-card-image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /* Product name matches Featured Picks */
    .search-product-name {
        font-family: 'Inter', sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        color: #1f1f1f !important;

        min-height: 0 !important;
        margin: 0 0 6px !important;

        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    /* Stock status label */
    .search-out-stock {
        display: inline-block !important;
        max-width: 100% !important;

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

        font-family: 'Inter', sans-serif !important;
        font-size: 11px !important;
        line-height: 1.3 !important;

        border-radius: 5px !important;
        box-sizing: border-box !important;
    }

    /* Price, if rendered by the live-search markup */
    .live-search-results .search-product-price,
    .live-search-results .search-price {
        font-family: 'Inter', sans-serif !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
        font-weight: 700 !important;
        margin-top: 5px !important;
    }
}

/* Smaller phones */
@media screen and (max-width: 380px) {
    .live-search-results {
        padding: 10px !important;
    }

    .live-search-grid {
        gap: 12px !important;
    }
}

/* =========================================
   MOBILE SIGN-IN PAGE
   Typography matched to Featured Picks
========================================= */

@media (max-width: 767px) {

    .login-page {
        padding: 14px 0 24px;
    }

    .login-page .container {
        width: 100%;
        max-width: 100%;
        padding: 0 14px;
        box-sizing: border-box;
    }

    .login-page .search-breadcrumb {
        margin: 4px 4px 14px;
        font-size: 12px;
    }

    /* Stack cards vertically */
    .login-wrapper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        width: 100%;
    }

    .login-info-card,
    .login-form-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        margin: 0;
        padding: 20px 16px;
        box-sizing: border-box;
        border-radius: 16px;
    }

    /* Icons */
    .login-page .login-icon {
        width: 48px;
        height: 48px;
        margin: 0 auto 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 22px;
    }

    /* Headings */
    .login-page .login-info-card h2,
    .login-page .login-form-card h2 {
        font-size: 17px;
        line-height: 1.3;
        text-align: center;
        margin: 0 0 8px;
    }

    /* Intro paragraphs */
    .login-page .login-info-card > p,
    .login-page .login-form-card > p {
        font-size: 13px;
        line-height: 1.5;
        text-align: center;
        margin: 0 auto 14px;
    }

    .login-page .login-divider {
        margin: 14px 0;
    }

    /* Benefits */
    .login-page .login-benefits {
        list-style: none;
        padding: 0;
        margin: 0 0 18px;
    }

    .login-page .login-benefits li {
        position: relative;
        padding-left: 22px;
        margin-bottom: 9px;
        font-size: 13px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .login-page .login-benefits li::before {
        content: "✓";
        position: absolute;
        left: 2px;
        top: 0;
        color: #a56add;
        font-weight: 700;
    }

    /* Form fields */
    .login-page #loginForm {
        width: 100%;
    }

    .login-page #loginForm .form-group {
        width: 100%;
        margin-bottom: 10px;
    }

    .login-page #loginForm input {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 11px 12px;
        box-sizing: border-box;
        font-size: 13px;
        border-radius: 10px;
    }

    .login-page .forgot-password {
        text-align: right;
        margin: 4px 0 14px;
    }

    .login-page .forgot-password a {
        font-size: 12px;
        line-height: 1.5;
    }

    /* Buttons */
    .login-page .auth-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 42px;
        padding: 10px 12px;
        box-sizing: border-box;
        font-size: 13px;
        line-height: 1.4;
        text-align: center;
        white-space: normal;
        border-radius: 9px;
    }
}

/* Extra-small mobile screens */
@media (max-width: 380px) {

    .login-page .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .login-info-card,
    .login-form-card {
        padding: 18px 14px;
    }

    .login-page .login-info-card h2,
    .login-page .login-form-card h2 {
        font-size: 16px;
    }
}


/* =========================================
   MOBILE: COMPACT GLOBAL ALERT POPUPS
   showAlert / showConfirm / showInputAlert
========================================= */

@media (max-width: 767px) {

    .theme-alert-box {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        width: calc(100% - 40px);
        max-width: 360px;
        max-height: calc(100dvh - 40px);
        overflow-y: auto;
        box-sizing: border-box;

        padding: 22px 20px;
        border-radius: 16px;
    }

    /* Smaller popup icon */
    .theme-alert-icon {
        width: 54px;
        height: 54px;
        margin: 0 auto 12px;
        font-size: 25px;
    }

    /* Keep popup typography compact like the
       Featured Picks mobile section */
    .theme-alert-box h3 {
        font-size: 18px;
        line-height: 1.35;
        margin: 0 0 8px;
        font-weight: 700;
    }

    .theme-alert-box p {
        font-size: 14px;
        line-height: 1.5;
        margin: 0 0 18px;
        overflow-wrap: anywhere;
    }

    /* Buttons fit side by side when possible */
    .theme-alert-buttons {
        display: flex;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
        width: 100%;
    }

    .theme-alert-btn {
        min-width: 0;
        width: auto;
        max-width: 100%;
        min-height: 42px;
        height: auto;
        padding: 10px 18px;
        border-radius: 9px;
        font-size: 14px;
        line-height: 1.3;
        white-space: normal;
        box-sizing: border-box;
    }

    /* Keep both confirmation buttons usable */
    .theme-alert-cancel,
    .theme-alert-confirm {
        flex: 1 1 100px;
    }

    /* Input popup */
    .theme-alert-input-wrap {
        width: 100%;
        margin-bottom: 12px;
    }

    .theme-alert-input {
        width: 100%;
        height: 44px;
        padding: 0 12px;
        font-size: 14px;
        border-radius: 9px;
        box-sizing: border-box;
    }

    #themeInputAlertBtn {
        width: 100%;
        flex: 1 1 100%;
    }
}

/* Extra-small mobile screens */
@media (max-width: 380px) {

    .theme-alert-box {
        width: calc(100% - 28px);
        padding: 18px 16px;
    }

    .theme-alert-box h3 {
        font-size: 17px;
    }

    .theme-alert-box p {
        font-size: 13px;
    }

    .theme-alert-btn {
        padding: 10px 12px;
        font-size: 13px;
    }
}


/* =========================================
   PRODUCT DETAIL: MOBILE ACCORDIONS
========================================= */

.product-mobile-accordion-toggle {
    display: none;
}

@media (max-width: 767px) {

    .product-detail-tabs {
        margin: 20px 0 28px;
    }

    /* Hide desktop tabs only on mobile */
    .product-detail-tab-buttons {
        display: none !important;
    }

    .product-mobile-accordion-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-height: 52px;
        padding: 14px 12px;
        border: 0;
        border-bottom: 1px solid #ece8f1;
        background: #fff;
        color: #29252f;
        text-align: left;
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
        cursor: pointer;
    }

    .product-mobile-accordion-toggle > span {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .product-mobile-accordion-toggle > span > i {
        width: 18px;
        color: var(--theme-purple);
        font-size: 16px;
        text-align: center;
    }

    .product-mobile-accordion-toggle.active {
        color: var(--theme-dark-purple);
    }

    .product-mobile-accordion-toggle .accordion-chevron {
        flex-shrink: 0;
        color: #777;
        font-size: 12px;
    }

    .product-detail-tab-content {
        display: none;
        padding: 14px 10px;
        box-sizing: border-box;
        font-size: 13px;
        line-height: 1.6;
        overflow-wrap: anywhere;
    }

    .product-detail-tab-content img {
        max-width: 100%;
        height: auto;
    }

    .product-detail-tab-content#description {
        font-size: 13px;
        line-height: 1.6;
    }

    .product-detail-no-description-image {
        padding: 24px 12px;
        font-size: 12px;
    }

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

    .product-detail-reviews {
        margin: 24px 0 32px;
    }

    .product-detail-review-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin-bottom: 18px;
    }

    .product-detail-review-summary {
        min-width: 0;
    }

    .product-detail-review-count {
        font-size: 15px;
        line-height: 1.4;
        margin-bottom: 8px;
    }

    .product-detail-review-rating {
        gap: 8px;
    }

    .product-detail-review-rating strong {
        font-size: 24px;
    }

    .product-detail-review-stars {
        font-size: 15px;
    }

    .product-detail-review-based {
        font-size: 12px;
        margin-top: 5px;
    }

    .product-detail-rating-breakdown {
        width: 100%;
        max-width: none;
    }

    .product-detail-rating-row {
        height: 22px;
        gap: 8px;
    }

    .product-detail-rating-number {
        width: 35px;
        font-size: 12px;
    }

    .product-detail-rating-count {
        width: 22px;
        font-size: 12px;
    }

    .product-detail-write-review-wrap {
        justify-content: flex-start;
        margin-top: 12px;
    }

    .product-detail-write-review-btn {
        min-height: 36px;
        height: auto;
        padding: 9px 14px;
        font-size: 11px;
    }

    /* Stack review cards vertically on mobile */
    .product-detail-reviews-slider {
        display: block;
        width: 100%;
    }

    .product-detail-review-arrow {
        display: none !important;
    }

    .product-detail-reviews-scroll {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-height: none;
        overflow: visible;
        padding: 0;
    }

    .product-detail-review-card {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding: 14px;
        border: 1px solid #ece8f1;
        border-radius: 12px;
        box-sizing: border-box;
        background: #fff;
    }

    .product-detail-review-customer {
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .product-detail-review-card-stars {
        gap: 3px;
        margin: 7px 0;
        font-size: 12px;
    }

    .product-detail-review-title {
        margin-bottom: 5px;
        font-size: 13px;
        line-height: 1.4;
    }

    .product-detail-review-text {
        font-size: 12px;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

    .product-detail-no-reviews {
        padding: 24px 14px;
    }

    .product-detail-no-reviews-title {
        font-size: 15px;
    }

    .product-detail-no-reviews-text {
        font-size: 12px;
    }
}
/* Load more product reviews */
.product-detail-load-more-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 20px 0;
}

.product-detail-load-more-btn {
    min-height: 40px;
    padding: 10px 22px;
    border: 1px solid var(--theme-purple);
    border-radius: 8px;
    background: #fff;
    color: var(--theme-dark-purple);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.product-detail-load-more-btn:hover {
    background: var(--theme-light-purple);
}

.product-detail-load-more-btn:disabled {
    cursor: wait;
    opacity: 0.65;
}

@media (max-width: 600px) {
    .product-detail-load-more-wrap {
        margin: 14px 0;
    }

    .product-detail-load-more-btn {
        width: 100%;
        min-height: 42px;
        font-size: 13px;
    }
}
/* Product detail: prevent inactive desktop tabs from appearing on initial load */
@media (min-width: 769px) {
    .product-detail-tabs .tab-content {
        display: none;
    }

    .product-detail-tabs .tab-content.active {
        display: block;
    }
}
/* =========================================
   BAND DETAIL / CATEGORY LISTING - MOBILE
   ========================================= */

.mobile-filter-toggle {
    display: none;
}

@media screen and (max-width: 767px) {

    /* Stack filter above products */
    .category-page-layout {
        display: flex;
        flex-direction: column;
        gap: 18px;
        width: 100%;
    }

    .category-sidebar {
        width: 100%;
        max-width: 100%;
        flex: none;
        margin: 0;
    }

    /* Filter toggle */
    .mobile-filter-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 13px 16px;
        border: 1px solid #e7e2ed;
        border-radius: 12px;
        background: #f5edfc;
        color: #292333;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    .mobile-filter-toggle span {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-filter-toggle > i {
        transition: transform 0.2s ease;
    }

    .category-sidebar.is-open .filter-chevron {
        transform: rotate(180deg);
    }

    /* Hide filter options until the toggle is opened */
    .category-sidebar .category-sidebar-box {
        display: none;
        width: 100%;
        margin-top: 10px;
    }

    .category-sidebar.is-open .category-sidebar-box {
        display: block;
    }

    .category-sidebar-box {
        padding: 16px;
        border-radius: 14px;
    }

    .category-sidebar-title {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .category-sidebar-item,
    .filter-option {
        font-size: 14px;
    }

    /* Product section */
    .category-products-content {
        width: 100%;
        min-width: 0;
    }

    .category-products-topbar {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        margin-bottom: 16px;
    }

    .category-page-title {
        font-size: 24px;
        line-height: 1.25;
        margin-bottom: 6px;
    }

    .category-page-count {
        font-size: 13px;
    }

    .products-sort {
        width: 100%;
    }

    .products-sort select {
        width: 100%;
        max-width: 100%;
        min-height: 42px;
        font-family: inherit;
        font-size: 13px;
    }

    /* Two cards per row */
    .products-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
    }

    .products-grid .product-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .products-grid .product-image {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    .products-grid .product-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .products-grid .product-content {
        min-width: 0;
        padding: 10px;
    }

    /* Match Featured Picks mobile typography */
    .products-grid .product-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        overflow-wrap: anywhere;
        font-family: inherit;
        font-size: 13px;
        line-height: 1.4;
        min-height: 54px;
    }

    .products-grid .product-price {
        font-family: inherit;
        font-size: 15px;
        line-height: 1.35;
        font-weight: 700;
        margin-top: 8px;
    }

    .products-grid .product-old-price {
        font-size: 11px;
    }

    .products-grid .product-label {
        font-size: 10px;
        padding: 5px 8px;
    }

    /* Keep cart and wishlist controls inside each card */
    .products-grid .product-actions {
        display: flex;
        align-items: stretch;
        gap: 6px;
        width: 100%;
        margin-top: 10px;
    }

    .products-grid .add-cart-btn {
        flex: 1;
        min-width: 0;
        min-height: 38px;
        padding: 6px 4px;
        font-family: inherit;
        font-size: 11px;
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .products-grid .add-cart-btn i {
        font-size: 11px;
    }

    .products-grid .wishlist-btn {
        flex: 0 0 36px;
        width: 36px;
        min-width: 36px;
        height: 38px;
        padding: 0;
    }

    /* Pagination */
    .products-pagination-wrap {
        width: 100%;
        margin: 22px 0;
    }

    .products-pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 6px;
    }

    .products-pagination button {
        min-width: 36px;
        height: 36px;
        padding: 0 8px;
        font-size: 13px;
    }
}
/* Pre-order mobile filter width fix */
@media screen and (max-width: 767px) {

    #mobileFilterContent {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    #mobileFilterContent .category-sidebar-box {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 10px 0 0;
        padding: 16px;
        box-sizing: border-box;
    }

    #mobileFilterContent .category-sidebar-list,
    #mobileFilterContent .category-sidebar-item {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}
/* All Brands - Mobile Layout */
@media screen and (max-width: 767px) {
    .bands-page .bands-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
    }

    .bands-page .band-card {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .bands-page .band-image {
        width: 100%;
        overflow: hidden;
    }

    .bands-page .band-image img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    .bands-page .band-name {
        overflow-wrap: anywhere;
        font-size: 13px;
    }
}

/* Category page - mobile heading and filter order */
@media screen and (max-width: 767px) {

    .products-page-layout .products-topbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .products-page-layout .products-topbar > div:first-child {
        order: 1;
        width: 100%;
    }

    .products-page-layout .products-topbar .products-sort {
        order: 2;
        width: 100%;
    }

    .products-page-layout .products-topbar .products-sort select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

}


/* =========================================
   ACCOUNT NAVIGATION - MOBILE TOP TABS
   ========================================= */

@media screen and (max-width: 767px) {

    .account-page,
    .account-page * {
        box-sizing: border-box;
    }

    .account-page {
        width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    .account-page > .container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    .account-layout {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        gap: 14px;
    }

    /* Tabs appear above the account content */
    .account-sidebar {
        position: static !important;
        inset: auto !important;
        z-index: auto;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 3px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 5px;
        background: #fff;
        border: 1px solid var(--theme-border);
        border-radius: 12px;
        box-shadow: none;
        overflow: hidden;
    }

    .account-sidebar .account-menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 100%;
        min-width: 0;
        min-height: 55px;
        margin: 0;
        padding: 6px 1px;
        border-radius: 8px;
        font-size: 10px;
        line-height: 1.2;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .account-sidebar .account-menu-item i {
        font-size: 15px;
    }

    .account-sidebar .account-menu-item span {
        display: block;
        width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .account-sidebar .account-menu-item.active {
        color: var(--theme-dark-purple);
        background: var(--theme-light-purple);
    }

    .account-sidebar .account-menu-divider {
        display: none;
    }

    .account-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }
}

/* =========================================
   ACCOUNT HOME - MOBILE WIDTH FIX
   ========================================= */

@media screen and (max-width: 767px) {

    .account-content:has(.account-profile-card) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    .account-content:has(.account-profile-card) .account-profile-card {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 14px;
    }

    .account-content:has(.account-profile-card) .profile-details {
        flex: 1 1 180px;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .account-content:has(.account-profile-card) .profile-details h2 {
        font-size: 17px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .account-content:has(.account-profile-card) .profile-details p {
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    .account-content:has(.account-profile-card) .edit-profile-btn {
        max-width: 100%;
        margin-left: auto;
    }

    .account-content:has(.account-profile-card) .account-section {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        padding: 12px;
    }

    .account-content:has(.account-profile-card) .password-form,
    .account-content:has(.account-profile-card) .form-group,
    .account-content:has(.account-profile-card) .password-input-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .account-content:has(.account-profile-card) .password-input-wrap input {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .account-content:has(.account-profile-card) .reward-item,
    .account-content:has(.account-profile-card) .coupon-item {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        gap: 8px;
        padding: 10px;
    }

    .account-content:has(.account-profile-card) .reward-info,
    .account-content:has(.account-profile-card) .coupon-info {
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .account-content:has(.account-profile-card) .reward-action,
    .account-content:has(.account-profile-card) .coupon-action {
        flex-shrink: 0;
        max-width: 100%;
    }

    .account-content:has(.account-profile-card) input,
    .account-content:has(.account-profile-card) button {
        max-width: 100%;
    }
}   


/* ==========================================
   KPM ACCOUNT HOME — MOBILE LAYOUT
   Matches m_account.png
   ========================================== */

@media screen and (max-width: 767px) {

    /* Prevent Account Home content from overflowing */
    .account-content:has(.account-profile-card) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    .account-content:has(.account-profile-card) .account-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .account-content:has(.account-profile-card) .account-profile-card,
    .account-content:has(.account-profile-card) .account-section,
    .account-content:has(.account-profile-card) .account-store-credit,
    .account-content:has(.account-profile-card) .account-cards-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* ---------- PROFILE CARD ---------- */

    .account-content:has(.account-profile-card) .account-profile-card {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        margin: 0 0 10px;
        padding: 12px;
        border-radius: 10px;
        background: #fff;
        border: 1px solid #eee;
        box-shadow: none;
    }

    .account-content:has(.account-profile-card) .profile-avatar {
        width: 48px;
        height: 48px;
        grid-row: 1;
        grid-column: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #f3eaff;
        color: #9b6cf3;
        font-size: 24px;
    }

    .account-content:has(.account-profile-card) .profile-details {
        grid-row: 1;
        grid-column: 2;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .account-content:has(.account-profile-card) .profile-details h2 {
        margin: 0 0 3px;
        color: #171a31;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.4;
    }

    .account-content:has(.account-profile-card) .profile-wave {
        white-space: nowrap;
    }

    .account-content:has(.account-profile-card) .profile-details p {
        margin: 3px 0;
        font-size: 10px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .account-content:has(.account-profile-card) .profile-details p i {
        margin-right: 3px;
    }

    .account-content:has(.account-profile-card) .edit-profile-btn {
        grid-row: 2;
        grid-column: 1 / -1;
        justify-self: end;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-height: 32px;
        max-width: 100%;
        margin: 0;
        padding: 6px 12px;
        border: 1px solid #9b6cf3;
        border-radius: 6px;
        background: #fff;
        color: #8b4cf6;
        font-size: 11px;
        white-space: nowrap;
    }

    .account-content:has(.account-profile-card) .account-status-notice {
        grid-column: 1 / -1;
        min-width: 0;
        margin-top: 8px;
        padding: 8px;
        font-size: 10px;
    }

    /* ---------- SECTION CARDS ---------- */

    .account-content:has(.account-profile-card) .account-section {
        margin: 0 0 10px;
        padding: 12px;
        border: 1px solid #eee;
        border-radius: 10px;
        background: #fff;
        box-shadow: none;
    }

    .account-content:has(.account-profile-card) .account-section-header {
        margin: 0 0 10px;
    }

    .account-content:has(.account-profile-card) .account-section-header > div {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .account-content:has(.account-profile-card) .account-section-header i {
        font-size: 14px;
    }

    .account-content:has(.account-profile-card) .account-section-header h3 {
        margin: 0;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.4;
    }

    /* ---------- CHANGE PASSWORD ---------- */

    .account-content:has(.account-profile-card) .password-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        width: 100%;
        min-width: 0;
    }

    .account-content:has(.account-profile-card) .password-form .form-group {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    .account-content:has(.account-profile-card) .password-form label {
        display: block;
        margin-bottom: 4px;
        font-size: 10px;
    }

    .account-content:has(.account-profile-card) .password-input-wrap {
        position: relative;
        width: 100%;
        min-width: 0;
    }

    .account-content:has(.account-profile-card) .password-input-wrap input {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 32px;
        box-sizing: border-box;
        padding: 0 34px 0 10px;
        border: 1px solid #dedfeb;
        border-radius: 6px;
        font-size: 11px;
    }

    .account-content:has(.account-profile-card) .password-toggle {
        right: 9px;
        font-size: 11px;
    }

    .account-content:has(.account-profile-card) .password-button-wrap {
        display: block;
        width: 100%;
        margin-top: 2px;
    }

    .account-content:has(.account-profile-card) .change-password-btn {
        width: 100%;
        max-width: 100%;
        height: 34px;
        padding: 0 10px;
        border-radius: 6px;
        background: #9b6cf3;
        font-size: 11px;
    }

    /* ---------- STORE CREDIT ---------- */

    .account-content:has(.account-profile-card) .account-store-credit {
        display: grid;
        grid-template-columns: 16px minmax(0, 1fr);
        align-items: start;
        gap: 5px 8px;
        margin: 0 0 10px;
        padding: 12px;
        border: 1px solid #eee;
        border-radius: 10px;
        background: #fff;
        font-size: 11px;
    }

    .account-content:has(.account-profile-card) .account-store-credit > i {
        grid-column: 1;
        grid-row: 1;
        margin-top: 2px;
        font-size: 14px;
    }

    .account-content:has(.account-profile-card) .account-store-credit > span {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        line-height: 1.5;
    }

    .account-content:has(.account-profile-card) .account-store-credit strong {
        display: block;
        margin-top: 2px;
        font-size: 17px;
        overflow-wrap: anywhere;
    }

    .account-content:has(.account-profile-card) .account-store-credit p {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        color: #697092;
        font-size: 10px;
        line-height: 1.45;
    }

    /* ---------- REWARDS + COUPONS: STACK VERTICALLY ---------- */

    .account-content:has(.account-profile-card) .account-cards-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        margin: 0;
        padding: 0;
    }

    .account-content:has(.account-profile-card) .account-cards-grid .account-section {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 12px;
    }

    .account-content:has(.account-profile-card) .rewards-summary,
    .account-content:has(.account-profile-card) .coupon-summary {
        padding: 10px;
        background: #f7efff;
    }

    .account-content:has(.account-profile-card) .reward-points strong {
        font-size: 17px;
    }

    .account-content:has(.account-profile-card) .reward-points span {
        font-size: 11px;
    }

    .account-content:has(.account-profile-card) .rewards-summary p,
    .account-content:has(.account-profile-card) .coupon-summary p {
        margin: 5px 0 0;
        font-size: 10px;
        line-height: 1.45;
    }

    /* Reward and coupon rows */

    .account-content:has(.account-profile-card) .reward-item,
    .account-content:has(.account-profile-card) .coupon-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 9px 8px;
        box-sizing: border-box;
    }

    .account-content:has(.account-profile-card) .reward-icon,
    .account-content:has(.account-profile-card) .coupon-icon {
        width: 20px;
        flex: 0 0 20px;
        font-size: 12px;
    }

    .account-content:has(.account-profile-card) .reward-info,
    .account-content:has(.account-profile-card) .coupon-info {
        display: flex;
        flex: 1 1 120px;
        flex-wrap: wrap;
        align-items: center;
        gap: 3px;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .account-content:has(.account-profile-card) .reward-info strong,
    .account-content:has(.account-profile-card) .coupon-info strong,
    .account-content:has(.account-profile-card) .reward-info span,
    .account-content:has(.account-profile-card) .coupon-info span {
        font-size: 10px;
        overflow-wrap: anywhere;
    }

    .account-content:has(.account-profile-card) .reward-action,
    .account-content:has(.account-profile-card) .coupon-action {
        flex: 0 0 auto;
        max-width: 100%;
        height: 30px;
        padding: 0 10px;
        border-radius: 5px;
        font-size: 10px;
        white-space: nowrap;
    }

    .account-content:has(.account-profile-card) .reward-action:disabled {
        opacity: 0.5;
    }

    .account-content:has(.account-profile-card) .account-no-coupons {
        min-height: 100px;
        font-size: 11px;
    }

    /* Keep all controls within the mobile viewport */

    .account-content:has(.account-profile-card) input,
    .account-content:has(.account-profile-card) button {
        box-sizing: border-box;
    }
}

/* =========================================
   ACCOUNT ADDRESSES — MOBILE
   Preserve the original purple KPM theme
========================================= */
@media screen and (max-width: 767px) {

    .account-addresses,
    .account-addresses * {
        box-sizing: border-box;
    }

    .account-addresses {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        color: #17152f;
    }

    /* Heading and description */
    .account-addresses .account-content-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
        margin: 0 0 15px;
    }

    .account-addresses .account-content-header h2 {
        margin: 0 0 3px;
        color: #17152f;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.4;
    }

    .account-addresses .account-content-header p {
        margin: 0;
        color: #77758b;
        font-size: 11px;
        line-height: 1.5;
    }

    /* Add address button — right aligned */
    .account-addresses .account-add-address-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        gap: 7px;
        width: auto;
        max-width: 100%;
        min-height: 34px;
        margin: 0 4px 0 0;
        padding: 7px 12px;
        border: 1px solid #a75bff;
        border-radius: 6px;
        background: #fff;
        color: #873bfa;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
        box-shadow: none;
    }

    .account-addresses .account-add-address-btn i {
        font-size: 11px;
    }

    /* Address list */
    .account-addresses .account-address-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Individual address card */
    .account-addresses .account-address-card {
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr);
        align-items: start;
        column-gap: 12px;
        row-gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 12px 10px;
        border: 1px solid #eceaf3;
        border-radius: 10px;
        background: #fff;
        box-shadow: none;
    }

    /* Purple location icon */
    .account-addresses .account-address-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        margin: 0;
        border: 0;
        border-radius: 50%;
        background: #f4eaff;
        color: #9747ff;
        font-size: 16px;
    }

    .account-addresses .account-address-details {
        min-width: 0;
        padding: 2px 0 0;
        overflow-wrap: anywhere;
    }

    .account-addresses .account-address-details h3 {
        margin: 0 0 7px;
        color: #17152f;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.4;
    }

    .account-addresses .account-address-details p {
        margin: 0 0 2px;
        color: #68677c;
        font-size: 11px;
        font-weight: 400;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .account-addresses .account-address-details p:last-child {
        margin-bottom: 0;
    }

    /* Address action row */
    .account-addresses .account-address-actions {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 5px;
        grid-column: 1 / -1;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

    /* Default address label */
    .account-addresses .account-address-default {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex: 0 0 auto;
        max-width: 100%;
        margin: 0 auto 0 0;
        padding: 4px 8px;
        border-radius: 5px;
        background: #f1e5ff;
        color: #873bfa;
        font-size: 9px;
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
    }

    /* Set Default, Edit and Delete buttons */
    .account-addresses .account-address-set-default,
    .account-addresses .account-address-edit,
    .account-addresses .account-address-delete {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        flex: 1 1 0;
        min-width: 0;
        min-height: 32px;
        margin: 0;
        padding: 6px 4px;
        border-radius: 5px;
        background: #fff;
        font-size: 10px;
        font-weight: 500;
        line-height: 1.2;
        white-space: nowrap;
        box-shadow: none;
    }

    .account-addresses .account-address-set-default,
    .account-addresses .account-address-edit {
        border: 1px solid #a75bff;
        color: #873bfa;
    }

    .account-addresses .account-address-delete {
        border: 1px solid #ff6666;
        color: #ff4545;
    }

    .account-addresses .account-address-actions i {
        font-size: 10px;
    }

    /* Empty address state */
    .account-addresses .account-no-addresses {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 28px 16px;
        border: 1px solid #eceaf3;
        border-radius: 10px;
        background: #fff;
        text-align: center;
    }

    .account-addresses .account-no-addresses > i {
        color: #9747ff;
        font-size: 26px;
    }

    .account-addresses .account-no-addresses h3 {
        margin: 0;
        color: #17152f;
        font-size: 14px;
        font-weight: 700;
    }

    .account-addresses .account-no-addresses p {
        margin: 0;
        color: #77758b;
        font-size: 11px;
        line-height: 1.5;
    }

    .account-addresses .account-no-addresses .add-address-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        max-width: 220px;
        min-height: 35px;
        margin-top: 4px;
        padding: 8px 12px;
        border: 1px solid #a75bff;
        border-radius: 6px;
        background: #fff;
        color: #873bfa;
        font-size: 11px;
    }
}   


/* =========================================
   WISHLISTS — MOBILE LAYOUT
   KPM purple theme
========================================= */
@media screen and (max-width: 767px) {

    .wishlist-page,
    .wishlist-page * {
        box-sizing: border-box;
    }

    .wishlist-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        color: #17152f;
    }

    /* Header */
    .wishlist-page .wishlist-page-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
        margin: 0 0 12px;
    }

    .wishlist-page .wishlist-page-header > div:first-child {
        display: none;
    }

    /* New Wishlist button */
    .wishlist-page .wishlist-new-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        gap: 6px;
        width: auto;
        max-width: 100%;
        min-height: 32px;
        margin: 0 5px 0 0;
        padding: 6px 12px;
        border: 1px solid #a75bff;
        border-radius: 6px;
        background: #fff;
        color: #873bfa;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap;
        box-shadow: none;
    }

    .wishlist-page .wishlist-new-btn i {
        font-size: 10px;
    }

    /* Wishlist list */
    .wishlist-page .wishlist-list {
        display: flex;
        flex-direction: column;
        gap: 9px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Individual wishlist card */
    .wishlist-page .wishlist-card {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: start;
        column-gap: 10px;
        row-gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 12px 9px;
        border: 1px solid #eceaf3;
        border-radius: 10px;
        background: #fff;
        box-shadow: none;
        cursor: pointer;
    }

    /* Purple heart icon */
    .wishlist-page .wishlist-card-icon {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin: 0;
        border: 0;
        border-radius: 50%;
        background: #f4eaff;
        color: #9747ff;
        font-size: 20px;
    }

    .wishlist-page .wishlist-card-icon i {
        color: inherit;
    }

    /* Wishlist name and item count */
    .wishlist-page .wishlist-card-info {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        min-width: 0;
        padding-top: 3px;
        overflow-wrap: anywhere;
    }

    .wishlist-page .wishlist-card-info h3 {
        margin: 0 0 5px;
        color: #17152f;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .wishlist-page .wishlist-card-info span {
        display: block;
        color: #77758b;
        font-size: 10px;
        line-height: 1.4;
    }

    /* Product preview images */
    .wishlist-page .wishlist-product-preview {
        grid-column: 3;
        grid-row: 1;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 4px;
        width: auto;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        overflow: hidden;
    }

    .wishlist-page .wishlist-preview-image {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 1 50px;
        width: 50px;
        min-width: 0;
        height: 58px;
        padding: 3px;
        overflow: hidden;
        border: 1px solid #eceaf3;
        border-radius: 4px;
        background: #fafafa;
    }

    .wishlist-page .wishlist-preview-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .wishlist-page .wishlist-more-count {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 28px;
        width: 28px;
        height: 58px;
        border: 1px solid #eceaf3;
        border-radius: 4px;
        background: #f4eaff;
        color: #873bfa;
        font-size: 10px;
        font-weight: 600;
    }

    /* Delete button — second row, aligned right */
    .wishlist-page .wishlist-delete-btn {
        grid-column: 2 / 4;
        grid-row: 2;
        justify-self: end;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: auto;
        min-width: 76px;
        max-width: 100%;
        min-height: 30px;
        margin: 0;
        padding: 6px 10px;
        border: 1px solid #ff6666;
        border-radius: 5px;
        background: #fff;
        color: #ff4545;
        font-size: 10px;
        font-weight: 500;
        line-height: 1.2;
        white-space: nowrap;
        box-shadow: none;
        cursor: pointer;
    }

    .wishlist-page .wishlist-delete-btn i {
        font-size: 10px;
    }

    /* Empty wishlist state */
    .wishlist-page .wishlist-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 30px 16px;
        border: 1px solid #eceaf3;
        border-radius: 10px;
        background: #fff;
        text-align: center;
    }

    .wishlist-page .wishlist-empty-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #f4eaff;
        color: #9747ff;
        font-size: 22px;
    }

    .wishlist-page .wishlist-empty h3 {
        margin: 0;
        color: #17152f;
        font-size: 14px;
        font-weight: 700;
    }

    .wishlist-page .wishlist-empty p {
        margin: 0;
        color: #77758b;
        font-size: 11px;
        line-height: 1.5;
    }

    .wishlist-page .wishlist-empty .wishlist-new-btn {
        align-self: center;
        margin: 5px 0 0;
    }
}


/* =========================================
   ORDER DETAILS — MOBILE
   KPM purple theme
========================================= */
@media screen and (max-width: 767px) {

    .account-order-details-page,
    .account-order-details-page * {
        box-sizing: border-box;
    }

    .account-order-details-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
        color: #17152f;
    }

    .account-order-details-page > .container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Breadcrumb */
    .account-order-details-page .search-breadcrumb {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0 0 12px;
        font-size: 10px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .account-order-details-page .search-breadcrumb strong {
        color: #17152f;
    }

    /* Main order card */
    .account-order-details-page .order-details-card {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    /* Order header */
    .account-order-details-page .order-details-header {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 12px;
        border: 1px solid #e9e5f3;
        border-radius: 10px;
        background: #fff;
    }

    .account-order-details-page .order-details-title-row {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        margin: 0 0 12px;
    }

    .account-order-details-page .order-back-btn {
        display: inline-flex;
        flex: 0 0 36px;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid #e2dcef;
        border-radius: 50%;
        background: #fff;
        color: #4c4863;
        font-size: 14px;
    }

    .account-order-details-page .order-details-title-row h1 {
        min-width: 0;
        margin: 0;
        color: #17152f;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .account-order-details-page .order-meta {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        min-width: 0;
    }

    .account-order-details-page .order-meta-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        min-width: 0;
    }

    .account-order-details-page .order-meta-item strong {
        color: #29263e;
        font-size: 10px;
        font-weight: 700;
    }

    .account-order-details-page .order-meta-item > span:not(.order-status-badge) {
        color: #55536a;
        font-size: 10px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .account-order-details-page .order-meta-divider {
        display: none;
    }

    .account-order-details-page .order-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        max-width: 100%;
        padding: 5px 8px;
        border-radius: 20px;
        font-size: 10px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .account-order-details-page .order-status-badge.status-active {
        background: #e5f8ec;
        color: #178346;
    }

    .account-order-details-page .order-status-badge.status-cancelled {
        background: #ffe9ec;
        color: #d9364f;
    }

    .account-order-details-page .order-status-badge i {
        font-size: 8px;
    }

    .account-order-details-page .account-order-invoice-btn {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        grid-column: 1 / -1;
        width: 100%;
        min-height: 34px;
        margin: 0;
        padding: 7px 0 0;
        border: 0;
        border-top: 1px solid #eeeaf5;
        border-radius: 0;
        background: transparent;
        color: #9747ff;
        font-size: 11px;
        font-weight: 600;
        text-align: left;
    }

    /* Billing and shipping addresses: side by side */
    .account-order-details-page .order-addresses {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    .account-order-details-page .order-address {
        min-width: 0;
        margin: 0;
        padding: 11px 9px;
        border: 1px solid #e9e5f3;
        border-radius: 9px;
        background: #faf8ff;
        overflow-wrap: anywhere;
    }

    .account-order-details-page .order-address h3 {
        display: flex;
        align-items: flex-start;
        gap: 5px;
        margin: 0 0 9px;
        color: #17152f;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.4;
    }

    .account-order-details-page .order-address h3::before {
        content: "\f3c5";
        flex: 0 0 auto;
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        color: #9747ff;
        font-size: 11px;
    }

    .account-order-details-page .address-content {
        color: #4f4d63;
        font-size: 10px;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

    .account-order-details-page .order-address-divider {
        display: none;
    }

    /* Product table */
    .account-order-details-page .order-products-box {
        width: 100%;
        min-width: 0;
        margin: 0;
        border: 1px solid #e9e5f3;
        border-radius: 9px;
        background: #fff;
        overflow: hidden;
    }

    .account-order-details-page .order-products-box::before {
        content: "▣  Item(s)";
        display: block;
        padding: 11px 12px;
        border-bottom: 1px solid #e9e5f3;
        color: #17152f;
        font-size: 12px;
        font-weight: 700;
    }

    .account-order-details-page .order-products-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 48px 30px 55px;
        gap: 4px;
        align-items: center;
        padding: 8px 9px;
        background: #faf8ff;
        color: #55536a;
        font-size: 9px;
        font-weight: 700;
    }

    .account-order-details-page .order-products-header > div {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .account-order-details-page .order-products-header > div:not(:first-child) {
        text-align: right;
    }

    .account-order-details-page .order-product-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 48px 30px 55px;
        gap: 4px;
        align-items: center;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 10px 9px;
        border-top: 1px solid #f0edf5;
    }

    .account-order-details-page .order-product-info {
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
    }

    .account-order-details-page .order-product-image {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        width: 42px;
        height: 48px;
        min-width: 0;
        padding: 2px;
        overflow: hidden;
        border: 1px solid #e9e5f3;
        border-radius: 5px;
        background: #fafafa;
    }

    .account-order-details-page .order-product-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .account-order-details-page .order-product-name {
        min-width: 0;
        color: #29263e;
        font-size: 9px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .account-order-details-page .order-product-price,
    .account-order-details-page .order-product-qty,
    .account-order-details-page .order-product-total {
        min-width: 0;
        color: #29263e;
        font-size: 9px;
        line-height: 1.4;
        text-align: right;
        overflow-wrap: anywhere;
    }

    /* Order summary */
    .account-order-details-page .order-summary-box {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 12px;
        border: 1px solid #e9e5f3;
        border-radius: 9px;
        background: #faf8ff;
    }

    .account-order-details-page .order-summary-box h2 {
        margin: 0 0 12px;
        color: #17152f;
        font-size: 12px;
        font-weight: 700;
    }

    .account-order-details-page .order-summary-box h2::before {
        content: "\f15c";
        margin-right: 8px;
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        color: #9747ff;
    }

    .account-order-details-page .order-summary-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        margin: 0 0 7px;
        color: #4f4d63;
        font-size: 11px;
        line-height: 1.4;
    }

    .account-order-details-page .order-summary-row > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .account-order-details-page .order-summary-row > span:last-child {
        text-align: right;
        white-space: nowrap;
    }

    .account-order-details-page .order-summary-row.summary-discount {
        color: #159447;
    }

    .account-order-details-page .order-summary-total {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid #ded9eb;
        color: #17152f;
        font-size: 13px;
        line-height: 1.4;
    }

    .account-order-details-page .order-summary-total strong {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Payment and shipping info cards */
    .account-order-details-page .order-payment-box,
    .account-order-details-page .order-shipping-box {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        align-items: start;
        column-gap: 10px;
        row-gap: 4px;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 12px;
        border: 1px solid #e9e5f3;
        border-radius: 9px;
        background: #faf8ff;
    }

    .account-order-details-page .order-info-icon {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 30px;
        min-height: 30px;
        color: #9747ff;
        font-size: 20px;
    }

    .account-order-details-page .order-info-title {
        min-width: 0;
        color: #17152f;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .account-order-details-page .order-info-value,
    .account-order-details-page .order-shipping-status {
        grid-column: 2;
        min-width: 0;
        color: #77758b;
        font-size: 10px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .account-order-details-page .order-shipping-header {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px;
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        margin: 0;
        cursor: pointer;
    }

    .account-order-details-page .order-shipping-header-content {
        min-width: 0;
    }

    .account-order-details-page .order-shipping-header .order-info-icon {
        grid-column: 1;
        grid-row: 1;
    }

    .account-order-details-page .order-shipping-header .order-info-title {
        grid-column: 1;
    }

    .account-order-details-page .order-shipping-arrow {
        color: #77758b;
        font-size: 12px;
    }

    .account-order-details-page .shipping-details-content {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #e9e5f3;
    }

    .account-order-details-page .shipping-detail-row {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 8px;
        font-size: 10px;
        line-height: 1.4;
    }

    .account-order-details-page .shipping-detail-row span {
        color: #77758b;
    }

    .account-order-details-page .shipping-detail-row strong {
        min-width: 0;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .account-order-details-page .order-track-btn {
        width: 100%;
        min-height: 34px;
        margin-top: 5px;
        border: 0;
        border-radius: 6px;
        background: var(--theme-purple, #9747ff);
        color: #fff;
        font-size: 11px;
        font-weight: 600;
    }

    /* Order notes */
    .account-order-details-page .order-notes-section {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 12px;
        border: 1px solid #e9e5f3;
        border-radius: 9px;
        background: #faf8ff;
    }

    .account-order-details-page .order-notes-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        color: #17152f;
        font-size: 11px;
    }

    .account-order-details-page .order-notes-header i {
        color: #9747ff;
    }

    .account-order-details-page .order-notes-content {
        color: #55536a;
        font-size: 10px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    /* Order chat */
    .account-order-details-page .order-chat-box {
        width: 100%;
        min-width: 0;
        margin: 0;
        border: 1px solid #e9e5f3;
        border-radius: 9px;
        background: #fff;
        overflow: hidden;
    }

    .account-order-details-page .order-chat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 42px;
        padding: 10px 12px;
        border-bottom: 1px solid #e9e5f3;
        background: #faf8ff;
        cursor: pointer;
    }

    .account-order-details-page .order-chat-header-content {
        min-width: 0;
    }

    .account-order-details-page .order-chat-title-icon {
        margin-right: 7px;
        color: #9747ff;
    }

    .account-order-details-page .order-chat-arrow {
        color: #77758b;
        font-size: 11px;
    }

    .account-order-details-page .order-chat-content {
        width: 100%;
        min-width: 0;
        padding: 9px;
    }

    .account-order-details-page .order-chat-messages {
        display: flex;
        flex-direction: column;
        gap: 9px;
        width: 100%;
        min-width: 0;
        max-height: 230px;
        margin: 0 0 8px;
        overflow-y: auto;
    }

    .account-order-details-page .order-chat-message {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
    }

    .account-order-details-page .order-chat-message.user-message {
        align-items: flex-end;
    }

    .account-order-details-page .order-chat-message.support-message {
        align-items: flex-start;
    }

    .account-order-details-page .order-chat-sender {
        margin-bottom: 3px;
        color: #9747ff;
        font-size: 10px;
        font-weight: 700;
    }

    .account-order-details-page .order-chat-message-bubble {
        width: fit-content;
        max-width: 92%;
        min-width: 0;
        padding: 9px 10px;
        border: 1px solid #e6d5ff;
        border-radius: 10px;
        background: #f5edff;
        color: #29263e;
    }

    .account-order-details-page .support-message .order-chat-message-bubble {
        border-color: #e9e5f3;
        background: #faf8ff;
    }

    .account-order-details-page .order-chat-message-text {
        font-size: 10px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .account-order-details-page .order-chat-message-date {
        margin-top: 5px;
        color: #77758b;
        font-size: 9px;
        text-align: right;
    }

    .account-order-details-page .order-chat-empty {
        padding: 12px 0;
        color: #77758b;
        font-size: 10px;
        text-align: center;
    }

    .account-order-details-page .order-chat-compose {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 78px;
        align-items: stretch;
        gap: 7px;
        width: 100%;
        min-width: 0;
    }

    .account-order-details-page .order-chat-input {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 38px;
        max-height: 90px;
        margin: 0;
        padding: 9px 10px;
        border: 1px solid #ded9eb;
        border-radius: 7px;
        background: #fff;
        color: #29263e;
        font-size: 10px;
        line-height: 1.4;
        resize: vertical;
    }

    .account-order-details-page .order-chat-input::placeholder {
        color: #9290a2;
    }

    .account-order-details-page .order-chat-send-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 100%;
        min-width: 0;
        min-height: 38px;
        margin: 0;
        padding: 7px 5px;
        border: 0;
        border-radius: 7px;
        background: var(--theme-purple, #9747ff);
        color: #fff;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
    }

    /* Cancel order */
    .account-order-details-page .order-cancel-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-height: 42px;
        margin: 0;
        padding: 9px 12px;
        border: 1px solid #ff5252;
        border-radius: 7px;
        background: #fff;
        color: #f04444;
        font-size: 12px;
        font-weight: 600;
    }
}


/* =========================================
   WISHLIST DETAIL — MOBILE
   KPM purple theme
========================================= */
@media screen and (max-width: 767px) {

    .wishlist-detail-page,
    .wishlist-detail-page * {
        box-sizing: border-box;
    }

    .wishlist-detail-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        color: #17152f;
    }

    /* Back to wishlists */
    .wishlist-detail-page .wishlist-detail-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        max-width: 100%;
        margin: 0 0 18px;
        color: #9747ff;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5;
        text-decoration: none;
    }

    /* Wishlist heading */
    .wishlist-detail-page .wishlist-detail-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        min-width: 0;
        margin: 0 0 20px;
    }

    .wishlist-detail-page .wishlist-detail-title-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }

    .wishlist-detail-page .wishlist-detail-title-wrap h1 {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 7px;
        margin: 0 0 5px;
        color: #17152f;
        font-size: 23px;
        font-weight: 700;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .wishlist-detail-page .wishlist-rename-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 27px;
        height: 27px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #9747ff;
        font-size: 16px;
    }

    .wishlist-detail-page .wishlist-detail-meta {
        color: #77758b;
        font-size: 12px;
        line-height: 1.4;
    }

    .wishlist-detail-page .wishlist-detail-rename-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-width: 76px;
        min-height: 35px;
        margin: 0;
        padding: 7px 12px;
        border: 1px solid #a75bff;
        border-radius: 7px;
        background: #fff;
        color: #873bfa;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
        box-shadow: none;
    }

    /* Product list */
    .wishlist-detail-page .wishlist-detail-items {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Product card: image left, details/actions right */
    .wishlist-detail-page .wishlist-detail-item {
        display: grid;
        grid-template-columns: minmax(90px, 32%) minmax(0, 1fr);
        align-items: start;
        column-gap: 12px;
        row-gap: 12px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 12px;
        border: 1px solid #e9e5f3;
        border-radius: 10px;
        background: #fff;
        box-shadow: none;
    }

    /* Product image */
    .wishlist-detail-page .wishlist-detail-product-image {
        grid-column: 1;
        grid-row: 1 / span 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-width: 0;
        height: 120px;
        margin: 0;
        padding: 5px;
        overflow: hidden;
        border-radius: 7px;
        background: #f8f8fa;
    }

    .wishlist-detail-page .wishlist-detail-product-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Product name */
    .wishlist-detail-page .wishlist-detail-product-info {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .wishlist-detail-page .wishlist-detail-product-info h3 {
        margin: 0;
        color: #17152f;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    /* Product action buttons */
    .wishlist-detail-page .wishlist-detail-actions {
        grid-column: 2;
        grid-row: 2;
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        align-content: start;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .wishlist-detail-page .wishlist-move-cart-btn,
    .wishlist-detail-page .wishlist-notify-btn,
    .wishlist-detail-page .wishlist-fulfilled-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        min-width: 0;
        min-height: 38px;
        margin: 0;
        padding: 7px 5px;
        border: 1px solid transparent;
        border-radius: 7px;
        background: #9747ff;
        color: #fff;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.3;
        text-align: center;
        overflow-wrap: anywhere;
        box-shadow: none;
    }

    .wishlist-detail-page .wishlist-move-cart-btn i,
    .wishlist-detail-page .wishlist-notify-btn i,
    .wishlist-detail-page .wishlist-fulfilled-btn i {
        flex: 0 0 auto;
        font-size: 11px;
    }

    .wishlist-detail-page .wishlist-fulfilled-btn.fulfilled,
    .wishlist-detail-page .wishlist-fulfilled-btn:disabled {
        border-color: #d8c1f8;
        background: #f2e8ff;
        color: #873bfa;
        opacity: 1;
        cursor: default;
    }

    /* Delete spans the full width of the action area */
    .wishlist-detail-page .wishlist-item-delete-btn {
        grid-column: 1 / -1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
        min-height: 38px;
        margin: 0;
        padding: 8px 12px;
        border: 1px solid #ff5252;
        border-radius: 7px;
        background: #fff;
        color: #f04444;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.3;
        box-shadow: none;
    }

    .wishlist-detail-page .wishlist-item-delete-btn i {
        font-size: 13px;
    }

    /* Empty wishlist */
    .wishlist-detail-page .wishlist-detail-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 30px 16px;
        border: 1px solid #e9e5f3;
        border-radius: 10px;
        background: #fff;
        text-align: center;
    }

    .wishlist-detail-page .wishlist-detail-empty-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #f4eaff;
        color: #9747ff;
        font-size: 22px;
    }

    .wishlist-detail-page .wishlist-detail-empty h3 {
        margin: 0;
        color: #17152f;
        font-size: 14px;
        font-weight: 700;
    }

    .wishlist-detail-page .wishlist-detail-empty p {
        margin: 0;
        color: #77758b;
        font-size: 11px;
        line-height: 1.5;
    }
}

/* Narrow phones: give product actions a little more room */
@media screen and (max-width: 380px) {

    .wishlist-detail-page .wishlist-detail-item {
        grid-template-columns: 82px minmax(0, 1fr);
        column-gap: 9px;
        padding: 9px;
    }

    .wishlist-detail-page .wishlist-detail-product-image {
        height: 100px;
    }

    .wishlist-detail-page .wishlist-detail-product-info h3 {
        font-size: 12px;
    }

    .wishlist-detail-page .wishlist-detail-actions {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .wishlist-detail-page .wishlist-move-cart-btn,
    .wishlist-detail-page .wishlist-notify-btn,
    .wishlist-detail-page .wishlist-fulfilled-btn,
    .wishlist-detail-page .wishlist-item-delete-btn {
        min-height: 34px;
        font-size: 10px;
    }

    .wishlist-detail-page .wishlist-item-delete-btn {
        grid-column: 1 / -1;
    }

    .wishlist-detail-page .wishlist-detail-rename-button {
        min-width: 66px;
        padding: 6px 8px;
    }
}

/* =========================================
   KPM CART — FIXED MOBILE LAYOUT
   Uses the actual cart.php class names
========================================= */

@media screen and (max-width: 767px) {

    .cart-page,
    .cart-page * {
        box-sizing: border-box;
    }

    .cart-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 12px;
        overflow-x: clip;
        color: #17152f;
    }

    /* Header */
    .cart-page .cart-top {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        margin: 0 0 16px;
    }

    .cart-page .cart-heading {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-width: 0;
    }

    .cart-page .cart-heading-icon {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        object-fit: contain;
    }

    .cart-page .cart-heading h1 {
        margin: 0 0 4px;
        font-size: 21px;
        line-height: 1.3;
    }

    .cart-page .cart-heading p {
        margin: 0;
        color: #626078;
        font-size: 12px;
        line-height: 1.5;
    }

    .cart-page .cart-outline-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: #9747ff;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
    }

    /* Main layout */
    .cart-page .cart-layout {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    .cart-page .cart-items-panel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 1px solid #e8e3f2;
        border-radius: 11px;
        background: #fff;
        box-shadow: none;
    }

    /* Select all */
    .cart-page .cart-table-head {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        min-height: 50px;
        margin: 0;
        padding: 10px 12px;
        border-bottom: 1px solid #e8e3f2;
        background: #f7f2ff;
        color: #17152f;
        font-size: 12px;
        font-weight: 700;
    }

    .cart-page .cart-table-head span:nth-of-type(n+2) {
        display: none;
    }

    .cart-page .cart-select-all,
    .cart-page .cart-item-check {
        width: 19px;
        height: 19px;
        margin: 0;
        accent-color: #9747ff;
    }

    /* Product card:
       checkbox | product details | remove button */
    .cart-page .cart-item {
        position: relative;
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        align-items: start;
        column-gap: 9px;
        row-gap: 0;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 13px 12px;
        border: 0;
        border-bottom: 1px solid #e8e3f2;
        border-radius: 0;
        background: #fff;
    }

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

    /* Checkbox stays in the left column */
    .cart-page .cart-item > .cart-item-check {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: center;
        justify-self: start;
        width: 19px;
        height: 19px;
        margin: 0;
    }

    /* Image and product information */
    .cart-page .cart-product {
        grid-column: 2;
        grid-row: 1;
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding-right: 20px;
    }

    .cart-page .cart-product > img {
        display: block;
        width: 82px;
        height: 88px;
        min-width: 0;
        margin: 0;
        padding: 5px;
        border: 0;
        border-radius: 7px;
        background: #f7f7f9;
        object-fit: contain;
    }

    .cart-page .cart-product-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .cart-page .cart-product-name {
        width: 100%;
        min-width: 0;
        margin: 0;
        color: #17152f;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .cart-page .cart-product-version {
        width: 100%;
        min-width: 0;
        margin: 0;
        color: #626078;
        font-size: 11px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .cart-page .cart-stock {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        max-width: 100%;
        margin: 0;
        padding: 5px 8px;
        border-radius: 6px;
        background: #e1f8e9;
        color: #168344;
        font-size: 10px;
        line-height: 1.4;
    }

    /* Actual unit price class from cart.php */
    .cart-page .cart-price {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px;
        width: 100%;
        min-width: 0;
        margin: 8px 0 0;
        padding: 0;
        color: #17152f;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.4;
    }

    .cart-page .cart-old-price {
        color: #88869a;
        font-size: 10px;
        font-weight: 400;
        text-decoration: line-through;
    }

    /* Quantity and line total share one row */
    .cart-page .cart-quantity {
        grid-column: 2;
        grid-row: 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        min-width: 0;
        margin: 9px 0 0;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .cart-page .cart-quantity button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 32px;
        width: 32px;
        min-width: 32px;
        height: 32px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: #fff;
        color: #626078;
        font-size: 15px;
        box-shadow: none;
    }

    .cart-page .cart-quantity span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 auto;
        min-width: 20px;
        height: 32px;
        margin: 0;
        padding: 0 8px;
        border-right: 1px solid #e8e3f2;
        border-left: 1px solid #e8e3f2;
        color: #17152f;
        font-size: 12px;
    }

    /* Compact quantity selector without stretching */
    .cart-page .cart-quantity {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .cart-page .cart-quantity button:first-child {
        border: 1px solid #ded9eb;
        border-right: 0;
        border-radius: 8px 0 0 8px;
    }

    .cart-page .cart-quantity span {
        flex: 0 0 36px;
        width: 36px;
        border-top: 1px solid #ded9eb;
        border-bottom: 1px solid #ded9eb;
    }

    .cart-page .cart-quantity button:last-child {
        border: 1px solid #ded9eb;
        border-left: 0;
        border-radius: 0 8px 8px 0;
    }

    .cart-page .cart-line-total {
        margin-left: auto;
        color: #17152f;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.4;
        text-align: right;
        white-space: nowrap;
    }

    /* Remove X: pinned to top-right of the product card */
    .cart-page .cart-remove {
        position: absolute;
        top: 12px;
        right: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 26px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: #626078;
        font-size: 16px;
        box-shadow: none;
    }

    /* Summary panel: actual HTML is .cart-layout > aside */
    .cart-page .cart-layout > aside {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .cart-page .cart-summary {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 14px;
        border: 1px solid #e8e3f2;
        border-radius: 11px;
        background: #fff;
        box-shadow: none;
    }

    .cart-page .cart-summary h2 {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 0 0 15px;
        color: #17152f;
        font-size: 16px;
        font-weight: 700;
    }

    .cart-page .cart-summary h2 i {
        color: #9747ff;
    }

    .cart-page .cart-summary-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        margin: 0 0 10px;
        color: #626078;
        font-size: 12px;
        line-height: 1.45;
    }

    .cart-page .cart-summary-row > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .cart-page .cart-summary-row > strong {
        flex: 0 0 auto;
        max-width: 55%;
        color: #626078;
        font-size: 12px;
        font-weight: 500;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .cart-page .cart-muted {
        color: #626078;
    }

    .cart-page .cart-summary-divider {
        height: 1px;
        margin: 14px 0;
        border: 0;
        background: #e8e3f2;
    }

    .cart-page .cart-summary-row.cart-total-row {
        align-items: center;
        margin-bottom: 14px;
        color: #17152f;
        font-size: 15px;
    }

    .cart-page .cart-summary-row.cart-total-row > strong {
        max-width: none;
        color: #17152f;
        font-size: 15px;
        font-weight: 700;
        text-align: left;
    }

    .cart-page .cart-summary-row.cart-total-row > div {
        min-width: 0;
        color: #9747ff;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .cart-page .cart-summary-row.cart-total-row > div strong {
        color: #9747ff;
        font-size: 16px;
        font-weight: 700;
    }

    /* Summary and shipping buttons */
    .cart-page .cart-primary-btn,
    .cart-page .cart-secondary-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
        min-height: 42px;
        margin: 9px 0 0;
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        text-align: center;
        box-shadow: none;
    }

    .cart-page .cart-primary-btn {
        border: 1px solid #9747ff;
        background: #9747ff;
        color: #fff;
    }

    .cart-page .cart-secondary-btn {
        border: 1px solid #a75bff;
        background: #faf6ff;
        color: #9747ff;
    }

    .cart-page .shipping-calculator[hidden] {
        display: none !important;
    }

    .cart-page .shipping-calculator {
        width: 100%;
        min-width: 0;
        margin-top: 10px;
        padding: 12px;
        border: 1px solid #e8e3f2;
        border-radius: 8px;
        background: #faf8ff;
    }

    .cart-page .shipping-field {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 100%;
        min-width: 0;
        margin-bottom: 10px;
    }

    .cart-page .shipping-field label {
        color: #4f4d63;
        font-size: 11px;
        font-weight: 600;
    }

    .cart-page .shipping-field input,
    .cart-page .shipping-field select {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        margin: 0;
        padding: 8px 10px;
        border: 1px solid #ded9eb;
        border-radius: 7px;
        background: #fff;
        color: #29263e;
        font-size: 12px;
    }

    .cart-page .shipping-calculator-message {
        margin: 8px 0 0;
        font-size: 11px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    /* Recommendations */
    .cart-page .cart-recommendations {
        width: 100%;
        min-width: 0;
        margin: 20px 0 0;
        overflow: hidden;
    }

    .cart-page .cart-recommendations-header {
        margin: 0 0 12px;
    }

    .cart-page .cart-recommendations-header h2 {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 16px;
    }

    .cart-page .cart-recommendations-header h2 i {
        color: #ed4f9b;
    }

    .cart-page .cart-recommendations-slider {
        position: relative;
        width: 100%;
        min-width: 0;
    }

    .cart-page .cart-recommendations-track {
        display: flex;
        gap: 9px;
        width: 100%;
        min-width: 0;
        padding-bottom: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .cart-page .cart-recommendations-track::-webkit-scrollbar {
        display: none;
    }

    .cart-page .cart-recommendation-card {
        position: relative;
        display: flex;
        flex: 0 0 68%;
        flex-direction: column;
        min-width: 0;
        padding: 9px;
        border: 1px solid #e8e3f2;
        border-radius: 10px;
        background: #fff;
        scroll-snap-align: start;
    }

    .cart-page .cart-recommendation-image {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 125px;
        min-width: 0;
        margin-bottom: 9px;
        overflow: hidden;
        border-radius: 7px;
        background: #f8f4ff;
    }

    .cart-page .cart-recommendation-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .cart-page .cart-recommendation-wishlist {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        padding: 0;
        border: 1px solid #eee8f7;
        border-radius: 50%;
        background: #fff;
        color: #17152f;
    }

    .cart-page .cart-recommendation-content {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
    }

    .cart-page .cart-recommendation-title {
        display: -webkit-box;
        min-width: 0;
        min-height: 34px;
        overflow: hidden;
        color: #17152f;
        font-size: 11px;
        line-height: 1.5;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .cart-page .cart-recommendation-price {
        color: #17152f;
        font-size: 13px;
        font-weight: 700;
    }

    .cart-page .cart-recommendation-old-price {
        margin-right: 5px;
        color: #88869a;
        font-size: 10px;
        text-decoration: line-through;
    }

    .cart-page .cart-recommendation-add {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        min-width: 0;
        min-height: 34px;
        margin-top: auto;
        padding: 7px 5px;
        border: 1px solid #a75bff;
        border-radius: 7px;
        background: #faf6ff;
        color: #9747ff;
        font-size: 11px;
        font-weight: 600;
    }

    .cart-page .cart-recommendation-arrow {
        display: none;
    }
}

/* Very narrow screens */
@media screen and (max-width: 380px) {

    .cart-page {
        padding: 9px;
    }

    .cart-page .cart-product {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 8px;
    }

    .cart-page .cart-product > img {
        width: 70px;
        height: 78px;
    }

    .cart-page .cart-product-name {
        font-size: 11px;
    }

    .cart-page .cart-summary {
        padding: 11px;
    }

    .cart-page .cart-recommendation-card {
        flex-basis: 76%;
    }
}


/* ==========================================
   CHECKOUT PAGE - MOBILE RESPONSIVE
   Add at the END of public/css/theme.css
========================================== */

@media screen and (max-width: 767px) {

    /* Prevent horizontal overflow */
    .checkout-page,
    .checkout-page * {
        box-sizing: border-box;
    }

    .checkout-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 14px 12px 24px;
        overflow-x: clip;
    }

    .checkout-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0 auto;
        padding: 0;
    }

    /* Page heading */
    .checkout-page-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 2px 0 16px;
        font-size: 21px;
        line-height: 1.3;
    }

    .checkout-page-title i {
        flex-shrink: 0;
        font-size: 21px;
    }

    /* One-column layout */
    .checkout-layout {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .checkout-left,
    .checkout-right {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
    }

    /* Cards */
    .checkout-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 12px;
        border: 1px solid #e8e2f0;
        border-radius: 10px;
        background: #fff;
        box-shadow: none;
    }

    .checkout-card-heading {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
        margin: 0 0 10px;
    }

    .checkout-card-heading > i {
        flex: 0 0 20px;
        width: 20px;
        font-size: 16px;
    }

    .checkout-card-heading h2 {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        font-size: 13px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .checkout-card-heading h2 span {
        font-size: 11px;
        font-weight: 400;
    }

    /* Account information */
    .checkout-info-panel {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        width: 100%;
        min-width: 0;
        padding: 10px;
        border-radius: 8px;
        background: #f7f1ff;
        overflow-wrap: anywhere;
    }

    .checkout-info-panel strong {
        font-size: 12px;
        line-height: 1.4;
    }

    .checkout-info-panel span {
        display: flex;
        align-items: flex-start;
        gap: 7px;
        min-width: 0;
        font-size: 11px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .checkout-info-panel span i {
        flex-shrink: 0;
        margin-top: 2px;
    }

    /* Add address button */
    .checkout-text-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        max-width: 100%;
        margin-left: auto;
        padding: 5px 0;
        font-size: 10px;
        line-height: 1.4;
        white-space: normal;
    }

    .checkout-no-address {
        margin: 0;
        font-size: 11px;
        line-height: 1.5;
    }

    /* Shipping and billing addresses */
    .shipping-address-list,
    .billing-address-list,
    .checkout-address-list {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .checkout-address-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .checkout-address-option {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 10px;
        border: 1px solid #e7e1ed;
        border-radius: 8px;
    }

    .checkout-address-option.selected {
        border-color: #b77aff;
        background: #faf6ff;
    }

    .checkout-address-option > input[type="radio"] {
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        margin: 3px 0 0;
        accent-color: #9848f0;
    }

    .checkout-address-content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        width: 0;
        min-width: 0;
        font-size: 11px;
        line-height: 1.45;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .checkout-address-content strong {
        font-size: 11px;
        line-height: 1.4;
    }

    .checkout-address-content > span {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .checkout-default-tag {
        display: inline-block;
        width: fit-content;
        max-width: 100%;
        padding: 2px 6px;
        border-radius: 4px;
        background: #eee0ff;
        color: #7938c5;
        font-size: 9px;
        line-height: 1.4;
    }

    /* Same-as-shipping control */
    .checkout-same-address {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        max-width: 100%;
        margin-left: auto;
        font-size: 10px;
        line-height: 1.4;
    }

    .checkout-same-address input {
        flex: 0 0 15px;
        width: 15px;
        height: 15px;
        margin: 0;
        accent-color: #9848f0;
    }

    /* Order notes */
    .checkout-notes {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 76px;
        padding: 9px;
        font-size: 11px;
        line-height: 1.5;
        resize: vertical;
    }

    .checkout-notes-count {
        margin-top: 4px;
        font-size: 10px;
        text-align: right;
    }

    /* Order summary heading and item count */
    .checkout-item-count {
        flex: 0 0 auto;
        margin-left: auto;
        color: #9749ed;
        font-size: 10px;
        white-space: nowrap;
    }

    /* Product rows */
    .checkout-items {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .checkout-item {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 8px 0;
        border-bottom: 1px solid #eee8f3;
    }

    .checkout-item:first-child {
        padding-top: 2px;
    }

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

    .checkout-item-image {
        display: block;
        width: 52px;
        height: 58px;
        max-width: 100%;
        object-fit: contain;
        border-radius: 5px;
        background: #faf8fc;
    }

    .checkout-item-details {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .checkout-item-details strong {
        font-size: 10px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .checkout-item-details span {
        color: #777184;
        font-size: 10px;
        line-height: 1.4;
    }

    .checkout-item-total {
        max-width: 88px;
        font-size: 10px;
        line-height: 1.4;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .checkout-empty {
        padding: 12px 0;
        font-size: 11px;
    }

    /* Price breakdown */
    .checkout-summary-lines {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        min-width: 0;
        margin-top: 8px;
    }

    .checkout-summary-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        min-width: 0;
        font-size: 11px;
        line-height: 1.45;
    }

    .checkout-summary-row > span {
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .checkout-summary-row > strong {
        flex: 0 0 auto;
        max-width: 50%;
        font-size: 11px;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .checkout-recommended-courier {
        display: block;
        margin-top: 2px;
        color: #888092;
        font-size: 9px;
        line-height: 1.4;
    }

    .checkout-discount {
        color: #25a65a;
    }

    .checkout-total-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        min-width: 0;
        margin-top: 12px;
        padding: 10px;
        border-radius: 7px;
        background: #f7f1ff;
    }

    .checkout-total-row > strong:first-child {
        min-width: 0;
        font-size: 12px;
        line-height: 1.4;
    }

    .checkout-total-row .checkout-grand-total {
        flex: 0 0 auto;
        max-width: 60%;
        color: #9346ed;
        font-size: 15px;
        line-height: 1.4;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .checkout-tax-note {
        margin: 5px 0 0;
        color: #82798e;
        font-size: 9px;
        line-height: 1.4;
        text-align: right;
    }

    .checkout-shipping-error,
    .checkout-cod-notice {
        font-size: 10px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    /* Coupon and store credit forms */
    .checkout-compact-card .checkout-card-heading {
        margin-bottom: 9px;
    }

    .checkout-inline-form {
        display: flex;
        align-items: stretch;
        gap: 7px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .checkout-inline-form input {
        flex: 1 1 auto;
        width: 0;
        min-width: 0;
        max-width: 100%;
        height: 37px;
        padding: 8px 10px;
        border: 1px solid #e1dce8;
        border-radius: 6px;
        font-size: 11px;
    }

    .checkout-primary-button {
        flex: 0 0 auto;
        min-width: 66px;
        min-height: 37px;
        padding: 8px 12px;
        border: 0;
        border-radius: 6px;
        background: #9848ed;
        color: #fff;
        font-size: 11px;
    }

    .checkout-primary-button:disabled {
        opacity: 0.55;
    }

    #couponMessage,
    #storeCreditMessage {
        margin: 7px 0 0;
        font-size: 10px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    #removeCouponButton,
    #removeStoreCreditButton {
        margin-top: 7px;
        font-size: 10px;
    }

    .checkout-store-credit {
        width: 100%;
        min-width: 0;
    }

    .checkout-store-credit > div:first-child {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        margin-bottom: 9px;
        font-size: 10px;
    }

    .checkout-store-credit > div:first-child strong {
        font-size: 11px;
    }

    /* Payment choices */
    .checkout-payment-options {
        display: flex;
        flex-direction: column;
        gap: 7px;
        width: 100%;
        min-width: 0;
    }

    .checkout-payment-option {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 9px;
        border: 1px solid #e7e1ed;
        border-radius: 7px;
    }

    .checkout-payment-option.selected {
        border-color: #b77aff;
        background: #faf6ff;
    }

    .checkout-payment-option > input[type="radio"] {
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: #9848f0;
    }

    .checkout-payment-option > i {
        flex: 0 0 20px;
        width: 20px;
        font-size: 16px;
        text-align: center;
    }

    .checkout-payment-option > span {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }

    .checkout-payment-option strong {
        font-size: 10px;
        line-height: 1.4;
    }

    .checkout-payment-option small {
        color: #82798e;
        font-size: 9px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    /* Place order */
    .checkout-place-order {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        min-height: 42px;
        margin-top: 12px;
        padding: 10px 12px;
        border: 0;
        border-radius: 7px;
        background: linear-gradient(90deg, #994bed, #8c43e8);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
    }

    .checkout-place-order:disabled {
        opacity: 0.65;
    }

    .checkout-terms {
        margin: 9px 0 0;
        font-size: 9px;
        line-height: 1.6;
        text-align: center;
        overflow-wrap: anywhere;
    }
}

/* Very narrow phones */
@media screen and (max-width: 360px) {
    .checkout-page {
        padding-right: 8px;
        padding-left: 8px;
    }

    .checkout-card {
        padding: 10px;
    }

    .checkout-item {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .checkout-item-image {
        width: 44px;
        height: 50px;
    }

    .checkout-item-total {
        grid-column: 2;
        max-width: 100%;
        justify-self: end;
        margin-top: -3px;
    }

    .checkout-card-heading h2 {
        font-size: 12px;
    }
}

/* ==========================================
   MOBILE CHECKOUT ORDER + ACCORDIONS
========================================== */

@media screen and (max-width: 767px) {

    .checkout-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .checkout-left,
    .checkout-right {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Ensure the summary follows notes */
    .checkout-left {
        order: 1;
    }

    .checkout-right {
        order: 2;
    }

    .checkout-card {
        min-width: 0;
        overflow: hidden;
    }

    /* Accordion heading */
    .checkout-card-heading[data-mobile-accordion="true"] {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        min-width: 0;
        min-height: 28px;
        margin: 0;
        cursor: pointer;
    }

    .checkout-card-heading[data-mobile-accordion="true"] h2 {
        flex: 1 1 auto;
        min-width: 0;
    }

    .checkout-accordion-chevron {
        flex: 0 0 auto;
        margin-left: auto;
        color: #28223a;
        font-size: 12px;
        transition: transform 0.2s ease;
    }

    .checkout-accordion-collapsed
    .checkout-accordion-chevron {
        transform: rotate(180deg);
    }

    /* Spacing between heading and expanded content */
    .checkout-card:has(
        .checkout-card-heading[data-mobile-accordion="true"]
    ):not(.checkout-accordion-collapsed)
    .checkout-card-heading {
        margin-bottom: 10px;
    }

    /* Accordion content is hidden only when collapsed */
    .checkout-accordion-content {
        display: block;
        min-width: 0;
    }

    .checkout-accordion-collapsed
    .checkout-accordion-content {
        display: none !important;
    }

    /* Keep the billing checkbox usable in its heading */
    .checkout-card-heading .checkout-same-address {
        position: relative;
        z-index: 1;
        cursor: pointer;
    }

    .checkout-card-heading .checkout-same-address input {
        cursor: pointer;
    }

    /* Compact order summary, coupon and store credit headings */
    .checkout-right .checkout-card-heading {
        min-width: 0;
    }

    /* The order summary remains expanded */
    .checkout-right .checkout-card:first-child
    .checkout-card-heading {
        margin-bottom: 10px;
    }
}


/* Register page - mobile responsive layout */
@media (max-width: 767px) {

    .register-page {
        padding: 24px 0 40px;
    }

    .register-page > .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .register-card {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 28px 20px;
        border-radius: 20px;
        box-sizing: border-box;
    }

    .register-header {
        margin-bottom: 28px;
    }

    .register-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
    }

    .register-header h1 {
        font-size: 20px;
        line-height: 1.4;
    }

    .register-header p {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 0;
    }

    .register-form {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    /* Stack label above input */
    .register-form .form-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
        width: 100%;
        min-width: 0;
    }

    .register-form .form-row label {
        display: block;
        width: 100%;
        font-size: 14px;
        line-height: 1.4;
    }

    .register-form .form-row input,
    .register-form .form-row select {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 46px;
        padding: 0 12px;
        box-sizing: border-box;
        font-size: 14px;
        border-radius: 8px;
    }

    .register-form .field-error {
        width: 100%;
        min-height: 0;
        margin-top: 0;
        font-size: 12px;
        box-sizing: border-box;
    }

    .register-terms {
        margin: 22px 0;
        font-size: 13px;
        line-height: 1.6;
        text-align: left;
    }

    .register-terms label {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .register-terms input[type="checkbox"] {
        flex-shrink: 0;
        margin-top: 4px;
    }

    #createAccountBtn {
        width: 100%;
        box-sizing: border-box;
    }

    .register-login {
        font-size: 13px;
        line-height: 1.5;
    }
}


/* Search results: mobile layout */
.mobile-filter-toggle {
    display: none;
}

@media (max-width: 767px) {

    /* Prevent page-wide horizontal overflow */
    .products-page-layout,
    .products-content,
    .products-grid {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .products-page-layout {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        gap: 18px;
    }

    /* Breadcrumb */
    .breadcrumb-area {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        margin-bottom: 14px;
    }

    /* Filter toggle */
    .mobile-filter-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 46px;
        padding: 0 14px;
        border: 1px solid #e7dff3;
        border-radius: 10px;
        background: #f7f1ff;
        color: var(--main-text);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        box-sizing: border-box;
    }

    .mobile-filter-toggle span {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .filter-toggle-arrow {
        transition: transform 0.2s ease;
    }

    .mobile-filter-toggle[aria-expanded="true"] .filter-toggle-arrow {
        transform: rotate(180deg);
    }

    /* Sidebar hidden until Filters is tapped */
    .products-sidebar {
        display: none !important;
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin: 0;
    }

    .products-sidebar.mobile-filters-open {
        display: block !important;
    }

    .products-sidebar .filter-box {
        width: 100%;
        box-sizing: border-box;
        padding: 16px;
        margin-bottom: 14px;
    }

    .products-sidebar .filter-options {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .products-sidebar .filter-option {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
    }

    .products-sidebar .reset-filter-btn {
        width: 100%;
        box-sizing: border-box;
    }

    /* Product results */
    .products-content {
        width: 100% !important;
        flex: 1 1 auto;
        overflow: visible;
    }

    /* Heading and sorting */
    .products-topbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        margin-bottom: 18px;
    }

    .products-topbar > div:first-child {
        min-width: 0;
        width: 100%;
    }

    .products-page-title {
        font-size: 26px;
        line-height: 1.25;
        overflow-wrap: anywhere;
        margin: 0 0 6px;
    }

    .products-count {
        font-size: 13px;
        line-height: 1.4;
    }

    .products-sort {
        width: 100%;
        min-width: 0;
    }

    .products-sort select {
        width: 100%;
        max-width: 100%;
        height: 42px;
        padding: 0 12px;
        font-size: 14px;
        box-sizing: border-box;
    }

    /* Two-column product grid */
    .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 10px;
        width: 100%;
        overflow: visible;
    }

    .products-grid > * {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .products-grid img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* Pagination */
    .products-pagination-wrap {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        width: 100%;
        margin-top: 24px;
    }

    .products-per-page {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
    }

    .products-pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        max-width: 100%;
    }
}



/* ========================================
   TERMS OF USE PAGE
======================================== */

.terms-page {
    width: 96%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 0 24px;
    color: #171321;
    font-size: 13px;
    box-sizing: border-box;
}

.terms-page *,
.terms-page *::before,
.terms-page *::after {
    box-sizing: border-box;
}

/* Breadcrumb */
.terms-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0 10px;
    font-size: 11px;
}

.terms-breadcrumb a {
    color: #493b75;
    text-decoration: none;
}

.terms-breadcrumb span:nth-child(2) {
    color: #b5a3e7;
    font-size: 18px;
}

/* Main container */
.terms-container {
    width: 100%;
    overflow: hidden;
    border: 1px solid #eee6fc;
    border-radius: 6px;
    background: linear-gradient(135deg, #faf7ff, #fff 45%);
}

/* Header */
.terms-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 105px;
    padding: 22px;
    border-bottom: 1px solid #f0e8fc;
}

.terms-header > div:first-child {
    min-width: 0;
    padding-right: 140px;
}

.terms-header h1 {
    margin: 0 0 8px;
    font-size: 29px;
    line-height: 1.2;
    font-weight: 700;
}

.terms-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.terms-header-image {
    position: absolute;
    top: 8px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 115px;
    height: 100px;
}

.terms-header-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Terms content panel */
.terms-content {
    margin: 0 8px 8px;
    padding: 12px;
    border: 1px solid #f0e8fc;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.8);
}

/* Individual sections */
.terms-section {
    margin: 0 0 17px;
}

.terms-section:last-child {
    margin-bottom: 0;
}

/* Section heading */
.terms-section-heading {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 38px;
    margin: 0 0 9px;
    padding: 7px 12px 7px 56px;
    border: 1px solid #eee5fc;
    border-radius: 4px;
    background: linear-gradient(90deg, #f5efff, #fbf9ff);
}

.terms-number {
    position: absolute;
    left: 10px;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    border: 4px solid #f5edff;
    border-radius: 50%;
    background: #dfc9ff;
    font-size: 14px;
    font-weight: 700;
}

.terms-section-heading h2 {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 700;
}

/* Section text */
.terms-section-body {
    padding: 0 16px 0 44px;
    font-size: 13px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.terms-section-body p {
    margin: 7px 0;
}

.terms-section-body ul,
.terms-section-body ol {
    margin: 7px 0;
    padding-left: 20px;
}

.terms-section-body li {
    margin-bottom: 3px;
}

/* ========================================
   TABLET AND MOBILE
======================================== */

@media (max-width: 768px) {

    .terms-page {
        width: 100%;
        max-width: none;
        padding: 0 10px 20px;
        font-size: 12px;
    }

    .terms-breadcrumb {
        padding: 12px 2px;
        font-size: 11px;
    }

    .terms-header {
        display: block;
        min-height: 0;
        padding: 18px 14px;
    }

    /* Reserve space for the logo beside the heading */
    .terms-header > div:first-child {
        padding-right: 62px;
    }

    .terms-header h1 {
        max-width: none;
        margin-bottom: 8px;
        font-size: 23px;
        line-height: 1.3;
    }

    .terms-header p {
        max-width: none;
        font-size: 12px;
        line-height: 1.6;
    }

    .terms-header-image {
        top: 14px;
        right: 8px;
        width: 48px;
        height: 48px;
    }

    .terms-header-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .terms-content {
        margin: 0 5px 5px;
        padding: 10px;
    }

    .terms-section {
        margin-bottom: 16px;
    }

    .terms-section-heading {
        display: flex;
        align-items: center;
        min-height: 36px;
        margin-bottom: 9px;
        padding: 7px 8px 7px 42px;
    }

    .terms-number {
        left: 5px;
        width: 24px;
        height: 24px;
        border-width: 3px;
        font-size: 12px;
    }

    .terms-section-heading h2 {
        font-size: 13px;
        line-height: 1.45;
    }

    .terms-section-body {
        padding: 0 5px;
        font-size: 12px;
        line-height: 1.65;
    }

    .terms-section-body p {
        margin: 6px 0;
    }

    .terms-section-body ul,
    .terms-section-body ol {
        margin: 6px 0;
        padding-left: 18px;
    }

    .terms-section-body li {
        margin-bottom: 4px;
    }
}

/* Small phones */
@media (max-width: 380px) {

    .terms-page {
        padding-right: 6px;
        padding-left: 6px;
    }

    .terms-header {
        padding: 15px 10px;
    }

    .terms-header > div:first-child {
        padding-right: 54px;
    }

    .terms-header h1 {
        font-size: 21px;
    }

    .terms-header-image {
        top: 12px;
        right: 5px;
        width: 42px;
        height: 42px;
    }

    .terms-content {
        padding: 7px;
    }

    .terms-section-heading {
        padding-left: 39px;
    }

    .terms-section-heading h2 {
        font-size: 12px;
    }

    .terms-section-body {
        font-size: 11.5px;
    }
}

.product-discount-quantity {
    margin-top: 6px;
    margin-left: 75px;
    color: #d93025;
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .product-discount-quantity {
        margin-left: 0;
        font-size: 11px;
    }
}
.product-detail-discount-percent {
    display: inline-block;
    margin-left: 8px;
    color: #d93025;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .product-detail-discount-percent {
        font-size: 11px;
        margin-left: 5px;
    }
}
.account-status-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-top: 8px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.account-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

/* Active */
.account-status-label.status-1 {
    color: #247a45;
    background: #e8f6ed;
}

.status-1 .account-status-dot {
    background: #2e9d58;
}

/* On-Hold */
.account-status-label.status-2 {
    color: #94620b;
    background: #fff4d9;
}

.status-2 .account-status-dot {
    background: #e6a323;
}

/* Paused */
.account-status-label.status-3 {
    color: #a83232;
    background: #fdeaea;
}

.status-3 .account-status-dot {
    background: #d94444;
}