:root {
    --sf: #D4600A;
    --sf2: #F07820;
    --gd: #C9960C;
    --gd2: #F5C518;
    --cream: #FBF5E6;
    --cd: #F0E6CC;
    --dk: #1C0E00;
    --mid: #3D1F00;
    --br: #6B3A0F;
    --mt: #9A7040;
    --card: #FFFDF5;
    --brd: #E2C98A;
    --grn: #1B5E20;
    --red: #B71C1C;
    --sw: 0 8px 32px rgba(180, 90, 10, .15);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--cream);
    color: var(--dk);
    min-height: 100vh;
    overflow-x: hidden;
}

header {
    background: var(--dk);
    position: relative;
    overflow: hidden;
}

.hbg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(212, 96, 10, .18) 0, transparent 50%), radial-gradient(circle at 80% 20%, rgba(201, 150, 12, .14) 0, transparent 45%), repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(255, 255, 255, .015) 30px, rgba(255, 255, 255, .015) 31px);
}

.hi {
    position: relative;
    z-index: 2;
    max-width: 1140px;
    margin: 0 auto;
    padding: 22px 28px 18px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.lw {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    cursor: pointer;
}

.lsc {
    width: 78px;
    height: 78px;
    flex-shrink: 0;
}

.bn {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.15rem, 3.2vw, 1.7rem);
    font-weight: 700;
    color: var(--gd2);
    letter-spacing: .8px;
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(201, 150, 12, .4);
}

.bs {
    font-family: 'Crimson Pro', serif;
    font-size: .86rem;
    color: rgba(255, 255, 255, .5);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-top: 3px;
}

.hr {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.lp {
    background: rgba(27, 94, 32, .3);
    border: 1px solid rgba(76, 175, 80, .5);
    border-radius: 20px;
    padding: 5px 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .76rem;
    color: #a5d6a7;
}

.ld {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #66bb6a;
    animation: blink 1.6s ease-in-out infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(1.4);
    }
}

#clock {
    font-weight: 700;
    font-size: .8rem;
    color: rgba(255, 255, 255, .5);
}

.ms {
    background: linear-gradient(90deg, var(--sf), var(--gd), var(--sf));
    background-size: 200% auto;
    animation: shim 4s linear infinite;
    padding: 7px 0;
    overflow: hidden;
}

@keyframes shim {
    0% {
        background-position: 0%;
    }

    100% {
        background-position: 200%;
    }
}

.mi {
    display: flex;
    white-space: nowrap;
    animation: mq 32s linear infinite;
    width: max-content;
}

@keyframes mq {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.mitem {
    font-family: 'Cinzel', serif;
    font-size: .7rem;
    letter-spacing: 2px;
    color: white;
    text-transform: uppercase;
    padding: 0 26px;
}

.msep {
    color: rgba(255, 255, 255, .5);
    padding: 0 6px;
}

nav.tabs {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--brd);
    position: sticky;
    top: 0;
    z-index: 50;
}

.ti {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 2px;
}

.tb {
    padding: 13px 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: .86rem;
    font-weight: 500;
    color: var(--mt);
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color .2s;
    white-space: nowrap;
}

.tb::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--sf);
    transform: scaleX(0);
    transition: transform .2s;
}

.tb:hover {
    color: var(--sf);
}

.tb.active {
    color: var(--sf);
    font-weight: 700;
}

.tb.active::after {
    transform: scaleX(1);
}

.tsp {
    flex: 1;
}

.up {
    display: flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, rgba(212, 96, 10, .08), rgba(201, 150, 12, .08));
    border: 1px solid var(--brd);
    border-radius: 20px;
    padding: 5px 13px;
    font-size: .78rem;
    color: var(--br);
    font-weight: 500;
}

.av {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sf), var(--gd));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: .62rem;
    font-weight: 700;
}

.lob {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .72rem;
    color: var(--mt);
    padding: 2px 5px;
    border-radius: 4px;
    transition: color .2s;
}

.lob:hover {
    color: var(--red);
}

.page {
    display: none;
}

.page.active {
    display: block;
}

.mc {
    max-width: 1140px;
    margin: 0 auto;
    padding: 40px 24px 60px;
}

.sh {
    text-align: center;
    margin-bottom: 38px;
}

.sh h2 {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    color: var(--mid);
    font-weight: 600;
}

.sh p {
    color: var(--mt);
    font-size: .86rem;
    margin-top: 6px;
}

.orn {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px auto 0;
    width: fit-content;
}

.ol {
    width: 70px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--sf));
}

.olr {
    background: linear-gradient(90deg, var(--sf), transparent);
}

.og {
    width: 10px;
    height: 10px;
    background: var(--gd);
    transform: rotate(45deg);
}

.lb {
    background: linear-gradient(135deg, #fff8e1, #fff3cd);
    border: 1.5px solid var(--brd);
    border-radius: 18px;
    padding: 44px 32px;
    text-align: center;
    max-width: 560px;
    margin: 0 auto 40px;
    box-shadow: var(--sw);
}

.lb .lic {
    font-size: 3rem;
    margin-bottom: 14px;
    display: block;
}

.lb h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    color: var(--mid);
    margin-bottom: 10px;
}

.lb p {
    color: var(--mt);
    font-size: .88rem;
    line-height: 1.75;
    margin-bottom: 22px;
}

.pn {
    background: linear-gradient(135deg, #fff8e1, #fffde7);
    border: 1.5px solid #ffd54f;
    border-radius: 18px;
    padding: 36px 28px;
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
    box-shadow: var(--sw);
}

.pn .pni {
    font-size: 2.8rem;
    margin-bottom: 12px;
    display: block;
}

.pn h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: #e65100;
    margin-bottom: 8px;
}

.pn p {
    color: #8d6e00;
    font-size: .88rem;
    line-height: 1.75;
}

.bsf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--sf2), var(--sf));
    color: white;
    padding: 13px 26px;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: .93rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(212, 96, 10, .35);
    transition: all .2s;
}

.bsf:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212, 96, 10, .45);
}

.bsf:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.bol {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--sf);
    padding: 11px 22px;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: .88rem;
    border: 2px solid var(--sf);
    cursor: pointer;
    transition: all .2s;
}

.bol:hover {
    background: var(--sf);
    color: white;
}

.pg {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    gap: 20px;
}

.pc {
    background: var(--card);
    border: 1px solid var(--brd);
    border-radius: 18px;
    padding: 24px 22px;
    box-shadow: var(--sw);
    position: relative;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
    animation: fu .5s ease both;
}

@keyframes fu {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sf), var(--gd2), var(--sf));
}

.pc:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(180, 90, 10, .2);
}

.ct {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.ciw {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(212, 96, 10, .1), rgba(201, 150, 12, .15));
    border: 1px solid rgba(201, 150, 12, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
}

.cbg {
    background: linear-gradient(135deg, rgba(27, 94, 32, .12), rgba(27, 94, 32, .05));
    border: 1px solid rgba(27, 94, 32, .3);
    color: #2e7d32;
    border-radius: 20px;
    padding: 3px 9px;
    font-size: .68rem;
    font-weight: 700;
}

.cbg.out-of-stock {
    background: linear-gradient(135deg, rgba(183, 28, 28, .12), rgba(183, 28, 28, .05));
    border: 1px solid rgba(183, 28, 28, .3);
    color: #c62828;
}

.cn {
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    color: var(--mid);
    font-weight: 600;
    margin-bottom: 2px;
}

.cd2 {
    font-size: .76rem;
    color: var(--mt);
}

.cpr {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--cd);
}

.ps {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sf);
    padding-bottom: 2px;
}

.pv {
    font-size: 2.3rem;
    font-weight: 700;
    color: var(--dk);
    line-height: 1;
    font-family: 'DM Sans', sans-serif;
    transition: color .4s;
}

.pu {
    font-size: .76rem;
    color: #bbb;
    padding-bottom: 4px;
}

.cf {
    font-size: .7rem;
    color: #ccc;
    margin-top: 9px;
}

.cf b {
    color: var(--sf);
}

.cw {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 24px 60px;
}

.cc {
    background: linear-gradient(135deg, var(--dk), var(--mid));
    border-radius: 22px;
    padding: 40px 36px;
    color: white;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .25);
}

.cc h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    color: var(--gd2);
    margin-bottom: 22px;
}

.cgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.cit {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 13px;
    padding: 16px;
}

.cil {
    font-size: .7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gd);
    margin-bottom: 7px;
    font-weight: 700;
}

.civ {
    font-size: .92rem;
    color: white;
    font-weight: 500;
    line-height: 1.6;
}

.civ a {
    color: white;
    text-decoration: none;
}

.wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    background: #25D366;
    color: white;
    padding: 15px 30px;
    border-radius: 13px;
    font-weight: 700;
    font-size: .97rem;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(37, 211, 102, .4);
    transition: all .2s;
    margin-top: 22px;
}

.wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(37, 211, 102, .5);
}

.ov {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(10, 5, 0, .72);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ov.open {
    display: flex;
}

.modal {
    background: var(--card);
    border-radius: 22px;
    padding: 36px 34px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
    position: relative;
    animation: pi .25s ease;
    max-height: 92vh;
    overflow-y: auto;
}

@keyframes pi {
    from {
        opacity: 0;
        transform: scale(.94);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.mlg {
    max-width: 560px;
}

.mc2 {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cd);
    border: none;
    font-size: .95rem;
    cursor: pointer;
    color: var(--mt);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

.mc2:hover {
    background: var(--sf);
    color: white;
}

.modal h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    color: var(--mid);
    margin-bottom: 5px;
}

.msub {
    color: var(--mt);
    font-size: .82rem;
    margin-bottom: 22px;
    line-height: 1.6;
}

.fl2 {
    margin-bottom: 14px;
}

.fl2 label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    color: var(--br);
    margin-bottom: 5px;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.fl2 input {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--brd);
    border-radius: 9px;
    font-family: 'DM Sans', sans-serif;
    font-size: .93rem;
    background: white;
    color: var(--dk);
    transition: border .2s, box-shadow .2s;
}

.fl2 input:focus {
    outline: none;
    border-color: var(--sf);
    box-shadow: 0 0 0 3px rgba(212, 96, 10, .1);
}

.fr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.bfu {
    width: 100%;
    margin-top: 6px;
}

.err {
    color: var(--red);
    font-size: .78rem;
    margin-top: 7px;
    display: none;
}

.sbox {
    background: linear-gradient(135deg, rgba(27, 94, 32, .08), rgba(27, 94, 32, .04));
    border: 1.5px solid rgba(27, 94, 32, .25);
    border-radius: 11px;
    padding: 16px;
    color: var(--grn);
    font-size: .85rem;
    line-height: 1.6;
    text-align: center;
    display: none;
    margin-top: 14px;
}

.dvt {
    text-align: center;
    color: #ccc;
    font-size: .78rem;
    margin: 14px 0;
    position: relative;
}

.dvt::before,
.dvt::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 42%;
    height: 1px;
    background: var(--brd);
}

.dvt::before {
    left: 0;
}

.dvt::after {
    right: 0;
}

.ag {
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-height: 50vh;
    overflow-y: auto;
}

.ar {
    display: flex;
    align-items: center;
    gap: 13px;
    background: white;
    border: 1px solid var(--brd);
    border-radius: 11px;
    padding: 11px 15px;
}

.ari {
    flex: 1;
}

.ari strong {
    font-size: .88rem;
    color: var(--mid);
}

.ari span {
    font-size: .72rem;
    color: #aaa;
    display: block;
    margin-top: 1px;
}

.ai {
    width: 88px;
    padding: 7px 9px;
    text-align: center;
    border: 1.5px solid var(--brd);
    border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: .97rem;
    font-weight: 700;
    color: var(--dk);
}

.stock-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    min-width: 100px;
}

.stock-btn.in-stock {
    background: #e8f5e8;
    color: var(--grn);
    border: 1px solid #c8e6c9;
}

.stock-btn.in-stock:hover {
    background: #d4edda;
}

.stock-btn.out-of-stock {
    background: #ffebee;
    color: var(--red);
    border: 1px solid #ffcdd2;
}

.stock-btn.out-of-stock:hover {
    background: #ffcdd2;
}

.ai:focus {
    outline: none;
    border-color: var(--sf);
}

.aac {
    display: flex;
    gap: 9px;
    margin-top: 16px;
}

.bg {
    flex: 1;
    padding: 11px;
    background: transparent;
    border: 1.5px solid var(--brd);
    border-radius: 9px;
    font-family: 'DM Sans', sans-serif;
    font-size: .85rem;
    cursor: pointer;
    color: var(--mt);
    transition: all .2s;
}

.bg:hover {
    border-color: var(--sf);
    color: var(--sf);
}

.sok {
    display: none;
    color: var(--grn);
    font-size: .8rem;
    text-align: center;
    margin-top: 9px;
    font-weight: 700;
}

.atabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--brd);
}

.at {
    padding: 7px 14px 10px;
    font-size: .8rem;
    font-weight: 700;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--mt);
    position: relative;
    transition: color .2s;
}

.at::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--sf);
    transform: scaleX(0);
    transition: transform .2s;
}

.at.active {
    color: var(--sf);
}

.at.active::after {
    transform: scaleX(1);
}

.atc {
    display: none;
}

.atc.active {
    display: block;
}

.bc {
    display: inline-block;
    background: var(--sf);
    color: white;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: .68rem;
    margin-left: 4px;
}

.pl {
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-height: 52vh;
    overflow-y: auto;
}

.pr {
    background: white;
    border: 1px solid var(--brd);
    border-radius: 11px;
    padding: 13px 15px;
}

.prn {
    font-weight: 700;
    color: var(--mid);
    font-size: .92rem;
}

.prm {
    font-size: .76rem;
    color: #aaa;
    margin-top: 2px;
    line-height: 1.75;
}

.pra {
    display: flex;
    gap: 7px;
    margin-top: 9px;
}

.bap {
    padding: 6px 14px;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    background: #1B5E20;
    color: white;
    font-size: .77rem;
    font-weight: 700;
    transition: background .2s;
}

.bap:hover {
    background: #2E7D32;
}

.brj {
    padding: 6px 14px;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    background: #B71C1C;
    color: white;
    font-size: .77rem;
    font-weight: 700;
}

.brj:hover {
    background: #C62828;
}

.empty {
    text-align: center;
    padding: 28px;
    color: #ccc;
    font-size: .85rem;
}

.fab {
    position: fixed;
    bottom: 26px;
    right: 26px;
    z-index: 100;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--dk);
    color: var(--gd2);
    border: 2px solid rgba(212, 96, 10, .6);
    font-size: 1.15rem;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

.fab:hover {
    background: var(--sf);
    color: white;
    transform: scale(1.08);
}

.toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--dk);
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: .88rem;
    font-weight: 600;
    opacity: 0;
    transition: all .35s;
    z-index: 500;
    pointer-events: none;
    white-space: nowrap;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast.success {
    background: #1B5E20;
    border: 1px solid #4CAF50;
}

.toast.error {
    background: #B71C1C;
    border: 1px solid #ef9a9a;
}

footer {
    background: var(--dk);
    text-align: center;
    padding: 18px;
    font-size: .73rem;
    color: rgba(255, 255, 255, .3);
    letter-spacing: .7px;
}

footer b {
    color: var(--sf);
}

@media(max-width:640px) {
    .hi {
        flex-wrap: wrap;
        gap: 12px;
    }

    .hr {
        margin-left: 0;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .cgrid {
        grid-template-columns: 1fr;
    }

    .fr {
        grid-template-columns: 1fr;
    }

    .modal {
        padding: 26px 20px;
    }

    .cc {
        padding: 26px 20px;
    }
}