@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap');
/* =====================================================================
   MARKETPLACE THEME
   A modern marketplace look in the style of the big regional storefronts
   (noon, Amazon, Flipkart): bright accent, sticky search header, category
   rail, dense product card grid, discount flags, mobile tab bar.

   Loaded LAST so it overrides main.css and responsive.css.
   All colours live in the variables below - change the accent here and
   the whole site follows.
   ===================================================================== */

:root {
    /* ---------------------------------------------------------------
       UMRAO PLAZA
       Sampled straight from the logo artwork:
         deep plum wordmark ....... #4A163A
         rose gold gradient ....... #AA7E62 -> #EFCAA9
         paper / stock ............ #ECEBE7
       The plum carries the brand and the rose gold does the
       highlighting, which keeps the palette warm without turning the
       whole page pink.
       --------------------------------------------------------------- */

    --mk-accent:        #4a163a;   /* plum - primary actions          */
    --mk-accent-hover:  #3a0f2c;
    --mk-on-accent:     #ffffff;   /* text that sits on the accent     */

    --mk-gold:          #b98a6c;   /* rose gold - highlights, borders  */
    --mk-gold-light:    #e8c6ac;
    --mk-gold-deep:     #9c6f55;
    --mk-gold-wash:     #f7ece3;   /* tinted surfaces                  */

    --mk-ink:           #574452;   /* body copy, warm grey-plum        */
    --mk-ink-strong:    #2e1226;   /* headings                         */
    --mk-muted:         #8d7c88;
    --mk-line:          #e9e0e4;
    --mk-page:          #faf7f4;   /* warm paper, from the logo stock  */
    --mk-card:          #ffffff;
    --mk-save:          #7b8c3f;   /* olive - reads better than a
                                      supermarket green next to plum   */
    --mk-price:         #2e1226;
    --mk-radius:        12px;
    --mk-shadow:        0 1px 3px rgba(46,18,38,.07);
    --mk-shadow-hover:  0 10px 30px rgba(46,18,38,.13);
}

body {
    background: var(--mk-page);
    color: var(--mk-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { transition: color .15s ease; }


/* =====================================================================
   1. TOP STRIP
   ===================================================================== */

.top {
    background: var(--mk-ink-strong);
    font-size: 12.5px;
    padding: 6px 0;
}
.top a, .top li, .top i { color: #c9cddb !important; }
.top a:hover { color: #fff !important; }


/* =====================================================================
   2. STICKY HEADER
   ===================================================================== */

.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Light bar on purpose: the logo wordmark is deep plum and would
       disappear against a plum header. */
    background: var(--mk-card);
    border-bottom: 1px solid var(--mk-line);
    box-shadow: 0 1px 0 rgba(74,22,58,.04);
    padding: 0;
}

.mk-header-inner {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 68px;
    padding: 10px 0;
}

.mk-logo { flex: 0 0 auto; }
.mk-logo img { height: 40px; width: auto; max-width: 190px; object-fit: contain; }

/* --- search --- */
.mk-search { flex: 1 1 auto; min-width: 0; }
.mk-search form { margin: 0; display: flex; width: 100%; }
.mk-search .mk-search-box {
    display: flex;
    width: 100%;
    background: #fff;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--mk-line);
}
.mk-search .mk-search-box:focus-within { border-color: var(--mk-gold); }
.mk-search input[type="text"] {
    flex: 1 1 auto;
    height: 42px;
    border: 0;
    padding: 0 16px;
    font-size: 14px;
    color: var(--mk-ink-strong);
    background: transparent;
    outline: none;
    min-width: 0;
}
.mk-search input::placeholder { color: #9aa0b4; }
.mk-search button {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 22px;
    border: 0;
    background: var(--mk-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.mk-search button:hover { background: var(--mk-accent-hover); }

/* --- account + cart --- */
.mk-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.mk-actions > li { list-style: none; }

.mk-action-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--mk-ink-strong) !important;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}
.mk-action-link:hover { opacity: .72; }
.mk-action-link .fa { font-size: 16px; }

.mk-greeting { font-size: 12px; color: var(--mk-ink-strong); font-weight: 600; }
.mk-greeting small { display: block; font-weight: 400; opacity: .7; }

/* Cart button sits on the yellow bar, so invert it to dark */
.header .shop-cart-btn {
    background: var(--mk-accent);
    border-radius: 999px;
    padding: 10px 17px;
}
.header .shop-cart-btn:hover { background: var(--mk-accent-hover); }
.header .shop-cart-badge { background: var(--mk-gold-light); color: var(--mk-ink-strong); }


/* =====================================================================
   3. CATEGORY RAIL
   ===================================================================== */

.nav {
    background: #fff;
    border-bottom: 1px solid var(--mk-line);
    position: sticky;
    top: 68px;
    z-index: 900;
}
.nav .menu > ul { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 2px; }
.nav .menu > ul::-webkit-scrollbar { display: none; }
.nav .menu > ul { scrollbar-width: none; }

.menu-container .menu > ul > li > a {
    color: var(--mk-ink) !important;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 16px !important;
    white-space: nowrap;
    background: transparent !important;
}
/* main.css sets ".menu > ul > li:hover { background: #333 }". On the old
   dark nav that sat under white text; now the nav is white and the links
   are dark, so the grey block made the text unreadable. Keep the hover
   transparent and show the accent underline instead. */
.menu > ul > li:hover,
.menu-container .menu > ul > li:hover,
.menu > ul > li > a:hover,
.menu > ul > li > a:focus {
    background: transparent !important;
}

.menu-container .menu > ul > li > a:hover,
.menu-container .menu > ul > li > a:focus {
    color: var(--mk-accent) !important;
    background: transparent !important;
    box-shadow: inset 0 -2px 0 var(--mk-gold);
}

/* Dropdown panel links: colour change only, never a background block */
.menu > ul > li > ul { background: #fff !important; border: 1px solid var(--mk-line); border-top: 0; }
.menu > ul > li > ul > li { background: transparent !important; }
.menu > ul > li > ul > li a { color: var(--mk-ink) !important; background: transparent !important; }
.menu > ul > li > ul > li a:hover { color: var(--mk-ink-strong) !important; background: transparent !important; }


/* =====================================================================
   4. PAGE BANNERS  -  the old full-bleed hero on every page ate the fold
   ===================================================================== */

.page-banner {
    height: auto !important;
    min-height: 0 !important;
    padding: 26px 0 !important;
    background: #fff !important;
    background-image: none !important;
    border-bottom: 1px solid var(--mk-line);
}
.page-banner .overlay { display: none; }
.page-banner .page-banner-inner h1,
.page-banner .inner h1 {
    color: var(--mk-ink-strong) !important;
    font-size: 24px;
    font-weight: 700;
    text-shadow: none;
    margin: 0;
    text-align: left;
    max-width: 1170px;
    padding: 0 15px;
    margin-left: auto;
    margin-right: auto;
}

.page { padding: 26px 0 40px; }


/* =====================================================================
   5. PRODUCT CARDS
   The listing markup is .item > .thumb > .photo + .text, and it is the
   same on the home page, the category pages and search results, so one
   rule set covers all of them.
   ===================================================================== */

.item-product-cat,
.product-carousel .item,
.item-product {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 16px;
}

.product-carousel .item .thumb,
.item .inner,
.product-carousel .item {
    position: relative;
}

.item .inner,
.product-carousel .item > .thumb {
    background: var(--mk-card);
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius);
    overflow: hidden;
}

.item .inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow .18s ease, transform .18s ease;
    box-shadow: var(--mk-shadow);
}
.item .inner:hover {
    box-shadow: var(--mk-shadow-hover);
    transform: translateY(-2px);
}

.item .thumb {
    position: relative;
    background: #fff;
    border-radius: var(--mk-radius) var(--mk-radius) 0 0;
    overflow: hidden;
}
.item .thumb .photo {
    height: 210px;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: transform .3s ease;
}
.item .inner:hover .thumb .photo { transform: scale(1.04); }
.item .thumb .overlay { display: none; }

.item .text {
    padding: 12px 14px 16px;
    text-align: left;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.item .text h3 {
    margin: 0 0 8px 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    min-height: 38px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.item .text h3 a { color: var(--mk-ink) !important; text-decoration: none !important; }
.item .text h3 a:hover { color: var(--mk-ink-strong) !important; }

.item .text h4 {
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--mk-price);
    line-height: 1.2;
}
.item .text h4 del {
    font-size: 13px;
    font-weight: 400;
    color: var(--mk-muted);
    margin-left: 6px;
}

.item .rating { margin-top: auto; padding-top: 8px; font-size: 12px; }
.item .rating .fa { color: #ffb400; }

/* Discount flag on the image */
.mk-discount-flag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    background: var(--mk-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 4px 8px;
    border-radius: 4px;
}

.mk-flag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 4px;
    margin-bottom: 6px;
}
.mk-flag-low { background: #fff4e5; color: #b76e00; }
.mk-flag-out { background: #fdecea; color: #b3261e; }

/* Section headings above the carousels */
.section-title h2, .featured-product h2, .latest-product h2 {
    font-size: 20px !important;
    font-weight: 700;
    color: var(--mk-ink-strong);
    text-align: left;
}
.section-title h3, .featured-product h3, .latest-product h3 {
    font-size: 14px !important;
    color: var(--mk-muted);
    text-align: left;
    font-weight: 400;
}


/* =====================================================================
   6. PRODUCT DETAIL PAGE
   ===================================================================== */

.product-details, .single-product {
    background: var(--mk-card);
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius);
    padding: 22px;
}

.p-title, .single-product h2 {
    font-size: 22px !important;
    font-weight: 700;
    color: var(--mk-ink-strong);
    line-height: 1.3;
}

.p-price span:last-child {
    font-size: 28px;
    font-weight: 800;
    color: var(--mk-price);
}
.p-price del { color: var(--mk-muted); font-size: 16px; font-weight: 400; }

.btn-cart input[type="submit"],
.btn-cart1 input[type="submit"] {
    background: var(--mk-accent) !important;
    color: var(--mk-on-accent) !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 14px 34px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    width: 100%;
    max-width: 360px;
    cursor: pointer;
    transition: background .15s ease;
}
.btn-cart input[type="submit"]:hover,
.btn-cart1 input[type="submit"]:hover { background: var(--mk-accent-hover) !important; }

.nav-tabs { border-bottom: 1px solid var(--mk-line); }
.nav-tabs > li > a { color: var(--mk-muted); font-weight: 600; border: 0 !important; }
.nav-tabs > li.active > a {
    color: var(--mk-ink-strong) !important;
    background: transparent !important;
    box-shadow: inset 0 -3px 0 var(--mk-accent);
}
.tab-content {
    background: var(--mk-card);
    border: 1px solid var(--mk-line);
    border-top: 0;
    border-radius: 0 0 var(--mk-radius) var(--mk-radius);
    padding: 20px;
}


/* =====================================================================
   7. BUTTONS  -  align the shop buttons with the marketplace palette
   ===================================================================== */

.shop-btn-primary {
    background: var(--mk-accent);
    color: var(--mk-on-accent) !important;
}
.shop-btn-primary:hover {
    background: var(--mk-accent-hover);
    color: var(--mk-on-accent) !important;
}

.btn-primary, .btn-success, .btn-danger {
    background: var(--mk-ink-strong) !important;
    border-color: var(--mk-ink-strong) !important;
    border-radius: 8px !important;
}
.btn-primary:hover, .btn-success:hover, .btn-danger:hover { background: #000 !important; }

.form-control {
    border-radius: 8px;
    border-color: #d7dae4;
    box-shadow: none;
    height: 42px;
}
.form-control:focus {
    border-color: var(--mk-ink);
    box-shadow: 0 0 0 3px rgba(64,69,83,.10);
}


/* =====================================================================
   8. CART / CHECKOUT  -  inherit the marketplace surfaces
   ===================================================================== */

.co-card, .cart-summary, .co-summary {
    background: var(--mk-card);
    border-color: var(--mk-line);
    border-radius: var(--mk-radius);
    box-shadow: var(--mk-shadow);
}
.cart-summary, .co-summary { background: var(--mk-card); }

.co-steps li.active { background: var(--mk-ink-strong); color: #fff; }
.co-steps li.done { background: #eaf7e4; color: #2c7a10; }

.cart-lines {
    background: var(--mk-card);
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius);
    padding: 20px;
    box-shadow: var(--mk-shadow);
}

.shop-cart-btn { background: var(--mk-ink-strong); }
.shop-cart-btn:hover { background: #000; }


/* =====================================================================
   9. FOOTER
   ===================================================================== */

.footer, .footer-bottom { background: var(--mk-ink-strong); }
.footer h3, .footer h4 { color: #fff; font-size: 15px; font-weight: 700; }
.footer a, .footer p, .footer li { color: #b4bacb; }
.footer a:hover { color: #fff; }


/* =====================================================================
   10. MOBILE TAB BAR
   ===================================================================== */

.mk-tabbar {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1150;
    background: #fff;
    border-top: 1px solid var(--mk-line);
    box-shadow: 0 -2px 14px rgba(0,0,0,.08);
}
.mk-tabbar ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mk-tabbar li { flex: 1 1 0; }
.mk-tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 2px 7px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--mk-muted) !important;
    text-decoration: none !important;
    position: relative;
}
.mk-tabbar a .fa { font-size: 18px; }
.mk-tabbar a.active { color: var(--mk-ink-strong) !important; }
.mk-tabbar .mk-tab-badge {
    position: absolute;
    top: 3px;
    left: 50%;
    margin-left: 4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #e4144d;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}
.mk-tab-badge.is-empty { display: none; }


/* =====================================================================
   11. RESPONSIVE
   ===================================================================== */

@media (max-width: 991px) {

    .mk-header-inner {
        flex-wrap: wrap;
        gap: 10px;
        min-height: 0;
        padding: 10px 0;
    }
    .mk-logo { order: 1; flex: 1 1 auto; }
    .mk-actions { order: 2; flex: 0 0 auto; gap: 12px; }
    .mk-search { order: 3; flex: 1 1 100%; }

    .mk-logo img { height: 32px; }
    .mk-action-link span.mk-action-text { display: none; }

    .nav { position: static; }

    .item .thumb .photo { height: 165px; }
}

@media (max-width: 767px) {

    /* Two products per row, like every marketplace app */
    .item-product-cat, .item-product {
        width: 50%;
        float: left;
        padding-left: 6px;
        padding-right: 6px;
    }

    .item .text { padding: 10px 10px 14px; }
    .item .text h3 { font-size: 12.5px; min-height: 35px; }
    .item .text h4 { font-size: 16px; }
    .item .thumb .photo { height: 140px; }

    .page-banner { padding: 16px 0 !important; }
    .page-banner .page-banner-inner h1, .page-banner .inner h1 { font-size: 19px; }

    .mk-tabbar { display: block; }
    body.has-tabbar { padding-bottom: 62px; }

    /* The tab bar replaces the older sticky cart bar on small screens */
    .shop-mobile-bar { bottom: 58px; }
    body.has-mobile-bar.has-tabbar { padding-bottom: 128px; }

    #shop-toast { bottom: 130px; }
    .shop-mini-cart { bottom: 130px; }

    .cart-lines { padding: 14px; }
}

@media (max-width: 400px) {
    .mk-search button { padding: 0 14px; font-size: 0; }
    .mk-search button::after {
        content: "\f002";
        font-family: FontAwesome;
        font-size: 15px;
    }
}


/* =====================================================================
   12. SPECIFICITY OVERRIDES
   main.css scopes its product rules under .product (".product .text h3",
   ".product .item .thumb .photo"). Matching that scope here so the
   marketplace styling actually wins instead of relying on load order.
   ===================================================================== */

.nav, .menu-container { background: #fff !important; }
.menu-container .menu > ul > li > a { color: var(--mk-ink) !important; }

.product .text {
    background: var(--mk-card) !important;
    padding: 12px 14px 14px !important;
    text-align: left !important;
}

.product .text h3 {
    text-align: left !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    margin: 0 0 8px 0 !important;
    min-height: 38px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product .text h3 a {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    color: var(--mk-ink) !important;
}

.product .text h4 {
    text-align: left !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--mk-price) !important;
    margin: 0 0 4px 0 !important;
}
.product .text del { color: var(--mk-muted) !important; font-size: 13px; font-weight: 400; }

.product .text .rating { text-align: left !important; margin-bottom: 10px; }

/* The "Add to Cart" link under each card */
.product .text p {
    text-align: left !important;
    margin: 10px 0 0 0 !important;
}
.product .text p a {
    display: block;
    background: var(--mk-accent) !important;
    color: var(--mk-on-accent) !important;
    font-size: 13.5px !important;
    font-weight: 700;
    padding: 10px 12px !important;
    border-radius: 8px;
    text-align: center;
    text-decoration: none !important;
}
.product .text p a:hover { background: var(--mk-accent-hover) !important; }

.product .out-of-stock { text-align: left; margin-top: 10px; }
.product .out-of-stock .inner {
    display: block;
    background: #f1f2f6 !important;
    color: var(--mk-muted) !important;
    border-radius: 8px;
    padding: 10px 12px !important;
    text-align: center;
    font-weight: 600;
}

.product .item .thumb .photo {
    height: 210px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.product .item-product-cat .inner,
.product .item-search-result .inner {
    border: 1px solid var(--mk-line) !important;
    border-radius: var(--mk-radius);
    overflow: hidden;
}

/* Sidebar category tree as a card */
.sidebar-category, .widget, .tree-menu {
    background: var(--mk-card);
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius);
    padding: 16px;
    box-shadow: var(--mk-shadow);
}

/* The trust-badge strip used enormous circular icons that pushed the
   products below the fold. Shrink it into a compact row. */
.service { padding: 22px 0 !important; background: #fff; border-bottom: 1px solid var(--mk-line); }
.service .item { text-align: center; padding: 10px 8px !important; }
.service .item img, .service .item .icon img { max-height: 42px !important; width: auto !important; }
.service .item h3, .service .item h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 10px 0 4px 0 !important;
    color: var(--mk-ink-strong) !important;
}
.service .item p { font-size: 12.5px !important; color: var(--mk-muted) !important; margin: 0 !important; }

@media (max-width: 767px) {
    .product .item .thumb .photo { height: 140px !important; }
    .product .text h3, .product .text h3 a { font-size: 12.5px !important; }
    .product .text h4 { font-size: 16px !important; }
    .service .item img, .service .item .icon img { max-height: 32px !important; }
}


/* =====================================================================
   13. DELIVERY LOCATION
   ===================================================================== */

.mk-loc-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 210px;
    padding: 6px 10px;
    border: 1px solid var(--mk-line);
    border-radius: 999px;
    background: var(--mk-gold-wash);
    color: var(--mk-ink-strong);
    cursor: pointer;
    text-align: left;
    line-height: 1.25;
}
.mk-loc-btn:hover { border-color: var(--mk-gold); }
.mk-loc-btn .fa { font-size: 16px; flex: 0 0 auto; }
.mk-loc-text { min-width: 0; }
.mk-loc-text small { display: block; font-size: 10.5px; opacity: .7; }
.mk-loc-text strong {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-loc-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(20,22,31,.55);
    padding: 20px;
    overflow-y: auto;
}
.mk-loc-backdrop.open { display: flex; align-items: flex-start; justify-content: center; }

.mk-loc-modal {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin-top: 8vh;
    background: #fff;
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 20px 60px rgba(0,0,0,.28);
}
.mk-loc-modal h4 { margin: 0 0 6px 0; font-size: 19px; font-weight: 700; color: var(--mk-ink-strong); }
.mk-loc-sub { font-size: 13px; color: var(--mk-muted); margin-bottom: 18px; }

.mk-loc-close {
    position: absolute; top: 10px; right: 14px;
    border: 0; background: none;
    font-size: 26px; line-height: 1;
    color: var(--mk-muted); cursor: pointer;
}
.mk-loc-close:hover { color: var(--mk-ink-strong); }

.mk-loc-row { display: flex; gap: 10px; }
.mk-loc-row input {
    flex: 1 1 auto;
    height: 46px;
    border: 1px solid #d7dae4;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .04em;
    outline: none;
    min-width: 0;
}
.mk-loc-row input:focus { border-color: var(--mk-ink); }
.mk-loc-row .shop-btn { flex: 0 0 auto; padding: 12px 20px; }

.mk-loc-detect {
    margin-top: 14px;
    border: 0;
    background: none;
    padding: 0;
    color: #1f5fbf;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
.mk-loc-detect:hover { text-decoration: underline; }
.mk-loc-detect[disabled] { opacity: .5; cursor: default; text-decoration: none; }

.mk-loc-result { margin-top: 16px; font-size: 13.5px; line-height: 1.6; }
.mk-loc-result .ok {
    background: #eaf7e4; border: 1px solid #c6e8b6; color: #2c7a10;
    padding: 12px 14px; border-radius: 8px;
}
.mk-loc-result .bad {
    background: #fdecea; border: 1px solid #f5c6c2; color: #b3261e;
    padding: 12px 14px; border-radius: 8px;
}

.mk-loc-clear {
    margin-top: 14px; border: 0; background: none; padding: 0;
    color: var(--mk-muted); font-size: 12.5px; text-decoration: underline; cursor: pointer;
}

/* --- delivery box on the product page --- */
.mk-delivery-box {
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius);
    padding: 14px 16px;
    margin: 18px 0;
    background: #fbfbfd;
}
.mk-delivery-box h5 {
    margin: 0 0 10px 0; font-size: 13px; font-weight: 700;
    color: var(--mk-ink-strong); text-transform: uppercase; letter-spacing: .04em;
}
.mk-delivery-row { display: flex; gap: 8px; margin-bottom: 10px; }
.mk-delivery-row input {
    flex: 1 1 auto; height: 40px; min-width: 0;
    border: 1px solid #d7dae4; border-radius: 8px;
    padding: 0 12px; font-size: 14px; outline: none;
}
.mk-delivery-row button {
    flex: 0 0 auto; height: 40px; padding: 0 16px;
    border: 1px solid var(--mk-ink-strong); border-radius: 8px;
    background: #fff; color: var(--mk-ink-strong);
    font-weight: 700; font-size: 13px; cursor: pointer;
}
.mk-delivery-row button:hover { background: var(--mk-ink-strong); color: #fff; }

.mk-delivery-line { font-size: 13.5px; color: var(--mk-ink); margin: 4px 0; }
.mk-delivery-line .fa { width: 16px; color: var(--mk-muted); }
.mk-delivery-line strong { color: var(--mk-ink-strong); }
.mk-delivery-line.good strong { color: var(--mk-save); }
.mk-delivery-line.bad { color: #b3261e; }

/* Free delivery nudge in the cart summary */
.mk-free-hint {
    margin-top: 10px; padding: 9px 12px;
    background: #eaf7e4; border-radius: 8px;
    font-size: 12.5px; color: #2c7a10; font-weight: 600;
}
.mk-free-hint.almost { background: #fff6e0; color: #96690a; }

@media (max-width: 991px) {
    .mk-loc-btn { order: 4; max-width: none; flex: 1 1 100%; }
    .mk-loc-text strong { max-width: none; }
}


/* =====================================================================
   14. MEGA NAVIGATION
   Replaces the theme's hover-only menu. Works with a mouse, a keyboard
   and a touchscreen, and never traps the pointer.
   ===================================================================== */

.mk-nav {
    background: #fff;
    border-bottom: 1px solid var(--mk-line);
    position: sticky;
    top: 68px;
    z-index: 950;
}
.mk-nav > .container { position: relative; }

.mk-menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
}
.mk-menu::-webkit-scrollbar { display: none; }

.mk-menu-item { position: static; list-style: none; }

.mk-menu-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 15px 16px;
    color: var(--mk-ink) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    background: transparent !important;
    border: 0;
    box-shadow: none;
    transition: color .12s ease, box-shadow .12s ease;
}
.mk-menu-link:hover,
.mk-menu-link:focus-visible,
.mk-menu-item.is-open > .mk-menu-link {
    color: var(--mk-accent) !important;
    box-shadow: inset 0 -2px 0 var(--mk-gold);
}
.mk-menu-link.is-current {
    color: var(--mk-accent) !important;
    box-shadow: inset 0 -2px 0 var(--mk-accent);
}
.mk-menu-link:focus-visible { outline: 2px solid var(--mk-ink-strong); outline-offset: -2px; }

.mk-caret { font-size: 13px; opacity: .55; transition: transform .15s ease; }
.mk-menu-item.is-open .mk-caret { transform: rotate(180deg); opacity: 1; }

/* --- the panel --- */
.mk-mega {
    position: absolute;
    top: 100%;
    left: 15px;
    right: 15px;
    z-index: 1000;
    background: #fff;
    border: 1px solid var(--mk-line);
    border-top: 0;
    border-radius: 0 0 var(--mk-radius) var(--mk-radius);
    box-shadow: 0 18px 44px rgba(27,30,41,.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    pointer-events: none;
}
.mk-menu-item.is-open > .mk-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.mk-mega-inner {
    display: grid;
    gap: 6px 26px;
    padding: 24px 26px 20px;
    max-height: 68vh;
    overflow-y: auto;
}
/* Fixed, readable column width rather than stretching two columns
   across the full container - long gaps between a label and its count
   are hard to scan. */
.mk-cols-1, .mk-cols-2, .mk-cols-3 { justify-content: start; }
.mk-cols-1 { grid-template-columns: minmax(0, 300px); }
.mk-cols-2 { grid-template-columns: repeat(2, minmax(0, 280px)); }
.mk-cols-3 { grid-template-columns: repeat(3, minmax(0, 270px)); }
.mk-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Panel only as wide as it needs to be */
.mk-mega-1 { right: auto; max-width: 360px; }
.mk-mega-2 { right: auto; max-width: 660px; }
.mk-mega-3 { right: auto; max-width: 920px; }

.mk-mega-col { min-width: 0; margin-bottom: 18px; break-inside: avoid; }

.mk-mega-head {
    display: block;
    margin-bottom: 9px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--mk-line);
    color: var(--mk-ink-strong) !important;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none !important;
}
.mk-mega-head:hover { color: var(--mk-ink-strong) !important; border-bottom-color: var(--mk-accent); }

.mk-mega-list { margin: 0; padding: 0; list-style: none; }
.mk-mega-list li { list-style: none; margin: 0; }
.mk-mega-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0;
    color: var(--mk-muted) !important;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
}
.mk-mega-list a:hover,
.mk-mega-list a:focus-visible {
    color: var(--mk-ink-strong) !important;
    background: transparent !important;
}

.mk-mega-count {
    flex: 0 0 auto;
    background: #f1f2f6;
    color: var(--mk-muted);
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 9px;
}

.mk-mega-foot {
    border-top: 1px solid var(--mk-line);
    background: #fafbfc;
    border-radius: 0 0 var(--mk-radius) var(--mk-radius);
}
.mk-mega-foot a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    color: var(--mk-ink-strong) !important;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none !important;
}
.mk-mega-foot a:hover { background: #f3f4f8; }
.mk-mega-foot .fa-angle-right { margin-left: 2px; }

/* --- mobile trigger --- */
.mk-nav-toggle {
    display: none;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 13px 4px;
    border: 0;
    background: transparent;
    color: var(--mk-ink-strong);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.mk-nav-toggle .fa { font-size: 17px; }

/* --- mobile drawer --- */
.mk-drawer-backdrop {
    position: fixed; inset: 0; z-index: 1900;
    background: rgba(20,22,31,.5);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s;
}
.mk-drawer-backdrop.open { opacity: 1; visibility: visible; }

.mk-drawer {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 1950;
    width: 86%;
    max-width: 340px;
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(-102%);
    transition: transform .24s cubic-bezier(.32,.72,0,1);
    box-shadow: 4px 0 30px rgba(0,0,0,.2);
}
.mk-drawer.open { transform: translateX(0); }

.mk-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px;
    background: var(--mk-accent);
    color: var(--mk-on-accent);
    font-weight: 700;
    font-size: 15px;
    flex: 0 0 auto;
}
.mk-drawer-close {
    border: 0; background: none; padding: 0;
    font-size: 28px; line-height: 1; cursor: pointer;
    color: var(--mk-on-accent);
}

.mk-drawer-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.mk-drawer-link,
.mk-acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid var(--mk-line);
    background: #fff;
    color: var(--mk-ink-strong) !important;
    font-size: 14.5px;
    font-weight: 600;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
}
.mk-acc-head .fa { transition: transform .18s ease; opacity: .5; }
.mk-acc-head[aria-expanded="true"] .fa { transform: rotate(180deg); opacity: 1; }

.mk-acc-body { display: none; background: #fafbfc; }
.mk-acc.is-open > .mk-acc-body { display: block; }

.mk-acc-sub .mk-acc-head {
    padding-left: 30px;
    font-size: 13.5px;
    font-weight: 600;
    background: #fafbfc;
}
.mk-acc-sub .mk-acc-body { background: #fff; }

.mk-drawer-all,
.mk-drawer-sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 18px 11px 44px;
    border-bottom: 1px solid #f0f1f5;
    color: var(--mk-muted) !important;
    font-size: 13px;
    text-decoration: none !important;
}
.mk-drawer-all {
    padding-left: 30px;
    color: var(--mk-ink-strong) !important;
    font-weight: 700;
    font-size: 13px;
}
.mk-drawer-sublink:hover, .mk-drawer-all:hover { color: var(--mk-ink-strong) !important; }

/* --- responsive --- */
@media (max-width: 991px) {
    .mk-nav { position: static; }
    .mk-nav-toggle { display: flex; }
    .mk-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mk-mega, .mk-drawer, .mk-drawer-backdrop, .mk-caret, .mk-acc-head .fa {
        transition: none !important;
    }
}


/* =====================================================================
   15. LAYERING
   ---------------------------------------------------------------------
   main.css hands out z-index values almost at random - 999 on a page
   banner heading, 99999 on the back-to-top button, 99999999 on a product
   thumbnail link. That is why the mega panel was appearing UNDERNEATH
   the "Search By:" heading: the heading sat at 999 while the whole nav
   sat at 950.

   Rather than escalating into the millions, page furniture is pushed
   back down to sane values and the fixed chrome gets one documented
   scale. Everything that overlays the page lives here, in order.

       page content .............. auto
       back to top ............... 900
       category rail ............. 1000   (mega panel is local to it)
       sticky header ............. 1100   (mini cart is local to it)
       mobile cart bar ........... 1200
       mobile tab bar ............ 1300
       toast ..................... 1400
       category drawer ........... 1500 / 1510
       location modal ............ 1600
       preloader ................. 9999
   ===================================================================== */

/* --- pull the theme's inflated values back to earth --- */
.page-banner h1              { z-index: auto !important; }
ul.prod-slider li a          { z-index: auto !important; }
div.pagination               { z-index: auto !important; }
.blog .image-holder .date,
.blog .gallery-carousel,
.blog .owl-controls          { z-index: 2 !important; }
.testimonial-v1 .container   { z-index: 1 !important; }
.bx-controls                 { z-index: 5 !important; }
.scrollup                    { z-index: 900 !important; }

/* --- the fixed chrome, in stacking order --- */
.mk-nav             { z-index: 1000; }
.mk-mega            { z-index: 10; }    /* local to .mk-nav */

.header             { z-index: 1100; }
.shop-mini-cart     { z-index: 10; }    /* local to .header */

.shop-mobile-bar    { z-index: 1200; }
.mk-tabbar          { z-index: 1300; }
#shop-toast         { z-index: 1400; }

.mk-drawer-backdrop { z-index: 1500; }
.mk-drawer          { z-index: 1510; }

.mk-loc-backdrop    { z-index: 1600; }

#preloader          { z-index: 9999 !important; }


/* =====================================================================
   16. PRODUCT IMAGE ZOOM
   ===================================================================== */

.prod-slider li.mk-zoomable {
    cursor: zoom-in;
    transition: background-size .18s ease;
    background-position: center;
}
.prod-slider li.mk-zoomable.is-zooming {
    transition: none;               /* follow the cursor with no lag */
    background-repeat: no-repeat;
}

/* Hint badge, faded out while zooming */
.prod-slider li.mk-zoomable::after {
    content: "\f00e  Hover to zoom";
    font-family: FontAwesome, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 3;
    padding: 6px 11px;
    border-radius: 20px;
    background: rgba(27,30,41,.72);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
    pointer-events: none;
    opacity: 1;
    transition: opacity .18s ease;
}
.prod-slider li.mk-zoomable.is-zooming::after { opacity: 0; }

@media (hover: none) {
    .prod-slider li.mk-zoomable { cursor: pointer; }
    .prod-slider li.mk-zoomable::after { content: "\f00e  Tap to enlarge"; }
}


/* =====================================================================
   17. FILTER BAR
   ===================================================================== */

.mk-filterbar {
    background: var(--mk-card);
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius);
    padding: 14px 16px;
    margin: 0 8px 20px;
    box-shadow: var(--mk-shadow);
}

.mk-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0;
}

.mk-filter-count {
    font-size: 13.5px;
    color: var(--mk-muted);
    margin-right: auto;
}
.mk-filter-count strong { color: var(--mk-ink-strong); font-size: 15px; }

.mk-filter-group { display: flex; align-items: center; gap: 8px; }
.mk-filter-group > label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--mk-ink);
    white-space: nowrap;
}

.mk-filter-select {
    height: 38px;
    padding: 0 30px 0 11px;
    border: 1px solid #d7dae4;
    border-radius: 8px;
    background: #fff;
    font-size: 13.5px;
    color: var(--mk-ink-strong);
    cursor: pointer;
    max-width: 190px;
}
.mk-filter-price {
    width: 86px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #d7dae4;
    border-radius: 8px;
    font-size: 13.5px;
    outline: none;
}
.mk-filter-select:focus, .mk-filter-price:focus { border-color: var(--mk-ink); }
.mk-filter-dash { color: var(--mk-muted); }

.mk-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--mk-ink);
    cursor: pointer;
    white-space: nowrap;
}

.mk-filter-apply {
    height: 38px;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    background: var(--mk-accent);
    color: var(--mk-on-accent);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}
.mk-filter-apply:hover { background: var(--mk-accent-hover); }

.mk-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--mk-line);
}
.mk-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 20px;
    background: #f1f2f6;
    color: var(--mk-ink-strong) !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
}
.mk-chip:hover { background: #e6e8ef; }
.mk-chip span { opacity: .55; font-size: 14px; }
.mk-chip-clear { background: transparent; color: var(--mk-muted) !important; text-decoration: underline !important; }

@media (max-width: 767px) {
    .mk-filterbar { margin: 0 6px 16px; padding: 12px; }
    .mk-filter-count { flex: 1 1 100%; margin-bottom: 2px; }
    .mk-filter-group { flex: 1 1 100%; }
    .mk-filter-select { flex: 1 1 auto; max-width: none; }
    .mk-filter-price { flex: 1 1 0; width: auto; }
    .mk-filter-apply { flex: 1 1 100%; }
}


/* =====================================================================
   18. BORDERLESS PRODUCT CARDS
   ---------------------------------------------------------------------
   main.css puts "border: 2px solid #e5e5e5" on .product .item. On the
   home page carousels that box then contained a second bordered box
   (the .thumb), because the carousel markup has no .inner wrapper - so
   every card read as a frame inside a frame.

   Cards are now borderless: a white surface on the grey page, separated
   by a soft shadow instead of a line. One rule set covers the home
   carousels, the category grid and the search grid.
   ===================================================================== */

.product .item,
.product-carousel .item,
.item-product,
.item-product-cat,
.item-search-result {
    border: 0 !important;
}

/* --- home page carousels: .item IS the card (no .inner wrapper) --- */
.product-carousel .item {
    padding: 0;
    background: var(--mk-card);
    border-radius: var(--mk-radius);
    overflow: hidden;
    box-shadow: var(--mk-shadow);
    transition: box-shadow .18s ease, transform .18s ease;
}
.product-carousel .item:hover {
    box-shadow: var(--mk-shadow-hover);
    transform: translateY(-2px);
}

.product-carousel .item .thumb,
.product-carousel .item > .thumb {
    border: 0 !important;
    border-radius: 0;
    background: #fff;
}

.product-carousel .item .text {
    border: 0;
    padding: 12px 14px 16px !important;
}

/* --- category / search grid: .inner is the card --- */
.product .item-product-cat .inner,
.product .item-search-result .inner,
.item .inner {
    border: 0 !important;
    background: var(--mk-card);
    border-radius: var(--mk-radius);
    overflow: hidden;
    box-shadow: var(--mk-shadow);
}
.item .inner:hover {
    box-shadow: var(--mk-shadow-hover);
}

.item .thumb,
.product .item .thumb {
    border: 0 !important;
}

/* The "Add to Cart" button no longer needs a divider above it */
.product .text p { border-top: 0; }


/* =====================================================================
   19. BUY NOW
   ===================================================================== */

.mk-buy-row { margin-bottom: 10px; }
.mk-buy-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    max-width: 360px;
    padding: 14px 34px;
    border: 0;
    border-radius: 8px;
    background: var(--mk-ink-strong);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.mk-buy-now:hover { background: #000; color: #fff; }
.mk-buy-now .fa { color: var(--mk-gold-light); }


/* =====================================================================
   20. ORDER TRACKING
   ===================================================================== */

.ot-lookup {
    max-width: 520px;
    margin: 0 auto;
    background: var(--mk-card);
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius);
    padding: 28px;
    box-shadow: var(--mk-shadow);
}
.ot-lookup h3 { margin-top: 0; font-weight: 700; }

.ot-head {
    display: flex; flex-wrap: wrap; gap: 14px;
    align-items: flex-start; justify-content: space-between;
    margin-bottom: 18px;
}
.ot-head h3 { margin: 0 0 4px; font-weight: 700; }
.ot-head p { margin: 0; }

.ot-card {
    background: var(--mk-card);
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius);
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: var(--mk-shadow);
}
.ot-card h4 { margin: 0 0 14px; font-weight: 700; font-size: 16px; }

/* --- horizontal progress bar --- */
.ot-progress {
    display: flex;
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    counter-reset: step;
}
.ot-progress li {
    flex: 1 1 0;
    position: relative;
    text-align: center;
    padding-top: 34px;
    font-size: 12.5px;
    color: var(--mk-muted);
    min-width: 0;
}
/* the connecting rail */
.ot-progress li::before {
    content: "";
    position: absolute;
    top: 12px; left: 0; right: 50%;
    height: 3px;
    background: var(--mk-line);
}
.ot-progress li::after {
    content: "";
    position: absolute;
    top: 12px; left: 50%; right: 0;
    height: 3px;
    background: var(--mk-line);
}
.ot-progress li:first-child::before,
.ot-progress li:last-child::after { display: none; }

.ot-progress li.is-done::before,
.ot-progress li.is-done::after,
.ot-progress li.is-current::before { background: var(--mk-save); }

.ot-dot {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 27px; height: 27px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--mk-line);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: #fff;
    z-index: 2;
}
.ot-dot .fa { display: none; }

.ot-progress li.is-done .ot-dot { background: var(--mk-save); border-color: var(--mk-save); }
.ot-progress li.is-done .ot-dot .fa { display: block; }
.ot-progress li.is-current .ot-dot {
    border-color: var(--mk-save);
    box-shadow: 0 0 0 4px rgba(56,174,4,.18);
}
.ot-progress li.is-done, .ot-progress li.is-current {
    color: var(--mk-ink-strong);
    font-weight: 600;
}
.ot-current-desc { margin: 16px 0 0; color: var(--mk-muted); font-size: 13.5px; }

.ot-terminal { padding: 16px 18px; border-radius: 8px; background: #fdecea; }
.ot-terminal strong { display: block; font-size: 16px; color: #b3261e; margin-bottom: 3px; }
.ot-terminal span { color: #8a4b45; font-size: 13.5px; }
.ot-terminal-returned { background: #fff4e5; }
.ot-terminal-returned strong { color: #b76e00; }
.ot-terminal-returned span { color: #8a6a35; }

.ot-eta {
    margin-top: 18px; padding: 12px 14px;
    background: #eaf7e4; border-radius: 8px;
    font-size: 13.5px; color: #2c7a10;
}
.ot-eta .fa { margin-right: 6px; }

.ot-courier {
    display: flex; flex-wrap: wrap; gap: 22px; align-items: center;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mk-line);
}
.ot-courier span { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.ot-courier strong { font-size: 14.5px; }

/* --- vertical history --- */
.ot-timeline { list-style: none; margin: 0; padding: 0; }
.ot-timeline li { position: relative; padding: 0 0 20px 26px; }
.ot-timeline li::before {
    content: ""; position: absolute; left: 5px; top: 14px; bottom: -4px;
    width: 2px; background: var(--mk-line);
}
.ot-timeline li:last-child::before { display: none; }

.ot-tl-dot {
    position: absolute; left: 0; top: 4px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #fff; border: 2px solid var(--mk-line);
}
.ot-timeline li.is-latest .ot-tl-dot { background: var(--mk-save); border-color: var(--mk-save); }
.ot-tl-body strong { display: block; font-size: 14px; color: var(--mk-ink-strong); }
.ot-tl-note { display: block; font-size: 13px; color: var(--mk-ink); margin-top: 2px; }
.ot-tl-time { display: block; font-size: 12px; color: var(--mk-muted); margin-top: 3px; }

.ot-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    padding: 11px 0;
    border-bottom: 1px solid #f0f1f5;
}
.ot-item-name { font-weight: 600; font-size: 14px; grid-column: 1; }
.ot-item-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; }
.ot-total {
    display: flex; justify-content: space-between;
    padding-top: 13px; margin-top: 4px;
    border-top: 2px solid var(--mk-line);
    font-size: 16px;
}

@media (max-width: 767px) {
    /* Stack the progress bar vertically - six labels never fit across a phone */
    .ot-progress { display: block; }
    .ot-progress li {
        display: flex; align-items: center; gap: 12px;
        text-align: left; padding: 0 0 20px 0; min-height: 34px;
    }
    .ot-progress li::before, .ot-progress li::after { display: none; }
    .ot-progress li:not(:last-child) .ot-dot::after {
        content: ""; position: absolute; top: 100%; left: 50%;
        transform: translateX(-50%); width: 3px; height: 20px; background: var(--mk-line);
    }
    .ot-progress li.is-done .ot-dot::after { background: var(--mk-save); }
    .ot-dot { position: relative; left: auto; transform: none; flex: 0 0 27px; }
    .ot-head-actions { width: 100%; }
}


/* =====================================================================
   21. ACCOUNT DASHBOARD
   ===================================================================== */

.acc-head { margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--mk-line); }
.acc-head h2 { margin: 0 0 4px; font-size: 28px; font-weight: 800; color: var(--mk-ink-strong); }
.acc-head p { margin: 0; color: var(--mk-muted); font-size: 14px; }
.acc-head a { color: var(--mk-ink-strong); text-decoration: underline; }

/* Latest open order, promoted to the top */
.acc-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 22px;
    background: var(--mk-card);
    border: 1px solid var(--mk-line);
    border-left: 4px solid var(--mk-accent);
    border-radius: var(--mk-radius);
    box-shadow: var(--mk-shadow);
    text-decoration: none !important;
    transition: box-shadow .16s ease;
}
.acc-banner:hover { box-shadow: var(--mk-shadow-hover); }
.acc-banner-icon { flex: 0 0 auto; color: var(--mk-ink-strong); }
.acc-banner-icon svg { width: 30px; height: 30px; display: block; }
.acc-banner-text { flex: 1 1 auto; min-width: 0; color: var(--mk-muted); font-size: 13.5px; line-height: 1.45; }
.acc-banner-text strong { display: block; font-size: 15.5px; color: var(--mk-ink-strong); }
.acc-banner-go { flex: 0 0 auto; font-weight: 700; font-size: 14px; color: var(--mk-ink-strong); white-space: nowrap; }

/* The card grid */
.acc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.acc-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 26px 24px;
    min-height: 132px;
    background: var(--mk-card);
    border: 1px solid var(--mk-line);
    border-radius: 12px;
    text-decoration: none !important;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.acc-card:hover {
    border-color: #c9cddb;
    box-shadow: var(--mk-shadow-hover);
    transform: translateY(-2px);
}
.acc-card:focus-visible { outline: 2px solid var(--mk-ink-strong); outline-offset: 2px; }

.acc-icon {
    flex: 0 0 58px;
    width: 58px; height: 58px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: var(--mk-gold-wash);
    color: var(--mk-gold-deep);
}
.acc-icon svg { width: 30px; height: 30px; display: block; }
.acc-card:hover .acc-icon { background: var(--mk-accent); color: var(--mk-on-accent); }

.acc-body { display: block; min-width: 0; }
.acc-body strong {
    display: block;
    font-size: 19px;
    font-weight: 800;
    color: var(--mk-ink-strong);
    line-height: 1.25;
    margin-bottom: 5px;
}
.acc-desc { display: block; font-size: 14.5px; color: #4b5164; line-height: 1.5; }
.acc-meta { display: block; margin-top: 9px; font-size: 12.5px; color: var(--mk-muted); }

.acc-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    background: #eaf7e4;
    color: #2c7a10;
    font-size: 11.5px;
    font-weight: 700;
}
.acc-pill-warn { background: #fff4e5; color: #b76e00; }

/* The other account pages still use the old sidebar - give it the
   same visual language so moving between them is not jarring. */
.user-sidebar { margin-bottom: 24px; }
.user-sidebar ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.user-sidebar a { text-decoration: none !important; }
.user-sidebar .btn,
.user-sidebar .btn-danger {
    background: var(--mk-card) !important;
    border: 1px solid var(--mk-line) !important;
    color: var(--mk-ink) !important;
    border-radius: 20px !important;
    padding: 8px 16px !important;
    font-size: 13.5px !important;
    font-weight: 600;
}
.user-sidebar .btn:hover {
    border-color: var(--mk-ink-strong) !important;
    color: var(--mk-ink-strong) !important;
}

@media (max-width: 767px) {
    .acc-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .acc-card { padding: 18px 16px; min-height: 0; gap: 15px; }
    .acc-icon { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 10px; }
    .acc-icon svg { width: 24px; height: 24px; }
    .acc-body strong { font-size: 16.5px; }
    .acc-desc { font-size: 13.5px; }
    .acc-head h2 { font-size: 23px; }
    .acc-banner { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
    .acc-banner-go { width: 100%; }
}


/* =====================================================================
   22. STOCK LIMIT NOTICE
   Inline, next to the line it refers to, rather than a toast that
   floats away while the customer is still looking at the quantity.
   ===================================================================== */

.cl-limit {
    display: none;
    margin-top: 8px;
    padding: 6px 11px;
    border-radius: 6px;
    background: #fff4e5;
    color: #b76e00;
    font-size: 12.5px;
    font-weight: 600;
}
.cl-limit.is-shown { display: inline-block; }
.qty-stepper button:disabled { opacity: .35; cursor: not-allowed; }


/* =====================================================================
   23. RATINGS & REVIEWS
   ===================================================================== */

.rv-section { background: var(--mk-card); border-top: 1px solid var(--mk-line); padding: 40px 0 46px; }
.rv-title { margin: 0 0 26px; font-size: 24px; font-weight: 800; color: var(--mk-ink-strong); }

.rv-layout { display: flex; gap: 40px; align-items: flex-start; }
.rv-summary { flex: 0 0 300px; }
.rv-main    { flex: 1 1 auto; min-width: 0; border-left: 1px solid var(--mk-line); padding-left: 40px; }

.rv-stars { color: var(--mk-save); font-size: 14px; letter-spacing: 1px; white-space: nowrap; }
.rv-stars-lg { font-size: 22px; }

.rv-average { font-size: 46px; font-weight: 800; line-height: 1; color: var(--mk-ink-strong); margin-bottom: 6px; }
.rv-based { margin: 8px 0 18px; font-size: 13px; color: var(--mk-muted); }

.rv-bars { border-bottom: 1px solid var(--mk-line); padding-bottom: 18px; margin-bottom: 18px; }
.rv-bar-row {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 6px; margin: 0 -6px;
    border-radius: 6px;
    text-decoration: none !important;
}
.rv-bar-row:hover { background: #f5f6fa; }
.rv-bar-row.is-active { background: var(--mk-gold-wash); }
.rv-bar-star { flex: 0 0 34px; font-size: 12.5px; color: var(--mk-ink); white-space: nowrap; }
.rv-bar-star .fa { color: var(--mk-save); font-size: 11px; }
.rv-bar-track { flex: 1 1 auto; height: 9px; border-radius: 5px; background: #eceef4; overflow: hidden; }
.rv-bar-fill  { display: block; height: 100%; background: var(--mk-save); border-radius: 5px; }
.rv-bar-pct   { flex: 0 0 38px; text-align: right; font-size: 12px; color: var(--mk-muted); }

.rv-help { margin-bottom: 18px; }
.rv-help h5 { margin: 0 0 5px; font-size: 13.5px; font-weight: 700; color: var(--mk-ink-strong); }
.rv-help p  { margin: 0; font-size: 12.5px; color: var(--mk-muted); line-height: 1.6; }

/* --- toolbar --- */
.rv-toolbar {
    display: flex; flex-wrap: wrap; gap: 14px;
    align-items: center; justify-content: space-between;
    margin-bottom: 20px;
}
.rv-toolbar h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--mk-ink-strong); }
.rv-toolbar h3 span { color: var(--mk-muted); font-weight: 400; }

.rv-filters { display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; }
.rv-filters label { margin: 0; font-size: 12.5px; color: var(--mk-muted); font-weight: 600; }
.rv-filters select {
    height: 36px; padding: 0 26px 0 10px;
    border: 1px solid #d7dae4; border-radius: 8px;
    background: #fff; font-size: 13px; color: var(--mk-ink-strong); cursor: pointer;
}

.rv-activefilter { font-size: 13px; color: var(--mk-muted); margin-bottom: 16px; }
.rv-activefilter a { color: #1f5fbf; }

/* --- customer photos --- */
.rv-photos {
    background: #fafbfd; border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius); padding: 16px; margin-bottom: 24px;
}
.rv-photos-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.rv-photos-head h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--mk-ink-strong); }
.rv-viewall { border: 0; background: none; color: #1f5fbf; font-size: 13px; font-weight: 700; cursor: pointer; }

.rv-photo-strip {
    display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: thin;
}
.rv-thumb {
    flex: 0 0 auto; padding: 0; border: 1px solid var(--mk-line);
    border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer;
    width: 92px; height: 92px;
}
.rv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-thumb:hover { border-color: var(--mk-ink-strong); }
.rv-thumb-sm { width: 66px; height: 66px; }

/* --- review cards --- */
.rv-card { padding: 20px 0; border-bottom: 1px solid var(--mk-line); }
.rv-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; flex-wrap: wrap; }
.rv-avatar {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
    background: #eceef4; color: var(--mk-ink-strong);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px;
}
.rv-who strong { display: block; font-size: 14px; color: var(--mk-ink-strong); line-height: 1.3; }
.rv-when { font-size: 12px; color: var(--mk-muted); }
.rv-verified {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 20px;
    background: #eaf7e4; color: #2c7a10;
    font-size: 11.5px; font-weight: 700;
}
.rv-card-title { margin: 8px 0 5px; font-size: 15px; font-weight: 700; color: var(--mk-ink-strong); }
.rv-card-body  { margin: 6px 0 0; font-size: 14px; line-height: 1.65; color: #3c4253; }
.rv-card-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.rv-card-foot { margin-top: 12px; }
.rv-helpful {
    border: 1px solid #d7dae4; background: #fff; border-radius: 20px;
    padding: 6px 14px; font-size: 12.5px; font-weight: 600;
    color: var(--mk-ink); cursor: pointer;
}
.rv-helpful:hover { border-color: var(--mk-ink-strong); color: var(--mk-ink-strong); }
.rv-helpful-count { font-size: 12.5px; color: var(--mk-muted); }

.rv-empty { padding: 34px 0; color: var(--mk-muted); }

/* --- write a review --- */
.rv-write { margin-top: 30px; padding-top: 26px; border-top: 2px solid var(--mk-line); }
.rv-write h3 { margin: 0 0 16px; font-size: 18px; font-weight: 700; color: var(--mk-ink-strong); }
.rv-label { display: block; font-size: 13px; font-weight: 700; color: var(--mk-ink-strong); margin-bottom: 6px; }
.rv-note { font-size: 13.5px; color: var(--mk-muted); }
.rv-note-ok { color: #2c7a10; font-weight: 600; }
.rv-file { display: block; margin-bottom: 4px; }

/* star picker - rendered right to left so hover fills correctly */
.rv-starpick { display: inline-flex; flex-direction: row-reverse; gap: 4px; margin-bottom: 18px; }
.rv-starpick input { position: absolute; opacity: 0; width: 0; height: 0; }
.rv-starpick label { margin: 0; font-size: 27px; color: #d7dae4; cursor: pointer; transition: color .12s; }
.rv-starpick label:hover,
.rv-starpick label:hover ~ label,
.rv-starpick input:checked ~ label { color: var(--mk-save); }
.rv-starpick input:focus-visible + label { outline: 2px solid var(--mk-ink-strong); }

/* --- lightbox --- */
.rv-lightbox {
    display: none;
    position: fixed; inset: 0; z-index: 1700;
    background: rgba(12,14,20,.92);
    align-items: center; justify-content: center;
}
.rv-lightbox.open { display: flex; }
.rv-lightbox img { max-width: 88vw; max-height: 86vh; border-radius: 6px; }
.rv-lb-close {
    position: absolute; top: 18px; right: 24px;
    border: 0; background: none; color: #fff; font-size: 38px; line-height: 1; cursor: pointer;
}
.rv-lb-nav {
    border: 0; background: rgba(255,255,255,.14); color: #fff;
    width: 46px; height: 60px; font-size: 32px; line-height: 1; cursor: pointer; border-radius: 6px;
    margin: 0 14px;
}
.rv-lb-nav:hover { background: rgba(255,255,255,.28); }

/* --- all photos modal --- */
.rv-gallery {
    display: none;
    position: fixed; inset: 0; z-index: 1650;
    background: rgba(20,22,31,.6);
    padding: 24px; overflow-y: auto;
}
.rv-gallery.open { display: block; }
.rv-gallery-box {
    max-width: 1180px; margin: 3vh auto;
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 24px 70px rgba(0,0,0,.3);
}
.rv-gallery-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 24px; border-bottom: 1px solid var(--mk-line);
}
.rv-gallery-head h4 { margin: 0; font-size: 18px; font-weight: 700; }
.rv-gallery-close { border: 0; background: none; font-size: 30px; line-height: 1; color: var(--mk-muted); cursor: pointer; }
.rv-gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px; padding: 22px 24px; max-height: 74vh; overflow-y: auto;
}
.rv-gallery-grid .rv-thumb { width: 100%; height: 150px; }

@media (max-width: 991px) {
    .rv-layout { flex-direction: column; gap: 26px; }
    .rv-summary { flex: 1 1 auto; width: 100%; }
    .rv-main { border-left: 0; padding-left: 0; border-top: 1px solid var(--mk-line); padding-top: 24px; }
}

@media (max-width: 767px) {
    .rv-section { padding: 28px 0 34px; }
    .rv-title { font-size: 20px; }
    .rv-toolbar { flex-direction: column; align-items: flex-start; }
    .rv-filters { width: 100%; }
    .rv-filters select { flex: 1 1 0; min-width: 0; }
    .rv-thumb { width: 76px; height: 76px; }
    .rv-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .rv-gallery-grid .rv-thumb { height: 110px; }
    .rv-lb-nav { width: 38px; height: 50px; font-size: 26px; margin: 0 6px; }
}


/* =====================================================================
   24. ORDER HISTORY
   ===================================================================== */

.oh-head { margin-bottom: 20px; }
.oh-head h2 { margin: 0 0 3px; font-size: 25px; font-weight: 800; color: var(--mk-ink-strong); }
.oh-head p  { margin: 0; color: var(--mk-muted); font-size: 14px; }

.oh-empty {
    text-align: center; padding: 60px 20px;
    background: var(--mk-card); border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius); box-shadow: var(--mk-shadow);
}
.oh-empty svg { width: 62px; height: 62px; color: #d3d7e2; margin-bottom: 16px; }
.oh-empty h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: var(--mk-ink-strong); }
.oh-empty p  { color: var(--mk-muted); margin-bottom: 22px; }

.oh-order {
    background: var(--mk-card);
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius);
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: var(--mk-shadow);
}

.oh-order-head {
    display: flex; flex-wrap: wrap; gap: 26px; align-items: center;
    padding: 14px 20px; background: #f7f8fb; border-bottom: 1px solid var(--mk-line);
}
.oh-meta { display: flex; flex-direction: column; gap: 2px; }
.oh-meta-label { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--mk-muted); font-weight: 700; }
.oh-meta strong { font-size: 13.5px; color: var(--mk-ink-strong); }
.oh-ref { font-family: "Courier New", monospace; font-size: 12.5px !important; }
.oh-order-actions { margin-left: auto; }

.oh-status {
    display: inline-block; padding: 5px 13px; border-radius: 20px;
    font-size: 12px; font-weight: 700; background: #eceef4; color: var(--mk-ink);
}
.oh-status-delivered, .oh-status-completed { background: #eaf7e4; color: #2c7a10; }
.oh-status-shipped, .oh-status-out-for-delivery { background: #e6f0fb; color: #1f5fbf; }
.oh-status-pending  { background: #fff4e5; color: #b76e00; }
.oh-status-cancelled, .oh-status-returned { background: #fdecea; color: #b3261e; }

.oh-order-body { padding: 6px 20px; }

.oh-line { display: flex; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid #f1f2f6; }
.oh-line:last-child { border-bottom: 0; }

.oh-photo {
    flex: 0 0 82px; width: 82px; height: 82px;
    border: 1px solid var(--mk-line); border-radius: 8px;
    overflow: hidden; background: #fff; display: block;
}
.oh-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.oh-photo-none {
    display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;
    color: #cfd3de; font-size: 24px; background: #f7f8fb;
}

.oh-line-info { flex: 1 1 auto; min-width: 0; }
.oh-line-name {
    display: block; font-size: 15px; font-weight: 600;
    color: var(--mk-ink-strong) !important; line-height: 1.35; margin-bottom: 4px;
    text-decoration: none !important;
}
.oh-line-name:hover { color: var(--mk-accent-dark) !important; text-decoration: underline !important; }
.oh-line-meta { font-size: 12.5px; color: var(--mk-muted); }
.oh-line-meta span:not(:last-child)::after { content: " · "; }
.oh-line-price { font-size: 12.5px; color: var(--mk-muted); margin-top: 3px; }
.oh-line-total { flex: 0 0 auto; font-size: 16px; font-weight: 700; color: var(--mk-ink-strong); }

.oh-order-foot {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    padding: 14px 20px; border-top: 1px solid var(--mk-line); background: #fcfcfe;
}
.oh-foot-info { font-size: 12.5px; color: var(--mk-muted); margin-right: auto; }
.oh-foot-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.oh-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #e4144d; margin-left: 5px; vertical-align: middle;
}

.oh-pager { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.oh-pager a {
    padding: 7px 13px; border: 1px solid var(--mk-line); border-radius: 7px;
    background: #fff; color: var(--mk-ink) !important; font-size: 13.5px;
    font-weight: 600; text-decoration: none !important;
}
.oh-pager a.is-current { background: var(--mk-ink-strong); color: #fff !important; border-color: var(--mk-ink-strong); }


/* =====================================================================
   25. PAYMENT SUCCESS
   ===================================================================== */

.ps-wrap { max-width: 620px; margin: 0 auto; text-align: center; padding: 10px 0 20px; }

.ps-tick { position: relative; width: 130px; height: 130px; margin: 0 auto 22px; }
.ps-tick svg { width: 100%; height: 100%; overflow: visible; }

.ps-tick-ring {
    fill: none; stroke: var(--mk-save); stroke-width: 5;
    stroke-dasharray: 327; stroke-dashoffset: 327;
    transform: rotate(-90deg); transform-origin: 60px 60px;
    animation: psRing .7s cubic-bezier(.6,0,.3,1) forwards;
}
.ps-tick-check {
    fill: none; stroke: var(--mk-save); stroke-width: 7;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 70; stroke-dashoffset: 70;
    animation: psCheck .35s cubic-bezier(.6,0,.3,1) .55s forwards;
}
@keyframes psRing  { to { stroke-dashoffset: 0; } }
@keyframes psCheck { to { stroke-dashoffset: 0; } }

/* little burst of sparks as the tick lands */
.ps-spark {
    position: absolute; top: 50%; left: 50%;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--mk-accent); opacity: 0;
    animation: psSpark .6s ease-out .8s forwards;
}
.ps-spark-2 { background: var(--mk-save); }
.ps-spark-4 { background: var(--mk-save); }
.ps-spark-1 { --tx:  0px;   --ty: -74px; }
.ps-spark-2 { --tx:  64px;  --ty: -38px; }
.ps-spark-3 { --tx:  64px;  --ty:  38px; }
.ps-spark-4 { --tx:  0px;   --ty:  74px; }
.ps-spark-5 { --tx: -64px;  --ty:  38px; }
.ps-spark-6 { --tx: -64px;  --ty: -38px; }
@keyframes psSpark {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(.4); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1); }
}

.ps-title { margin: 0 0 8px; font-size: 30px; font-weight: 800; color: var(--mk-ink-strong); }
.ps-sub   { margin: 0 0 26px; color: var(--mk-muted); font-size: 15px; line-height: 1.6; }

.ps-card {
    background: var(--mk-card); border: 1px solid var(--mk-line);
    border-radius: 12px; box-shadow: var(--mk-shadow);
    text-align: left; overflow: hidden; margin-bottom: 22px;
}
.ps-amount {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 22px; background: #eaf7e4; border-bottom: 1px solid #cfe9c2;
}
.ps-amount span   { font-size: 13px; font-weight: 700; color: #2c7a10; text-transform: uppercase; letter-spacing: .05em; }
.ps-amount strong { font-size: 26px; font-weight: 800; color: #2c7a10; }

.ps-rows { margin: 0; padding: 8px 22px; }
.ps-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid #f1f2f6; }
.ps-rows > div:last-child { border-bottom: 0; }
.ps-rows dt { font-size: 13px; color: var(--mk-muted); font-weight: 500; margin: 0; }
.ps-rows dd { font-size: 13.5px; color: var(--mk-ink-strong); font-weight: 600; margin: 0; text-align: right; word-break: break-all; }

.ps-items { padding: 14px 22px; border-top: 1px solid var(--mk-line); background: #fcfcfe; }
.ps-item  { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.ps-item img { width: 42px; height: 42px; object-fit: contain; border: 1px solid var(--mk-line); border-radius: 6px; background: #fff; }
.ps-item-name { flex: 1 1 auto; font-size: 13.5px; color: var(--mk-ink); }
.ps-item-qty  { font-size: 13px; color: var(--mk-muted); font-weight: 600; }

.ps-ship { padding: 13px 22px; border-top: 1px solid var(--mk-line); font-size: 13px; color: var(--mk-ink); }
.ps-ship span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mk-muted); font-weight: 700; margin-bottom: 3px; }

.ps-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 18px; }
.ps-note { font-size: 13px; color: var(--mk-muted); }
.ps-note a { color: #1f5fbf; }

@media (prefers-reduced-motion: reduce) {
    .ps-tick-ring, .ps-tick-check { animation-duration: .01s; animation-delay: 0s; }
    .ps-spark { display: none; }
}


/* =====================================================================
   26. SUPPORT
   ===================================================================== */

.sp-narrow { max-width: 760px; margin: 0 auto; }
.sp-title { margin: 0 0 5px; font-size: 24px; font-weight: 800; color: var(--mk-ink-strong); }

.sp-order-ctx {
    display: block; padding: 12px 16px; margin: 16px 0;
    background: #f7f8fb; border: 1px solid var(--mk-line); border-radius: 8px;
    font-size: 13.5px; text-decoration: none !important; color: var(--mk-ink) !important;
}
.sp-order-ctx:hover { border-color: var(--mk-ink-strong); }

.sp-form { background: var(--mk-card); border: 1px solid var(--mk-line);
           border-radius: var(--mk-radius); padding: 22px; box-shadow: var(--mk-shadow); }

.sp-thread-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }

.sp-status { display: inline-block; padding: 5px 13px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.sp-status-open      { background: #fff4e5; color: #b76e00; }
.sp-status-progress  { background: #e6f0fb; color: #1f5fbf; }
.sp-status-waiting   { background: #f3e8ff; color: #6b21a8; }
.sp-status-resolved  { background: #eaf7e4; color: #2c7a10; }
.sp-status-closed    { background: #eceef4; color: #5a6072; }

.sp-thread { margin: 20px 0; }
.sp-msg { max-width: 82%; margin-bottom: 14px; padding: 13px 16px; border-radius: 12px; }
.sp-msg-customer { margin-left: auto; background: #eef4ff; border: 1px solid #d6e3fa; }
.sp-msg-staff    { background: var(--mk-card); border: 1px solid var(--mk-line); }
.sp-msg-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; font-size: 12px; }
.sp-msg-head strong { color: var(--mk-ink-strong); }
.sp-msg-head span { color: var(--mk-muted); white-space: nowrap; }
.sp-msg-body { font-size: 14px; line-height: 1.6; color: #3c4253; }

.sp-reply { background: var(--mk-card); border: 1px solid var(--mk-line);
            border-radius: var(--mk-radius); padding: 18px; box-shadow: var(--mk-shadow); }
.sp-reply textarea { margin-bottom: 12px; }

.sp-mine { margin-top: 30px; }
.sp-mine h3 { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.sp-mine-row {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px; margin-bottom: 8px;
    background: var(--mk-card); border: 1px solid var(--mk-line);
    border-radius: 8px; text-decoration: none !important;
}
.sp-mine-row:hover { border-color: var(--mk-ink-strong); }
.sp-mine-main { flex: 1 1 auto; min-width: 0; }
.sp-mine-main strong { display: block; font-size: 14px; color: var(--mk-ink-strong); }
.sp-mine-main span { font-size: 12px; }

@media (max-width: 767px) {
    .oh-order-head { gap: 14px; padding: 12px 14px; }
    .oh-order-actions { margin-left: 0; width: 100%; }
    .oh-order-body { padding: 4px 14px; }
    .oh-photo { flex: 0 0 62px; width: 62px; height: 62px; }
    .oh-line-name { font-size: 14px; }
    .oh-line-total { flex: 1 1 100%; text-align: right; }
    .oh-order-foot { padding: 12px 14px; }
    .oh-foot-info { flex: 1 1 100%; margin-bottom: 4px; }
    .ps-title { font-size: 24px; }
    .ps-tick { width: 104px; height: 104px; }
    .sp-msg { max-width: 94%; }
}


/* =====================================================================
   27. UMRAO PLAZA - BRAND LAYER
   ---------------------------------------------------------------------
   Typography and the finishing touches that make the palette read as a
   beauty brand rather than a recoloured marketplace.
   ===================================================================== */

/* A serif for headings echoes the wordmark. The @import for it sits at
   the very top of this file - CSS requires @import before any rule. */

h1, h2, h3,
.mk-title, .acc-head h2, .ps-title, .oh-head h2, .rv-title, .sp-title,
.headline h2, .section-title h2, .p-title, .single-product h2 {
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    letter-spacing: .005em;
}

/* Cormorant runs small and light, so it needs a size and weight bump */
.acc-head h2, .ps-title, .oh-head h2, .rv-title, .sp-title, .mk-title {
    font-weight: 700;
    font-size: 32px;
}
.p-title, .single-product h2 { font-weight: 700 !important; font-size: 30px !important; }
.headline h2, .section-title h2 { font-weight: 700 !important; font-size: 30px !important; }

/* Product names stay in the sans - they are data, not display type */
.item .text h3, .product .text h3, .product .text h3 a,
.oh-line-name, .rv-card-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- logo --- */
.mk-logo img { height: 46px; max-width: 220px; }

/* --- header --- */
.top { background: var(--mk-ink-strong); }
.top a, .top li, .top i { color: #d9c7d2 !important; }
.top a:hover { color: #fff !important; }

.mk-action-link { color: var(--mk-ink-strong) !important; }
.mk-action-link:hover { color: var(--mk-accent) !important; opacity: 1; }

/* Hairline of gold under the header, picked up from the lotus */
.header::after {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(90deg,
        var(--mk-gold-deep) 0%, var(--mk-gold-light) 35%,
        var(--mk-gold) 65%, var(--mk-gold-deep) 100%);
}

/* --- category rail --- */
.mk-nav { background: var(--mk-card); border-bottom: 1px solid var(--mk-line); }
.mk-menu-link { color: var(--mk-ink) !important; letter-spacing: .01em; }

/* --- cards --- */
.item .inner, .product-carousel .item,
.product .item-product-cat .inner, .product .item-search-result .inner {
    border: 1px solid var(--mk-line) !important;
}
.item .inner:hover, .product-carousel .item:hover { border-color: var(--mk-gold-light) !important; }

.item .text h4, .product .text h4 { color: var(--mk-price) !important; }

/* --- page banners --- */
.page-banner { background: var(--mk-card) !important; border-bottom: 1px solid var(--mk-line); }
.page-banner .page-banner-inner h1, .page-banner .inner h1 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 700;
    font-size: 30px;
    color: var(--mk-ink-strong) !important;
}

/* --- forms --- */
.form-control:focus {
    border-color: var(--mk-gold);
    box-shadow: 0 0 0 3px rgba(185,138,108,.16);
}

/* --- footer --- */
.footer, .footer-bottom { background: var(--mk-ink-strong); }
.footer a, .footer p, .footer li { color: #cbb8c4; }
.footer a:hover { color: var(--mk-gold-light); }
.footer h3, .footer h4 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 700;
    font-size: 19px;
    color: #fff;
}

/* --- accents that were green --- */
.rv-stars { color: var(--mk-gold-deep); }
.rv-bar-fill { background: var(--mk-gold); }
.mk-free-hint { background: var(--mk-gold-wash); color: var(--mk-gold-deep); }
.acc-pill { background: var(--mk-gold-wash); color: var(--mk-gold-deep); }

/* --- secondary buttons pick up the gold on hover --- */
.shop-btn-secondary { border-color: var(--mk-line); color: var(--mk-ink-strong) !important; }
.shop-btn-secondary:hover { border-color: var(--mk-gold); color: var(--mk-accent) !important; }

/* --- tab bar --- */
.mk-tabbar a.active { color: var(--mk-accent) !important; }
.mk-tabbar .mk-tab-badge { background: var(--mk-accent); }
.oh-dot { background: var(--mk-accent); }

/* --- admin login only: keep the brand visible there too --- */
.login-page .login-logo a, .login-box .login-logo a { color: var(--mk-accent); }

@media (max-width: 991px) {
    .mk-logo img { height: 36px; max-width: 170px; }
}
@media (max-width: 767px) {
    .acc-head h2, .ps-title, .oh-head h2, .rv-title, .sp-title { font-size: 26px; }
    .p-title, .single-product h2 { font-size: 24px !important; }
    .headline h2, .section-title h2 { font-size: 24px !important; }
}

/* --- leftovers from the old blue/grey theme --- */

.p-title, .single-product h2, .product-details h2,
.breadcrumb a, .breadcrumb .active,
.cart-line .cl-name a, .oh-line-name {
    color: var(--mk-ink-strong) !important;
}
.breadcrumb a:hover { color: var(--mk-accent) !important; }

/* Sidebar category tree: the grey "+" squares were from the stock theme */
.tree-menu .plus, .tree-menu .minus,
.sidebar-category li > span, .product-cat-sidebar li > span {
    background: var(--mk-gold-wash) !important;
    color: var(--mk-accent) !important;
    border-radius: 4px;
}
.sidebar-category a, .tree-menu a { color: var(--mk-ink) !important; }
.sidebar-category a:hover, .tree-menu a:hover { color: var(--mk-accent) !important; }

/* Buy Now and Add to Cart were nearly the same colour, which gives the
   customer no steer. Buy Now is now the solid one; Add to Cart is an
   outline so the two read as a clear first and second choice. */
.mk-buy-now {
    background: var(--mk-accent);
    color: var(--mk-on-accent);
}
.mk-buy-now:hover { background: var(--mk-accent-hover); }
.mk-buy-now .fa { color: var(--mk-gold-light); }

.btn-cart input[type="submit"],
.btn-cart1 input[type="submit"] {
    background: #fff !important;
    color: var(--mk-accent) !important;
    border: 1.5px solid var(--mk-accent) !important;
}
.btn-cart input[type="submit"]:hover,
.btn-cart1 input[type="submit"]:hover {
    background: var(--mk-gold-wash) !important;
    border-color: var(--mk-gold-deep) !important;
    color: var(--mk-accent) !important;
}

/* Rating stars on the product page */
.rating .fa, .item .rating .fa { color: var(--mk-gold-deep); }

/* Zoom hint pill */
.prod-slider li.mk-zoomable::after { background: rgba(46,18,38,.78); }

/* The stock trust-badge icons are dark circles from the old theme and
   fight the palette. Softened rather than removed, so the section still
   works if you swap in your own artwork. */
.service .item img, .service .item .icon img { opacity: .5; filter: grayscale(1); }
.service .item:hover img { opacity: .75; }

/* main.css paints the product title with ".product .p-title h2", which
   is more specific than anything above - the h2 sits INSIDE .p-title
   rather than being it. Matching that scope here. */
.product .p-title h2,
.product .p-title,
.product h2.p-title {
    color: var(--mk-ink-strong) !important;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 700;
}

/* Same story for other headings main.css scopes under .product */
.product .headline h2, .product .headline h3 { color: var(--mk-ink-strong) !important; }

/* --- last three stragglers from the stock theme --- */

/* newsletter band and the back-to-top button were still slate/navy */
.home-newsletter { background: var(--mk-ink-strong) !important; }
.home-newsletter h2, .home-newsletter h3, .home-newsletter p { color: #fff !important; }
.scrollup, .scrollup i { background: var(--mk-accent) !important; color: #fff !important; }
.scrollup:hover { background: var(--mk-accent-hover) !important; }

/* the product description / features tab lists */
.tab-content li, .tab-content ul li, .product-details li { color: var(--mk-ink) !important; }

/* Breadcrumb: main.css colours the <li> itself, not just the links */
.breadcrumb li, .breadcrumb li a, .breadcrumb > li + li:before {
    color: var(--mk-ink) !important;
}
.breadcrumb li a:hover { color: var(--mk-accent) !important; }

/* The old theme's pink (#e4144d) survived on a few plain links */
a { color: var(--mk-accent); }
a:hover { color: var(--mk-gold-deep); }
.forget-password a, .login-page a, .register-page a { color: var(--mk-accent) !important; }
.forget-password a:hover, .login-page a:hover, .register-page a:hover { color: var(--mk-gold-deep) !important; }

/* Pagination, the login "Forget Password?" link and the contact details
   block were the last three holding stock-theme colours. */
div.pagination a, .pagination a, .pagination span {
    color: var(--mk-ink) !important;
    border-color: var(--mk-line) !important;
    border-radius: 7px;
}
div.pagination a.current, div.pagination a:hover,
.pagination a.current, .pagination a:hover,
.pagination .current {
    background: var(--mk-accent) !important;
    border-color: var(--mk-accent) !important;
    color: #fff !important;
}

.contact-item span, .contact-item a, .contact-details span {
    color: var(--mk-ink) !important;
}
.contact-item i, .contact-details i { color: var(--mk-gold-deep) !important; }

/* Any remaining link still on the stock pink */
a[style*="color:red"], a[style*="color: red"] { color: var(--mk-accent) !important; }

/* main.css gives "div.pagination a" a navy BACKGROUND, not just a colour,
   so the background has to be overridden explicitly. */
div.pagination a, .pagination a {
    background: var(--mk-card) !important;
    border: 1px solid var(--mk-line) !important;
}
div.pagination a:hover, div.pagination a.current,
.pagination a:hover, .pagination a.current {
    background: var(--mk-accent) !important;
    border-color: var(--mk-accent) !important;
    color: #fff !important;
}

/* Contact block is scoped under ".cform address" in main.css */
.cform address span, .cform address a span { color: var(--mk-ink) !important; }
.cform address a:hover span { color: var(--mk-accent) !important; }


/* =====================================================================
   28. FREQUENTLY BOUGHT TOGETHER
   ===================================================================== */

.fbt { background: var(--mk-card); border-top: 1px solid var(--mk-line); padding: 34px 0 40px; }
.fbt-title {
    margin: 0 0 22px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 28px; font-weight: 700; color: var(--mk-ink-strong);
}

.fbt-body { display: flex; gap: 38px; align-items: flex-start; flex-wrap: wrap; }

/* --- the image row --- */
.fbt-row { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.fbt-plus { font-size: 22px; color: var(--mk-muted); font-weight: 300; }

.fbt-thumb {
    position: relative; margin: 0;
    width: 132px; height: 132px;
    border: 1px solid var(--mk-line); border-radius: 10px;
    background: #fff; overflow: hidden;
    transition: opacity .18s ease, border-color .18s ease;
}
.fbt-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fbt-thumb figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--mk-gold-wash); color: var(--mk-gold-deep);
    font-size: 10.5px; font-weight: 700; text-align: center; padding: 3px 0;
    text-transform: uppercase; letter-spacing: .05em;
}
/* Unticked items fade out, so the row always matches the total below */
.fbt-thumb.is-off { opacity: .3; border-style: dashed; }

/* --- the checkbox panel --- */
.fbt-panel { flex: 1 1 320px; min-width: 0; }
.fbt-list { list-style: none; margin: 0 0 18px; padding: 0; }
.fbt-list li { border-bottom: 1px solid #f2eef1; }
.fbt-list li:last-child { border-bottom: 0; }

.fbt-check {
    display: flex; align-items: flex-start; gap: 11px;
    margin: 0; padding: 11px 0; cursor: pointer; font-weight: 400;
}
.fbt-check input { margin: 3px 0 0; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--mk-accent); }
.fbt-check input[disabled] { cursor: default; }
.fbt-name { flex: 1 1 auto; font-size: 14px; color: var(--mk-ink); line-height: 1.45; }
.fbt-name a { color: var(--mk-ink) !important; }
.fbt-name a:hover { color: var(--mk-accent) !important; text-decoration: underline; }
.fbt-price { flex: 0 0 auto; font-size: 14.5px; font-weight: 700; color: var(--mk-price); white-space: nowrap; }

.fbt-foot {
    border-top: 1px solid var(--mk-line); padding-top: 16px;
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
}
.fbt-total { flex: 1 1 auto; }
.fbt-total span { display: block; font-size: 12.5px; color: var(--mk-muted); }
.fbt-total strong { font-size: 24px; font-weight: 800; color: var(--mk-price); }
.fbt-foot .shop-btn { flex: 0 0 auto; }
.fbt-foot .shop-btn[disabled] { opacity: .45; cursor: not-allowed; }

.fbt-msg { flex: 1 1 100%; margin: 0; font-size: 13px; min-height: 18px; }
.fbt-msg.ok  { color: #2c7a10; font-weight: 600; }
.fbt-msg.bad { color: #b3261e; font-weight: 600; }

@media (max-width: 767px) {
    .fbt { padding: 24px 0 30px; }
    .fbt-title { font-size: 22px; margin-bottom: 16px; }
    .fbt-body { gap: 20px; }
    .fbt-row { width: 100%; justify-content: flex-start; gap: 8px; overflow-x: auto; }
    .fbt-thumb { width: 92px; height: 92px; flex: 0 0 92px; }
    .fbt-foot .shop-btn { width: 100%; }
}


/* =====================================================================
   29. DELIVERY METHOD CHOOSER
   ===================================================================== */

.ship-methods {
    margin: 12px 0 4px;
    padding-top: 12px;
    border-top: 1px solid var(--mk-line);
    transition: opacity .15s ease;
}
.ship-methods.is-busy { opacity: .5; pointer-events: none; }

.ship-methods-head {
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--mk-muted); margin-bottom: 8px;
}

.ship-opt {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 0 0 7px; padding: 9px 11px;
    border: 1px solid var(--mk-line); border-radius: 8px;
    background: var(--mk-card); cursor: pointer; font-weight: 400;
    transition: border-color .15s ease, background .15s ease;
}
.ship-opt:hover { border-color: var(--mk-gold); }
.ship-opt:has(input:checked) { border-color: var(--mk-accent); background: var(--mk-gold-wash); }

.ship-opt input { margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--mk-accent); }
.ship-opt-body  { flex: 1 1 auto; min-width: 0; }
.ship-opt-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--mk-ink-strong); }
.ship-opt-detail{ display: block; font-size: 11.5px; color: var(--mk-muted); margin-top: 2px; line-height: 1.4; }
.ship-opt-rate  { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; color: var(--mk-price); }

.ship-badge {
    display: inline-block; margin-left: 6px; padding: 1px 7px;
    border-radius: 20px; background: var(--mk-accent); color: #fff;
    font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; vertical-align: middle;
}
.ship-opt.is-premium { border-style: solid; }

.ship-notice {
    margin: 6px 0 0; font-size: 11.5px; color: #b76e00;
    background: #fff4e5; border-radius: 6px; padding: 6px 9px;
}


/* =====================================================================
   30. PRODUCT PAGE SHIPPING RATES + CUTOFF
   ===================================================================== */

.mk-ship-line {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid #f2eef1;
}
.mk-ship-line:last-of-type { border-bottom: 0; }
.mk-ship-ico { flex: 0 0 18px; color: var(--mk-muted); font-size: 14px; padding-top: 1px; }
.mk-ship-line.is-premium .mk-ship-ico { color: var(--mk-accent); }
.mk-ship-txt { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--mk-ink); }
.mk-ship-txt strong { display: block; color: var(--mk-ink-strong); font-weight: 600; }
.mk-ship-txt small { display: block; font-size: 11.5px; color: var(--mk-muted); margin-top: 1px; line-height: 1.4; }
.mk-ship-rate { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--mk-price); }

.mk-cutoff {
    display: flex; align-items: flex-start; gap: 9px;
    margin-top: 10px; padding: 9px 11px;
    background: var(--mk-gold-wash); border-radius: 8px;
    border-left: 3px solid var(--mk-gold);
    font-size: 12.5px; color: var(--mk-ink);
}
.mk-cutoff .fa { color: var(--mk-gold-deep); font-size: 14px; padding-top: 1px; }
.mk-cutoff-text { line-height: 1.5; }
.mk-cutoff-head { display: block; color: var(--mk-accent); font-size: 13px; }
.mk-cutoff.is-late { background: #f4f2f4; border-left-color: var(--mk-muted); }
.mk-cutoff.is-late .fa,
.mk-cutoff.is-late .mk-cutoff-head { color: var(--mk-muted); }


/* =====================================================================
   31. COUPONS
   ===================================================================== */

.cp-box {
    margin: 12px 0;
    padding: 12px 0 4px;
    border-top: 1px dashed var(--mk-line);
}
.cp-label {
    display: block; margin: 0 0 7px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--mk-muted);
}
.cp-row { display: flex; gap: 7px; }
.cp-row input {
    flex: 1 1 auto; min-width: 0; height: 38px;
    border: 1px solid #d7dae4; border-radius: 8px;
    padding: 0 12px; font-size: 13.5px; outline: none;
    text-transform: uppercase; letter-spacing: .04em;
}
.cp-row input:focus { border-color: var(--mk-gold); }
.cp-row button {
    flex: 0 0 auto; height: 38px; padding: 0 18px;
    border: 1px solid var(--mk-accent); border-radius: 8px;
    background: #fff; color: var(--mk-accent);
    font-size: 13px; font-weight: 700; cursor: pointer;
}
.cp-row button:hover { background: var(--mk-accent); color: #fff; }
.cp-row button[disabled] { opacity: .5; cursor: default; }

.cp-applied {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 9px 11px; border-radius: 8px;
    background: #eaf7e4; border: 1px dashed #b6dda4;
}
.cp-tag {
    font-family: "Courier New", monospace; font-weight: 700;
    font-size: 13px; color: #2c7a10; letter-spacing: .05em;
}
.cp-tag .fa { margin-right: 4px; }
.cp-desc { flex: 1 1 auto; font-size: 11.5px; color: #3f6b28; min-width: 0; }
.cp-remove {
    border: 0; background: none; padding: 0;
    color: #2c7a10; font-size: 12px; font-weight: 600;
    text-decoration: underline; cursor: pointer;
}

.cp-msg { margin: 7px 0 0; font-size: 12px; min-height: 16px; }
.cp-msg .ok  { color: #2c7a10; font-weight: 600; }
.cp-msg .bad { color: #b3261e; font-weight: 600; }


/* =====================================================================
   32. CONTENT PAGES - ABOUT, CONTACT, FAQ
   ===================================================================== */

.pg-layout { display: flex; gap: 34px; align-items: flex-start; }
.pg-body { flex: 1 1 auto; min-width: 0; }
.pg-side { flex: 0 0 300px; max-width: 100%; }

.pg-body > article,
.pg-body article {
    background: var(--mk-card); border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius); padding: 28px 30px;
    box-shadow: var(--mk-shadow);
    font-size: 15px; line-height: 1.75; color: var(--mk-ink);
}
.pg-body article h2, .pg-body article h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    color: var(--mk-ink-strong); margin-top: 22px;
}
.pg-body article h2:first-child, .pg-body article h3:first-child { margin-top: 0; }
.pg-body article p { margin-bottom: 14px; }
.pg-body article img { max-width: 100%; height: auto; border-radius: 8px; }

.pg-card {
    background: var(--mk-card); border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius); padding: 20px;
    margin-bottom: 16px; box-shadow: var(--mk-shadow);
}
.pg-card-quiet { background: var(--mk-gold-wash); border-color: #eadfd4; box-shadow: none; }
.pg-card h4 {
    margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--mk-ink-strong);
}
.pg-card p { font-size: 13.5px; margin-bottom: 10px; }

.pg-points { list-style: none; margin: 0; padding: 0; }
.pg-points li {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 7px 0; font-size: 13.5px; color: var(--mk-ink);
}
.pg-points .fa { color: var(--mk-gold-deep); margin-top: 3px; }

.pg-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px; margin: 28px 0 4px;
}
.pg-stats > div {
    background: var(--mk-card); border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius); padding: 20px 16px; text-align: center;
}
.pg-stats strong {
    display: block; font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 30px; font-weight: 700; color: var(--mk-accent); line-height: 1.1;
}
.pg-stats span { font-size: 12.5px; color: var(--mk-muted); }

.pg-cta {
    margin-top: 28px; padding: 30px; text-align: center;
    background: var(--mk-gold-wash); border-radius: var(--mk-radius);
}
.pg-cta h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 26px; font-weight: 700; color: var(--mk-ink-strong); margin: 0 0 6px;
}
.pg-cta p { color: var(--mk-muted); margin-bottom: 16px; }

.pg-empty { text-align: center; padding: 50px 20px; color: var(--mk-muted); }
.pg-empty .fa { font-size: 42px; color: #d8d2d6; margin-bottom: 14px; }

/* --- FAQ --- */
.faq-search { position: relative; margin-bottom: 10px; }
.faq-search .fa {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: var(--mk-muted); font-size: 14px;
}
.faq-search input {
    width: 100%; height: 46px; padding: 0 16px 0 40px;
    border: 1px solid var(--mk-line); border-radius: 999px;
    background: var(--mk-card); font-size: 14px; outline: none;
}
.faq-search input:focus { border-color: var(--mk-gold); }
.faq-count { font-size: 12.5px; color: var(--mk-muted); margin: 0 0 14px 4px; min-height: 16px; }

.faq-list { list-style: none; margin: 0; padding: 0; }
.faq-item {
    background: var(--mk-card); border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius); margin-bottom: 10px; overflow: hidden;
    box-shadow: var(--mk-shadow);
}
.faq-item.is-open { border-color: var(--mk-gold); }

.faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    width: 100%; padding: 17px 20px; border: 0; background: none;
    text-align: left; cursor: pointer;
    font-size: 15px; font-weight: 600; color: var(--mk-ink-strong);
}
.faq-q:hover { color: var(--mk-accent); }
.faq-q .fa { flex: 0 0 auto; color: var(--mk-muted); transition: transform .18s ease; }
.faq-item.is-open .faq-q .fa { transform: rotate(180deg); color: var(--mk-accent); }

.faq-a { max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.faq-a-inner {
    padding: 0 20px 18px; font-size: 14px; line-height: 1.7; color: var(--mk-ink);
    border-top: 1px solid var(--mk-line); padding-top: 15px;
}
.faq-none { padding: 24px 4px; color: var(--mk-muted); font-size: 14px; }

/* --- contact --- */
.ct-intro { margin-bottom: 24px; }
.ct-intro h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 32px; font-weight: 700; color: var(--mk-ink-strong); margin: 0 0 6px;
}
.ct-intro p { color: var(--mk-muted); font-size: 15px; margin: 0; }

.ct-formcard {
    background: var(--mk-card); border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius); padding: 26px 28px; box-shadow: var(--mk-shadow);
}
.ct-formcard h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 22px; font-weight: 700; color: var(--mk-ink-strong); margin: 0 0 18px;
}
.ct-formcard .well, .ct-formcard .well-sm { background: none; border: 0; padding: 0; box-shadow: none; }

.ct-line {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 11px 0; border-bottom: 1px solid #f1ebee;
    text-decoration: none !important; color: var(--mk-ink) !important;
}
.ct-line:last-child { border-bottom: 0; }
.ct-line .fa { flex: 0 0 18px; color: var(--mk-gold-deep); margin-top: 3px; font-size: 15px; }
.ct-line span { font-size: 14px; line-height: 1.5; }
.ct-line small {
    display: block; font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .06em; color: var(--mk-muted); font-weight: 700;
}
.ct-line:hover:not(.ct-line-static) { color: var(--mk-accent) !important; }
.ct-line-static { cursor: default; }

.ct-map { margin-top: 30px; }
.ct-map h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 24px; font-weight: 700; color: var(--mk-ink-strong); margin-bottom: 14px;
}
.ct-map-frame {
    border: 1px solid var(--mk-line); border-radius: var(--mk-radius);
    overflow: hidden; box-shadow: var(--mk-shadow); line-height: 0;
}
.ct-map-frame iframe { width: 100% !important; height: 380px; border: 0; display: block; }

@media (max-width: 991px) {
    .pg-layout { flex-direction: column; gap: 22px; }
    .pg-side { flex: 1 1 auto; width: 100%; }
}
@media (max-width: 767px) {
    .pg-body article, .ct-formcard { padding: 20px 18px; }
    .ct-intro h2 { font-size: 25px; }
    .faq-q { font-size: 14px; padding: 15px 16px; }
    .ct-map-frame iframe { height: 280px; }
}