/* Siri Jewelleries theme. Loaded after bootstrap5.min.css and styles.css. */

:root {
    --sj-maroon: #7a1f2b;
    --sj-maroon-dark: #561420;
    --sj-gold: #b8892b;
    --sj-gold-light: #ecd9ab;
    --sj-ivory: #fbf8f2;
    --sj-sand: #f4eee2;
    --sj-ink: #2b2320;
    --sj-muted: #6f655d;
    --sj-line: #e4dccd;
    --sj-radius: 8px;
    --sj-shadow: 0 6px 24px rgba(60, 30, 20, .10);
    --sj-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sj-sans: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- base ---------- */

body {
    font-family: var(--sj-sans);
    font-size: 15px;
    color: var(--sj-ink);
    background-color: var(--sj-ivory);
    margin: 0;
}

a {
    color: var(--sj-maroon);
    text-decoration: none;
}

    a:hover {
        color: var(--sj-maroon-dark);
    }

h1, h2, h3, h4 {
    font-family: var(--sj-serif);
    font-weight: 600;
}

img {
    max-width: 100%;
}

/* ---------- Bootstrap 3 grid classes still used by the pages ---------- */

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 0;
}

.col-xs-12 { width: 100%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-9 { width: 75%; }
.col-xs-8 { width: 66.66666667%; }
.col-xs-7 { width: 58.33333333%; }
.col-xs-6 { width: 50%; }
.col-xs-5 { width: 41.66666667%; }
.col-xs-4 { width: 33.33333333%; }
.col-xs-3 { width: 25%; }
.col-xs-2 { width: 16.66666667%; }
.col-xs-1 { width: 8.33333333%; }

@media (min-width: 768px) {
    :not(.row) > [class*="col-md-"] {
        float: left;
    }
}

.hidden {
    display: none !important;
}

/* ---------- header ---------- */

.masterpage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.sj-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: #fff;
    box-shadow: 0 1px 0 var(--sj-line), 0 4px 16px rgba(60, 30, 20, .06);
}

.sj-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 6px 24px;
    background: var(--sj-sand);
    border-bottom: 1px solid var(--sj-line);
    font-size: 13px;
}

.sj-rates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 18px;
    color: var(--sj-maroon);
    font-weight: 600;
}

    .sj-rates i {
        color: var(--sj-gold);
    }

.sj-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 18px;
}

.sj-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sj-ink);
    white-space: nowrap;
}

.sj-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.sj-actionlbl {
    color: var(--sj-muted);
}

.sj-cartcount {
    color: var(--sj-maroon);
    font-weight: 700;
}

.sj-support i {
    color: var(--sj-maroon);
}

.sj-nav {
    position: relative;
    padding: 8px 24px;
    background: #fff;
}

.sj-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
}

    .sj-brand img {
        height: 60px;
        width: 60px;
        object-fit: contain;
    }

.sj-brandtext {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.sj-brandname {
    font-family: var(--sj-serif);
    font-size: 30px;
    font-weight: 700;
    color: var(--sj-maroon);
    letter-spacing: .5px;
}

.sj-brandtag {
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--sj-gold);
}

.sj-nav .navbar-toggler {
    border: 1px solid var(--sj-line);
    color: var(--sj-maroon);
    font-size: 20px;
    padding: 6px 12px;
}

.sj-menu {
    margin-left: auto;
    gap: 4px;
}

    .sj-menu .nav-link {
        color: var(--sj-ink);
        font-weight: 500;
        font-size: 15px;
        padding: 10px 14px;
        border-bottom: 2px solid transparent;
    }

        .sj-menu .nav-link:hover,
        .sj-menu .nav-item:hover > .nav-link {
            color: var(--sj-maroon);
            border-bottom-color: var(--sj-gold);
        }

.sj-welcome {
    margin-left: 16px;
    font-size: 13px;
    color: var(--sj-muted);
    white-space: nowrap;
}

.sj-mega {
    display: none;
}

@media (min-width: 992px) {
    .sj-hasmega {
        position: static;
    }

    .sj-mega {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 1000;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        padding: 24px 40px 28px;
        background: #fff;
        border-top: 1px solid var(--sj-line);
        box-shadow: var(--sj-shadow);
    }

    .sj-hasmega:hover > .sj-mega,
    .sj-hasmega:focus-within > .sj-mega {
        display: grid;
    }
}

.sj-megacol h5 {
    font-family: var(--sj-serif);
    font-size: 19px;
    font-weight: 700;
    color: var(--sj-maroon);
    margin: 0 0 8px;
}

.sj-megacol ul + h5 {
    margin-top: 16px;
}

.sj-megacol ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sj-megacol li a {
    display: block;
    padding: 3px 0;
    color: var(--sj-ink);
    font-size: 14px;
}

    .sj-megacol li a:hover {
        color: var(--sj-maroon);
    }

.sj-megacol img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--sj-radius);
}

.sj-megaimgs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sj-megatiles img {
    height: 190px;
}

@media (max-width: 991.98px) {
    .sj-topbar, .sj-nav {
        padding-left: 12px;
        padding-right: 12px;
    }

    .sj-actionlbl {
        display: none;
    }

    .sj-brandname {
        font-size: 24px;
    }

    .sj-brand img {
        height: 46px;
        width: 46px;
    }

    .sj-menu {
        margin: 8px 0;
    }

    .sj-welcome {
        margin: 0 0 8px 14px;
        display: block;
    }
}

/* ---------- content area ---------- */

.sj-main {
    flex: 1 0 auto;
    display: flow-root;
    background: #fff;
}

.sj-portal {
    display: flex;
    align-items: stretch;
    min-height: 70vh;
}

.sj-side {
    flex: 0 0 230px;
    background: var(--sj-sand);
    border-right: 1px solid var(--sj-line);
}

.sj-sidetitle {
    padding: 16px 18px 12px;
    font-family: var(--sj-serif);
    font-size: 21px;
    font-weight: 700;
    color: var(--sj-maroon);
}

.sj-sidemenu {
    list-style: none;
    margin: 0;
    padding: 0 10px 16px;
}

    .sj-sidemenu a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: 6px;
        color: var(--sj-ink);
        font-size: 14px;
        font-weight: 500;
    }

        .sj-sidemenu a i {
            width: 18px;
            text-align: center;
            color: var(--sj-gold);
        }

        .sj-sidemenu a:hover {
            background: var(--sj-maroon);
            color: #fff;
        }

            .sj-sidemenu a:hover i {
                color: var(--sj-gold-light);
            }

.sj-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 20px 24px 32px;
    display: flow-root;
    overflow-x: auto;
    background: #fff;
}

    .sj-content > .login {
        margin-top: 0 !important;
    }

@media (max-width: 991.98px) {
    .sj-portal {
        flex-direction: column;
    }

    .sj-side {
        flex: 0 0 auto;
        border-right: 0;
        border-bottom: 1px solid var(--sj-line);
    }

    .sj-sidetitle {
        padding: 10px 14px 4px;
        font-size: 18px;
    }

    .sj-sidemenu {
        display: flex;
        overflow-x: auto;
        padding: 0 8px 8px;
        gap: 4px;
    }

        .sj-sidemenu a {
            white-space: nowrap;
        }

    .sj-content {
        padding: 14px 12px 24px;
    }
}

/* ---------- shared form controls ---------- */

.txtboxes, .txtboxesD, .drpdowns, .drpdownsD, .drpspl, .txtlog, .txtpro, .txttrack, .txtsearch {
    height: 34px;
    padding: 4px 10px;
    border: 1px solid var(--sj-line);
    border-radius: 6px;
    background-color: #fff;
    color: var(--sj-ink);
    font-size: 14px;
    max-width: 100%;
    transition: border-color .15s, box-shadow .15s;
}

.txtboxesD, .drpdownsD {
    background-color: var(--sj-sand);
    color: var(--sj-muted);
}

.drpspl {
    width: 72px;
}

textarea.txtboxes, textarea.txtboxesD {
    height: auto;
    min-height: 70px;
}

.txtboxes:focus, .txtboxesD:focus, .drpdowns:focus, .drpdownsD:focus, .drpspl:focus,
.txtlog:focus, .txtpro:focus, .txttrack:focus, .txtsearch:focus, .sj-input:focus {
    outline: 0;
    border-color: var(--sj-gold);
    box-shadow: 0 0 0 3px rgba(184, 137, 43, .2);
}

.lbllbl, .lbllblD, .lbltotss {
    font-size: 14px;
    font-weight: 600;
}

.lbllblD {
    color: var(--sj-ink);
}

.lblhead {
    display: inline-block;
    margin-bottom: 10px;
    font-family: var(--sj-serif);
    font-size: 28px;
    font-weight: 700;
    color: var(--sj-maroon);
}

.lblnotes {
    padding-left: 16px;
    font-size: 14px;
    color: #c0392b;
}

.lblcat {
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--sj-gold);
    font-family: var(--sj-serif);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--sj-maroon);
}

.rbtnslist, .rbtnslist label, .chkchk label {
    font-size: 14px;
}

/* ---------- buttons ---------- */

.btnghost, .btnghostp, .btnlog, .sj-btn {
    display: inline-block;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--sj-maroon);
    border-radius: 6px;
    background-color: var(--sj-maroon);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

    .btnghost:hover, .btnghostp:hover, .btnlog:hover, .sj-btn:hover {
        background: var(--sj-maroon-dark);
        border: 1px solid var(--sj-maroon-dark);
        color: #fff;
    }

.btnlog {
    width: auto;
    min-width: 110px;
    margin: 4px 10px 4px 0;
}

.sj-btn-gold {
    background-color: var(--sj-gold);
    border-color: var(--sj-gold);
    color: #fff;
}

    .sj-btn-gold:hover {
        background: #9c7320;
        border-color: #9c7320;
    }

.btnsel {
    margin: 4px;
    padding: 0 14px;
    border: 1px solid var(--sj-line);
    border-left: 4px solid var(--sj-maroon);
    border-radius: 6px;
    background: #fff;
    color: var(--sj-ink);
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

    .btnsel:hover, .btnsel:active {
        background: var(--sj-sand);
        color: var(--sj-maroon);
    }

.btnskew {
    border: 1px solid var(--sj-maroon);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 15px;
    cursor: pointer;
}

    .btnskew:hover {
        transform: none;
        color: #fff;
        background-color: var(--sj-maroon);
    }

.btnghosth {
    background-color: var(--sj-sand);
    color: var(--sj-ink);
    border: 1px solid var(--sj-line);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    font-size: 14px;
    font-weight: 600;
}

    .btnghosth:hover {
        background-color: var(--sj-maroon);
        border: 1px solid var(--sj-maroon);
        border-bottom: 0;
        color: #fff;
    }

/* ---------- data tables (GridView / DataGrid output) ---------- */

table[rules] > tbody > tr > td, table[rules] > tbody > tr > th,
table[border="1"] > tbody > tr > td, table[border="1"] > tbody > tr > th {
    border: 1px solid var(--sj-line);
    padding: 5px 8px;
}

.griddraw th, .gridMemdetails th, .goldgrid th {
    background-color: var(--sj-maroon);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.griddraw td, .gridMemdetails td, .goldgrid td {
    font-size: 14px;
}

.griddraw tr:nth-child(even) > td, .gridMemdetails tr:nth-child(even) > td {
    background-color: var(--sj-ivory);
}

/* ---------- login card ---------- */

.loginpage {
    position: static;
    float: none;
    width: min(92%, 400px);
    margin: 60px auto;
    padding: 24px 28px;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--sj-shadow);
    text-align: left;
}

    .loginpage legend {
        float: none;
        margin-bottom: 4px;
        font-family: var(--sj-serif);
        font-size: 26px;
        font-weight: 700;
        color: var(--sj-maroon);
        text-align: left;
    }

    .loginpage label {
        display: block;
        float: none;
        width: auto;
        margin: 10px 0 4px;
        padding: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--sj-ink);
        text-align: left;
    }

    .loginpage .txtlog {
        width: 100%;
        margin: 0;
    }

    .loginpage .lbltxt {
        display: block;
        margin-top: 6px;
        font-size: 13px;
        color: var(--sj-muted);
    }

    .loginpage .lblpswderror {
        padding-left: 0;
        font-size: 13px;
    }

.pnllogin, .pnlreg {
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--sj-shadow);
}

/* ---------- gold rate popup ---------- */

.sj-ratepopup {
    width: min(92vw, 400px);
    height: auto;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

    .sj-ratepopup .rateheader {
        height: auto;
        padding: 14px 16px;
        background: var(--sj-maroon);
        font-family: var(--sj-serif);
        font-size: 26px;
        font-weight: 700;
    }

    .sj-ratepopup .sj-ratedate {
        display: block;
        font-family: var(--sj-sans);
        font-size: 12px;
        font-weight: 400;
        color: var(--sj-gold-light);
    }

    .sj-ratepopup .main, .sj-ratepopup #buttons {
        display: block;
        background: #fff;
        padding: 8px 20px;
    }

    .sj-ratepopup #buttons {
        padding-bottom: 18px;
    }

.sj-raterow {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--sj-line);
}

.sj-ratepopup .lblphrate {
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sj-muted);
}

.sj-ratepopup .lblprate {
    font-size: 16px;
    font-weight: 600;
}

/* ---------- home page ---------- */

.homepage {
    min-height: 0;
    margin-top: 0;
}

.homepage {
    overflow: hidden;
    background-color: var(--sj-sand);
}

    .homepage a img {
        display: block;
        width: 100%;
        /* slides are exported at 1920x800 */
        height: auto;
        aspect-ratio: 12 / 5;
        object-fit: cover;
        object-position: center;
    }

.sj-section {
    padding-top: 56px;
    padding-bottom: 8px;
    text-align: center;
}

.sj-sectionsub {
    margin: 8px 0 28px;
    color: var(--sj-muted);
}

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

    .sj-grid > span {
        display: block;
    }

    .sj-grid .pnlprod {
        height: 100%;
        margin: 0;
        padding: 12px 12px 16px;
        border: 1px solid var(--sj-line);
        border-radius: 12px;
        background: #fff;
        transition: box-shadow .2s, transform .2s;
    }

        .sj-grid .pnlprod:hover {
            box-shadow: var(--sj-shadow);
            transform: translateY(-3px);
        }

    .sj-grid .prodimg, .sj-grid .prodimglat {
        width: 100%;
        height: 210px;
        margin: 0 0 10px;
        object-fit: contain;
        border-radius: 8px;
    }

        .sj-grid .prodimg:hover, .sj-grid .prodimglat:hover {
            padding: 0;
            box-shadow: none;
            border-radius: 8px;
        }

    .sj-grid .lblprod {
        padding: 0;
        font-size: 15px;
        font-weight: 600;
        color: var(--sj-ink);
    }

.sj-latest {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 20px;
    text-align: left;
}

.sj-lateststack {
    display: grid;
    gap: 20px;
}

.sj-latest img {
    display: block;
    width: 100% !important;
    height: 520px !important;
    margin: 0 !important;
    object-fit: cover;
    border-radius: 12px;
}

.sj-lateststack img {
    height: 250px !important;
}

@media (max-width: 767.98px) {
    .sj-latest {
        grid-template-columns: 1fr;
    }

    .sj-latest img {
        height: 240px !important;
    }
}

.sj-why {
    margin-top: 56px;
    padding: 48px 0;
    background: var(--sj-maroon);
    color: #fff;
    text-align: center;
}

    .sj-why h2, .sj-promise h2, .sj-testimonial h2 {
        font-size: 32px;
        letter-spacing: 1px;
        margin-bottom: 28px;
    }

.sj-whygrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px;
}

.sj-whyitem {
    padding: 22px 12px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
}

    .sj-whyitem i {
        display: block;
        margin-bottom: 10px;
        font-size: 28px;
        color: var(--sj-gold-light);
    }

.sj-testimonial {
    padding: 56px 16px;
    background: var(--sj-ivory);
    text-align: center;
}

    .sj-testimonial h2 {
        color: var(--sj-maroon);
    }

    .sj-testimonial blockquote {
        max-width: 720px;
        margin: 0 auto;
        font-family: var(--sj-serif);
        font-size: 24px;
        font-style: italic;
    }

    .sj-testimonial cite {
        display: block;
        margin-top: 12px;
        font-family: var(--sj-sans);
        font-size: 14px;
        font-style: normal;
        color: var(--sj-muted);
    }

.sj-promise {
    padding-top: 56px;
    padding-bottom: 64px;
    text-align: center;
}

    .sj-promise h2 {
        color: var(--sj-maroon);
    }

.sj-promisegrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px;
}

    .sj-promisegrid .flip-box {
        width: auto;
        height: 230px;
        margin: 0;
        padding: 0;
        float: none;
        border: 0;
    }

    .sj-promisegrid .flip-box-front, .sj-promisegrid .flip-box-back {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 14px;
        border: 1px solid var(--sj-line);
        border-radius: 12px;
    }

    .sj-promisegrid .flip-box-front img {
        width: 96px;
        height: 96px;
        margin-bottom: 12px;
    }

    .sj-promisegrid .flip-box-back {
        background-color: var(--sj-sand);
    }

        .sj-promisegrid .flip-box-back p {
            margin: 0;
            font-size: 12.5px;
            line-height: 1.5;
            text-align: center;
        }

    .sj-promisegrid .promspan {
        font-size: 15px;
        font-weight: 600;
    }

/* ---------- footer ---------- */

.sj-footer {
    flex-shrink: 0;
    clear: both;
    background: var(--sj-maroon-dark);
    color: #f1e8da;
    font-size: 14px;
}

    .sj-footer .container {
        padding-top: 44px;
        padding-bottom: 36px;
    }

.sj-footertitle {
    margin-bottom: 28px;
    font-size: 32px;
    letter-spacing: 1px;
    text-align: center;
    color: #fff;
}

.sj-contactlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
}

    .sj-contactlist li {
        display: flex;
        gap: 14px;
        line-height: 1.6;
    }

    .sj-contactlist i {
        margin-top: 4px;
        width: 20px;
        text-align: center;
        font-size: 17px;
        color: var(--sj-gold-light);
    }

    .sj-contactlist a {
        color: #f1e8da;
    }

        .sj-contactlist a:hover {
            color: #fff;
            text-decoration: underline;
        }

.sj-contacthead {
    display: block;
    font-weight: 600;
    color: var(--sj-gold-light);
}

.sj-feedback {
    display: grid;
    gap: 10px;
}

.sj-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #fff;
    color: var(--sj-ink);
    font-size: 14px;
}

.sj-feedback .sj-btn {
    justify-self: start;
    height: 38px;
    padding: 0 28px;
}

.sj-feedbackmsg {
    color: var(--sj-gold-light);
}

.sj-footerlinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 24px;
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.sj-footlink {
    color: var(--sj-gold-light);
    font-size: 13px;
}

    .sj-footlink:hover {
        color: #fff;
    }

.sj-copyright {
    padding: 12px 16px;
    background: rgba(0, 0, 0, .25);
    font-size: 13px;
    text-align: center;
}

/* ---------- product listing pages ---------- */

.sj-pagehero {
    padding: 40px 5%;
    background: linear-gradient(rgba(86, 20, 32, .80), rgba(86, 20, 32, .80)), url(../Images/bg_image_in.jpg) center / cover;
    color: #fff;
}

    .sj-pagehero .lblin {
        display: block;
        padding: 0;
        font-family: var(--sj-serif);
        font-size: 44px;
        font-weight: 600;
        line-height: 1.1;
        color: #fff;
    }

.sj-pageherosub {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sj-gold-light);
}

.sj-shop {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    width: auto;
    max-width: 1500px;
    min-height: 0;
    margin: 0 auto;
    padding: 28px 24px 56px;
    overflow: visible !important;
}

.sj-filters {
    align-self: start;
    padding: 4px 16px 10px;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: #fff;
}

    .sj-filters .pnlfilter {
        width: auto;
        margin: 0;
        padding: 0;
    }

        .sj-filters .pnlfilter > br, .sj-filterhead br {
            display: none;
        }

.sj-filtertitle {
    padding: 12px 0 10px;
    border-bottom: 1px solid var(--sj-line);
    font-family: var(--sj-serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--sj-maroon);
}

.sj-filterhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--sj-line);
    cursor: pointer;
}

    .sj-filterhead .lbllbl {
        padding: 0;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: var(--sj-ink);
    }

    .sj-filterhead .pluss {
        float: none;
        margin: 0;
        border: 0;
        font-size: 20px;
        line-height: 1;
        color: var(--sj-gold);
    }

    .sj-filterhead.open .lbllbl {
        color: var(--sj-maroon);
    }

.sj-filterbox {
    padding: 8px 0 10px;
    border-bottom: 1px solid var(--sj-line);
}

    .sj-filterbox input[type=checkbox] {
        accent-color: var(--sj-maroon);
    }

.sj-filters .pnlfilter .sj-filterbox label {
    margin-left: 8px;
    padding: 2px 0;
    font-size: 14px;
    font-weight: 400 !important;
}

.sj-toolbar {
    float: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 18px;
    font-size: 14px;
    color: var(--sj-muted);
}

    .sj-toolbar br {
        display: none;
    }

    .sj-toolbar .lnkview, .sj-toolbar .lnkviewclicked {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin: 0;
        padding: 0;
        border: 1px solid var(--sj-line);
        border-radius: 6px;
        background: #fff;
        color: var(--sj-muted);
        font-size: 15px;
    }

    .sj-toolbar .lnkviewclicked, .sj-toolbar .lnkview:hover {
        border-color: var(--sj-maroon);
        background: var(--sj-maroon);
        color: #fff;
    }

    .sj-toolbar .drpsort {
        width: 160px;
        margin: 0;
        background-color: #fff !important;
        color: var(--sj-ink);
    }

    .sj-toolbar .lnkfoot {
        color: var(--sj-maroon);
        font-weight: 600;
    }

.sj-prodgrid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

    .sj-prodgrid .pnlprod {
        position: relative;
        padding: 0 0 14px;
        overflow: hidden;
    }

        .sj-prodgrid .pnlprod > br, .sj-prodgrid .proddes br {
            display: none;
        }

    .sj-prodgrid .prodimg, .sj-prodgrid .prodimg1 {
        display: block;
        width: 100%;
        height: 230px;
        margin: 0;
        padding: 12px;
        border-radius: 0;
        object-fit: contain;
        opacity: 1;
        transition: transform .3s;
    }

    .sj-prodgrid .pnlprod:hover .prodimg, .sj-prodgrid .pnlprod:hover .prodimg1 {
        padding: 12px;
        box-shadow: none;
        border-radius: 0;
        transform: scale(1.05);
    }

    .sj-prodgrid .proddes {
        padding: 12px 12px 0;
        border-top: 1px solid var(--sj-line);
        background: #fff;
    }

    .sj-prodgrid .lblprod {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sj-prodgrid .lblpprice {
        display: block;
        margin: 4px 0 10px;
        font-size: 16px;
        font-style: normal;
        color: var(--sj-maroon);
    }

    .sj-prodgrid .prodicon {
        width: 28px;
        height: 28px;
        margin: 0 10px;
        padding: 0;
        transition: transform .15s;
    }

        .sj-prodgrid .prodicon:hover {
            padding: 0;
            box-shadow: none;
            transform: scale(1.15);
        }

    .sj-prodgrid .wishicon {
        position: absolute;
        top: 10px;
        right: 10px;
        left: auto;
        width: 34px;
        height: 34px;
        margin: 0;
        padding: 7px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    }

        .sj-prodgrid .wishicon:hover {
            padding: 7px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
        }

.sj-prodlist {
    display: block;
}

    .sj-prodlist > span {
        display: block;
    }

    .sj-prodlist > br, .sj-listitem hr {
        display: none;
    }

.sj-listitem {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: #fff;
}

    .sj-listitem .listviewimg, .sj-listitem .listviewimg:hover {
        flex: 0 0 220px;
        width: 220px;
        background: none;
    }

        .sj-listitem .listviewimg img {
            width: 100%;
            height: 190px;
            object-fit: contain;
        }

    .sj-listitem .listviewdiv {
        position: static;
        flex: 1 1 auto;
        min-width: 0;
        padding-right: 44px;
    }

        .sj-listitem .listviewdiv > br:first-child {
            display: none;
        }

    .sj-listitem .lblphead {
        font-family: var(--sj-serif);
        font-size: 24px;
        font-weight: 700;
    }

    .sj-listitem .lblpprice {
        display: inline-block;
        margin: 4px 0 8px;
        font-size: 17px;
        font-style: normal;
    }

    .sj-listitem .wishicon1 {
        position: absolute;
        top: 16px;
        right: 16px;
        left: auto;
        width: 28px;
        height: 28px;
    }

.sj-quickview {
    width: min(92vw, 680px) !important;
    height: auto !important;
    left: 50% !important;
    transform: translateX(-50%);
    padding: 8px 20px 22px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    text-align: left;
}

    .sj-quickview .main {
        display: flow-root;
        background: #fff;
    }

    .sj-quickview img {
        object-fit: contain;
    }

@media (max-width: 991.98px) {
    .sj-shop {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 16px 12px 40px;
    }

    .sj-pagehero .lblin {
        font-size: 32px;
    }

    .sj-prodgrid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }

        .sj-prodgrid .prodimg, .sj-prodgrid .prodimg1 {
            height: 170px;
        }

    .sj-listitem {
        flex-direction: column;
        align-items: stretch;
    }

        .sj-listitem .listviewimg, .sj-listitem .listviewimg:hover {
            flex-basis: auto;
            width: 100%;
        }
}

/* ---------- product detail page ---------- */

.sj-pdp {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 48px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 40px 24px 16px;
}

.sj-pdpmedia {
    position: relative;
    align-self: start;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: #fff;
}

    .sj-pdpmedia .imgprod {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        border-radius: 12px;
        cursor: crosshair;
    }

    .sj-pdpmedia .img-zoom-lens {
        display: none;
        width: 110px;
        height: 110px;
        margin: 0;
        border: 1px solid var(--sj-gold);
        background: rgba(184, 137, 43, .15);
        pointer-events: auto;
    }

    .sj-pdpmedia .img-zoom-result {
        display: none;
        position: absolute;
        top: 0;
        left: calc(100% + 24px);
        z-index: 20;
        width: 440px;
        height: 440px;
        border: 1px solid var(--sj-line);
        border-radius: 12px;
        background-color: #fff;
        background-repeat: no-repeat;
        box-shadow: var(--sj-shadow);
    }

.sj-pdpinfo table {
    width: 100%;
}

.sj-pdpinfo td {
    padding: 3px 0;
}

.sj-pdpinfo .lblphead {
    font-family: var(--sj-serif);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.15;
}

.sj-pdpinfo .lblpdetail {
    font-size: 14px;
    color: var(--sj-muted);
}

.sj-pdpinfo .lblpp {
    margin-right: 14px;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    color: var(--sj-maroon);
}

.sj-pdpinfo .lnkprice {
    font-size: 13px;
    font-weight: 500;
    color: var(--sj-gold);
    text-decoration: underline;
}

.sj-pdpinfo .sj-stock {
    font-size: 14px;
    font-weight: 600;
}

.sj-pdpinfo .prodp {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--sj-muted);
}

.sj-pdpinfo .txtpro {
    width: 200px;
    margin-right: 6px;
    vertical-align: middle;
}

.sj-pdpinfo .lblpmsg {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    color: #2e7d32;
}

.sj-btn-lg {
    height: 46px;
    margin-right: 10px;
    padding: 0 28px;
    font-size: 15px;
}

.sj-accordion {
    width: auto;
    max-width: 1240px;
    margin: 24px auto 0;
    padding: 0 24px;
}

    .sj-accordion > br {
        display: none;
    }

.sj-acchead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    height: auto;
    padding: 14px 18px;
    border: 1px solid var(--sj-line);
    border-radius: 8px;
    background: var(--sj-sand);
    color: var(--sj-ink);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

    .sj-acchead + .sj-accbody + br + .sj-acchead, .sj-accbody + br + .sj-acchead {
        margin-top: 10px;
    }

    .sj-acchead .plus {
        float: none;
        padding: 0;
        font-size: 20px;
        line-height: 1;
        color: var(--sj-gold);
    }

    .sj-acchead.open {
        border-radius: 8px 8px 0 0;
        background: var(--sj-maroon);
        color: #fff;
    }

        .sj-acchead.open .plus {
            color: var(--sj-gold-light);
        }

.sj-accbody {
    padding: 6px 18px;
    border: 1px solid var(--sj-line);
    border-top: 0;
    border-radius: 0 0 8px 8px;
}

    .sj-accbody table {
        width: 100%;
    }

    .sj-accbody td {
        padding: 9px 0;
        border-bottom: 1px solid var(--sj-line);
    }

    .sj-accbody tr:last-child {
        display: none;
    }

    .sj-accbody tr:nth-last-child(2) td {
        border-bottom: 0;
    }

    .sj-accbody .lbllbl, .sj-accbody .lbllblD {
        padding: 0;
        font-weight: 500;
    }

    .sj-accbody .lbllbl {
        color: var(--sj-muted);
    }

.sj-simgrid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    text-align: center;
}

    .sj-simgrid ul {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .sj-simgrid .simiprod {
        padding: 14px 12px;
        border: 1px solid var(--sj-line);
        border-radius: 12px;
        background: #fff;
        font-size: 13px;
        color: var(--sj-muted);
        transition: box-shadow .2s, transform .2s;
    }

        .sj-simgrid .simiprod:hover {
            box-shadow: var(--sj-shadow);
            transform: translateY(-3px);
        }

        .sj-simgrid .simiprod br {
            display: none;
        }

    .sj-simgrid .simprodimg {
        display: block;
        width: 100%;
        height: 160px;
        margin: 0 0 10px;
        object-fit: contain;
    }

        .sj-simgrid .simprodimg:hover {
            padding: 0;
            box-shadow: none;
        }

    .sj-simgrid .displbl {
        width: auto;
        height: auto;
        margin-bottom: 8px;
    }

    .sj-simgrid .ratingStar {
        margin: 0 auto 4px;
    }

.sj-reviews {
    padding-bottom: 56px;
}

    .sj-reviews .custreview {
        width: 100%;
        max-width: 820px;
        margin: 0 auto;
    }

        .sj-reviews .custreview td {
            padding: 14px 4px;
            border-bottom: 1px solid var(--sj-line);
        }

        .sj-reviews .custreview hr {
            display: none;
        }

        .sj-reviews .custreview .lbllblD {
            padding: 0;
            font-size: 15px;
        }

.sj-breakup .main {
    position: relative;
    text-align: left;
}

.sj-breakup .lblpbreakup {
    margin-left: 0;
    font-size: 15px;
    line-height: 2.3;
}

.sj-breakup .lblvalues {
    position: absolute;
    left: auto;
    right: 20px;
    font-weight: 600;
}

.sj-breakup #buttons2 {
    display: block;
    padding: 4px 20px 18px;
    background: #fff;
}

@media (max-width: 991.98px) {
    .sj-pdp {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 16px 12px 8px;
    }

    .sj-pdpmedia .img-zoom-result, .sj-pdpmedia .img-zoom-lens {
        display: none !important;
    }

    .sj-pdpinfo .lblphead {
        font-size: 28px;
    }

    .sj-accordion {
        padding: 0 12px;
    }

    .sj-btn-lg {
        margin-bottom: 8px;
    }
}
/* ---------- cart and checkout ---------- */

.sj-cart {
    padding-top: 28px;
    padding-bottom: 56px;
}

    .sj-cart.checkout h3 {
        all: unset;
    }

.sj-steps {
    display: flex;
    justify-content: center;
    gap: 12px 40px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.sj-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--sj-muted);
}

    .sj-step b {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border: 1px solid var(--sj-line);
        border-radius: 50%;
        background: #fff;
        font-weight: 600;
    }

    .sj-step.active {
        color: var(--sj-maroon);
    }

        .sj-step.active b {
            border-color: var(--sj-maroon);
            background: var(--sj-maroon);
            color: #fff;
        }

    .sj-step.done b {
        border-color: var(--sj-gold);
        background: var(--sj-gold);
        color: #fff;
    }

.sj-pagetitle {
    margin: 0 0 18px;
    font-size: 36px;
    font-weight: 700;
    color: var(--sj-maroon);
}

.sj-cartmsg {
    display: block;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--sj-muted);
}

    .sj-cartmsg:empty {
        display: none;
    }

.sj-cartlayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
}

    /* nothing in the cart: hide the table and the summary */
    .sj-cartlayout:not(.sj-checkoutlayout):not(:has(.sj-cartrow)) {
        display: none;
    }

.sj-carthead, .sj-cartrow {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 130px 120px 140px 36px;
    gap: 16px;
    align-items: center;
}

.sj-carthead {
    padding: 0 16px 10px;
    border-bottom: 2px solid var(--sj-line);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sj-muted);
}

.sj-cartlist {
    display: block;
}

    .sj-cartlist > span {
        display: block;
    }

    .sj-cartlist > br {
        display: none;
    }

.sj-cartrow {
    padding: 16px;
    border-bottom: 1px solid var(--sj-line);
}

.sj-cartimg {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border: 1px solid var(--sj-line);
    border-radius: 8px;
    background: #fff;
}

.sj-cartname {
    font-size: 16px;
    font-weight: 600;
}

.sj-cartprice {
    color: var(--sj-muted);
}

.sj-carttotal {
    font-size: 16px;
    font-weight: 700;
    color: var(--sj-maroon);
}

.sj-qtygroup {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sj-qty {
    width: 54px;
    height: 34px;
    border: 1px solid var(--sj-line);
    border-radius: 6px;
    background: #fff;
    color: var(--sj-ink);
    font-weight: 600;
    text-align: center;
}

.sj-qtybtn {
    width: 30px;
    height: 34px;
    border: 1px solid var(--sj-line);
    border-radius: 6px;
    background: var(--sj-sand);
    color: var(--sj-ink);
    font-size: 16px;
    cursor: pointer;
}

.sj-cartremove {
    width: 24px;
    height: 24px;
    opacity: .6;
    transition: opacity .15s;
}

    .sj-cartremove:hover {
        opacity: 1;
    }

.sj-note {
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--sj-sand);
    font-size: 13px;
    color: var(--sj-muted);
}

    .sj-note i {
        color: var(--sj-gold);
    }

.sj-summary {
    padding: 22px;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: var(--sj-ivory);
}

.sj-summarytitle {
    display: block;
    margin-bottom: 14px;
    font-family: var(--sj-serif);
    font-size: 24px;
    font-weight: 700;
    color: var(--sj-maroon);
}

.sj-sumrow {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 15px;
}

.sj-sumtotal {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--sj-line);
    font-size: 17px;
    font-weight: 700;
}

    .sj-sumtotal span:last-child {
        color: var(--sj-maroon);
    }

.sj-btn-block {
    display: block;
    width: 100%;
    margin: 18px 0 0;
    float: none;
}

.sj-cartfoot {
    margin-top: 22px;
}

.sj-backlink {
    font-weight: 600;
    color: var(--sj-maroon);
}

/* checkout: address cards and order list */

.sj-addrgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

    .sj-addrgrid > span {
        display: block;
    }

.sj-addr, .sj-addr:hover {
    width: auto;
    height: 100%;
    padding: 16px 18px;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: #fff;
    color: var(--sj-ink);
    transition: border-color .15s, box-shadow .15s;
}

    .sj-addr:hover {
        border-color: var(--sj-gold);
    }

    .sj-addr:has(.lnkadd.selected) {
        border-color: var(--sj-maroon);
        box-shadow: 0 0 0 2px rgba(122, 31, 43, .15);
    }

    .sj-addr .seladd > .lbladd {
        display: block;
        font-size: 14px;
        color: var(--sj-muted);
    }

.sj-addrname .lbladd {
    font-size: 16px;
    font-weight: 600;
    color: var(--sj-ink);
}

.sj-addrmob {
    margin-top: 6px;
    font-size: 14px;
}

.sj-addr .lnkadd {
    display: inline-block;
    margin-top: 12px;
    padding: 7px 16px;
    border: 1px solid var(--sj-maroon);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sj-maroon);
}

    .sj-addr .lnkadd:hover, .sj-addr .lnkadd.selected {
        background: var(--sj-maroon);
        color: #fff;
    }

.sj-orderlist {
    display: block;
    margin-bottom: 8px;
}

    .sj-orderlist > span {
        display: block;
    }

    .sj-orderlist > br {
        display: none;
    }

.sj-orderrow {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--sj-line);
}

.sj-orderimg {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border: 1px solid var(--sj-line);
    border-radius: 6px;
    background: #fff;
}

.sj-ordername {
    font-size: 14px;
    font-weight: 600;
}

.sj-orderqty {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--sj-muted);
}

.sj-orderprice {
    font-size: 14px;
    font-weight: 600;
}

/* order status */

.sj-confirmcard {
    max-width: 620px;
    margin: 24px auto 0;
    padding: 40px 28px;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--sj-shadow);
    text-align: center;
}

    .sj-confirmcard > i {
        margin-bottom: 12px;
        font-size: 44px;
        color: var(--sj-gold);
    }

    .sj-confirmcard .lblfailure {
        display: block;
        font-size: 18px;
        font-weight: 500;
    }

.sj-confirmactions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.sj-linkbtn {
    display: inline-block;
    padding: 11px 26px;
    border: 1px solid var(--sj-maroon);
    border-radius: 6px;
    background: var(--sj-maroon);
    color: #fff;
    font-weight: 600;
}

    .sj-linkbtn:hover {
        background: var(--sj-maroon-dark);
        color: #fff;
    }

.sj-linkbtn-outline {
    background: #fff;
    color: var(--sj-maroon);
}

/* saved cart shown inside My Account */

.sj-framebody {
    background: #fff;
}

.sj-acccart {
    padding: 16px 20px 32px;
}

.sj-acchdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.sj-count {
    margin-left: 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--sj-muted);
}

.sj-savedrow {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 16px 4px;
    border-bottom: 1px solid var(--sj-line);
}

.sj-savedinfo {
    display: grid;
    gap: 4px;
}

.sj-removebtn {
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--sj-line);
    border-radius: 6px;
    background: #fff;
    color: var(--sj-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .sj-removebtn:hover {
        border-color: #c0392b;
        color: #c0392b;
    }

@media (max-width: 991.98px) {
    .sj-cartlayout {
        grid-template-columns: 1fr;
    }

    .sj-carthead {
        display: none;
    }

    .sj-cartrow {
        grid-template-columns: 80px minmax(0, 1fr) 30px;
        gap: 6px 14px;
        padding: 14px 0;
    }

        .sj-cartrow .sj-cartimg {
            grid-row: 1 / span 4;
            align-self: start;
            width: 80px;
            height: 80px;
        }

        .sj-cartrow .sj-cartname, .sj-cartrow .sj-cartcell {
            grid-column: 2;
        }

        .sj-cartrow .sj-cartremove {
            grid-column: 3;
            grid-row: 1;
        }

    .sj-cartcell::before {
        content: attr(data-label) ": ";
        margin-right: 6px;
        font-size: 12px;
        color: var(--sj-muted);
    }

    .sj-pagetitle {
        font-size: 28px;
    }
}
/* ---------- my account ---------- */

.sj-account {
    display: block;
    min-height: 0;
    padding-top: 28px;
    padding-bottom: 56px;
    overflow: visible;
}

.sj-accountlayout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.sj-accnav {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: var(--sj-ivory);
}

.sj-accopt {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--sj-ink);
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

    .sj-accopt img {
        width: 26px;
        height: 26px;
        margin: 0;
        object-fit: contain;
    }

    .sj-accopt h3 {
        margin: 0;
        font-family: var(--sj-sans);
        font-size: 15px;
        font-weight: 600;
        text-align: left;
    }

    .sj-accopt span {
        font-size: 12px;
        color: var(--sj-muted);
    }

    .sj-accopt:hover {
        background: #fff;
        border-color: var(--sj-line);
    }

    .sj-accopt.active {
        background: #fff;
        border-color: var(--sj-maroon);
        box-shadow: inset 4px 0 0 var(--sj-maroon);
    }

        .sj-accopt.active h3 {
            color: var(--sj-maroon);
        }

.sj-accframe {
    min-height: 0;
    overflow: visible;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: #fff;
}

    .sj-accframe .pnlacco {
        display: block;
        width: 100%;
        height: 480px;
        margin: 0;
        border: 0;
        border-radius: 12px;
        overflow: hidden;
    }

/* pages shown inside the account frame */

.sj-accpage {
    width: auto;
    margin: 0;
    padding: 20px 24px 32px;
}

.sj-formcols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    align-items: start;
}

.sj-fieldset {
    min-width: 0;
    margin: 0;
    padding: 18px 20px 20px;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: #fff;
}

    .sj-fieldset legend, .sj-legend {
        float: left;
        width: 100%;
        margin: 0 0 12px;
        padding: 0;
        font-family: var(--sj-serif);
        font-size: 20px;
        font-weight: 700;
        color: var(--sj-maroon);
    }

.sj-narrow {
    max-width: 420px;
}

.sj-field {
    display: grid;
    gap: 4px;
    margin-bottom: 12px;
}

    .sj-field .lbllbl, .sj-field .lbllblD {
        padding: 0;
        font-size: 13px;
        color: var(--sj-muted);
    }

    .sj-field .txtboxes, .sj-field .txtboxesD {
        width: 100%;
        height: 38px;
        margin: 0;
    }

    .sj-field textarea.txtboxes {
        height: auto;
    }

    .sj-field .rbtnslist {
        display: table;
        width: auto;
        justify-self: start;
        margin: 0;
    }

        .sj-field .rbtnslist td {
            padding: 0 18px 0 0;
        }

        .sj-field .rbtnslist label {
            padding: 0 0 0 6px;
        }

        .sj-field .rbtnslist input {
            accent-color: var(--sj-maroon);
        }

.sj-formactions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

    .sj-formactions .lblpinfo {
        padding: 0;
        font-size: 14px;
        color: #2e7d32;
    }

    .sj-formactions .sj-btn-lg {
        margin-right: 0;
    }

.sj-savedaddr #existingaddresses {
    margin: 0;
}

    .sj-savedaddr #existingaddresses:empty::before {
        content: "No saved addresses yet.";
        color: var(--sj-muted);
    }

.sj-savedaddr .existingadd {
    margin: 0 0 12px;
    padding: 14px 16px;
    border: 1px solid var(--sj-line);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sj-muted);
}

.sj-savedaddr hr {
    display: none;
}

.sj-savedaddr .addh {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sj-gold);
}

.sj-savedaddr .addn {
    font-size: 16px;
    color: var(--sj-ink);
}

.sj-histrow {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto auto;
    gap: 16px;
    align-items: center;
    padding: 14px 4px;
    border-bottom: 1px solid var(--sj-line);
}

.sj-histmain {
    display: grid;
    gap: 2px;
}

.sj-badge {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--sj-sand);
    font-size: 12px;
    font-weight: 600;
    color: var(--sj-maroon);
    white-space: nowrap;
}

    .sj-badge:empty {
        display: none;
    }

.sj-rowactions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .sj-rowactions .btnghostp {
        margin: 0;
    }

@media (max-width: 991.98px) {
    .sj-accountlayout {
        grid-template-columns: 1fr;
    }

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

    .sj-accopt span {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .sj-accpage {
        padding: 14px 12px 24px;
    }

    .sj-savedrow, .sj-histrow {
        grid-template-columns: 64px minmax(0, 1fr);
    }

        .sj-savedrow .sj-cartimg {
            width: 64px;
            height: 64px;
        }

        .sj-savedrow > .sj-removebtn, .sj-savedrow > .sj-rowactions, .sj-histrow > .sj-carttotal, .sj-histrow > .sj-badge {
            grid-column: 2;
            justify-self: start;
        }
}
/* ---------- login and register ---------- */

.sj-auth {
    display: flex;
    justify-content: center;
    padding: 48px 16px 64px;
    background: var(--sj-ivory);
}

.sj-authcard {
    display: grid;
    grid-template-columns: 5fr 6fr;
    width: 100%;
    max-width: 900px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--sj-shadow);
    overflow: hidden;
}

.sj-authcard-wide {
    grid-template-columns: 4fr 8fr;
    max-width: 1080px;
}

.sj-authside {
    padding: 40px 32px;
    background: linear-gradient(160deg, var(--sj-maroon) 0%, var(--sj-maroon-dark) 100%);
    color: #f6ebdc;
}

    .sj-authside img {
        width: 84px;
        height: 84px;
        margin-bottom: 22px;
        border-radius: 50%;
        background: #fff;
        object-fit: contain;
    }

    .sj-authside h2 {
        margin: 0 0 8px;
        font-size: 34px;
        font-weight: 700;
        color: #fff;
    }

    .sj-authside p {
        margin: 0 0 24px;
        font-size: 14px;
        line-height: 1.6;
    }

    .sj-authside ul {
        display: grid;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 14px;
    }

    .sj-authside li i {
        width: 26px;
        color: var(--sj-gold-light);
    }

.sj-authform {
    width: auto;
    margin: 0;
    padding: 40px 40px 36px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

    .sj-authform .sj-pagetitle {
        margin-bottom: 4px;
    }

.sj-authsub {
    margin: 0 0 22px;
    font-size: 14px;
    color: var(--sj-muted);
}

.sj-fieldgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}

.sj-fieldbreak {
    grid-column: 1;
}

.sj-field > span[style*="color"] {
    font-size: 12px;
}

.sj-authmsg {
    display: block;
    padding: 0;
    font-size: 14px;
}

    .sj-authmsg:empty {
        display: none;
    }

.sj-authform .sj-btn-block {
    margin-top: 10px;
}

.sj-authlinks {
    margin-top: 14px;
    font-size: 14px;
    text-align: center;
    color: var(--sj-muted);
}

.sj-authdivider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0 6px;
    font-size: 13px;
    color: var(--sj-muted);
}

    .sj-authdivider::before, .sj-authdivider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--sj-line);
    }

.sj-authnote {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--sj-muted);
}

.sj-btn-outline {
    border: 1px solid var(--sj-maroon);
    border-radius: 6px;
    background: #fff;
    color: var(--sj-maroon);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

    .sj-btn-outline:hover {
        background: var(--sj-maroon);
        color: #fff;
    }

/* scheme customer and staff login */

.sj-authplain {
    display: flex;
    justify-content: center;
    padding: 32px 12px 48px;
    border-radius: 12px;
    background: var(--sj-ivory);
}

    .sj-authplain .loginpage {
        width: min(100%, 420px);
        margin: 0;
        padding: 32px 32px 28px;
        border-top: 4px solid var(--sj-maroon);
    }

        .sj-authplain .loginpage br {
            display: none;
        }

        .sj-authplain .loginpage legend {
            margin-bottom: 14px;
            font-size: 28px;
        }

        .sj-authplain .loginpage .txtlog {
            height: 40px;
        }

        .sj-authplain .loginpage .lblpswderror {
            display: block;
            min-height: 8px;
            margin-top: 8px;
        }

        .sj-authplain .loginpage .btnlog {
            width: 100%;
            height: 44px;
            margin: 10px 0 0;
            border-radius: 6px;
            font-size: 15px;
        }

        .sj-authplain .loginpage .linkbtn {
            padding: 0;
            background: none !important;
            font-size: 14px;
            font-weight: 600;
            color: var(--sj-maroon) !important;
        }

.sj-authnew {
    display: inline-block;
    margin: 18px 6px 0 0;
    font-size: 14px;
    color: var(--sj-muted);
}

@media (max-width: 767.98px) {
    .sj-auth {
        padding: 20px 12px 40px;
    }

    .sj-authcard, .sj-authcard-wide {
        grid-template-columns: 1fr;
    }

    .sj-authside {
        padding: 24px 24px 20px;
    }

        .sj-authside ul, .sj-authside p {
            display: none;
        }

        .sj-authside img {
            width: 56px;
            height: 56px;
            margin-bottom: 10px;
        }

        .sj-authside h2 {
            margin: 0;
            font-size: 26px;
        }

    .sj-authform {
        padding: 24px 22px 28px;
    }

    .sj-fieldgrid {
        grid-template-columns: 1fr;
    }
}
/* ---------- staff portal ---------- */

.sj-sidemenu a.active {
    background: #fff;
    box-shadow: inset 3px 0 0 var(--sj-maroon);
    color: var(--sj-maroon);
    font-weight: 600;
}

.sj-content {
    background: var(--sj-ivory);
}

    .sj-content > .lblhead:first-child, .sj-content > div > .lblhead:first-child,
    .sj-content > div > span.lblhead:first-of-type, .sj-adminframe .lblhead {
        display: block;
        margin-bottom: 16px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--sj-line);
    }

/* landing page */

.sj-dashhero {
    max-width: 520px;
    margin: 48px auto;
    padding: 44px 32px;
    border: 1px solid var(--sj-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--sj-shadow);
    text-align: center;
}

    .sj-dashhero > i {
        margin-bottom: 12px;
        font-size: 44px;
        color: var(--sj-gold);
    }

    .sj-dashhero p {
        margin: 0 0 22px;
        color: var(--sj-muted);
    }

.sj-dashhead p {
    margin: -10px 0 22px;
    color: var(--sj-muted);
}

.sj-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

.sj-tilegroup {
    display: contents;
}

.sj-tile {
    display: grid;
    gap: 4px;
    padding: 20px;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: #fff;
    color: var(--sj-ink);
    transition: box-shadow .2s, transform .2s, border-color .2s;
}

    .sj-tile i {
        margin-bottom: 8px;
        font-size: 26px;
        color: var(--sj-gold);
    }

    .sj-tile b {
        font-size: 16px;
        font-weight: 600;
    }

    .sj-tile span {
        font-size: 13px;
        color: var(--sj-muted);
    }

    .sj-tile:hover {
        border-color: var(--sj-maroon);
        box-shadow: var(--sj-shadow);
        color: var(--sj-maroon);
        transform: translateY(-2px);
    }

/* admin and manager panels */

.sj-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    padding: 6px;
    border: 1px solid var(--sj-line);
    border-radius: 10px;
    background: #fff;
}

.sj-tab {
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--sj-ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

    .sj-tab:hover {
        background: var(--sj-sand);
        color: var(--sj-maroon);
    }

    .sj-tab.active {
        background: var(--sj-maroon);
        color: #fff;
    }

.sj-tabpanel {
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

    .sj-tabpanel iframe {
        display: block;
        width: 100%;
        height: 520px;
        border: 0;
    }

    .sj-tabpanel:not(:has(iframe)) {
        padding: 48px 16px;
        text-align: center;
        color: var(--sj-muted);
    }

        .sj-tabpanel:not(:has(iframe))::before {
            content: "Choose a section above.";
        }

.sj-adminframe {
    padding: 18px 20px 28px;
    background: #fff;
}

    .sj-adminframe [class*="col-xs-"] {
        padding-left: 0;
        padding-right: 15px;
    }

/* receipts */

.sj-actiongrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

    .sj-actiongrid .btnsel {
        width: 100%;
        height: 48px;
        margin: 0;
    }

.sj-inlineform {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 760px;
    margin-bottom: 14px;
    padding: 16px 18px;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: #fff;
}

    .sj-inlineform .lbllbl {
        padding: 0;
    }

    .sj-inlineform .txtboxes, .sj-inlineform .drpdowns, .sj-inlineform .btnghost {
        margin: 0;
    }

/* forms and tables on staff pages */

.sj-content .txtboxes, .sj-content .txtboxesD, .sj-content .drpdowns, .sj-content .drpdownsD, .sj-content .drpspl,
.sj-adminframe .txtboxes, .sj-adminframe .txtboxesD, .sj-adminframe .drpdowns, .sj-adminframe .drpdownsD, .sj-adminframe .drpspl {
    vertical-align: middle;
}

.sj-content table:not([rules]):not([border]) > tbody > tr > td,
.sj-adminframe table:not([rules]):not([border]) > tbody > tr > td {
    padding: 2px 4px;
    vertical-align: middle;
}

.sj-content table[rules], .sj-content table[border="1"],
.sj-adminframe table[rules], .sj-adminframe table[border="1"] {
    border: 1px solid var(--sj-line);
    background: #fff;
    font-size: 14px;
}

    .sj-content table[rules] > tbody > tr > th, .sj-content table[border="1"] > tbody > tr > th,
    .sj-adminframe table[rules] > tbody > tr > th, .sj-adminframe table[border="1"] > tbody > tr > th {
        padding: 8px;
        font-weight: 600;
        white-space: nowrap;
    }

    .sj-content table[rules] > tbody > tr:hover > td, .sj-adminframe table[rules] > tbody > tr:hover > td {
        background-color: var(--sj-sand);
    }

.sj-content input[type=image], .sj-adminframe input[type=image] {
    vertical-align: middle;
    transition: transform .15s;
}

    .sj-content input[type=image]:hover, .sj-adminframe input[type=image]:hover {
        transform: scale(1.08);
    }

.sj-content input[type=checkbox], .sj-content input[type=radio],
.sj-adminframe input[type=checkbox], .sj-adminframe input[type=radio] {
    accent-color: var(--sj-maroon);
}

.sj-content .listboxcss, .sj-content .listbx, .sj-adminframe .listboxcss, .sj-adminframe .listbx {
    max-width: 100%;
    border: 1px solid var(--sj-line);
    border-radius: 8px;
    font-size: 14px;
}

@media (max-width: 991.98px) {
    .sj-content table:not([rules]):not([border]), .sj-content table:not([rules]):not([border]) > tbody,
    .sj-content table:not([rules]):not([border]) > tbody > tr {
        display: block;
    }

        .sj-content table:not([rules]):not([border]) > tbody > tr > td {
            display: inline-block;
        }
}
.btnsel {
    width: auto;
    min-width: 200px;
    height: 44px;
    padding: 0 18px 0 14px;
    white-space: nowrap;
}

.btnskew {
    background-color: var(--sj-maroon);
    color: #fff;
    font-weight: 600;
}

    .btnskew:hover {
        background-color: var(--sj-maroon-dark);
        border-color: var(--sj-maroon-dark);
    }
@media (max-width: 991.98px) {
    .sj-content table:not([rules]):not([border]) > tbody > tr > td {
        max-width: 100%;
    }

    .sj-content input[type=text], .sj-content input[type=password], .sj-content select, .sj-content textarea {
        max-width: 100% !important;
    }

    .btnsel {
        min-width: 0;
    }
}
/* ---------- customer (scheme) portal ---------- */

.sj-schemehero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding: 32px 36px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--sj-maroon) 0%, var(--sj-maroon-dark) 100%);
    color: #f6ebdc;
}

    .sj-schemehero .sj-pagetitle {
        margin-bottom: 8px;
        font-size: 44px;
        color: #fff;
    }

    .sj-schemehero p {
        max-width: 560px;
        margin: 0 0 20px;
        line-height: 1.6;
    }

    .sj-schemehero > i {
        font-size: 96px;
        color: rgba(236, 217, 171, .35);
    }

.sj-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sj-gold-light);
}

.sj-heroactions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .sj-heroactions .sj-linkbtn {
        border-color: var(--sj-gold);
        background: var(--sj-gold);
    }

    .sj-heroactions .sj-linkbtn-outline {
        border-color: rgba(255, 255, 255, .6);
        background: transparent;
        color: #fff;
    }

        .sj-heroactions .sj-linkbtn-outline:hover {
            background: rgba(255, 255, 255, .12);
        }

.sj-dash .sj-tiles {
    margin-bottom: 20px;
}

.sj-poster {
    display: block;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .2s;
}

    .sj-poster img {
        display: block;
        width: 100%;
        height: auto;
    }

    .sj-poster:hover {
        box-shadow: var(--sj-shadow);
    }

.sj-offers {
    display: grid;
    gap: 20px;
}

.sj-lead {
    margin: -6px 0 16px;
    color: var(--sj-muted);
}

.griddraw, .gridMemdetails {
    border: 1px solid var(--sj-line);
    background: #fff;
}

    .griddraw th, .gridMemdetails th {
        height: auto;
        padding: 10px 8px;
    }

    .griddraw td, .gridMemdetails td {
        height: auto;
        padding: 8px;
        border-bottom: 1px solid var(--sj-line);
    }

.sj-content .lbltxtt {
    font-size: 15px;
    color: var(--sj-muted);
}

/* policy and terms text */

.textsiri {
    float: none;
    width: auto;
    max-width: 920px;
    margin: 24px auto 40px;
    padding: 28px 32px 32px;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: #fff;
    font-size: 15px;
    line-height: 2;
    color: var(--sj-ink);
}

.sj-content .textsiri {
    margin: 0 0 24px;
}

.textsiri .lblhead {
    display: block;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sj-line);
}

@media (max-width: 767.98px) {
    .sj-schemehero {
        padding: 24px 20px;
    }

        .sj-schemehero > i {
            display: none;
        }

        .sj-schemehero .sj-pagetitle {
            font-size: 34px;
        }

    .textsiri {
        padding: 18px 16px 22px;
        line-height: 1.8;
    }
}
input[type=file], input[type=file].btnghost, input[type=file].btnghostp, input[type=file].txtboxes {
    width: auto;
    max-width: 100%;
    height: auto !important;
    margin: 6px 0;
    padding: 6px;
    border: 1px dashed var(--sj-line);
    border-radius: 6px;
    background: #fff;
    color: var(--sj-ink);
    font-size: 13px;
    font-weight: 400;
}

.textsiri > br:first-of-type {
    display: none;
}

.textsiri {
    padding-top: 6px;
}
/* ---------- admin panel sections ---------- */

.sj-formcols > br, .sj-gallerygrid > br, .sj-fieldset > br:first-child {
    display: none;
}

.sj-formcols > .lblhead, .sj-gallerygrid > .sj-note {
    grid-column: 1 / -1;
}

.sj-adminframe .sj-fieldset {
    overflow-x: auto;
}

    .sj-adminframe .sj-fieldset > .lblhead {
        margin-bottom: 14px;
        font-size: 24px;
    }

    .sj-adminframe .sj-fieldset table:not(.griddraw):not(.gridMemdetails) td {
        padding: 4px 6px;
    }

.sj-adminframe .griddraw, .sj-adminframe .gridMemdetails, .sj-adminframe .goldgrid {
    width: 100%;
}

.sj-adminframe .griddraw .btnghost {
    height: 30px;
    margin: 0 2px;
    padding: 0 12px;
    font-size: 13px;
}

.sj-wraptoolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: var(--sj-ivory);
}

    .sj-wraptoolbar .btnghost, .sj-wraptoolbar .drpdowns, .sj-wraptoolbar .txtboxes, .sj-wraptoolbar .lbllbl {
        margin: 0;
        padding-left: 0;
    }

    .sj-wraptoolbar .btnghost {
        padding-left: 16px;
    }

    .sj-wraptoolbar .gallist {
        flex-basis: 100%;
        width: 100% !important;
        max-width: 720px;
        height: 220px !important;
        border: 1px solid var(--sj-line);
        border-radius: 8px;
        font-family: var(--sj-sans);
        font-size: 14px;
        color: var(--sj-ink);
    }

.sj-adminframe .sj-inlineform {
    background: var(--sj-ivory);
}

.sj-adminframe .listschnos {
    min-height: 0;
    max-height: 520px;
    overflow: auto;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: #fff;
    font-size: 13px;
}

    .sj-adminframe .listschnos td {
        padding: 5px 10px;
        white-space: nowrap;
    }

    .sj-adminframe .listschnos label {
        padding: 0 0 0 6px;
    }

.sj-gallerygrid {
    display: grid;
    grid-template-columns: 220px 220px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

    .sj-gallerygrid .gallist {
        width: 100%;
        height: 360px !important;
        border: 1px solid var(--sj-line);
        border-radius: 8px;
        font-family: var(--sj-sans);
        font-size: 14px;
        color: var(--sj-ink);
    }

    .sj-gallerygrid .imggal {
        display: block;
        width: 100%;
        max-width: 520px;
        height: 200px;
        margin: 6px 0 12px;
        border: 1px solid var(--sj-line);
        border-radius: 8px;
        background: var(--sj-sand);
        object-fit: contain;
    }

    .sj-gallerygrid .lbllblD {
        padding: 0;
    }

.sj-adminframe .summarypage > table, .sj-adminframe .summarypage table {
    max-width: 100%;
}

/* shop admin shell */

.sj-shopadmin {
    background: var(--sj-ivory);
}

.sj-adminbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 24px;
    border-bottom: 1px solid var(--sj-line);
    background: #fff;
}

    .sj-adminbar .sj-brand img {
        width: 48px;
        height: 48px;
    }

    .sj-adminbar .sj-brandname {
        font-size: 24px;
    }

.sj-adminlogout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--sj-muted);
}

.sj-adminwrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 24px 40px;
}

.sj-tabpanel.empty {
    padding: 48px 16px;
    text-align: center;
    color: var(--sj-muted);
}

    .sj-tabpanel.empty::before {
        content: "Choose a section above.";
    }

    .sj-tabpanel.empty iframe {
        display: none;
    }

.sj-authfull {
    min-height: 100vh;
    align-items: center;
}

.sj-authcard-single {
    grid-template-columns: 1fr;
    max-width: 440px;
}

.sj-authlogo {
    display: block;
    width: 72px;
    height: 72px;
    margin-bottom: 14px;
    object-fit: contain;
}

@media (max-width: 767.98px) {
    .sj-gallerygrid {
        grid-template-columns: 1fr;
    }

    .sj-adminwrap {
        padding: 14px 12px 28px;
    }
}
.sj-adminframe .griddraw td, .sj-adminframe .griddraw th,
.sj-adminframe .gridMemdetails td, .sj-adminframe .gridMemdetails th {
    white-space: nowrap;
}

.sj-toolblock {
    padding: 14px 16px;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: var(--sj-ivory);
    font-size: 14px;
    line-height: 2.8;
    color: var(--sj-muted);
}

    .sj-toolblock .btnghost, .sj-toolblock .drpdowns, .sj-toolblock .txtboxes {
        margin: 0 6px 0 0;
        line-height: 1.4;
        vertical-align: middle;
    }

    .sj-toolblock .lbllbl {
        padding: 0 6px 0 0;
    }

    .sj-toolblock .gallist {
        display: block;
        width: 100% !important;
        max-width: 720px;
        height: 220px !important;
        margin-top: 8px;
        border: 1px solid var(--sj-line);
        border-radius: 8px;
        font-family: var(--sj-sans);
        font-size: 14px;
        line-height: 1.5;
        color: var(--sj-ink);
    }
/* ---------- contact and about ---------- */

.sj-pagehero-shop {
    padding-top: 64px;
    padding-bottom: 64px;
    background: linear-gradient(rgba(86, 20, 32, .82), rgba(86, 20, 32, .82)), url(../Images/Siri_Jewellery_shop_web.jpg) center 40% / cover;
}

.sj-contact, .sj-about {
    float: none;
    padding-top: 40px;
    padding-bottom: 56px;
    background: transparent;
    font-size: 15px;
    color: var(--sj-ink);
}

.sj-contactgrid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 28px;
    align-items: stretch;
}

.sj-infocards {
    display: grid;
    gap: 14px;
}

.sj-infocard {
    display: flex;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: #fff;
}

    .sj-infocard > i {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--sj-sand);
        font-size: 18px;
        line-height: 44px;
        text-align: center;
        color: var(--sj-maroon);
    }

    .sj-infocard h3 {
        margin: 0 0 4px;
        font-size: 22px;
        font-weight: 700;
        color: var(--sj-maroon);
    }

    .sj-infocard p {
        margin: 0 0 6px;
        line-height: 1.7;
        overflow-wrap: anywhere;
    }

.sj-contactphoto img, .sj-story img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 280px;
    border-radius: 12px;
    object-fit: cover;
}

.sj-chipsection {
    margin-top: 36px;
    text-align: center;
}

    .sj-chipsection h2, .sj-aboutblock > h2 {
        margin-bottom: 16px;
        font-size: 30px;
        font-weight: 700;
        color: var(--sj-maroon);
    }

.sj-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

    .sj-chips span {
        padding: 9px 18px;
        border: 1px solid var(--sj-line);
        border-radius: 999px;
        background: #fff;
        font-weight: 500;
    }

.sj-eyebrow-dark {
    color: var(--sj-gold);
}

.sj-story {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 36px;
    align-items: center;
}

    .sj-story h2 {
        margin: 6px 0 14px;
        font-size: 36px;
        font-weight: 700;
        line-height: 1.15;
        color: var(--sj-maroon);
    }

    .sj-story p, .sj-panelcard p, .sj-ticklist {
        line-height: 1.8;
    }

.sj-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    margin: 40px 0;
    padding: 26px 20px;
    border-radius: 16px;
    background: var(--sj-sand);
    text-align: center;
}

    .sj-stats b {
        display: block;
        font-family: var(--sj-serif);
        font-size: 40px;
        font-weight: 700;
        line-height: 1.1;
        color: var(--sj-maroon);
    }

    .sj-stats span {
        font-size: 13px;
        color: var(--sj-muted);
    }

.sj-aboutblock {
    margin-top: 40px;
}

    .sj-aboutblock > h2 {
        text-align: center;
    }

.sj-servicegrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.sj-service {
    padding: 22px 18px;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: #fff;
    text-align: center;
}

    .sj-service i {
        margin-bottom: 12px;
        font-size: 28px;
        color: var(--sj-gold);
    }

    .sj-service p {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
    }

.sj-twocol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.sj-panelcard {
    padding: 26px 26px 28px;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: #fff;
}

    .sj-panelcard h2 {
        margin-bottom: 12px;
        font-size: 28px;
        font-weight: 700;
        color: var(--sj-maroon);
    }

.sj-ticklist {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .sj-ticklist li {
        position: relative;
        margin-bottom: 10px;
        padding-left: 28px;
    }

        .sj-ticklist li::before {
            content: "\2726";
            position: absolute;
            left: 0;
            color: var(--sj-gold);
        }

.sj-about + .sj-why {
    margin-top: 0;
}

@media (max-width: 991.98px) {
    .sj-contactgrid, .sj-story {
        grid-template-columns: 1fr;
    }

    .sj-story h2 {
        font-size: 28px;
    }

    .sj-pagehero-shop {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}
/* ---------- gallery ---------- */

.sj-gallerypage {
    margin-left: auto;
    padding-top: 36px;
    padding-bottom: 56px;
}

.sj-gallery {
    columns: 4 260px;
    column-gap: 16px;
}

.sj-galleryitem {
    display: block;
    margin-bottom: 16px;
    border-radius: 12px;
    background: var(--sj-sand);
    overflow: hidden;
    break-inside: avoid;
    cursor: zoom-in;
}

    .sj-gallery .sj-galleryitem img {
        display: block;
        width: 100%;
        height: auto;
        transition: transform .35s, filter .35s;
    }

    .sj-gallery .sj-galleryitem:hover img {
        transform: scale(1.05);
        filter: brightness(1.05);
    }

.sj-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 56px 64px;
    background: rgba(20, 8, 10, .92);
}

    .sj-lightbox.open {
        display: flex;
    }

    .sj-lightbox img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 8px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    }

    .sj-lightbox button {
        position: absolute;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .14);
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        transition: background-color .15s;
    }

        .sj-lightbox button:hover {
            background: var(--sj-gold);
        }

.sj-lbclose {
    top: 16px;
    right: 16px;
}

.sj-lbprev {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.sj-lbnext {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.sj-lbcount {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
}

@media (min-width: 992px) and (max-width: 1299.98px) {
    .sj-menu .nav-link {
        padding-left: 9px;
        padding-right: 9px;
        font-size: 14px;
    }

    .sj-brandname {
        font-size: 26px;
    }
}

@media (max-width: 575.98px) {
    .sj-gallery {
        columns: 2;
        column-gap: 10px;
    }

    .sj-galleryitem {
        margin-bottom: 10px;
    }

    .sj-lightbox {
        padding: 56px 8px;
    }
}
.sj-menu .nav-link {
    white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1299.98px) {
    .sj-menu {
        gap: 0;
    }

        .sj-menu .nav-link {
            padding-left: 7px;
            padding-right: 7px;
            font-size: 13.5px;
        }

    .sj-nav {
        padding-left: 14px;
        padding-right: 14px;
    }

    .sj-brandname {
        font-size: 22px;
    }

    .sj-brandtag {
        display: none;
    }

    .sj-brand img {
        width: 46px;
        height: 46px;
    }

    .sj-welcome {
        display: none;
    }
}
/* ---------- public gold rates page ---------- */

a.sj-rates:hover {
    color: var(--sj-maroon-dark);
    text-decoration: underline;
}

.sj-ratespage {
    padding-top: 36px;
    padding-bottom: 56px;
}

.sj-updated {
    margin-bottom: 18px;
    font-size: 14px;
    color: var(--sj-muted);
}

    .sj-updated i {
        color: var(--sj-gold);
    }

    .sj-updated span {
        font-weight: 600;
        color: var(--sj-ink);
    }

.sj-rategrid {
    display: grid;
    grid-template-columns: 1.3fr repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.sj-ratecard {
    display: grid;
    gap: 2px;
    padding: 22px 20px;
    border: 1px solid var(--sj-line);
    border-radius: 14px;
    background: #fff;
}

.sj-ratename {
    font-family: var(--sj-serif);
    font-size: 24px;
    font-weight: 700;
    color: var(--sj-maroon);
}

.sj-ratepurity {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sj-gold);
}

.sj-ratevalue {
    margin-top: 10px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--sj-ink);
}

.sj-rateunit {
    font-size: 13px;
    color: var(--sj-muted);
}

.sj-rateten {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--sj-line);
    font-size: 14px;
    color: var(--sj-muted);
}

    .sj-rateten span {
        font-weight: 600;
        color: var(--sj-ink);
    }

.sj-ratecard-main {
    border-color: var(--sj-maroon);
    background: linear-gradient(150deg, var(--sj-maroon) 0%, var(--sj-maroon-dark) 100%);
}

    .sj-ratecard-main .sj-ratename, .sj-ratecard-main .sj-ratevalue, .sj-ratecard-main .sj-rateten span {
        color: #fff;
    }

    .sj-ratecard-main .sj-ratevalue {
        font-size: 36px;
    }

    .sj-ratecard-main .sj-ratepurity {
        color: var(--sj-gold-light);
    }

    .sj-ratecard-main .sj-rateunit, .sj-ratecard-main .sj-rateten {
        border-top-color: rgba(255, 255, 255, .25);
        color: #f1e1c8;
    }

.sj-ratecard-silver {
    background: var(--sj-ivory);
}

.sj-ratehead {
    margin: 36px 0 14px;
    font-size: 30px;
    font-weight: 700;
    color: var(--sj-maroon);
}

.sj-tablewrap {
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: #fff;
    overflow-x: auto;
}

.sj-ratetable {
    width: 100%;
    font-size: 14px;
    white-space: nowrap;
}

    .sj-ratetable th {
        padding: 12px 16px;
        background: var(--sj-maroon);
        color: #fff;
        font-weight: 600;
        text-align: right;
    }

    .sj-ratetable td {
        padding: 11px 16px;
        border-top: 1px solid var(--sj-line);
        text-align: right;
    }

        .sj-ratetable th:first-child, .sj-ratetable td:first-child {
            text-align: left;
        }

    .sj-ratetable tbody tr:first-child td {
        background: var(--sj-ivory);
        font-weight: 600;
    }

.sj-up {
    color: #b3261e;
}

.sj-down {
    color: #2e7d32;
}

.sj-ratecta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

@media (max-width: 1199.98px) {
    .sj-rategrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sj-ratecard-main {
        grid-column: 1 / -1;
    }
}

@media (max-width: 479.98px) {
    .sj-rategrid {
        grid-template-columns: 1fr;
    }
}
.sj-stale {
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid #e8c9a0;
    border-radius: 8px;
    background: #fff6e8;
    font-size: 14px;
    color: #7a4b12;
}

    .sj-stale a {
        font-weight: 600;
    }
/* ---------- report viewer pages ---------- */

.reportform, .recrpt {
    padding: 12px;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: #fff;
}

/* give the report room: it was a fixed 500px box */
.sj-content [id$="ReportViewer1"] {
    width: 100% !important;
    height: calc(100vh - 210px) !important;
    min-height: 520px;
    background-color: #fff !important;
}

/* keep the site's form and table styling out of the viewer's own layout tables */
.sj-content [id$="ReportViewer1"] table:not([rules]):not([border]) > tbody > tr > td {
    padding: revert;
    max-width: none;
}

.sj-content [id$="ReportViewer1"] table[rules], .sj-content [id$="ReportViewer1"] table[border="1"] {
    border: 0;
    background: transparent;
    font-size: inherit;
}

.sj-content [id$="ReportViewer1"] img {
    max-width: none;
}

.sj-content [id$="ReportViewer1"] input[type=image]:hover {
    transform: none;
}

.sj-content [id$="ReportViewer1"] input[type=text], .sj-content [id$="ReportViewer1"] select {
    max-width: none !important;
}

@media (max-width: 991.98px) {
    .sj-content [id$="ReportViewer1"] table { display: table; }
    .sj-content [id$="ReportViewer1"] table > tbody { display: table-row-group; }
    .sj-content [id$="ReportViewer1"] table > tbody > tr { display: table-row; }
    .sj-content [id$="ReportViewer1"] table > tbody > tr > td { display: table-cell; }
}
/* Icon buttons declared with Height="30" in the markup (view/search icons beside inputs).
   Zero-specificity default, so any class or grid rule still wins. */
:where(.sj-content input[type=image]:not([class]), .sj-adminframe input[type=image]:not([class])) {
    width: auto;
    height: 30px;
}
.sj-credit {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: rgba(241, 232, 218, .8);
}

    .sj-credit a {
        font-weight: 600;
        color: var(--sj-gold-light);
    }

        .sj-credit a:hover {
            color: #fff;
            text-decoration: underline;
        }
/* ---------- scheme registration ---------- */

.sj-regpage .sj-fieldset {
    margin-bottom: 16px;
}

.sj-regpage .sj-fieldgrid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 18px;
}

.sj-regpage .sj-wide {
    grid-column: 1 / -1;
}

.sj-regpage .sj-field .txtboxes, .sj-regpage .sj-field .txtboxesD,
.sj-regpage .sj-field .drpdowns, .sj-regpage .sj-field .drpdownsD {
    width: 100%;
    height: 38px;
    margin: 0;
}

.sj-regpage .sj-field > span[style*="color"] {
    font-size: 12px;
}

.sj-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

    .sj-pair .drpspl {
        width: 100%;
        height: 38px;
        margin: 0;
    }

.sj-otp:empty {
    display: none;
}

.sj-otp .txtboxes {
    width: 160px;
    height: 46px;
    margin: 0;
    font-size: 16px;
    letter-spacing: 2px;
    text-align: center;
}

.sj-regcard {
    max-width: 900px;
}

.sj-regbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 14px;
}

    .sj-regbar .lbllbl {
        padding: 0;
    }

    .sj-regbar .sj-badge {
        font-size: 14px;
    }

.sj-reglayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 18px;
    align-items: start;
}

.sj-photocard {
    position: sticky;
    top: 140px;
    text-align: center;
}

    .sj-photocard .sj-legend {
        text-align: left;
    }

.sj-photo {
    display: block;
    width: 160px;
    height: 160px;
    margin: 0 auto 10px;
    border: 1px solid var(--sj-line);
    border-radius: 12px;
    background: var(--sj-sand);
    object-fit: cover;
}

.sj-photocard input[type=file] {
    width: 100%;
}

.sj-photocard .btnghost {
    width: 100%;
    margin: 4px 0 0;
}

.sj-hint {
    font-size: 13px;
    color: var(--sj-muted);
}

.sj-check {
    font-size: 14px;
    color: var(--sj-ink);
}

    .sj-check input {
        margin-right: 6px;
        accent-color: var(--sj-maroon);
    }

.sj-regpage .pp {
    font-size: 14px;
}

@media (max-width: 1199.98px) {
    .sj-reglayout {
        grid-template-columns: 1fr;
    }

    .sj-photocard {
        position: static;
        max-width: 320px;
    }
}
.sj-actiongrid .btnsel {
    height: auto;
    min-height: 48px;
    padding-top: 8px;
    padding-bottom: 8px;
    white-space: normal;
}
/* ---------- index (welcome) page ---------- */

.sj-index {
    min-height: 100vh;
    margin: 0;
    background: #1a0b0e !important;
    color: #fff;
}

    .sj-index form {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

.sj-indexslides {
    position: fixed;
    inset: 0;
}

    /* darken the photos so the text stays readable on light and dark slides alike */
    .sj-indexslides::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center, rgba(26, 11, 14, .42) 0%, rgba(26, 11, 14, .52) 60%, rgba(26, 11, 14, .78) 100%);
    }

.sj-indexslide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.4s ease, transform 7s ease;
}

    .sj-indexslide.active {
        opacity: 1;
        transform: scale(1);
    }

.sj-indexcontent {
    position: relative;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 24px;
    text-align: center;
}

.sj-indexlogo {
    width: 120px;
    height: 120px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
    object-fit: contain;
}

.sj-indexeyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--sj-gold-light);
}

.sj-indexcontent h1 {
    margin: 10px 0 6px;
    font-size: clamp(44px, 8vw, 92px);
    font-weight: 700;
    line-height: 1.05;
    color: #fff;
}

.sj-indexcaption {
    margin: 0 0 30px;
    font-family: var(--sj-serif);
    font-size: clamp(22px, 3vw, 32px);
    font-style: italic;
    color: var(--sj-gold-light);
}

.sj-indexactions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

    .sj-indexactions .sj-linkbtn {
        padding: 14px 30px;
        font-size: 16px;
    }

.sj-indexprimary {
    border-color: var(--sj-gold);
    background: var(--sj-gold);
}

    .sj-indexprimary:hover {
        border-color: #9c7320;
        background: #9c7320;
    }

.sj-indexsecondary {
    border-color: rgba(255, 255, 255, .7);
    background: transparent;
}

    .sj-indexsecondary:hover {
        background: rgba(255, 255, 255, .14);
    }

.sj-indexdots {
    display: flex;
    gap: 10px;
    margin-top: 34px;
}

    .sj-indexdots button {
        width: 34px;
        height: 4px;
        padding: 0;
        border: 0;
        border-radius: 2px;
        background: rgba(255, 255, 255, .35);
        cursor: pointer;
        transition: background-color .2s;
    }

        .sj-indexdots button.active, .sj-indexdots button:hover {
            background: var(--sj-gold-light);
        }

.sj-indexfoot {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 20px;
    padding: 14px 24px;
    font-size: 12px;
    color: rgba(255, 255, 255, .75);
}

    .sj-indexfoot a {
        font-weight: 600;
        color: var(--sj-gold-light);
    }

@media (max-width: 575.98px) {
    .sj-indexfoot {
        justify-content: center;
        text-align: center;
    }

    .sj-indexlogo {
        width: 92px;
        height: 92px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sj-indexslide {
        transform: none;
        transition: opacity .3s;
    }
}
.sj-indexcontent h1, .sj-indexeyebrow, .sj-indexcaption {
    text-shadow: 0 2px 18px rgba(0, 0, 0, .65);
}