*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--green:#1B4D3E;--green-light:#2A6B55;--green-pale:#E8F5F0;
--gold:#C9A227;--gold-light:#E8C547;--gold-pale:#FFF8E7;
--white:#FFFFFF;--bg:#F7F9F8;--text:#1A2E28;--text-muted:#5A7268;
--border:#DDE8E3;--radius:12px;--shadow:0 4px 24px rgba(27,77,62,.08);
--font:'Plus Jakarta Sans',system-ui,sans-serif;--font-display:'Plus Jakarta Sans',system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:var(--green-light);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold)}
img{max-width:100%;display:block}
.container{max-width:1280px;margin:0 auto;padding:0 20px}

/* Remix Icon */
[class^="ri-"],[class*=" ri-"]{
    display:inline-block;
    font-style:normal;
    line-height:1;
    vertical-align:middle;
}
.header-action-icon{font-size:1.15rem}
.logo-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    flex-shrink:0;
    border-radius:50%;
    background:linear-gradient(135deg,var(--green-pale),#fff);
    border:1px solid rgba(201,162,39,.35);
    filter:drop-shadow(0 3px 10px rgba(201,162,39,.18));
}
.logo-mark-icon{
    font-size:1.35rem;
    color:var(--gold);
}
.contact-line{
    display:flex;
    align-items:center;
    gap:8px;
}
.contact-line--address{align-items:flex-start}
.contact-line--address .ri{flex-shrink:0;margin-top:2px}
.contact-line .ri{font-size:1.05rem;color:var(--gold)}
.auth-submit .ri,.btn .ri{margin-right:6px;font-size:1.05rem}
.auth-input-icon .ri{font-size:1rem;color:var(--text-muted)}
.active-filter-close{font-size:.85rem;opacity:.75}
.upload-dropzone-icon{font-size:1.75rem;color:var(--green);opacity:.7}

/* Header */
.main-header{
    position:relative;
    z-index:500;
    overflow:visible;
    background:linear-gradient(118deg,#a87412 0%,#d4a824 18%,#f7dc6a 38%,#fff8c9 50%,#efcc3a 62%,#c9971c 82%,#f0d050 100%);
    background-size:220% 220%;
    animation:headerGoldGradient 9s ease-in-out infinite;
    border-bottom:1px solid rgba(139,98,10,.35);
    box-shadow:0 2px 0 rgba(255,255,255,.28) inset,0 8px 28px rgba(168,116,18,.28);
    transition:box-shadow .3s ease;
}
@media (max-width:768px){
.main-header{
    position:sticky;
    top:0;
}
}
.main-header::before,
.main-header::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
}
.main-header::before{
    background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.52) 46%,rgba(255,255,255,.18) 52%,transparent 70%);
    transform:translateX(-140%) skewX(-16deg);
    animation:headerGoldShine 4.2s ease-in-out infinite;
    z-index:0;
}
.main-header::after{
    background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,transparent 38%,rgba(120,82,8,.08) 100%);
    z-index:0;
}
@keyframes headerGoldGradient{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
}
@keyframes headerGoldShine{
    0%{transform:translateX(-140%) skewX(-16deg)}
    42%,100%{transform:translateX(140%) skewX(-16deg)}
}
.header-inner{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:28px;
    padding:16px 20px;
    min-height:76px;
}

.header-topbar{
    position:relative;
    z-index:1;
    border-bottom:1px solid rgba(139,98,10,.22);
}
.header-topbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:34px;
    padding:6px 20px;
    font-size:.74rem;
    font-weight:600;
    color:#3f3220;
}
.header-topbar-welcome{letter-spacing:.03em}
.header-topbar-links{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.header-topbar-link{
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:#3f3220;
    font-weight:600;
    transition:color .2s ease;
}
.header-topbar-link:hover{color:#143d31}
.header-topbar-link .ri{font-size:.92rem}

.header-main{
    position:relative;
    z-index:1;
}
.header-main:has(.header-account-dropdown.is-open),
.main-header.is-account-open .header-main{
    z-index:520;
}
.header-main-inner{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
    padding:12px 20px;
    min-height:78px;
}
.header-search-inline{
    display:flex;
    align-items:stretch;
    width:100%;
    max-width:640px;
    margin:0 auto;
    background:#fff;
    border:2px solid rgba(201,162,39,.72);
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 4px 16px rgba(120,82,8,.12);
}
.header-search-inline-select-wrap{
    position:relative;
    display:flex;
    align-items:center;
    flex-shrink:0;
    border-right:1px solid #ece3cf;
    background:#faf6eb;
}
.header-search-inline-select-wrap select{
    appearance:none;
    border:0;
    background:transparent;
    padding:0 28px 0 12px;
    min-height:44px;
    font-size:.78rem;
    font-weight:700;
    color:#3f3220;
    max-width:150px;
    cursor:pointer;
}
.header-search-inline-caret{
    position:absolute;
    right:8px;
    pointer-events:none;
    font-size:.95rem;
    color:#8a7120;
}
.header-search-inline input{
    flex:1;
    min-width:0;
    border:0;
    padding:0 14px;
    font-size:.86rem;
    font-family:var(--font);
    color:var(--text);
}
.header-search-inline input:focus{outline:none}
.header-search-inline-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:48px;
    border:0;
    background:linear-gradient(135deg,#c9971c,#efcc3a);
    color:#143d31;
    cursor:pointer;
    font-size:1.15rem;
}
.header-search-inline-btn:hover{background:linear-gradient(135deg,#b88712,#e0bc2a)}
.header-contact-chip{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-radius:10px;
    background:rgba(255,255,255,.52);
    border:1px solid rgba(255,255,255,.72);
    color:#2a2418;
    font-size:.72rem;
    line-height:1.25;
    max-width:170px;
}
.header-contact-chip strong{
    display:block;
    font-size:.82rem;
    color:#143d31;
}
.header-contact-chip .ri{font-size:1.2rem;color:#143d31;flex-shrink:0}

.header-navbar{
    position:relative;
    z-index:501;
    border-top:1px solid rgba(139,98,10,.22);
}
@media (min-width:769px){
.main-header.is-scrolled{
    min-height:calc(var(--header-topbar-height, 46px) + var(--header-navbar-height, 48px));
    background:transparent;
    border-bottom:0;
    box-shadow:none;
    animation:none;
}
.main-header.is-scrolled::before,
.main-header.is-scrolled::after{
    display:none;
}
.main-header.is-scrolled .header-main{
    display:none;
}
.main-header.is-scrolled .header-topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index:502;
    background:linear-gradient(118deg,#a87412 0%,#d4a824 18%,#f7dc6a 38%,#fff8c9 50%,#efcc3a 62%,#c9971c 82%,#f0d050 100%);
    background-size:220% 220%;
    animation:headerGoldGradient 9s ease-in-out infinite;
    border-bottom:1px solid rgba(139,98,10,.22);
}
.main-header.is-scrolled .header-navbar{
    position:fixed;
    top:var(--header-topbar-height, 46px);
    left:0;
    right:0;
    width:100%;
    border-top:0;
    background:linear-gradient(118deg,#a87412 0%,#d4a824 18%,#f7dc6a 38%,#fff8c9 50%,#efcc3a 62%,#c9971c 82%,#f0d050 100%);
    background-size:220% 220%;
    animation:headerGoldGradient 9s ease-in-out infinite;
    box-shadow:0 2px 0 rgba(255,255,255,.28) inset,0 10px 32px rgba(139,98,10,.32);
}
}
@media (max-width:768px){
.header-navbar{
    z-index:1;
}
}
.header-navbar-inner{
    display:flex;
    align-items:stretch;
    gap:0;
    min-height:48px;
    padding:0 20px;
}
.header-browse-wrap{position:relative;flex-shrink:0}
.header-browse-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:48px;
    padding:0 18px;
    border:0;
    border-right:1px solid rgba(139,98,10,.22);
    background:rgba(255,255,255,.34);
    color:#2a2418;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
    cursor:pointer;
    font-family:var(--font);
}
.header-browse-btn .ri:first-child{font-size:1.05rem}
.header-browse-chevron{font-size:1rem;transition:transform .2s ease}
.header-browse-wrap.is-open .header-browse-chevron{transform:rotate(180deg)}
.header-browse-panel{
    position:absolute;
    top:100%;
    left:0;
    min-width:260px;
    padding:10px;
    background:#fff;
    border:1px solid rgba(186,154,88,.45);
    border-radius:0 0 12px 12px;
    box-shadow:0 16px 36px rgba(84,62,20,.16);
    z-index:420;
}
.header-browse-panel[hidden]{display:none}
.header-browse-list{
    list-style:none;
    margin:0;
    padding:0;
}
.header-browse-list a{
    display:block;
    padding:10px 12px;
    border-radius:8px;
    font-size:.84rem;
    font-weight:600;
    color:#2a2418;
}
.header-browse-list a:hover{background:#f7f2e5;color:#143d31}
.header-browse-all{
    display:block;
    margin-top:8px;
    padding:10px 12px;
    border-top:1px solid #ece3cf;
    font-size:.78rem;
    font-weight:700;
    color:#a87412;
}
.header-navbar .main-nav{
    flex:1;
    justify-content:flex-start;
    padding-left:8px;
}
.header-navbar-meta{
    display:flex;
    align-items:center;
    margin-left:auto;
    padding-left:12px;
}
.header-gold-spot{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.76rem;
    font-weight:600;
    color:#3f3220;
    white-space:nowrap;
}
.header-gold-spot strong{color:#143d31}
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--text);
    flex-shrink:0;
    transition:opacity .2s ease;
}
.logo:hover{opacity:.88;color:var(--text)}
.logo-text{display:flex;flex-direction:column;line-height:1.15;gap:2px}
.logo-text strong{
    font-family:var(--font-display);
    font-size:1.28rem;
    font-weight:800;
    letter-spacing:.3px;
    color:#143d31;
    text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.logo-text small{
    font-size:.68rem;
    color:#3f3220;
    letter-spacing:.35px;
    font-weight:600;
}
.logo-img{
    height:58px;
    width:auto;
    max-width:240px;
    object-fit:contain;
    display:block;
}
.main-nav{
    display:flex;
    align-items:center;
    gap:2px;
    flex:1;
    justify-content:center;
    position:relative;
    z-index:2;
}
.main-nav a{
    position:relative;
    padding:10px 14px;
    font-family:var(--font);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.2px;
    color:#2a2418;
    border-radius:999px;
    transition:color .2s ease,background .2s ease,box-shadow .2s ease;
}
.main-nav a::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:6px;
    width:0;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg,#143d31,#1B4D3E);
    transform:translateX(-50%);
    transition:width .25s ease;
}
.main-nav a:hover{color:#143d31;background:rgba(255,255,255,.42);box-shadow:0 2px 10px rgba(255,255,255,.25)}
.main-nav a:hover::after,.main-nav a.active::after{width:18px}
.main-nav a.active{color:#143d31;background:rgba(255,255,255,.48);box-shadow:0 2px 12px rgba(255,255,255,.28)}
.main-nav-auth{display:none}
.main-nav-dropdown{
    position:relative;
    z-index:1;
}
.main-nav-dropdown.is-open,
.main-nav-dropdown:hover{
    z-index:300;
}
@media (min-width:769px){
.main-nav-dropdown:hover .main-nav-submenu,
.main-nav-dropdown.is-open .main-nav-submenu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}
.main-nav-dropdown.is-open .main-nav-dropdown-chevron,
.main-nav-dropdown:hover .main-nav-dropdown-chevron{transform:rotate(180deg)}
}
.main-nav-dropdown-toggle{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:10px 14px;
    font-family:var(--font);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.2px;
    color:#2a2418;
    border:none;
    background:transparent;
    border-radius:999px;
    cursor:pointer;
    transition:color .2s ease,background .2s ease,box-shadow .2s ease;
}
.main-nav-dropdown-toggle::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:6px;
    width:0;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg,#143d31,#1B4D3E);
    transform:translateX(-50%);
    transition:width .25s ease;
}
.main-nav-dropdown-toggle:hover,
.main-nav-dropdown.is-active .main-nav-dropdown-toggle{
    color:#143d31;
    background:rgba(255,255,255,.42);
    box-shadow:0 2px 10px rgba(255,255,255,.25);
}
.main-nav-dropdown-toggle:hover::after,
.main-nav-dropdown-toggle.active::after,
.main-nav-dropdown.is-active .main-nav-dropdown-toggle::after{width:18px}
.main-nav-dropdown-toggle.active{color:#143d31;background:rgba(255,255,255,.48);box-shadow:0 2px 12px rgba(255,255,255,.28)}
.main-nav-dropdown-chevron{
    font-size:1rem;
    transition:transform .2s ease;
}
.main-nav-submenu{
    position:absolute;
    top:calc(100% + 4px);
    left:50%;
    transform:translateX(-50%) translateY(6px);
    min-width:220px;
    padding:10px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    box-shadow:0 16px 40px rgba(84,62,20,.16);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
    z-index:400;
}
.main-nav-submenu::before{
    content:'';
    position:absolute;
    top:-10px;
    left:0;
    right:0;
    height:10px;
}
.main-nav-submenu a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:10px;
    font-size:.82rem;
    font-weight:500;
    color:#211E1E;
    white-space:nowrap;
}
.main-nav-submenu-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    flex-shrink:0;
    font-size:1.12rem;
    color:#6b5420;
    line-height:1;
}
.main-nav-submenu a:hover .main-nav-submenu-icon{color:#4a3912}
.main-nav-submenu a.active .main-nav-submenu-icon{color:#143d31}
.main-nav-submenu-label{line-height:1.35}
.main-nav-submenu--products a{white-space:normal}
.main-nav-submenu--products .main-nav-submenu-label{min-width:0}
.main-nav-submenu a::after{display:none}
.main-nav-submenu a:hover{
    color:#143d31;
    background:#f5f8f6;
}
.main-nav-submenu a.active{
    color:#143d31;
    background:#eef5f1;
    font-weight:700;
}
.main-nav-submenu--products{
    min-width:240px;
    max-height:min(420px,70vh);
    overflow-y:auto;
    overscroll-behavior:contain;
}
.main-nav-submenu-all{
    font-weight:700;
    color:#211E1E;
    margin-bottom:4px;
    border-bottom:1px solid #ececec;
    border-radius:10px 10px 0 0;
}
.main-nav-submenu--products a:not(.main-nav-submenu-all){
    font-size:.8rem;
    line-height:1.35;
    white-space:normal;
}
.header-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}
.header-icon-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:50%;
    color:#143d31;
    background:rgba(255,255,255,.55);
    border:1px solid rgba(255,255,255,.65);
    position:relative;
    transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.header-icon-btn:hover{
    color:#143d31;
    background:rgba(255,255,255,.82);
    border-color:rgba(255,255,255,.9);
    box-shadow:0 4px 14px rgba(120,82,8,.18);
    transform:translateY(-1px);
}
a.header-icon-btn:hover{color:#143d31}
.header-cart-link .cart-badge{
    top:2px;
    right:2px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    font-size:.62rem;
}
button.header-icon-btn{
    cursor:pointer;
    font-family:var(--font);
}
.header-account-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px 7px 7px;
    border-radius:999px;
    color:#2a2418;
    font-size:.82rem;
    font-weight:700;
    border:1px solid rgba(255,255,255,.72);
    background:rgba(255,255,255,.58);
    cursor:pointer;
    font-family:var(--font);
    transition:color .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.header-account-btn:hover,
.header-account-dropdown.is-open .header-account-btn{
    color:#143d31;
    border-color:rgba(255,255,255,.92);
    background:rgba(255,255,255,.86);
    box-shadow:0 4px 16px rgba(120,82,8,.16);
}
.header-account-dropdown{position:relative;z-index:1}
.header-account-dropdown.is-open{z-index:521}
.header-account-chevron{
    font-size:1rem;
    color:var(--text-muted);
    transition:transform .2s ease,color .2s ease;
}
.header-account-dropdown.is-open .header-account-chevron{
    transform:rotate(180deg);
    color:var(--green);
}
.header-account-menu{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:196px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 14px 36px rgba(27,77,62,.14);
    padding:8px;
    z-index:522;
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .2s ease,visibility .2s ease,transform .2s ease;
    pointer-events:none;
}
.header-account-dropdown.is-open .header-account-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
}
.header-account-menu[hidden]{display:block}
.header-account-menu-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:8px;
    font-size:.84rem;
    font-weight:600;
    color:var(--text);
    transition:background .15s ease,color .15s ease;
}
.header-account-menu-item .ri{font-size:1.05rem;color:var(--green)}
.header-account-menu-item:hover{
    background:var(--green-pale);
    color:var(--green);
}
.header-account-menu-item.is-danger{color:#C62828}
.header-account-menu-item.is-danger .ri{color:#C62828}
.header-account-menu-item.is-danger:hover{
    background:#FFEBEE;
    color:#B71C1C;
}
.header-account-menu-badge{
    margin-left:auto;
    min-width:20px;
    height:20px;
    padding:0 6px;
    border-radius:999px;
    background:var(--green);
    color:#fff;
    font-size:.68rem;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.header-account-menu-divider{
    height:1px;
    background:var(--border);
    margin:6px 4px;
}
.header-account-avatar-img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}
.header-account-avatar{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--green),var(--green-light));
    color:#fff;
    font-size:.72rem;
    font-weight:700;
    overflow:hidden;
    flex-shrink:0;
}
.header-account-name{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-text-link{
    font-size:.8rem;
    font-weight:600;
    color:var(--text-muted);
    padding:8px 10px;
    border-radius:8px;
    transition:color .2s ease,background .2s ease;
}
.header-text-link:hover{color:var(--green);background:var(--green-pale)}
.header-logout-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#C62828;
}
.header-logout-link .ri{font-size:1rem}
.header-logout-link:hover{
    color:#B71C1C;
    background:#FFEBEE;
}
.header-cart-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:linear-gradient(135deg,#1B4D3E 0%,#245a48 100%);
    color:#fff;
    padding:10px 18px;
    border-radius:999px;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.2px;
    position:relative;
    box-shadow:0 4px 16px rgba(27,77,62,.22);
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.header-cart-btn:hover{
    color:#fff;
    background:linear-gradient(135deg,#245a48 0%,#2A6B55 100%);
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(27,77,62,.28);
}
.cart-badge{
    position:absolute;
    top:-6px;
    right:-4px;
    min-width:20px;
    height:20px;
    padding:0 6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--gold-light),var(--gold));
    color:#fff;
    font-size:.68rem;
    border-radius:20px;
    font-weight:700;
    border:2px solid #fff;
    box-shadow:0 2px 8px rgba(201,162,39,.35);
}
.mobile-menu-btn{
    display:none;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    background:rgba(255,255,255,.58);
    border:1px solid rgba(255,255,255,.72);
    border-radius:12px;
    cursor:pointer;
    padding:0;
    color:#143d31;
    transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.mobile-menu-btn:hover{
    background:rgba(255,255,255,.86);
    border-color:rgba(255,255,255,.92);
    box-shadow:0 4px 14px rgba(120,82,8,.16);
}
.mobile-menu-icon{font-size:1.35rem;line-height:1}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border-radius:8px;font-weight:600;font-size:.9rem;border:none;cursor:pointer;transition:all .2s;font-family:var(--font)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-light);color:#fff}
.btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#fff;box-shadow:0 4px 16px rgba(201,162,39,.3)}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(201,162,39,.4);color:#fff}
.btn-outline{background:transparent;border:2px solid var(--green);color:var(--green)}
.btn-outline:hover{background:var(--green);color:#fff}
.btn-block{width:100%}
.btn-sm{padding:6px 14px;font-size:.8rem}
.btn-lg{padding:14px 28px;font-size:1rem}

/* Hero Slider - Image Banner */
.hero-slider{
    position:relative;
    overflow:hidden;
    background:#1B4D3E;
    width:100%;
    display:block;
    touch-action:pan-y;
    cursor:grab;
    user-select:none;
    -webkit-user-select:none;
}
.hero-slider.is-dragging{cursor:grabbing}
.hero-slider.is-dragging .slide-link{pointer-events:none}
.hero-slider:focus{outline:none}
.slider-track{
    display:flex;
    width:100%;
    will-change:transform;
}
.slide{
    flex:0 0 100%;
    width:100%;
    position:relative;
    overflow:hidden;
    opacity:1;
    visibility:visible;
    max-height:none;
    pointer-events:auto;
    background:#1B4D3E;
}
.slide.active{z-index:1}
.slide-link{
    position:absolute;
    inset:0;
    z-index:2;
}
.slide img{
    width:100%;
    height:auto;
    display:block;
    vertical-align:top;
    -webkit-user-drag:none;
    user-select:none;
    pointer-events:none;
}
.slide--theme{
    min-height:clamp(140px,27.08vw,520px);
}
.slide-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    align-items:center;
    background:linear-gradient(90deg,rgba(20,61,49,.82) 0%,rgba(20,61,49,.45) 45%,transparent 72%);
    pointer-events:none;
}
.slide-caption{
    max-width:520px;
    padding:24px 0;
    pointer-events:auto;
}
.slide-caption h2{
    font-family:var(--font-display);
    font-size:clamp(1.35rem,3vw,2.25rem);
    font-weight:700;
    color:#fff;
    line-height:1.2;
    margin-bottom:10px;
}
.slide-caption p{
    color:rgba(255,255,255,.88);
    font-size:.95rem;
    line-height:1.6;
    margin-bottom:18px;
    max-width:440px;
}
.btn-slide-cta{font-size:.85rem;padding:11px 22px}
.home-banner{margin-bottom:0}
.slide-theme-bg{
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,#143d31 0%,#1B4D3E 45%,#245a48 100%);
}
.slide-theme-bg--1{
    background:linear-gradient(135deg,#1B4D3E 0%,#2A6B55 42%,#8a7120 100%);
}
.slide--theme .slide-overlay{
    background:linear-gradient(90deg,rgba(20,61,49,.9) 0%,rgba(20,61,49,.55) 50%,rgba(20,61,49,.2) 100%);
}
.home-banner .slider-arrow{
    width:40px;
    height:40px;
    font-size:1.4rem;
    background:rgba(255,255,255,.95);
}
.home-banner .slider-dots .dot.active,
.home-banner .slider-dots .dot:hover{
    background:var(--gold);
    border-color:var(--gold);
}
.slider-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    color:var(--green);
    font-size:1.6rem;
    line-height:1;
    cursor:pointer;
    box-shadow:0 4px 16px rgba(0,0,0,.15);
    transition:background .2s,transform .2s;
}
.slider-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.05)}
.slider-prev{left:16px}
.slider-next{right:16px}
.slider-dots{
    position:absolute;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
    z-index:3;
    line-height:normal;
}
.slider-dots .dot{
    width:10px;
    height:10px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.7);
    background:transparent;
    cursor:pointer;
    padding:0;
    transition:background .2s,border-color .2s,transform .2s;
}
.slider-dots .dot.active,.slider-dots .dot:hover{
    background:var(--gold-light);
    border-color:var(--gold-light);
    transform:scale(1.15);
}
@keyframes slideFadeIn{
    from{opacity:.4}
    to{opacity:1}
}

/* Content Layout */
.content-section{padding:48px 0}
.layout-with-sidebar{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:32px;
    align-items:start;
}
.layout-products{
    grid-template-columns:minmax(260px,300px) minmax(0,1fr);
}
.products-main,.main-col{min-width:0}
.products-sidebar{
    position:sticky;
    top:92px;
}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.section-header h2{font-family:var(--font-display);font-size:1.6rem;color:var(--green)}

/* Product Grid */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.product-grid-full{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.product-card{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;transition:transform .2s,box-shadow .2s;position:relative}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.wishlist-btn{position:absolute;top:12px;right:12px;background:var(--white);border:1px solid var(--border);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1rem;z-index:2;transition:color .15s,transform .15s,opacity .15s}
.wishlist-btn:hover{transform:scale(1.06)}
.wishlist-btn i{font-size:1rem;line-height:1}
.wishlist-btn.is-active i,.wishlist-btn[aria-pressed="true"] i{color:#C62828}
.wishlist-btn.is-active,.wishlist-btn[aria-pressed="true"]{border-color:rgba(198,40,40,.25)}
.wishlist-btn.is-loading{opacity:.55;pointer-events:none}
.wishlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.wishlist-card{
    position:relative;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
}
.wishlist-card-media{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:linear-gradient(180deg,var(--gold-pale),var(--white));
    aspect-ratio:4/3;
}
.wishlist-card-media img{max-height:140px;width:100%;object-fit:contain}
.wishlist-card-body{padding:16px}
.pkb-toast{
    position:fixed;
    left:50%;
    bottom:96px;
    transform:translateX(-50%) translateY(12px);
    background:#1B4D3E;
    color:#fff;
    padding:10px 16px;
    border-radius:10px;
    font-size:.84rem;
    font-weight:600;
    box-shadow:0 10px 30px rgba(27,77,62,.25);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s,transform .2s;
    z-index:10000;
}
.pkb-toast.is-visible{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}
.product-img-wrap{display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(180deg,var(--gold-pale),var(--white));aspect-ratio:4/3;overflow:hidden}
.product-img-wrap img{max-height:160px;width:100%;object-fit:contain}
.product-no-image{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    height:100%;
    min-height:140px;
    color:var(--text-muted);
    text-align:center;
    padding:16px;
}
.product-no-image svg,.product-no-image-icon{width:42px;height:42px;font-size:42px;opacity:.45;color:var(--text-muted)}
.product-no-image span{font-size:.82rem;font-weight:600;color:#7a8f86}
.product-no-image small{font-size:.72rem;color:var(--text-muted);opacity:.85}
.product-no-image--detail{min-height:280px;background:linear-gradient(180deg,#f8fbf9,#fff);border:1px dashed var(--border);border-radius:12px}
.product-no-image--detail svg,.product-no-image--detail .product-no-image-icon{width:56px;height:56px;font-size:56px}
.admin-product-thumb{width:48px;height:48px;border-radius:8px;overflow:hidden;background:var(--bg);border:1px solid var(--border)}
.admin-product-thumb .product-no-image{min-height:48px;padding:4px;gap:2px}
.admin-product-thumb .product-no-image svg,.admin-product-thumb .product-no-image-icon{width:18px;height:18px;font-size:18px}
.admin-product-thumb .product-no-image span{font-size:.55rem}
.admin-product-thumb .admin-thumb-img,.admin-product-thumb img{width:48px;height:48px;object-fit:cover;display:block}
.cart-item-photo{width:88px;height:88px;object-fit:contain;border-radius:8px;background:var(--gold-pale)}
.cart-item-media .product-no-image{min-height:88px;border-radius:8px;background:var(--gold-pale)}
.product-info{padding:16px}
.product-info h3{font-size:.95rem;margin-bottom:8px}
.product-info h3 a{color:var(--text)}
.product-card-actions{
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:8px;
    margin-top:6px;
}
.product-card-cart-form{margin:0}
.product-card-actions .btn{
    width:100%;
    min-height:38px;
    padding:8px 10px;
    font-size:.75rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}
.product-card-actions .btn .ri{font-size:.9rem}
.product-price{font-size:1.15rem;font-weight:700;color:var(--green)}
.product-ppg{font-size:.8rem;color:var(--text-muted);margin-bottom:12px}
.product-stock{font-size:.8rem;color:var(--text-muted);margin-bottom:8px}

/* Sidebar Widgets */
.sidebar{display:flex;flex-direction:column;gap:16px}
.product-filter-widget{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:12px;
    padding:20px;
}
.product-filter-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}
.product-filter-head h3{
    font-size:1rem;
    color:var(--green);
    margin:0;
}
.product-filter-reset{
    font-size:.78rem;
    font-weight:600;
    color:var(--text-muted);
}
.product-filter-reset:hover{color:var(--green)}
.product-filter-form{display:flex;flex-direction:column;gap:16px}
.filter-group{display:flex;flex-direction:column;gap:8px}
.filter-group label,.filter-label{
    font-size:.78rem;
    font-weight:600;
    color:var(--text-muted);
}
.filter-group input[type=search],
.filter-group input[type=number],
.filter-group select{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:8px;
    font-family:var(--font);
    font-size:.88rem;
    background:#fff;
}
.filter-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.filter-chip{
    cursor:pointer;
}
.filter-chip input{position:absolute;opacity:0;pointer-events:none}
.filter-chip span{
    display:inline-flex;
    align-items:center;
    padding:7px 12px;
    border:1px solid var(--border);
    border-radius:999px;
    font-size:.78rem;
    font-weight:600;
    color:var(--text-muted);
    background:#fff;
    transition:all .2s ease;
}
.filter-chip input:checked+span,
.filter-chip:hover span{
    border-color:var(--green);
    color:var(--green);
    background:var(--green-pale);
}
.filter-range{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:8px;
    align-items:center;
}
.filter-range-sep{color:var(--text-muted);font-size:.85rem}
.filter-check{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.85rem;
    color:var(--text);
    cursor:pointer;
}
.filter-check input{width:16px;height:16px;accent-color:var(--green)}
.products-toolbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:20px;
    padding-bottom:16px;
    border-bottom:1px solid var(--border);
}
.products-toolbar-meta{
    display:flex;
    align-items:baseline;
    gap:6px;
    font-size:.9rem;
    color:var(--text-muted);
}
.products-toolbar-meta strong{
    font-size:1.2rem;
    color:var(--green);
}
.active-filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.active-filter-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border-radius:999px;
    background:var(--green-pale);
    color:var(--green);
    font-size:.78rem;
    font-weight:600;
    border:1px solid rgba(27,77,62,.15);
}
.active-filter-chip:hover{background:#dff0e8;color:var(--green)}
.active-filter-chip span{font-size:1rem;line-height:1;opacity:.7}
.products-toolbar-range{font-size:.82rem;color:var(--text-muted)}
.products-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:28px;
    flex-wrap:wrap;
}
.products-page-numbers{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.products-page-btn,.products-page-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:38px;
    padding:0 10px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--white);
    color:var(--green);
    font-size:.88rem;
    font-weight:600;
    text-decoration:none;
    transition:background .15s,border-color .15s,color .15s;
}
.products-page-btn:hover,.products-page-num:hover{
    border-color:var(--green);
    background:var(--green-pale);
}
.products-page-num.is-current{
    background:var(--green);
    border-color:var(--green);
    color:#fff;
    cursor:default;
}
.products-page-btn.is-disabled{
    opacity:.4;
    pointer-events:none;
}
.products-page-ellipsis{
    color:var(--text-muted);
    padding:0 2px;
    font-size:.9rem;
}
.product-weight-badge{
    display:inline-block;
    font-size:.72rem;
    font-weight:700;
    color:var(--green);
    background:var(--gold-pale);
    padding:4px 8px;
    border-radius:6px;
    margin-bottom:8px;
}
.product-stock.is-out{color:#B71C1C}
.products-empty{
    text-align:center;
    padding:48px 24px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:12px;
}
.products-empty h2{font-size:1.2rem;color:var(--green);margin-bottom:8px}
.products-empty p{color:var(--text-muted);margin-bottom:16px}

/* Gold price table widget */
.gold-price-table-widget{
    overflow:hidden;
    border:3px solid #c9a227;
    border-radius:14px 14px 10px 10px;
    background:#fff;
    box-shadow:0 8px 24px rgba(27,77,62,.08);
}
.gold-price-table-spot-head{
    position:relative;
    overflow:hidden;
    padding:16px 18px 14px;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.22);
    background:linear-gradient(
        125deg,
        #163d32 0%,
        #1b4d3e 22%,
        #2a6b55 42%,
        #3d8f72 58%,
        #2a6b55 72%,
        #1b4d3e 100%
    );
    background-size:220% 220%;
    animation:gold-price-spot-head-gradient 7s ease-in-out infinite;
    border-bottom:2px solid #c9a227;
}
.gold-price-table-spot-head::before{
    content:'';
    position:absolute;
    inset:-40% -60%;
    background:linear-gradient(
        105deg,
        transparent 36%,
        rgba(255,255,255,.06) 42%,
        rgba(255,255,255,.28) 50%,
        rgba(220,255,240,.42) 52%,
        rgba(255,255,255,.18) 58%,
        transparent 64%
    );
    transform:translateX(-55%) rotate(8deg);
    animation:gold-price-spot-head-shine 3.8s ease-in-out infinite;
    pointer-events:none;
}
.gold-price-table-spot-head::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,transparent 44%,rgba(8,32,24,.18) 100%);
    pointer-events:none;
}
.gold-price-table-spot-head > *{
    position:relative;
    z-index:1;
}
@keyframes gold-price-spot-head-gradient{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
}
@keyframes gold-price-spot-head-shine{
    0%,18%{transform:translateX(-55%) rotate(8deg);opacity:0}
    42%,58%{opacity:1}
    100%{transform:translateX(55%) rotate(8deg);opacity:0}
}
@media (prefers-reduced-motion:reduce){
    .gold-price-table-spot-head{
        animation:none;
        background:linear-gradient(135deg,#1b4d3e 0%,#2a6b55 55%,#245a48 100%);
    }
    .gold-price-table-spot-head::before{
        animation:none;
        opacity:0;
    }
}
.gold-price-table-spot-title h3{
    margin:0 0 4px;
    font-size:1rem;
    font-weight:700;
    color:#fff;
}
.gold-price-table-spot-label{font-size:.72rem;color:rgba(255,255,255,.78)}
.gold-price-table-spot-price{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    margin:10px 0 8px;
}
.gold-price-table-spot-price-value{
    display:flex;
    align-items:baseline;
    gap:6px;
}
.gold-price-table-spot-price strong{
    font-size:1.75rem;
    font-weight:700;
    color:#e8c547;
    line-height:1;
    text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.gold-price-table-spot-price span{font-size:.85rem;color:rgba(255,255,255,.85)}
.gold-price-table-spot-updated{
    font-size:.72rem;
    color:rgba(255,255,255,.72);
    line-height:1.35;
}
.gold-price-table-spot-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    font-size:.72rem;
}
.gold-price-table-spot-head .gold-price-table-change{color:#9dffb8;font-weight:700;margin:0}
.gold-price-table-spot-head .gold-price-table-change.negative{color:#ffb4b4}
.gold-price-table-spot-head .gold-price-table-updated{color:rgba(255,255,255,.72)}
.gold-price-table-spot-purities{
    display:flex;
    flex-wrap:wrap;
    gap:14px 22px;
    margin:10px 0 8px;
}
.gold-price-table-spot-purity{
    flex:1 1 160px;
    min-width:min(100%,160px);
}
.gold-price-table-spot-purity .gold-price-table-spot-price{
    margin:6px 0 0;
}
.gold-price-table-widget--combined .gold-price-table-spot-title h3{
    margin-bottom:0;
}
.gold-price-table-spot-title--combined{
    margin-bottom:10px;
}
.gold-price-table--combined thead th:nth-child(1),
.gold-price-table--combined tbody td:nth-child(1){
    width:28%;
}
.gold-price-table-banner{
    padding:14px 16px 12px;
    background:linear-gradient(180deg,#fff9eb 0%,#f3e3a8 55%,#e8c547 100%);
    border-bottom:2px solid #c9a227;
    text-align:center;
}
.gold-price-table-banner h3{
    margin:0;
    font-family:var(--font-display);
    font-size:1.35rem;
    font-weight:700;
    letter-spacing:.4px;
    color:#b8891d;
    text-transform:uppercase;
}
.gold-price-table{width:100%;border-collapse:collapse;table-layout:fixed}
.gold-price-table thead th{
    background:linear-gradient(180deg,#e8c547 0%,#c9a227 100%);
    color:#fff;
    font-size:.82rem;
    font-weight:700;
    padding:10px 8px;
    text-align:center;
    border:1px solid #b8891d;
    text-shadow:0 1px 1px rgba(0,0,0,.15);
}
.gold-price-table tbody td{
    color:#8b1f2f;
    font-size:.88rem;
    font-weight:700;
    text-align:center;
    padding:11px 8px;
    border:1px solid #d4af37;
    background:#fff;
}
.gold-price-table tbody tr:nth-child(even) td{background:#fffdf7}

/* PKB Gold Saving price widget */
.gold-saving-price-widget{
    overflow:hidden;
    border:3px solid #c9a227;
    border-radius:14px 14px 10px 10px;
    background:#fff;
    box-shadow:0 8px 24px rgba(27,77,62,.08);
}
.gold-saving-price-widget-title{
    padding:12px 14px 10px;
    text-align:center;
    background:linear-gradient(180deg,#fff9eb 0%,#f3e3a8 100%);
    border-bottom:2px solid #c9a227;
}
.gold-saving-price-widget-title h3{
    margin:0;
    font-family:var(--font-display);
    font-size:1.02rem;
    font-weight:700;
    font-style:italic;
    letter-spacing:.02em;
    color:#b8891d;
    text-transform:uppercase;
    line-height:1.35;
}
.gold-saving-price-widget-updated{
    padding:8px 12px;
    text-align:center;
    background:linear-gradient(180deg,#e8c547 0%,#c9a227 100%);
    color:#fff;
    font-size:.78rem;
    font-weight:600;
    border-bottom:2px solid #b8891d;
}
.gold-saving-price-widget-body{
    padding:0;
    background:#fff;
}
.gold-saving-price-widget-row{
    margin:0;
    padding:14px 12px;
    text-align:center;
    color:#8b1f2f;
    font-size:.95rem;
    font-weight:800;
    line-height:1.35;
    border-top:1px solid #d4af37;
}
.gold-saving-price-widget-row:first-child{
    border-top:none;
}

/* PKB Silver Saving price widget */
.silver-saving-price-widget{
    overflow:hidden;
    border:3px solid #4d4d4d;
    border-radius:14px 14px 10px 10px;
    background:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.silver-saving-price-widget-header{
    background:#4d4d4d;
    border-bottom:2px solid #3a3a3a;
}
.silver-saving-price-widget-title{
    padding:10px 12px;
    text-align:center;
    background:linear-gradient(180deg,#f5f5f5 0%,#d8d8d8 35%,#b8b8b8 50%,#d8d8d8 65%,#ececec 100%);
    border-bottom:1px solid #9a9a9a;
}
.silver-saving-price-widget-title h3{
    margin:0;
    font-family:var(--font-display);
    font-size:.92rem;
    font-weight:800;
    font-style:italic;
    letter-spacing:.01em;
    color:#3a3a3a;
    text-transform:uppercase;
    line-height:1.35;
}
.silver-saving-price-widget-updated{
    padding:8px 12px;
    text-align:center;
    color:#fff;
    font-size:.74rem;
    font-weight:600;
}
.silver-saving-price-widget-body{
    padding:0;
    background:#fff;
}
.silver-saving-price-widget-row{
    margin:0;
    padding:14px 10px;
    text-align:center;
    color:#333;
    font-size:.88rem;
    font-weight:700;
    line-height:1.35;
    border-top:1px solid #d9d9d9;
}
.silver-saving-price-widget-row:first-child{
    border-top:none;
}

@media (max-width:1200px){
    .gold-saving-price-widget-title h3,
    .silver-saving-price-widget-title h3{
        font-size:.84rem;
    }
    .gold-saving-price-widget-row,
    .silver-saving-price-widget-row{
        font-size:.82rem;
        padding:12px 8px;
    }
}

.widget{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);padding:20px}
.gold-price-widget{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#143d31 0%,#1B4D3E 30%,#2A6B55 55%,#1B4D3E 80%,#143d31 100%);
    background-size:220% 220%;
    animation:goldWidgetGradient 7s ease infinite;
    color:#fff;
    border:none;
    box-shadow:0 8px 28px rgba(27,77,62,.22);
}
.gold-price-widget::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.06) 42%,rgba(232,197,71,.45) 50%,rgba(255,255,255,.1) 58%,transparent 70%);
    transform:translateX(-130%);
    animation:goldWidgetShine 4s ease-in-out infinite;
    pointer-events:none;
}
.gold-price-widget::after{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 85% 15%,rgba(201,162,39,.25) 0%,transparent 45%),
        linear-gradient(180deg,rgba(255,255,255,.1) 0%,transparent 40%,rgba(0,0,0,.06) 100%);
    pointer-events:none;
}
.gold-price-widget > *{
    position:relative;
    z-index:1;
}
.gold-price-widget h3{font-size:.95rem;margin-bottom:12px;text-shadow:0 1px 2px rgba(0,0,0,.12)}
.gold-price-label{font-size:.8rem;opacity:.88;margin-bottom:4px}
.gold-price-value{
    font-size:1.6rem;
    font-weight:700;
    background:linear-gradient(90deg,#FFF8DC,#E8C547,#FFF8DC);
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:goldTextShimmer 3s linear infinite;
}
.gold-price-value small{font-size:.85rem;font-weight:400;-webkit-text-fill-color:rgba(255,255,255,.85);opacity:.85}
.gold-price-change{font-size:.9rem;margin-top:8px;font-weight:600}
.gold-price-change.positive{color:#9DFFB8;text-shadow:0 0 12px rgba(125,255,179,.35)}
.gold-price-updated{font-size:.7rem;opacity:.72;margin-top:8px}
@keyframes goldWidgetGradient{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
}
@keyframes goldWidgetShine{
    0%{transform:translateX(-130%)}
    50%,100%{transform:translateX(130%)}
}
@keyframes goldTextShimmer{
    0%{background-position:0% center}
    100%{background-position:200% center}
}
.trust-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.trust-icons span{display:block;font-size:1.2rem;color:var(--gold)}
.trust-icons small{font-size:.65rem;color:var(--text-muted)}
.promo-widget{background:var(--gold-pale);border-color:var(--gold-light)}
.promo-widget h4{color:var(--green);margin-bottom:8px}
.why-widget ul{list-style:none}
.why-widget li{padding:4px 0;font-size:.85rem;color:var(--text-muted)}
.payment-widget-note{font-size:.75rem;color:var(--text-muted);margin-bottom:10px}
.payment-icons{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}
.payment-icons img{
    width:100%;
    height:36px;
    object-fit:contain;
    background:#fff;
    border:1px solid var(--border);
    border-radius:6px;
    padding:4px 6px;
    transition:transform .2s ease,box-shadow .2s ease;
}
.payment-icons img:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.payment-icons-footer{grid-template-columns:repeat(3,1fr);margin-top:8px}
.payment-badges,.payment-logos{font-size:.8rem;color:var(--text-muted);line-height:1.8}

/* Service Bar */
.service-bar{background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:32px 0}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.service-item{display:flex;gap:14px;align-items:flex-start}
.service-icon{font-size:1.8rem;flex-shrink:0}
.service-item strong{display:block;font-size:.9rem;color:var(--green)}
.service-item p{font-size:.8rem;color:var(--text-muted)}

/* Customer service banner — above footer */
.cs-banner{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    color:#121212;
}
.cs-banner-bg{
    position:absolute;
    inset:0;
    z-index:0;
    background:#f3c21e;
    background:linear-gradient(105deg,#f8d03a 0%,#f0bc1a 48%,#e8ad12 100%);
}
.cs-banner-bg::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 18% 40%, rgba(255,255,255,.32) 0%, transparent 38%),
        radial-gradient(circle at 72% 80%, rgba(255,255,255,.14) 0%, transparent 34%);
}
.cs-banner-bg::after{
    content:'';
    position:absolute;
    top:0;right:0;bottom:0;
    width:min(42%,520px);
    opacity:.09;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 320'%3E%3Cpath fill='%23000' d='M118 36c28 8 48 34 48 63v18c0 8 6 14 14 14h8c6 0 10 6 8 12-12 36-42 64-78 74-4 1-8-2-8-6v-22c0-5 4-9 9-10 18-4 33-14 43-28H74c-6 0-10-6-8-12 10-24 30-42 52-103z'/%3E%3C/svg%3E") no-repeat center right / auto 88%;
    mask-image:linear-gradient(to left,#000 20%,transparent 100%);
    -webkit-mask-image:linear-gradient(to left,#000 20%,transparent 100%);
}
.cs-banner-inner{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px 56px;
    padding:44px 20px;
}
.cs-banner-info{
    flex:1;
    min-width:0;
    max-width:720px;
}
.cs-banner-label{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 12px;
    font-size:clamp(.88rem,1.6vw,.98rem);
    font-weight:700;
    color:#111;
}
.cs-banner-label-icon{
    width:36px;height:36px;
    display:inline-flex;
    align-items:center;justify-content:center;
    border-radius:10px;
    background:rgba(255,255,255,.55);
    color:#111;
    font-size:1.05rem;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.cs-banner-phones{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin-bottom:20px;
}
.cs-banner-phones-type{
    display:block;
    font-family:var(--font-display);
    font-size:clamp(1.65rem,4.2vw,2.5rem);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.03em;
    color:#0d0d0d;
}
.cs-banner-phones-list{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:10px 20px;
}
.cs-banner-phone{
    display:inline-flex;
    flex-direction:column;
    gap:4px;
    font-family:var(--font-display);
    text-decoration:none;
    letter-spacing:-.03em;
}
.cs-banner-phone-caption,
.cs-banner-phone-number{
    font-size:clamp(1.65rem,4.2vw,2.5rem);
    font-weight:800;
    line-height:1.05;
    color:#0d0d0d;
}
a.cs-banner-phone{
    transition:opacity .2s ease,transform .2s ease;
}
a.cs-banner-phone:hover{
    opacity:.78;
    transform:translateY(-1px);
}
a.cs-banner-phone:hover .cs-banner-phone-caption,
a.cs-banner-phone:hover .cs-banner-phone-number{
    color:#0d0d0d;
}
.cs-banner-phone-sep{
    font-size:clamp(1.3rem,3vw,1.85rem);
    font-weight:300;
    color:rgba(0,0,0,.28);
    user-select:none;
}
.cs-banner-hours{
    font-size:clamp(.8rem,1.45vw,.9rem);
    line-height:1.65;
    color:#1f1f1f;
}
.cs-banner-hours p{margin:0 0 3px}
.cs-banner-hours-title{
    font-weight:700;
    margin-bottom:6px!important;
    color:#111;
}
.cs-banner-hours-note{
    margin-top:8px!important;
    font-size:.78rem;
    color:rgba(0,0,0,.62);
}
.cs-banner-cta{
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
}
.cs-banner-maya-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}
.cs-banner-speech-btn{
    position:relative;
    z-index:1;
    flex-shrink:1;
    border:0;
    padding:0;
    margin:0;
    background:none;
    cursor:pointer;
    transition:transform .22s ease;
    max-width:min(320px,48vw);
}
@keyframes cs-banner-speech-float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
}
.cs-banner-speech-btn:hover,
.cs-banner-speech-btn:focus-visible{
    transform:scale(1.03);
    outline:none;
}
.cs-banner-speech-btn:focus-visible .cs-banner-speech-img{
    box-shadow:0 0 0 3px rgba(255,255,255,.95),0 0 0 6px rgba(201,162,39,.45);
}
.cs-banner-speech-img{
    display:block;
    width:100%;
    height:auto;
    max-width:320px;
    object-fit:contain;
    animation:cs-banner-speech-float 3.2s ease-in-out infinite;
    will-change:transform;
}
.cs-banner-speech-btn:hover .cs-banner-speech-img,
.cs-banner-speech-btn:focus-visible .cs-banner-speech-img{
    animation-play-state:paused;
}
@media (prefers-reduced-motion:reduce){
    .cs-banner-speech-img{
        animation:none;
    }
}
.cs-banner-avatar-btn{
    position:relative;
    z-index:2;
    flex-shrink:0;
    border:0;
    padding:0;
    background:none;
    cursor:pointer;
    transition:transform .22s ease;
}
.cs-banner-avatar-btn:hover,
.cs-banner-avatar-btn:focus-visible{
    transform:scale(1.06);
    outline:none;
}
.cs-banner-avatar-btn:focus-visible .cs-banner-avatar-wrap{
    box-shadow:0 0 0 3px rgba(255,255,255,.95),0 0 0 6px rgba(201,162,39,.55),0 10px 28px rgba(0,0,0,.14);
}
.cs-banner-avatar-wrap{
    position:relative;
    display:block;
    overflow:hidden;
    border-radius:50%;
    box-shadow:0 10px 28px rgba(0,0,0,.14);
}
.cs-banner-avatar-wrap::after{
    display:none;
}
.cs-banner-avatar{
    display:block;
    width:88px;
    height:88px;
    border-radius:50%;
    object-fit:cover;
    object-position:center top;
    border:3px solid #e8c547;
    background:#1b4d3e;
}
.cs-banner-partners{
    width:100%;
    padding:16px 20px;
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.cs-banner-partners-logos{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px 36px;
    flex-wrap:wrap;
}
.cs-banner-partner-logo{
    display:block;
    height:54px;
    width:auto;
    max-width:min(160px,28vw);
    object-fit:contain;
}
@media (max-width:900px){
    .cs-banner-inner{
        flex-direction:column;
        align-items:flex-start;
        padding:36px 20px;
    }
    .cs-banner-cta{
        width:100%;
        align-items:flex-start;
    }
    .cs-banner-maya-wrap{
        width:100%;
        align-items:center;
    }
    .cs-banner-speech-btn{
        max-width:none;
        flex:1;
    }
    .cs-banner-speech-img{
        max-width:100%;
    }
    .cs-banner-partners{
        padding:14px 16px;
    }
    .cs-banner-partner-logo{
        height:46px;
        max-width:min(130px,30vw);
    }
    .cs-banner-bg::after{
        width:55%;
        opacity:.06;
    }
}
@media (max-width:560px){
    .cs-banner-phones-list{
        width:100%;
    }
    .cs-banner-phone-sep{display:none}
    .cs-banner-maya-wrap{
        width:100%;
        align-items:center;
    }
    .cs-banner-speech-btn{
        width:100%;
        max-width:min(340px,100%);
    }
    .cs-banner-speech-img{
        max-width:100%;
        margin:0 auto;
    }
}

/* Footer */
.main-footer{
    position:relative;
    background:linear-gradient(180deg,#0B2A22 0%,#123D31 45%,#0f2e25 100%);
    color:rgba(255,255,255,.9);
    margin-top:auto;
}
.footer-accent{
    height:3px;
    background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold-light) 50%,var(--gold) 80%,transparent);
}
.footer-inner{
    position:relative;
    z-index:1;
    padding:56px 20px 32px;
}
.footer-main{
    display:grid;
    grid-template-columns:1.35fr 1fr 1fr 1.15fr;
    gap:40px 32px;
    padding-bottom:36px;
    border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand{max-width:340px}
.footer-logo{
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:#fff;
    margin-bottom:16px;
}
.footer-logo:hover{color:#fff;opacity:.92}
.footer-logo-mark{
    width:44px;height:44px;border-radius:12px;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(201,162,39,.15);
    border:1px solid rgba(232,197,71,.35);
    color:var(--gold-light);
    font-size:1.35rem;
}
.footer-logo-text{display:flex;flex-direction:column;line-height:1.2}
.footer-logo-text strong{
    font-family:var(--font-display);
    font-size:1.15rem;
    letter-spacing:.02em;
}
.footer-logo-text small{
    font-size:.68rem;
    color:rgba(255,255,255,.65);
    margin-top:2px;
}
.footer-logo-img{
    height:64px;width:auto;max-width:280px;
    object-fit:contain;
    filter:drop-shadow(0 2px 12px rgba(0,0,0,.25));
}
.footer-desc{
    font-size:.86rem;
    line-height:1.75;
    color:rgba(255,255,255,.72);
    margin-bottom:18px;
}
.footer-trust-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.footer-trust-list li{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:.8rem;
    color:rgba(255,255,255,.78);
}
.footer-trust-list .ri{
    font-size:1rem;
    color:var(--gold-light);
    flex-shrink:0;
}
.footer-heading{
    color:#fff;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    margin-bottom:18px;
}
.footer-col .footer-links{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.footer-links a{
    display:inline-flex;
    align-items:center;
    padding:7px 0;
    color:rgba(255,255,255,.72);
    font-size:.86rem;
    transition:color .2s,padding-left .2s;
}
.footer-links a:hover{
    color:var(--gold-light);
    padding-left:4px;
}
.footer-contact{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.footer-contact li{
    display:flex;
    align-items:stretch;
}
.footer-contact-link{
    display:flex;
    align-items:flex-start;
    gap:12px;
    width:100%;
    color:rgba(255,255,255,.88);
    text-decoration:none;
    border-radius:12px;
    padding:4px 6px;
    margin:-4px -6px;
    transition:color .2s ease,background .2s ease,transform .2s ease;
}
.footer-contact-link:hover{
    color:var(--gold-light);
    background:rgba(255,255,255,.06);
}
.footer-contact-link--call:hover{
    transform:translateX(2px);
}
.footer-contact-link--call span:last-child{
    text-decoration:underline;
    text-underline-offset:3px;
}
.footer-contact-link--static{
    cursor:default;
}
.footer-contact-link--static:hover{
    color:rgba(255,255,255,.88);
    background:transparent;
    transform:none;
}
.footer-contact-icon{
    width:38px;height:38px;border-radius:10px;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:var(--gold-light);
    font-size:1rem;
    flex-shrink:0;
}
.footer-contact small{
    display:block;
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:rgba(255,255,255,.5);
    margin-bottom:2px;
}
.footer-contact-link > div > span{
    font-size:.86rem;
    color:inherit;
}

.footer-payments{padding-top:28px}
.footer-payments-head{margin-bottom:16px}
.footer-payments-head p{
    font-size:.8rem;
    color:rgba(255,255,255,.58);
    margin-top:6px;
}
.payment-icons-footer{
    grid-template-columns:repeat(6,1fr);
    gap:10px;
}
.payment-icons-footer img{
    height:40px;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(255,255,255,.15);
    border-radius:8px;
    padding:6px 8px;
}
.payment-icons-footer img:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,0,0,.2);
}

.footer-bottom{
    background:rgba(0,0,0,.22);
    border-top:1px solid rgba(255,255,255,.08);
}
.footer-bottom-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding:18px 20px;
    font-size:.78rem;
    color:rgba(255,255,255,.62);
}
.footer-copy{margin:0}
.footer-credit{margin:0;opacity:.85}
.footer-legal{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}
.footer-legal a{
    color:rgba(255,255,255,.62);
    font-size:.78rem;
}
.footer-legal a:hover{color:var(--gold-light)}

/* Legacy footer grid */
.footer-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:32px;
    padding-bottom:32px;
}
.footer-grid > div > p{font-size:.88rem;line-height:1.7;opacity:.85}
.footer-grid h4{color:#fff;margin-bottom:14px;font-size:.9rem}
.footer-grid a{
    display:block;
    color:rgba(255,255,255,.72);
    font-size:.85rem;
    padding:5px 0;
}
.footer-grid a:hover{color:var(--gold-light)}
.footer-grid .payment-logos{
    display:inline-block;
    padding:10px 14px;
    border-radius:10px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    font-size:.82rem;
    line-height:1.7;
    color:rgba(255,255,255,.8);
}

/* Page Hero */
.page-hero{background:linear-gradient(135deg,var(--green-pale),var(--white));padding:40px 0;border-bottom:1px solid var(--border)}
.page-hero h1{font-family:var(--font-display);color:var(--green);font-size:2rem}
.page-hero p{color:var(--text-muted);margin-top:8px}
.page-hero--below-banner{padding:28px 0}

/* About page */
.page-hero--about{
    position:relative;
    overflow:hidden;
    padding:52px 0 44px;
    background:
        radial-gradient(circle at 85% 20%, rgba(201,162,39,.14) 0%, transparent 42%),
        linear-gradient(135deg,#eef7f2 0%,#fff 55%,#f8faf9 100%);
}
.page-hero-about-inner{
    position:relative;
    max-width:760px;
    margin:0 auto;
    text-align:center;
}
.page-hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0 0 12px;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(27,77,62,.08);
    color:var(--green);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.page-hero-eyebrow--logo{
    padding:0;
    margin:0 0 16px;
    background:transparent;
    border-radius:0;
    text-transform:none;
    letter-spacing:normal;
    font-weight:400;
}
.page-hero-eyebrow-logo{
    display:block;
    height:48px;
    width:auto;
    max-width:200px;
    object-fit:contain;
}
.page-hero--about h1{
    font-size:clamp(1.75rem,3.5vw,2.35rem);
    line-height:1.2;
    margin:0;
}
.page-hero-lead{
    margin:12px auto 0;
    max-width:52ch;
    font-size:.95rem;
    line-height:1.65;
    color:var(--text-muted);
}
.content-section--about{
    padding:36px 0 56px;
    background:linear-gradient(180deg,#f8faf9 0%,#fff 100%);
}
.about-content-shell{
    display:flex;
    justify-content:center;
}
.page-hero--why-card .page-hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.page-why-card-hero-icon-img{
    width:28px;
    height:28px;
    object-fit:contain;
}
.why-card-content{max-width:none}
.content-section--why-card{
    padding:24px clamp(20px,4vw,40px) 56px;
    width:100%;
    max-width:none;
    overflow-x:clip;
}
.content-section--why-card > .container,
.content-section--why-card .about-content-shell{
    max-width:none !important;
    width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
    margin:0 !important;
    gap:0;
}
.content-section--why-card .about-content-shell{
    grid-template-columns:minmax(0,1fr);
}
.content-section--why-card .why-card-content,
.content-section--why-card .why-card-content--full,
.page-why-card .why-card-content.static-content,
.page-why-card .static-content.why-card-content{
    max-width:none !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    border-radius:18px !important;
    box-sizing:border-box;
    padding:44px clamp(28px,5vw,64px) !important;
}
.content-section--why-card .why-card-back-wrap{
    margin-top:20px;
}
.content-section--why-card .why-card-back{
    margin:0;
    text-align:center;
}

.why-card-content h2,
.why-card-content h3,
.why-card-content h4{
    color:var(--green);
    margin:28px 0 12px;
    line-height:1.35;
}
.why-card-content h3:first-child,
.why-card-content h2:first-child{
    margin-top:0;
}
.why-card-content p{
    margin:0 0 18px;
    line-height:1.75;
}
.why-card-content ul,
.why-card-content ol{
    margin:0 0 14px 1.25rem;
    line-height:1.7;
}

.gold-history-section{
    padding:32px 0 56px;
    background:linear-gradient(180deg,#f8faf9 0%,#fff 100%);
}
.gold-history-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,340px);
    gap:24px;
    align-items:start;
}
.gold-history-main{display:flex;flex-direction:column;gap:24px}
.gold-history-chart{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:24px;
    box-shadow:0 12px 36px rgba(27,77,62,.06);
}
.gold-history-empty{
    margin:12px 0 0;
    font-size:.84rem;
    color:var(--text-muted);
    text-align:center;
}
.gold-history-table-panel{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:24px;
    box-shadow:0 12px 36px rgba(27,77,62,.06);
}
.gold-history-table-head h2{
    margin:0 0 6px;
    font-size:1.05rem;
    color:var(--green);
    display:flex;
    align-items:center;
    gap:8px;
}
.gold-history-table-head p{
    margin:0 0 16px;
    font-size:.84rem;
    color:var(--text-muted);
}
.gold-history-table-wrap{overflow-x:auto}
.gold-history-table{
    width:100%;
    border-collapse:collapse;
    font-size:.84rem;
}
.gold-history-table thead th{
    text-align:left;
    padding:10px 12px;
    background:var(--cream);
    color:var(--green);
    font-size:.74rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    border-bottom:1px solid var(--border);
}
.gold-history-table tbody td{
    padding:12px;
    border-bottom:1px solid var(--border);
    vertical-align:top;
}
.gold-history-table tbody tr:nth-child(even) td{background:#fcfdfc}
.gold-history-change.is-up{color:#2E7D32;font-weight:600}
.gold-history-change.is-down{color:#C62828;font-weight:600}
.gold-history-sidebar{position:sticky;top:96px}
@media (max-width:1024px){
    .gold-history-layout{grid-template-columns:1fr}
    .gold-history-sidebar{position:static}
}

.about-content-card{
    width:100%;
    max-width:760px;
    margin:0 auto;
    padding:36px 40px;
    border-radius:18px;
    border:1px solid var(--border);
    background:#fff;
    box-shadow:0 16px 48px rgba(27,77,62,.07);
    position:relative;
    overflow:hidden;
}
.about-content-card::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background:linear-gradient(90deg,var(--green) 0%,var(--gold) 50%,var(--green) 100%);
}
.about-content-card h3:first-child,
.about-content-card h2:first-child{
    margin-top:0;
}
.about-content-card p:first-of-type{
    font-size:1rem;
    color:#3a4f47;
}
@media (max-width:900px){
    .about-content-card{padding:24px 20px}
}
@media (max-width:640px){
    .page-hero--about{padding:36px 0 28px}
    .about-content-card{padding:24px 20px}
    .content-section--why-card .why-card-content,
    .page-why-card .why-card-content.static-content{
        padding:32px 24px !important;
    }
    .content-section--why-card{
        padding-left:16px;
        padding-right:16px;
    }
}

/* Prinsip Perniagaan page */
.page-hero--principles{
    padding-bottom:32px;
}
.principles-section{
    padding:12px 0 64px;
    background:linear-gradient(180deg,#f8faf9 0%,#fff 45%,#f4f8f6 100%);
}
.principles-intro{
    text-align:center;
    max-width:760px;
    margin:0 auto 40px;
    padding:0 8px;
}
.principles-intro p{
    margin:0;
    font-size:clamp(.95rem,1.6vw,1.08rem);
    line-height:1.75;
    color:#3a4f47;
}
.principles-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}
.principles-card{
    position:relative;
    background:#fff;
    border:1.5px solid rgba(201,162,39,.55);
    border-radius:28px 10px 28px 10px;
    padding:34px 22px 28px;
    text-align:center;
    box-shadow:0 4px 24px rgba(27,77,62,.05);
    transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.principles-card::before{
    content:'';
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    background:linear-gradient(145deg,rgba(201,162,39,.08),transparent 55%);
    pointer-events:none;
    opacity:0;
    transition:opacity .28s ease;
}
.principles-card:hover{
    transform:translateY(-6px);
    border-color:var(--gold);
    box-shadow:0 20px 48px rgba(201,162,39,.14);
}
.principles-card:hover::before{
    opacity:1;
}
.principles-card-num{
    position:absolute;
    top:16px;
    right:18px;
    font-family:var(--font-display);
    font-size:2rem;
    font-weight:800;
    line-height:1;
    color:rgba(201,162,39,.2);
}
.principles-card-icon-wrap{
    width:96px;
    height:96px;
    margin:0 auto 20px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 28%,#fffdf5 0%,#fff3c4 45%,#ffe08a 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:inset 0 0 0 1px rgba(201,162,39,.12),0 8px 22px rgba(201,162,39,.12);
}
.principles-card-icon{
    font-size:2.4rem;
    line-height:1;
    color:#c4921a;
}
.principles-card-title{
    font-family:var(--font-display);
    font-size:1.05rem;
    font-weight:800;
    color:var(--green);
    margin:0 0 8px;
    line-height:1.35;
}
.principles-card-tagline{
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.02em;
    color:#b8891a;
    margin:0 0 14px;
    line-height:1.4;
}
.principles-card-desc{
    font-size:.86rem;
    line-height:1.6;
    color:#5a6b63;
    margin:0;
}
.principles-fallback{
    max-width:820px;
    margin:0 auto;
    padding:36px 40px;
    border-radius:18px;
    border:1px solid var(--border);
    background:#fff;
    box-shadow:0 16px 48px rgba(27,77,62,.07);
}
@media (max-width:900px){
    .principles-grid{
        grid-template-columns:1fr;
        max-width:420px;
        margin:0 auto;
    }
    .principles-section{padding-bottom:48px}
}
@media (max-width:640px){
    .principles-fallback{padding:24px 20px}
}

/* Forms */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px;color:var(--text)}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:8px;font-family:var(--font);font-size:.9rem;background:var(--white);transition:border-color .2s}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--green)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Auth */
.auth-page{padding:48px 0;background:linear-gradient(180deg,var(--green-pale) 0%,var(--bg) 100%)}
.auth-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    max-width:920px;
    margin:0 auto;
    background:var(--white);
    border-radius:16px;
    border:1px solid var(--border);
    overflow:hidden;
    box-shadow:0 20px 60px rgba(27,77,62,.1);
    align-items:stretch;
}
.auth-brand{
    position:relative;
    overflow:hidden;
    background:linear-gradient(145deg,#143d31 0%,#1B4D3E 45%,#2A6B55 100%);
    color:#fff;
    padding:48px 40px;
    display:flex;
    align-items:center;
}
.auth-brand::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.05) 45%,rgba(232,197,71,.2) 50%,transparent 65%);
    animation:goldWidgetShine 5s ease-in-out infinite;
    pointer-events:none;
}
.auth-brand::after{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 80% 20%,rgba(201,162,39,.2) 0%,transparent 50%);
    pointer-events:none;
}
.auth-brand-inner{position:relative;z-index:1}
.auth-brand-logo{max-width:180px;max-height:56px;object-fit:contain;margin-bottom:20px;filter:brightness(1.05)}
.auth-brand-name{font-family:var(--font-display);font-size:2rem;font-weight:700;margin-bottom:8px}
.auth-brand-tagline{font-size:.9rem;opacity:.85;margin-bottom:28px;letter-spacing:.3px}
.auth-brand-list{list-style:none}
.auth-brand-list li{
    position:relative;
    padding-left:22px;
    margin-bottom:12px;
    font-size:.9rem;
    opacity:.92;
}
.auth-brand-list li::before{
    content:'✦';
    position:absolute;
    left:0;
    color:var(--gold-light);
}
.auth-brand--promo{
    padding:0;
    background:#0f2e24;
    align-items:flex-start;
    min-height:0;
}
.auth-brand--promo::before,
.auth-brand--promo::after{display:none}
.auth-brand-image{
    width:100%;
    height:auto;
    max-width:100%;
    display:block;
    object-fit:contain;
    object-position:center top;
}
.auth-panel{padding:48px 40px;display:flex;align-items:center;justify-content:center;background:var(--white)}
.auth-box{background:transparent;border:none;padding:0;max-width:380px;width:100%;margin:0;box-shadow:none}
.auth-layout-wide{max-width:980px}
.auth-layout--solo{
    grid-template-columns:1fr;
    max-width:520px;
}
.auth-success-layout{max-width:560px}
.auth-success-panel{align-items:stretch}
.auth-success-box{
    max-width:460px;
    margin:0 auto;
    text-align:center;
}
.auth-success-icon{margin-bottom:8px}
.auth-success-head{margin-bottom:28px}
.auth-success-head h1{margin-bottom:10px}
.auth-success-head p{max-width:380px;margin:0 auto}
.auth-success-actions{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.auth-panel-wide .auth-box-wide{max-width:460px}
.auth-form-row{gap:14px}
.auth-badge-gold{background:var(--gold-pale);color:#8B6914}
.auth-ref-note{
    margin-top:20px;
    padding:10px 14px;
    border-radius:8px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(232,197,71,.35);
    font-size:.82rem;
    color:var(--gold-light);
}
.auth-input-highlight input{background:rgba(255,248,231,.9)}
.auth-input-highlight input:focus{background:#fff;box-shadow:0 0 0 4px rgba(201,162,39,.12);border-color:var(--gold)}
.auth-field-note,.field-hint{display:block;margin-top:6px;font-size:.78rem;color:var(--text-muted)}
.auth-box-wide{max-width:560px}
.auth-head{margin-bottom:28px}
.auth-head-logo-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    margin-bottom:18px;
    color:var(--text);
    transition:opacity .2s ease;
}
.auth-head-logo-wrap:hover{opacity:.88;color:var(--text)}
.auth-head-logo{
    height:72px;
    width:auto;
    max-width:260px;
    object-fit:contain;
    display:block;
}
.auth-head-logo-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    flex-shrink:0;
    border-radius:50%;
    background:linear-gradient(135deg,var(--green-pale),#fff);
    border:1px solid rgba(201,162,39,.35);
}
.auth-head-logo-mark-icon{font-size:1.2rem;color:var(--gold)}
.auth-head-logo-text{
    display:flex;
    flex-direction:column;
    line-height:1.15;
    gap:2px;
    align-items:center;
    text-align:center;
}
.auth-head-logo-text strong{
    font-family:var(--font-display);
    font-size:1.55rem;
    font-weight:700;
    color:var(--green);
}
.auth-head-logo-text small{
    font-size:.68rem;
    color:var(--text-muted);
    letter-spacing:.35px;
    font-weight:500;
}
.auth-badge{
    display:inline-block;
    background:var(--green-pale);
    color:var(--green);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    padding:5px 12px;
    border-radius:20px;
    margin-bottom:12px;
}
.auth-head h1{font-family:var(--font-display);color:var(--green);font-size:1.75rem;margin-bottom:8px;line-height:1.2}
.auth-head p{color:var(--text-muted);font-size:.9rem;line-height:1.5}
.auth-form{margin-top:8px}
.auth-field{margin-bottom:20px}
.auth-input-wrap{position:relative;display:flex;align-items:center}
.auth-input-icon{
    position:absolute;
    left:14px;
    font-size:.95rem;
    opacity:.45;
    pointer-events:none;
}
.auth-input-wrap input{
    width:100%;
    padding:12px 14px 12px 42px;
    border:1.5px solid var(--border);
    border-radius:10px;
    font-size:.95rem;
    background:var(--bg);
    transition:border-color .2s,box-shadow .2s,background .2s;
}
.auth-input-wrap input:focus{
    outline:none;
    border-color:var(--green);
    background:var(--white);
    box-shadow:0 0 0 4px rgba(27,77,62,.08);
}
.auth-input-wrap--password input{
    padding-right:48px;
}
.auth-password-toggle{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--white);
    color:var(--text-muted);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
}
.auth-password-toggle:hover{
    background:#f3f4f6;
    color:var(--green);
}
.auth-password-toggle .ri{font-size:1rem;line-height:1}
.auth-submit{padding:14px;font-size:1rem;margin-top:4px}
.auth-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:24px 0 20px;
    color:var(--text-muted);
    font-size:.8rem;
}
.auth-divider::before,.auth-divider::after{
    content:'';
    flex:1;
    height:1px;
    background:var(--border);
}
.auth-link{text-align:center;margin-top:0;font-size:.88rem;color:var(--text-muted)}
.auth-form-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin:0 0 12px;
}
.auth-form-meta .auth-remember{margin:0}
.auth-forgot-link{text-align:right;margin:0;font-size:.82rem}
.auth-forgot-link a{color:var(--green);font-weight:600;text-decoration:none}
.auth-forgot-link a:hover{text-decoration:underline}
.auth-link a{font-weight:600;color:var(--green)}
.auth-link-muted{margin-top:12px;font-size:.82rem}
.auth-link-muted a{font-weight:500;color:var(--text-muted)}
.auth-sub{color:var(--text-muted);font-size:.9rem;margin-bottom:24px}

/* Register — centered responsive form */
.auth-page--register{
    padding:clamp(24px,4vw,56px) 0 clamp(32px,5vw,72px);
}
.auth-page-register-container{
    display:flex;
    justify-content:center;
    width:100%;
    max-width:760px;
    margin:0 auto;
    padding-left:clamp(12px,3vw,20px);
    padding-right:clamp(12px,3vw,20px);
}
.auth-layout--register{
    grid-template-columns:1fr;
    max-width:100%;
    width:100%;
    margin:0 auto;
}
.auth-panel--register{
    padding:clamp(28px,4vw,44px) clamp(20px,4vw,44px);
    align-items:stretch;
    justify-content:center;
    width:100%;
}
.register-box{
    width:100%;
    max-width:100%;
    margin:0 auto;
}
.register-head{
    text-align:center;
    margin-bottom:clamp(20px,3vw,28px);
}
.register-head h1{
    font-size:clamp(1.45rem,2.5vw,1.65rem);
    color:#1f2937;
}
.register-head p{
    max-width:480px;
    margin-left:auto;
    margin-right:auto;
}
.register-form-section{
    padding:0 0 clamp(18px,2.5vw,24px);
    margin-bottom:clamp(18px,2.5vw,24px);
    border-bottom:1px solid #eef2f0;
}
.register-form-section:last-of-type{
    border-bottom:none;
    margin-bottom:0;
    padding-bottom:0;
}
.register-form-section--consent{
    border-bottom:none;
    padding-bottom:0;
    margin-bottom:clamp(8px,2vw,16px);
}
.register-form-section-title{
    margin:0 0 16px;
    font-family:var(--font-display);
    font-size:clamp(.88rem,1.8vw,.95rem);
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--green);
}
.register-form .register-field{
    margin-bottom:0;
}
.register-form-section > .register-field{
    margin-bottom:16px;
}
.register-form .register-form-row{
    margin-bottom:16px;
}
.register-form .register-form-row:last-child{
    margin-bottom:0;
}
.register-introducer{
    margin-bottom:22px;
    padding:14px 16px;
    border:1px solid #f4c89a;
    border-radius:10px;
    background:linear-gradient(180deg,#fff8f1 0%,#fff3e8 100%);
    text-align:center;
}
.register-introducer-head{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom:8px;
    color:#e67e22;
    font-size:.88rem;
}
.register-introducer-head .ri{
    font-size:1.05rem;
}
.register-introducer-name{
    margin:0 0 4px;
    font-size:.95rem;
    font-weight:700;
    color:#111827;
    line-height:1.4;
}
.register-introducer-code{
    margin:0;
    font-size:.82rem;
    color:#6b7280;
    letter-spacing:.04em;
}
.register-form .register-field label{
    font-size:.84rem;
    font-weight:600;
    color:#374151;
    margin-bottom:7px;
}
.register-form .register-field label::after{
    content:'';
}
.register-form .register-field input,
.register-form .register-field select{
    width:100%;
    padding:11px 14px;
    border:1px solid #d1d5db;
    border-radius:8px;
    font-family:var(--font);
    font-size:.92rem;
    background:#fff;
    transition:border-color .2s,box-shadow .2s;
}
.register-form .register-field input:focus,
.register-form .register-field select:focus{
    outline:none;
    border-color:#e67e22;
    box-shadow:0 0 0 3px rgba(230,126,34,.12);
}
.register-form-row{
    gap:clamp(14px,2.5vw,18px);
}
.register-form-row--id{
    grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
}
.register-phone-wrap{
    display:flex;
    align-items:stretch;
    border:1px solid #d1d5db;
    border-radius:8px;
    overflow:hidden;
    background:#fff;
}
.register-phone-wrap:focus-within{
    border-color:#e67e22;
    box-shadow:0 0 0 3px rgba(230,126,34,.12);
}
.register-phone-prefix{
    display:inline-flex;
    align-items:center;
    padding:0 12px;
    background:#f9fafb;
    border-right:1px solid #e5e7eb;
    font-size:.82rem;
    color:#4b5563;
    white-space:nowrap;
    flex-shrink:0;
}
.register-phone-wrap input{
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
    min-width:0;
}
.register-password-wrap{
    position:relative;
}
.register-password-wrap input{
    padding-right:44px !important;
}
.register-password-toggle{
    position:absolute;
    top:50%;
    right:6px;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border:1px solid #e5e7eb;
    border-radius:8px;
    background:#f9fafb;
    color:#6b7280;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.register-password-toggle:hover{
    background:#f3f4f6;
    color:#374151;
}
.admin-password-wrap{
    position:relative;
}
.admin-password-wrap input{
    padding-right:44px !important;
}
.admin-password-toggle{
    position:absolute;
    top:50%;
    right:6px;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border:1px solid #e5e7eb;
    border-radius:8px;
    background:#f9fafb;
    color:#6b7280;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
}
.admin-password-toggle:hover{
    background:#f3f4f6;
    color:#374151;
}
.admin-password-toggle .ri{font-size:1rem;line-height:1}
.register-password-hint{
    display:block;
    margin:10px 0 0;
}
.register-password-messages{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:10px;
}
.register-password-messages:empty{
    display:none;
    margin-top:0;
}
.register-password-message{
    margin:0;
    padding:10px 12px;
    border-radius:8px;
    font-size:.82rem;
    line-height:1.45;
}
.register-password-message--error{
    background:#fef2f2;
    color:#b91c1c;
    border:1px solid #fecaca;
}
.register-form .register-field input.register-input-invalid{
    border-color:#ef4444;
    box-shadow:0 0 0 3px rgba(239,68,68,.12);
}
.register-field--referral{
    margin-top:16px;
}
.register-consent{
    margin:0;
    padding-top:0;
}
.register-consent-lead{
    margin:0 0 10px;
    font-size:.84rem;
    color:#374151;
    font-weight:600;
}
.register-consent-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:10px;
    font-size:.8rem;
    line-height:1.55;
    color:#4b5563;
    cursor:pointer;
}
.register-consent-item:last-child{
    margin-bottom:0;
}
.register-consent-item input{
    margin-top:3px;
    flex-shrink:0;
    accent-color:#e67e22;
}
.register-consent-item a{
    color:#e67e22;
    font-weight:600;
    text-decoration:none;
}
.register-consent-item a:hover{
    text-decoration:underline;
}
.register-form-footer{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    padding-top:8px;
}
.btn-register-submit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:320px;
    min-height:48px;
    padding:13px 28px;
    border:none;
    border-radius:8px;
    background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 55%,#b8891d 100%);
    color:#fff;
    font-size:.92rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(201,162,39,.32);
    transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.btn-register-submit:hover{
    filter:brightness(1.05);
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(201,162,39,.4);
    color:#fff;
}
.register-login-link{
    margin:0;
    text-align:center;
    width:100%;
}

@media(max-width:991px){
.auth-page{padding:32px 0}
.auth-page .container{padding:0 16px}
.auth-layout,
.auth-layout-wide{
    grid-template-columns:1fr;
    max-width:520px;
}
.auth-brand--promo{display:none}
.auth-panel,
.auth-panel-wide{
    padding:36px 28px 40px;
    align-items:stretch;
}
.auth-layout--register{
    max-width:100%;
}
.auth-panel--register{
    padding:28px 22px 32px;
}
.auth-box,
.auth-box-wide{max-width:none}
}

@media(max-width:768px){
.register-form-row,
.register-form-row--id{
    grid-template-columns:1fr;
}
}

@media(max-width:576px){
.auth-page{padding:16px 0 100px}
.auth-page--register{
    padding:16px 0 88px;
}
.auth-page .container{padding:0 12px}
.auth-page-register-container{
    padding-left:12px;
    padding-right:12px;
}
.auth-layout,
.auth-layout-wide{
    max-width:none;
    border-radius:14px;
    box-shadow:0 12px 40px rgba(27,77,62,.1);
}
.auth-panel,
.auth-panel-wide{padding:24px 18px 28px}
.auth-panel--register{
    padding:24px 18px 28px;
}
.auth-head{margin-bottom:22px;text-align:center}
.auth-head h1{font-size:1.45rem;text-align:center}
.auth-head p{font-size:.84rem;text-align:center}
.auth-head-logo{height:60px}
.auth-field{margin-bottom:16px}
.auth-input-wrap input{
    font-size:16px;
    padding:12px 14px 12px 42px;
    min-height:48px;
}
.auth-submit{
    padding:13px;
    min-height:48px;
    font-size:.95rem;
}
.auth-divider{margin:20px 0}
.auth-link{font-size:.85rem}
.auth-link-muted{font-size:.8rem}
.register-form .register-field input,
.register-form .register-field select{
    font-size:16px;
    min-height:48px;
}
.register-phone-prefix{
    font-size:.75rem;
    padding:0 10px;
}
.register-form-section{
    padding-bottom:18px;
    margin-bottom:18px;
}
.register-form-section-title{
    margin-bottom:14px;
}
.btn-register-submit{
    max-width:none;
}
}

@media(max-width:380px){
.auth-page .container{padding:0 10px}
.auth-page-register-container{
    padding-left:10px;
    padding-right:10px;
}
.auth-panel,
.auth-panel-wide{padding:20px 14px 24px}
.auth-panel--register{
    padding:20px 14px 24px;
}
.auth-head h1{font-size:1.3rem}
.register-phone-prefix{
    padding:0 8px;
    font-size:.72rem;
}
}

/* Breadcrumb */
.pkb-breadcrumb{margin:0 0 14px}
.pkb-breadcrumb-list{
    display:flex;flex-wrap:wrap;align-items:center;
    gap:2px 0;list-style:none;margin:0;padding:0;
    font-size:.78rem;line-height:1.4;
}
.pkb-breadcrumb-item{display:inline-flex;align-items:center;gap:4px}
.pkb-breadcrumb-item a{
    color:#5A7268;text-decoration:none;transition:color .15s;
}
.pkb-breadcrumb-item a:hover{color:var(--green)}
.pkb-breadcrumb-item.is-current span{color:var(--text);font-weight:600}
.pkb-breadcrumb-sep{
    display:inline-flex;align-items:center;
    color:#B0BDB8;font-size:.95rem;margin:0 2px;
}
.site-breadcrumb-bar{
    background:#F8FAF9;
    border-bottom:1px solid var(--border);
    padding:10px 0;
}
.site-breadcrumb-bar .pkb-breadcrumb{margin:0}

/* Alerts */
.alert{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:.9rem}
.alert-success{background:#E8F5E9;color:#2E7D32;border:1px solid #A5D6A7}
.alert-error{background:#FFEBEE;color:#C62828;border:1px solid #EF9A9A}
.alert-warning{background:#FFF8E1;color:#E65100;border:1px solid #FFE082}

.checkout-timer{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px 16px;
    margin-bottom:18px;
    border-radius:10px;
    background:linear-gradient(135deg,#FFF8E1 0%,#FFECB3 100%);
    border:1px solid #FFD54F;
    color:#5D4037;
    font-size:.88rem;
}
.checkout-timer i{
    font-size:1.35rem;
    color:#F57C00;
    flex-shrink:0;
    margin-top:2px;
}
.checkout-timer-body{display:flex;flex-direction:column;gap:4px}
.checkout-timer-body strong{font-size:.92rem;color:#E65100}
.checkout-timer-countdown{
    font-style:normal;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    color:#BF360C;
}
.checkout-timer.is-urgent{
    background:linear-gradient(135deg,#FFEBEE 0%,#FFCDD2 100%);
    border-color:#EF9A9A;
    animation:checkout-timer-pulse 1.2s ease-in-out infinite;
}
.checkout-timer.is-urgent .checkout-timer-body strong,
.checkout-timer.is-urgent .checkout-timer-countdown{color:#C62828}
@keyframes checkout-timer-pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(198,40,40,.15)}
    50%{box-shadow:0 0 0 6px rgba(198,40,40,0)}
}

/* Cart & Checkout */
.cart-table{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.cart-table th,.cart-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border)}
.cart-table th{background:var(--green-pale);font-size:.85rem;color:var(--green)}
.cart-product{display:flex;align-items:center;gap:12px}
.cart-product img{width:48px;height:48px;object-fit:contain;background:var(--gold-pale);border-radius:6px;padding:4px}
.qty-input{width:60px;padding:6px;text-align:center;border:1px solid var(--border);border-radius:6px}
.cart-actions{display:flex;gap:12px;margin:16px 0}
.cart-summary{display:flex;justify-content:flex-end}
.summary-box{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:24px;min-width:320px}
.summary-box h3{margin-bottom:16px;color:var(--green)}
.summary-row{display:flex;justify-content:space-between;padding:8px 0}
.summary-row.total{border-top:2px solid var(--border);margin-top:8px;padding-top:12px;font-size:1.1rem}
.summary-item{display:flex;justify-content:space-between;padding:6px 0;font-size:.9rem;color:var(--text-muted)}
.checkout-grid{display:grid;grid-template-columns:1fr 360px;gap:32px}
.checkout-fields h3,.payment-note{margin-bottom:16px}

/* Checkout flow */
.page-hero--compact{padding:28px 0}
.page-hero--compact h1{font-size:1.75rem}
.page-hero--compact p{margin-top:6px;color:var(--text-muted);font-size:.92rem}
.checkout-page-section{padding-top:28px}
.checkout-steps{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:24px;
    flex-wrap:wrap;
}
.checkout-step{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.82rem;
    font-weight:600;
    color:var(--text-muted);
}
.checkout-step a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--green);
}
.checkout-step.is-active{color:var(--green)}
.checkout-step.is-done{color:var(--text)}
.checkout-step-no{
    width:24px;
    height:24px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.75rem;
    background:var(--green-pale);
    color:var(--green);
}
.checkout-step.is-active .checkout-step-no{background:var(--green);color:#fff}
.checkout-step.is-done .checkout-step-no{background:var(--gold-pale);color:var(--green)}
.checkout-step-sep{
    width:28px;
    height:1px;
    background:var(--border);
}
.checkout-page-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:24px;
    align-items:start;
}
.checkout-main{display:flex;flex-direction:column;gap:18px}
.checkout-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:88px}
.checkout-panel,.cart-panel{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:12px;
    padding:22px;
}
.checkout-panel-head{margin-bottom:16px}
.checkout-panel-head h2,.cart-panel-head h2{
    font-size:1.05rem;
    color:var(--green);
    margin-bottom:4px;
}
.checkout-panel-head p,.cart-panel-head span{
    font-size:.82rem;
    color:var(--text-muted);
}
.checkout-panel--collapsible .checkout-panel-details > summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:0;
    user-select:none;
}
.checkout-panel--collapsible .checkout-panel-details > summary::-webkit-details-marker{display:none}
.checkout-panel--collapsible .checkout-panel-details[open] > summary{margin-bottom:16px}
.checkout-panel-summary-text{flex:1;min-width:0}
.checkout-panel-summary-text h2,.checkout-panel-summary-text p{margin-bottom:4px}
.checkout-panel-summary-text p:last-child{margin-bottom:0}
.checkout-panel-summary-preview{
    font-size:.82rem;
    color:var(--green);
    font-weight:600;
    margin-top:6px;
}
.checkout-panel-details:not([open]) .checkout-panel-summary-desc{display:block}
.checkout-panel-details:not([open]) .checkout-panel-summary-preview:not(:empty){display:block!important}
.checkout-panel-details:not([open]) .checkout-panel-summary-preview[hidden]{display:none!important}
.cart-panel-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}
.cart-items{display:flex;flex-direction:column;gap:14px}
.cart-item-card{
    display:grid;
    grid-template-columns:88px 1fr;
    gap:14px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fafcfb;
}
.cart-item-media img{
    width:88px;
    height:88px;
    object-fit:contain;
    background:var(--gold-pale);
    border-radius:8px;
    padding:8px;
}
.cart-item-top{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
}
.cart-item-top h3{font-size:.92rem;margin:0}
.cart-item-unit{font-size:.8rem;color:var(--text-muted);margin:6px 0 12px}
.cart-item-actions{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:12px;
    flex-wrap:wrap;
}
.cart-qty-label{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:.78rem;
    font-weight:600;
    color:var(--text-muted);
}
.cart-item-subtotal{text-align:right}
.cart-item-subtotal span{display:block;font-size:.75rem;color:var(--text-muted)}
.cart-item-subtotal strong{color:var(--green)}
.cart-panel-foot{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid var(--border);
    align-items:center;
}
.cart-auto-save-note{
    font-size:.78rem;
    color:var(--text-muted);
    flex:1;
    min-width:180px;
}
.order-summary-panel{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:12px;
    padding:20px;
}
.order-summary-panel h3{
    font-size:1rem;
    color:var(--green);
    margin-bottom:4px;
}
.order-summary-meta{
    font-size:.8rem;
    color:var(--text-muted);
    margin-bottom:14px;
}
.order-line-items{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:16px;
    padding-bottom:14px;
    border-bottom:1px solid var(--border);
}
.order-line-item{
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-size:.84rem;
}
.order-line-name{display:block;font-weight:600;color:var(--text)}
.order-line-qty{display:block;font-size:.75rem;color:var(--text-muted);margin-top:2px}
.order-line-price{white-space:nowrap;color:var(--green);font-weight:600}
.voucher-box{
    margin-bottom:16px;
    padding-bottom:16px;
    border-bottom:1px solid var(--border);
}
.voucher-box label{
    display:block;
    font-size:.78rem;
    font-weight:600;
    color:var(--text-muted);
    margin-bottom:8px;
}
.voucher-form{display:flex;flex-direction:column;gap:8px}
.voucher-form input{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:8px;
    font-family:var(--font);
}
.voucher-applied{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:flex-start;
    padding:10px 12px;
    background:var(--green-pale);
    border-radius:8px;
}
.voucher-applied small{display:block;color:var(--text-muted);margin-top:2px}
.voucher-alert{margin-bottom:8px;padding:8px 10px;font-size:.8rem}
.summary-discount span:last-child{color:#2E7D32}
.order-totals .summary-row{font-size:.88rem}
.order-summary-notes{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid var(--border);
}
.order-summary-notes p{
    font-size:.75rem;
    color:var(--text-muted);
    line-height:1.5;
}
.checkout-cta{margin-top:4px}
.checkout-back-link{
    display:block;
    text-align:center;
    font-size:.82rem;
    color:var(--text-muted);
}
.checkout-back-link:hover{color:var(--green)}
.checkout-saved-addresses{
    margin-bottom:18px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.checkout-saved-label{
    display:block;
    font-size:.78rem;
    font-weight:700;
    color:var(--green);
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:4px;
}
.checkout-address-option{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    cursor:pointer;
    transition:border-color .2s ease,box-shadow .2s ease;
}
.checkout-address-option:has(input:checked){
    border-color:rgba(27,77,62,.35);
    box-shadow:0 0 0 3px rgba(27,77,62,.08);
    background:var(--green-pale);
}
.checkout-address-option input{margin-top:3px;flex-shrink:0}
.checkout-address-option strong{display:block;font-size:.85rem;color:var(--green)}
.checkout-address-option em{font-size:.72rem;color:var(--gold);font-style:normal;margin-left:6px}
.checkout-address-option small{display:block;color:var(--text-muted);font-size:.78rem;margin-top:2px;line-height:1.45}
.checkout-address-manage{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.8rem;
    font-weight:600;
    margin-top:4px;
    color:var(--green);
}
.checkout-profile-hint{
    margin-bottom:16px;
    padding:12px 14px;
    border-radius:10px;
    background:var(--green-pale);
    border:1px solid var(--border);
    font-size:.84rem;
    color:var(--text-muted);
}
.checkout-profile-hint a{font-weight:600;color:var(--green)}
.checkout-address-fields.is-readonly{
    opacity:.92;
}
.checkout-address-fields.is-readonly input,
.checkout-address-fields.is-readonly textarea,
.checkout-address-fields.is-readonly select{
    background:#f8fbf9;
}
.checkout-delivery-methods{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-bottom:18px;
}
.checkout-payment-methods{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.checkout-payment-option{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    cursor:pointer;
    transition:border-color .2s ease,box-shadow .2s ease;
}
.checkout-payment-option:has(input:checked){
    border-color:var(--green);
    box-shadow:0 0 0 2px rgba(27,77,62,.1);
    background:var(--green-pale);
}
.checkout-payment-option input{margin-top:3px;flex-shrink:0}
.checkout-payment-option strong{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:.88rem;
    color:var(--green);
}
.checkout-payment-option small{
    display:block;
    color:var(--text-muted);
    font-size:.76rem;
    margin-top:4px;
    line-height:1.45;
}
.checkout-manual-section{padding:28px 0 48px}
.checkout-manual-card{
    max-width:720px;
    margin:0 auto;
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:24px;
    box-shadow:var(--shadow);
}
.checkout-manual-status{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:16px;
    border-radius:12px;
    background:#fff8e6;
    border:1px solid #f0dfaa;
    margin-bottom:20px;
}
.checkout-manual-status .ri{
    font-size:1.4rem;
    color:#b8891d;
    flex-shrink:0;
}
.checkout-manual-status strong{
    display:block;
    color:var(--green);
    margin-bottom:4px;
}
.checkout-manual-status p{
    margin:0;
    font-size:.85rem;
    color:var(--text-muted);
}
.checkout-manual-details{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-bottom:20px;
}
.checkout-manual-detail{
    padding:12px;
    border-radius:10px;
    background:#f8fbf9;
    border:1px solid #e3ebe6;
}
.checkout-manual-detail span{
    display:block;
    font-size:.72rem;
    color:var(--text-muted);
    margin-bottom:4px;
}
.checkout-manual-detail strong{
    color:var(--green);
    font-size:.92rem;
}
.checkout-manual-amount{
    color:#b8891d !important;
    font-size:1.05rem !important;
}
.checkout-manual-bank h2,
.checkout-manual-bank h3{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 14px;
    font-size:1rem;
    color:var(--green);
}
.checkout-manual-bank--inline{
    margin-top:16px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#f8fbf9;
}
.checkout-manual-transfer-panel{
    margin-top:16px;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.checkout-manual-receipt-upload{
    padding:16px;
    border:1px dashed #c5d4cc;
    border-radius:12px;
    background:#fff;
}
.checkout-manual-receipt-upload label{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-bottom:10px;
}
.checkout-manual-receipt-upload label strong{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--green);
    font-size:.92rem;
}
.checkout-manual-receipt-upload label span{
    color:var(--text-muted);
    font-size:.82rem;
    line-height:1.45;
}
.checkout-manual-receipt-upload input[type="file"]{
    width:100%;
    font-size:.84rem;
}
.checkout-manual-receipt-upload small{
    display:block;
    margin-top:8px;
    color:var(--text-muted);
    font-size:.76rem;
}
.checkout-manual-receipt-status{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:16px;
    border-radius:12px;
    background:#E8F5E9;
    border:1px solid #C8E6C9;
    margin-bottom:20px;
}
.checkout-manual-receipt-status .ri{
    font-size:1.4rem;
    color:#2E7D32;
    flex-shrink:0;
}
.checkout-manual-receipt-status strong{
    display:block;
    color:var(--green);
    margin-bottom:4px;
}
.checkout-manual-receipt-status p{
    margin:0;
    font-size:.85rem;
    color:var(--text-muted);
}
.checkout-manual-bank{
    padding:18px;
    border-radius:12px;
    background:linear-gradient(180deg,#fffdf7 0%,#fff 100%);
    border:1px solid #eadfaa;
    margin-bottom:20px;
}
.checkout-manual-bank h2{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:1rem;
    color:var(--green);
    margin:0 0 14px;
}
.checkout-manual-bank ul{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:10px;
}
.checkout-manual-bank li{
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-size:.88rem;
}
.checkout-manual-bank li span{color:var(--text-muted)}
.checkout-manual-account-no{
    letter-spacing:.04em;
}
.checkout-manual-note{
    margin:14px 0 0;
    font-size:.82rem;
    color:var(--text-muted);
    line-height:1.55;
}
.checkout-manual-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.checkout-delivery-option{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    cursor:pointer;
    transition:border-color .2s ease,box-shadow .2s ease;
}
.checkout-delivery-option:has(input:checked){
    border-color:var(--green);
    box-shadow:0 0 0 2px rgba(27,77,62,.1);
    background:var(--green-pale);
}
.checkout-delivery-option input{margin-top:3px;flex-shrink:0}
.checkout-delivery-option strong{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:.88rem;
    color:var(--green);
}
.checkout-delivery-option small{
    display:block;
    color:var(--text-muted);
    font-size:.76rem;
    margin-top:4px;
    line-height:1.45;
}
.checkout-delivery-option small em{color:var(--gold);font-style:normal;font-weight:600}
.checkout-delivery-method-note{
    display:flex;
    align-items:center;
    gap:8px;
    padding:14px 16px;
    margin-bottom:18px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--green-pale);
    font-size:.88rem;
    color:var(--green);
}
.checkout-panel-subhead{margin-bottom:14px}
.checkout-panel-subhead h3{
    font-size:.95rem;
    color:var(--green);
    margin-bottom:4px;
}
.checkout-panel-subhead p{
    font-size:.8rem;
    color:var(--text-muted);
    margin:0;
}
.checkout-pickup-select-wrap{margin-bottom:12px}
.checkout-pickup-select{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:10px;
    font-family:inherit;
    font-size:.88rem;
    background:#fff;
    color:var(--text);
}
.checkout-pickup-select:focus{
    outline:none;
    border-color:var(--green);
    box-shadow:0 0 0 2px rgba(27,77,62,.12);
}
.checkout-pickup-detail{
    margin-top:12px;
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--green-pale);
}
.checkout-pickup-detail strong{
    display:block;
    color:var(--green);
    font-size:.9rem;
    margin-bottom:6px;
}
.checkout-pickup-detail p{
    margin:0 0 6px;
    font-size:.8rem;
    color:var(--text-muted);
    line-height:1.5;
}
.checkout-pickup-detail p:last-child{margin-bottom:0}
.checkout-pickup-detail-meta{font-size:.78rem}
.checkout-pickup-phone{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:6px;
}
.checkout-pickup-phone span{
    font-size:.8rem;
    color:var(--text-muted);
}
.checkout-pickup-call-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    padding:6px 12px;
    font-size:.78rem;
}
.checkout-empty h2{font-size:1.2rem;color:var(--green);margin-bottom:8px}
.checkout-payment-list{
    list-style:none;
    display:grid;
    gap:8px;
}
.checkout-payment-list li{
    font-size:.85rem;
    color:var(--text-muted);
    padding-left:14px;
    position:relative;
}
.checkout-payment-list li::before{
    content:'';
    position:absolute;
    left:0;
    top:.55em;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--gold);
}
.btn-link-danger{
    background:none;
    border:none;
    padding:0;
    font-size:.8rem;
    color:#C62828;
    cursor:pointer;
    font-family:var(--font);
}
.btn-link-danger:hover{text-decoration:underline}

.header-search-modal{
    position:fixed;
    inset:0;
    z-index:10000;
    display:none;
    align-items:flex-start;
    justify-content:center;
    padding:72px 20px 24px;
}
.header-search-modal.is-open{display:flex}
.header-search-modal[hidden]{display:none}
.header-search-modal.is-open[hidden]{display:flex}
.header-search-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(11,42,34,.52);
    backdrop-filter:blur(3px);
}
.header-search-modal-dialog{
    position:relative;
    z-index:1;
    width:min(640px,100%);
    background:var(--white);
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:0 24px 60px rgba(27,77,62,.22);
    padding:22px 24px 24px;
    animation:headerSearchIn .22s ease;
}
@keyframes headerSearchIn{
    from{opacity:0;transform:translateY(-10px) scale(.98)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
.header-search-modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
}
.header-search-modal-head h2{
    margin:0;
    font-family:var(--font-display);
    font-size:1.2rem;
    color:var(--green);
    display:flex;
    align-items:center;
    gap:8px;
}
.header-search-modal-head h2 .ri{font-size:1.15rem;color:var(--gold)}
.header-search-modal-close{
    width:36px;
    height:36px;
    border:none;
    border-radius:10px;
    background:var(--green-pale);
    color:var(--green);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background .2s ease,color .2s ease;
}
.header-search-modal-close:hover{background:#e0efe8}
.header-search-input-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    border:2px solid var(--border);
    border-radius:14px;
    padding:6px 8px 6px 14px;
    background:#fff;
    transition:border-color .2s ease,box-shadow .2s ease;
}
.header-search-input-wrap:focus-within{
    border-color:rgba(27,77,62,.35);
    box-shadow:0 0 0 4px rgba(27,77,62,.08);
}
.header-search-input-icon{
    color:var(--text-muted);
    font-size:1.1rem;
    flex-shrink:0;
}
.header-search-input-wrap input{
    flex:1;
    min-width:0;
    border:none;
    outline:none;
    font-family:var(--font);
    font-size:1rem;
    padding:10px 0;
    background:transparent;
}
.header-search-submit{
    flex-shrink:0;
    padding:10px 18px;
    border-radius:10px;
}
.header-search-suggestions{
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid var(--border);
}
.header-search-suggestions-label{
    display:block;
    font-size:.78rem;
    font-weight:600;
    color:var(--text-muted);
    margin-bottom:10px;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.header-search-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.header-search-chip{
    display:inline-flex;
    align-items:center;
    padding:7px 14px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--bg);
    color:var(--text);
    font-size:.82rem;
    font-weight:600;
    transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.header-search-chip:hover{
    background:var(--green-pale);
    border-color:rgba(27,77,62,.2);
    color:var(--green);
}
body.header-search-modal-open{overflow:hidden}

.pkb-confirm-modal{
    position:fixed;
    inset:0;
    z-index:10001;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease,visibility .2s ease;
}
.pkb-confirm-modal.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.pkb-confirm-modal:not(.is-open){
    pointer-events:none;
}
.pkb-confirm-modal[hidden]{display:flex}
.pkb-confirm-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(15,23,42,.55);
    backdrop-filter:blur(2px);
}
.pkb-confirm-modal-dialog{
    position:relative;
    width:min(100%,420px);
    background:var(--white);
    border-radius:14px;
    border:1px solid var(--border);
    box-shadow:0 20px 50px rgba(15,23,42,.2);
    transform:translateY(12px) scale(.98);
    transition:transform .2s ease;
}
.pkb-confirm-modal.is-open .pkb-confirm-modal-dialog{
    transform:translateY(0) scale(1);
}
.pkb-confirm-modal-header{
    display:flex;
    align-items:center;
    gap:10px;
    padding:18px 20px 0;
}
.pkb-confirm-modal-icon{
    width:36px;
    height:36px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#FFEBEE;
    color:#C62828;
    flex-shrink:0;
}
.pkb-confirm-modal-icon i{font-size:1.2rem}
.pkb-confirm-modal-header h3{
    flex:1;
    margin:0;
    font-size:1.05rem;
    color:var(--green);
}
.pkb-confirm-modal-close{
    width:32px;
    height:32px;
    border:none;
    border-radius:8px;
    background:transparent;
    color:var(--text-muted);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background .15s,color .15s;
}
.pkb-confirm-modal-close:hover{background:var(--green-pale);color:var(--green)}
.pkb-confirm-modal-body{
    padding:14px 20px 6px 66px;
}
.pkb-confirm-modal-body p{
    margin:0;
    color:var(--text-muted);
    font-size:.92rem;
    line-height:1.5;
}
.pkb-confirm-modal-detail{margin-top:14px}
.pkb-confirm-modal-pickup{text-align:left}
.pkb-confirm-modal-pickup-note{
    margin:0 0 14px;
    padding:10px 12px;
    border-radius:10px;
    background:rgba(201,162,39,.1);
    color:#6b5412;
    font-size:.82rem;
    line-height:1.45;
}
.pkb-confirm-modal-pickup-section{
    margin-bottom:14px;
    padding-bottom:14px;
    border-bottom:1px solid var(--border);
}
.pkb-confirm-modal-pickup-section:last-of-type{
    border-bottom:none;
    padding-bottom:0;
}
.pkb-confirm-modal-pickup-section > strong{
    display:block;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--green);
    margin-bottom:10px;
}
.pkb-confirm-modal-pickup-meta{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 14px;
    margin:0;
}
.pkb-confirm-modal-pickup-meta dt{
    font-size:.72rem;
    color:var(--text-muted);
    margin-bottom:2px;
}
.pkb-confirm-modal-pickup-meta dd{
    margin:0;
    font-size:.84rem;
    color:var(--text);
    font-weight:600;
    word-break:break-word;
}
.pkb-confirm-modal-pickup-meta--payment dd:last-child{
    color:var(--green);
    font-size:.92rem;
}
.pkb-confirm-modal-pickup-items strong{
    display:block;
    font-size:.78rem;
    color:var(--green);
    margin-bottom:8px;
}
.pkb-confirm-modal-pickup-items ul{
    list-style:none;
    margin:0 0 14px;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.pkb-confirm-modal-pickup-items li{
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-size:.82rem;
    padding:10px 12px;
    border-radius:10px;
    background:var(--cream);
    align-items:center;
}
.pkb-confirm-modal-pickup-item-main{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    flex:1;
}
.pkb-confirm-modal-pickup-item-img{
    width:52px;
    height:52px;
    border-radius:10px;
    object-fit:cover;
    flex-shrink:0;
    border:1px solid var(--border);
    background:#fff;
}
.pkb-confirm-modal-pickup-item-img--empty{
    display:inline-block;
    background:linear-gradient(135deg,#f5f0e8,#ebe4d8);
}
.pkb-confirm-modal-pickup-items li > span:last-child{
    font-weight:700;
    color:var(--green);
    white-space:nowrap;
}
.pkb-confirm-modal-pickup-items li small{
    display:block;
    font-size:.72rem;
    color:var(--text-muted);
    font-weight:400;
    margin-top:2px;
}
.pkb-confirm-modal-pickup-receipt{width:100%;justify-content:center}
.pkb-confirm-modal-dialog:has(.pkb-confirm-modal-pickup){
    width:min(100%,560px);
    max-height:min(90vh,720px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.pkb-confirm-modal-dialog:has(.pkb-confirm-modal-pickup) .pkb-confirm-modal-header{
    flex-shrink:0;
    padding-bottom:12px;
}
.pkb-confirm-modal-dialog:has(.pkb-confirm-modal-pickup) .pkb-confirm-modal-body{
    flex:1;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:14px 20px 10px 66px;
}
.pkb-confirm-modal-dialog:has(.pkb-confirm-modal-pickup) .pkb-confirm-modal-footer{
    flex-shrink:0;
    border-top:1px solid var(--border);
    background:var(--white);
    box-shadow:0 -8px 20px rgba(15,23,42,.06);
}
@media (max-width:560px){
    .pkb-confirm-modal-pickup-meta{grid-template-columns:1fr}
    .pkb-confirm-modal-dialog:has(.pkb-confirm-modal-pickup) .pkb-confirm-modal-body{
        padding-left:20px;
    }
}
.pkb-confirm-modal-bank{
    background:var(--green-pale);
    border-radius:10px;
    padding:12px 14px;
    font-size:.85rem;
}
.pkb-confirm-modal-bank > strong{
    display:block;
    color:var(--green);
    margin-bottom:8px;
}
.pkb-confirm-modal-bank div{
    display:grid;
    grid-template-columns:minmax(0,120px) 1fr;
    gap:4px 10px;
    margin-top:6px;
}
.pkb-confirm-modal-bank span{color:var(--text-muted)}
.pkb-confirm-modal-bank strong{color:var(--green);font-weight:700}
.pkb-confirm-modal-bank-warning{
    margin:0;
    padding:10px 12px;
    border-radius:8px;
    background:#fff4e5;
    color:#9a6700;
    font-size:.85rem;
}
.pkb-confirm-modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:16px 20px 20px;
}
body.pkb-confirm-modal-open{overflow:hidden}

.admin-success-modal .admin-success-modal-dialog{
    position:relative;
    width:min(100%,360px) !important;
    max-width:360px !important;
    margin:0 auto;
    padding:0;
    overflow:hidden;
    border-radius:16px;
    text-align:center !important;
}
.admin-success-modal .admin-success-modal-main{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:24px 24px 18px;
    width:100%;
    box-sizing:border-box;
}
.admin-success-modal .admin-success-modal-icon{
    width:64px !important;
    height:64px !important;
    max-width:64px !important;
    min-width:64px;
    margin:0 auto !important;
    border-radius:50%;
    background:linear-gradient(135deg,#ecfdf5,#d1fae5);
    display:flex !important;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    box-shadow:0 4px 14px rgba(27,77,62,.1);
}
.admin-success-modal .admin-success-tick{
    width:44px !important;
    height:44px !important;
    max-width:44px;
    max-height:44px;
    flex:0 0 44px;
    color:#1f8a4c;
    animation:paymentSuccessPop .55s cubic-bezier(.2,.8,.2,1) both;
}
.admin-success-modal .admin-success-tick svg{
    width:44px !important;
    height:44px !important;
    max-width:44px;
    max-height:44px;
    display:block;
}
.admin-success-modal .admin-success-tick .payment-success-tick-circle{
    stroke:#b8e6cb;
    transform-origin:48px 48px;
    animation:paymentSuccessCircle .75s ease-out forwards;
}
.admin-success-modal .admin-success-tick .payment-success-tick-check{
    stroke:#1f8a4c;
    stroke-dasharray:60;
    stroke-dashoffset:60;
    animation:paymentSuccessCheck .45s ease-out .4s forwards;
}
.admin-success-modal .admin-success-modal-main h3{
    margin:14px 0 0;
    font-size:1.05rem;
    font-weight:700;
    color:var(--green);
    line-height:1.3;
    width:100%;
    text-align:center;
}
.admin-success-modal .admin-success-modal-copy{
    margin-top:14px;
    padding:14px 16px;
    background:#f4fbf7;
    border:1px solid #d7ece2;
    border-radius:10px;
    text-align:center !important;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}
.admin-success-modal .admin-success-modal-message{
    margin:0;
    font-size:.9rem;
    font-weight:600;
    color:#1B4D3E;
    line-height:1.65;
    text-align:center;
}
.admin-success-modal .admin-success-modal-detail{
    margin:8px 0 0;
    font-size:.84rem;
    color:#5a7268;
    line-height:1.6;
    text-align:center;
}
.admin-success-modal .admin-success-modal-actions{
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:10px;
    padding:0 20px 20px;
    width:100%;
    box-sizing:border-box;
}
.admin-success-modal-topbar{
    height:3px;
    background:linear-gradient(90deg,#1B4D3E,#10b981,#34d399);
}
.admin-success-modal-close{
    position:absolute;
    top:10px;
    right:10px;
    z-index:2;
}
.admin-success-modal .admin-success-modal-actions .btn{
    flex:1;
    min-width:0;
    justify-content:center;
    padding:10px 12px;
    font-size:.84rem;
}
@media (max-width:480px){
    .admin-success-modal .admin-success-modal-actions{
        flex-direction:column-reverse;
    }
}

.pkb-login-success-modal .pkb-login-success-icon{
    background:linear-gradient(135deg,#e8f8ef 0%,#d4f1e0 100%);
    color:#1f8a4c;
}
.pkb-login-success-footer{
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}
.pkb-login-success-footer .btn{
    min-width:148px;
    justify-content:center;
}

.pkb-wishlist-modal .pkb-wishlist-modal-header{align-items:flex-start}
.pkb-wishlist-modal .pkb-wishlist-modal-body p{
    margin:0;
    font-size:.95rem;
    line-height:1.6;
    color:var(--text);
    text-align:center;
}
.pkb-wishlist-modal .pkb-wishlist-modal-icon{
    width:52px;
    height:52px;
    margin:0 auto 4px;
    flex-shrink:0;
}
.pkb-wishlist-modal .pkb-wishlist-modal-icon i{font-size:1.5rem}
.pkb-wishlist-modal.is-added .pkb-wishlist-modal-icon{
    background:#fde8ea;
    color:#c62828;
}
.pkb-wishlist-modal.is-removed .pkb-wishlist-modal-icon{
    background:var(--green-pale);
    color:var(--green);
}
.pkb-wishlist-modal .pkb-confirm-modal-header{
    flex-direction:column;
    text-align:center;
    padding-top:24px;
}
.pkb-wishlist-modal .pkb-confirm-modal-header h3{
    width:100%;
    text-align:center;
    font-size:1.05rem;
}
.pkb-wishlist-modal .pkb-confirm-modal-close{
    position:absolute;
    top:14px;
    right:14px;
}
.pkb-wishlist-modal .pkb-wishlist-modal-footer{
    justify-content:center;
    gap:10px;
}

.pkb-login-required-modal .pkb-login-required-modal-icon{
    background:var(--green-pale);
    color:var(--green);
}
.pkb-login-required-modal .pkb-confirm-modal-header{
    flex-direction:column;
    text-align:center;
    padding-top:24px;
}
.pkb-login-required-modal .pkb-confirm-modal-header h3{
    width:100%;
    text-align:center;
    font-size:1.05rem;
}
.pkb-login-required-modal .pkb-confirm-modal-close{
    position:absolute;
    top:14px;
    right:14px;
}
.pkb-login-required-modal .pkb-login-required-modal-body{
    text-align:center;
}
.pkb-login-required-modal .pkb-login-required-modal-footer{
    justify-content:center;
    gap:10px;
}

.pkb-voucher-cart-required-modal .pkb-voucher-cart-required-modal-icon{
    background:var(--gold-pale);
    color:var(--gold);
}
.pkb-voucher-cart-required-modal .pkb-confirm-modal-header{
    flex-direction:column;
    text-align:center;
    padding-top:24px;
}
.pkb-voucher-cart-required-modal .pkb-confirm-modal-header h3{
    width:100%;
    text-align:center;
    font-size:1.05rem;
}
.pkb-voucher-cart-required-modal .pkb-confirm-modal-close{
    position:absolute;
    top:14px;
    right:14px;
}
.pkb-voucher-cart-required-modal .pkb-voucher-cart-required-modal-body{
    text-align:center;
}
.pkb-voucher-cart-required-modal .pkb-voucher-cart-required-modal-footer{
    justify-content:center;
    gap:10px;
}

.checkout-panel--payment{background:linear-gradient(180deg,#fff,#f8fbf9)}
.payment-note{background:var(--gold-pale);padding:12px;border-radius:8px;font-size:.85rem}
.empty-state{text-align:center;padding:60px;background:var(--white);border-radius:var(--radius);border:1px solid var(--border)}
.text-danger{color:#C62828}

/* Product Detail */
.layout-product-detail{background:#fff}
.product-detail-page{padding-top:24px;padding-bottom:56px;background:#fff}
.product-detail-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(240px,300px);
    gap:28px 32px;
    align-items:start;
}
.product-detail-sidebar{
    display:flex;
    flex-direction:column;
    gap:18px;
    min-width:0;
}
.product-gallery{display:flex;flex-direction:column;gap:14px;min-width:0}
.product-main-media{
    position:relative;
    background:#fff;
    border-radius:0;
    border:none;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:320px;
    overflow:hidden;
}
.product-media-viewport{
    width:100%;
    height:100%;
    min-height:300px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    touch-action:none;
    cursor:zoom-in;
}
.product-main-media.is-zoom-enabled .product-media-viewport{cursor:grab}
.product-main-media.is-zoom-enabled.is-dragging .product-media-viewport{cursor:grabbing}
.product-main-media img{
    width:100%;
    max-width:100%;
    height:auto;
    max-height:420px;
    object-fit:contain;
    display:block;
    transform:translate3d(0,0,0) scale(1);
    transform-origin:center center;
    transition:transform .18s ease;
    will-change:transform;
    user-select:none;
    -webkit-user-drag:none;
}
.product-main-media.is-dragging img{transition:none}
.product-main-media.is-touch-zoomed .product-media-viewport{cursor:grab}
.product-main-media.is-touch-zoomed.is-dragging .product-media-viewport{cursor:grabbing}
.product-media-zoom-tools{
    position:absolute;
    top:14px;
    right:14px;
    display:flex;
    gap:8px;
    z-index:3;
}
.product-zoom-btn{
    width:40px;
    height:40px;
    border:none;
    border-radius:12px;
    background:rgba(255,255,255,.96);
    color:var(--green);
    box-shadow:0 4px 16px rgba(27,77,62,.14);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.product-zoom-btn .ri{font-size:1.1rem}
.product-zoom-btn:hover{
    background:var(--green);
    color:#fff;
    transform:translateY(-1px);
}
.product-zoom-btn.is-active{
    background:var(--green);
    color:#fff;
    box-shadow:0 6px 18px rgba(27,77,62,.22);
}
.product-zoom-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
    transform:none;
}
.product-zoom-level{
    position:absolute;
    left:14px;
    bottom:14px;
    z-index:3;
    padding:5px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.94);
    border:1px solid var(--border);
    font-size:.72rem;
    font-weight:700;
    color:var(--green);
    box-shadow:0 2px 10px rgba(27,77,62,.08);
}
.product-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.product-thumbs--single .product-thumb{pointer-events:none}
.product-thumb{
    width:78px;height:78px;padding:8px;
    border:none;border-radius:0;
    background:#111;cursor:pointer;overflow:hidden;
    transition:box-shadow .2s,transform .2s;
    flex:0 0 auto;
}
.product-thumb.active,.product-thumb:hover{
    box-shadow:0 0 0 2px var(--gold);
    transform:translateY(-1px);
}
.product-thumb img{width:100%;height:100%;object-fit:contain;background:#111}
.product-videos{margin-top:8px}
.product-videos h4{font-size:.9rem;color:var(--green);margin-bottom:10px}
.product-video-grid{display:grid;gap:12px}
.product-video-grid video{width:100%;max-height:260px;border-radius:var(--radius);border:1px solid var(--border);background:#000}
.product-detail-info{
    background:transparent;
    border:none;
    border-radius:0;
    padding:0;
    box-shadow:none;
    min-width:0;
}
.product-detail-head{margin-bottom:18px}
.product-detail-title{
    margin:0 0 12px;
    font-family:var(--font-display);
    font-size:clamp(1.35rem,2.2vw,1.85rem);
    line-height:1.25;
    color:#1a2e28;
    font-weight:800;
}
.product-detail-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 16px;
    font-size:.82rem;
    color:#6B7F78;
}
.product-detail-brand{
    height:28px;
    width:auto;
    max-width:120px;
    object-fit:contain;
}
.product-detail-brand-text{
    font-weight:800;
    color:var(--gold);
    font-size:.88rem;
}
.product-detail-meta-item{color:#6B7F78}
.product-detail-stock{
    display:inline-flex;
    align-items:center;
    padding:4px 10px;
    border-radius:999px;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.02em;
}
.product-detail-stock--in{
    background:#e8f5e9;
    color:#2e7d32;
    border:1px solid #c8e6c9;
}
.product-detail-stock--out{
    background:#ffebee;
    color:#c62828;
    border:1px solid #ffcdd2;
}
.product-detail-pricing{
    margin:0 0 18px;
    padding:0;
    border:none;
    border-radius:0;
    background:transparent;
}
.product-detail-pricing .product-price-lg{
    font-size:clamp(1.85rem,3.2vw,2.45rem);
    font-weight:800;
    color:#1a2e28;
    margin:0 0 6px;
    line-height:1.1;
}
.product-premium-note{
    margin:0 0 4px;
    font-size:.88rem;
    color:#6B7F78;
}
.product-detail-pricing .product-ppg{
    margin:0;
    font-size:.88rem;
    color:#6B7F78;
    font-weight:500;
}
.product-detail-features{
    list-style:none;
    margin:0 0 20px;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.product-detail-features li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:.9rem;
    line-height:1.5;
    color:#3d4f49;
}
.product-detail-features .ri{
    color:var(--green);
    font-size:1.05rem;
    flex-shrink:0;
    margin-top:2px;
}
.product-detail-divider{
    height:1px;
    background:var(--border);
    margin:0 0 20px;
}
.product-detail-login-note{
    margin:0;
    font-size:.95rem;
    line-height:1.6;
    color:#3d4f49;
}
.product-detail-login-note a{
    color:var(--gold);
    font-weight:700;
    text-decoration:none;
}
.product-detail-login-note a:hover{text-decoration:underline;color:#a88428}
.product-stock-alert{
    margin:0;
    font-size:.85rem;
    color:#C62828;
    font-weight:600;
}
.product-detail-specs{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-bottom:24px;
}
.product-spec-item{
    padding:14px 12px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--bg);
    text-align:center;
}
.product-spec-item.is-out{background:#fff5f5;border-color:#ffcdd2}
.product-spec-item.is-out strong{color:#C62828}
.product-spec-label{
    display:block;
    font-size:.68rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--text-muted);
    margin-bottom:6px;
}
.product-spec-item strong{
    display:block;
    font-size:.95rem;
    color:var(--green);
}
.product-detail-actions{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.product-qty-form{
    display:grid;
    grid-template-columns:minmax(110px,140px) minmax(0,1fr);
    gap:12px;
    align-items:end;
}
.product-qty-field label{
    display:block;
    margin-bottom:6px;
    font-size:.82rem;
    font-weight:600;
    color:var(--green);
}
.product-qty-field input[type=number]{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:10px;
    font-size:1rem;
    font-weight:600;
    background:#fff;
}
.product-qty-field input[type=number]:focus{
    outline:none;
    border-color:var(--green);
    box-shadow:0 0 0 3px rgba(27,77,62,.1);
}
.product-btn-cart,
.product-btn-buy{
    width:100%;
    justify-content:center;
    min-height:48px;
}
.product-btn-buy[aria-disabled="true"]{
    opacity:.55;
    pointer-events:none;
    cursor:not-allowed;
}
.product-service-box{
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:16px;
}
.product-service-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
}
.product-service-icon{
    width:40px;height:40px;border-radius:10px;
    background:var(--green-pale);
    color:var(--green);
    display:inline-flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.product-service-icon .ri{
    font-size:1.15rem;
    line-height:1;
    color:inherit;
}
.product-service-item strong{
    display:block;
    font-size:.88rem;
    color:#1a2e28;
    margin-bottom:3px;
}
.product-service-item > div span{
    display:block;
    font-size:.76rem;
    line-height:1.45;
    color:#6B7F78;
}
.product-service-item a{color:var(--green-light);font-weight:600;text-decoration:none}
.product-service-item a:hover{text-decoration:underline}
.product-popular-box{
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    padding:16px;
}
.product-popular-head h3{
    margin:0 0 14px;
    font-size:1rem;
    color:#1a2e28;
    font-weight:800;
}
.product-popular-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.product-popular-item{
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
    gap:10px;
    align-items:center;
    text-decoration:none;
    color:inherit;
}
.product-popular-item:hover strong{color:var(--green)}
.product-popular-thumb{
    width:56px;height:56px;
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
    background:#f7faf8;
    display:flex;align-items:center;justify-content:center;
}
.product-popular-thumb img,.product-popular-thumb .product-no-image{
    width:100%;height:100%;object-fit:cover;
}
.product-popular-body strong{
    display:block;
    font-size:.82rem;
    line-height:1.35;
    color:#1a2e28;
    margin-bottom:2px;
}
.product-popular-body small{
    display:block;
    font-size:.72rem;
    color:#6B7F78;
    margin-bottom:2px;
}
.product-popular-body em{
    display:block;
    font-style:normal;
    font-size:.82rem;
    font-weight:800;
    color:#1a2e28;
}
.product-detail-tabs-wrap{margin-top:40px;padding-top:8px}
.product-detail-tablist{
    display:flex;
    gap:24px;
    border-bottom:1px solid var(--border);
    margin-bottom:0;
}
.product-detail-tab{
    appearance:none;
    background:none;
    border:none;
    border-bottom:3px solid transparent;
    margin-bottom:-1px;
    padding:12px 0;
    font:inherit;
    font-size:.95rem;
    font-weight:600;
    color:#6B7F78;
    cursor:pointer;
    transition:color .18s,border-color .18s;
}
.product-detail-tab:hover{color:#1a2e28}
.product-detail-tab.is-active{
    color:#1a2e28;
    border-bottom-color:var(--gold);
}
.product-detail-tabpanels{padding:22px 0 0}
.product-detail-tabpanel{
    font-size:.92rem;
    line-height:1.75;
    color:#3d4f49;
}
.product-detail-tabpanel[hidden]{display:none}
.product-info-list{
    margin:0;
    display:grid;
    gap:0;
}
.product-info-list div{
    display:grid;
    grid-template-columns:minmax(120px,180px) minmax(0,1fr);
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid var(--border);
}
.product-info-list div:last-child{border-bottom:none}
.product-info-list dt{
    margin:0;
    font-size:.82rem;
    font-weight:700;
    color:#6B7F78;
}
.product-info-list dd{
    margin:0;
    font-size:.92rem;
    color:#1a2e28;
    font-weight:600;
}
.product-detail-info .badge{display:inline-block;background:var(--gold-pale);color:var(--gold);padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:600;margin-bottom:12px}
.product-price-lg{font-size:2rem;font-weight:700;color:var(--green);margin:12px 0}
.product-specs{list-style:none;margin:20px 0}
.product-specs li{padding:6px 0;border-bottom:1px solid var(--border);font-size:.9rem}
.qty-form{display:flex;align-items:center;gap:12px;margin:20px 0;flex-wrap:wrap}
.qty-form input[type=number]{width:80px;padding:10px;border:1px solid var(--border);border-radius:8px}

@media(min-width:1100px){
    .product-detail-sidebar{
        position:sticky;
        top:92px;
    }
}

@media(max-width:992px){
    .product-detail-layout{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    }
    .product-detail-sidebar{
        grid-column:1 / -1;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px;
    }
}

@media(max-width:640px){
    .product-detail-layout{grid-template-columns:1fr;gap:24px}
    .product-detail-sidebar{grid-template-columns:1fr}
    .product-detail-info{padding:0}
    .product-detail-pricing{padding:0}
    .product-detail-specs{grid-template-columns:1fr}
    .product-qty-form{grid-template-columns:1fr}
    .product-main-media{min-height:240px}
    .product-media-viewport{min-height:220px}
    .product-media-zoom-tools{top:10px;right:10px;gap:6px}
    .product-zoom-btn{width:36px;height:36px;border-radius:10px}
    .product-zoom-level{left:10px;bottom:10px}
    .product-detail-tablist{gap:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .product-detail-tab{white-space:nowrap;font-size:.88rem}
    .product-info-list div{grid-template-columns:1fr;gap:4px}
    .product-thumbs{gap:8px}
    .product-thumb{width:68px;height:68px;padding:6px}
}

/* Account & Agent */
.account-grid,.agent-grid{display:grid;grid-template-columns:1fr 2fr;gap:24px}
.account-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.account-card h3{color:var(--green);margin-bottom:16px;font-size:1.1rem}
.ref-code{background:var(--green-pale);padding:4px 10px;border-radius:4px;font-weight:700;color:var(--green)}
.ref-link-box{margin:16px 0}
.ref-link-box input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:.8rem;background:var(--bg)}
.data-table{width:100%;border-collapse:collapse;font-size:.85rem}
.data-table th,.data-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border)}
.data-table th{background:var(--green-pale);color:var(--green);font-weight:600}
.status-badge{padding:3px 10px;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:capitalize}
.status-paid,.status-completed{background:#E8F5E9;color:#2E7D32}
.status-pending{background:#FFF8E1;color:#F57F17}
.status-cancelled,.status-failed{background:#FFEBEE;color:#C62828}
.agent-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:24px;text-align:center}
.stat-value{font-size:1.5rem;font-weight:700;color:var(--green);margin-bottom:4px}
.stat-label{font-size:.8rem;color:var(--text-muted)}
.agent-ref{margin-bottom:24px;background:var(--white);padding:16px;border-radius:var(--radius);border:1px solid var(--border)}

/* Payment Result */
.payment-result-section{
    padding:48px 0 64px;
    background:linear-gradient(180deg,var(--green-pale) 0%,var(--bg) 100%);
}
.payment-result{
    max-width:560px;
    margin:0 auto;
}
.payment-result-card{
    text-align:center;
    padding:40px 32px 36px;
    background:var(--white);
    border-radius:20px;
    border:1px solid var(--border);
    box-shadow:0 20px 50px rgba(27,77,62,.1);
    position:relative;
    overflow:hidden;
}
.payment-result-card::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background:linear-gradient(90deg,var(--green),var(--gold));
}
.payment-result--pending .payment-result-card::before{
    background:linear-gradient(90deg,#F9A825,#FFB74D);
}
.payment-result--failed .payment-result-card::before{
    background:linear-gradient(90deg,#C62828,#EF5350);
}
.payment-result-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
}
.payment-success-tick{
    width:96px;
    height:96px;
    color:#2E7D32;
    animation:paymentSuccessPop .55s cubic-bezier(.2,.8,.2,1) both;
}
.payment-success-tick svg{
    width:100%;
    height:100%;
    display:block;
    filter:drop-shadow(0 8px 18px rgba(46,125,50,.22));
}
.payment-success-tick-circle{
    stroke:#C8E6C9;
    transform-origin:48px 48px;
    animation:paymentSuccessCircle .7s ease-out forwards;
}
.payment-success-tick-check{
    stroke:#2E7D32;
    stroke-dasharray:60;
    stroke-dashoffset:60;
    animation:paymentSuccessCheck .45s ease-out .45s forwards;
}
@keyframes paymentSuccessPop{
    0%{transform:scale(.4);opacity:0}
    70%{transform:scale(1.06)}
    100%{transform:scale(1);opacity:1}
}
@keyframes paymentSuccessCircle{
    0%{stroke-dasharray:0 276;opacity:.4}
    100%{stroke-dasharray:276 276;opacity:1}
}
@keyframes paymentSuccessCheck{
    to{stroke-dashoffset:0}
}
.payment-status-spinner{
    width:72px;
    height:72px;
    border-radius:50%;
    border:4px solid #FFF3E0;
    border-top-color:#F9A825;
    animation:paymentSpinner .9s linear infinite;
}
@keyframes paymentSpinner{
    to{transform:rotate(360deg)}
}
.payment-result-icon--failed .payment-result-icon-failed{
    font-size:4.5rem;
    color:#C62828;
    line-height:1;
}
.payment-result-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 14px;
    border-radius:999px;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin-bottom:14px;
}
.payment-result-badge--success{background:#E8F5E9;color:#2E7D32}
.payment-result-badge--pending{background:#FFF8E1;color:#E65100}
.payment-result-badge--failed{background:#FFEBEE;color:#C62828}
.payment-result h1{
    font-family:var(--font-display);
    font-size:1.75rem;
    color:var(--green);
    margin-bottom:10px;
    line-height:1.2;
}
.payment-result--pending h1{color:#E65100}
.payment-result--failed h1{color:#C62828}
.payment-result-lead{
    font-size:.92rem;
    color:var(--text-muted);
    line-height:1.6;
    max-width:420px;
    margin:0 auto 24px;
}
.payment-result-details{
    display:grid;
    gap:10px;
    text-align:left;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:14px;
    padding:16px 18px;
    margin-bottom:24px;
}
.payment-result-detail{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:6px 0;
}
.payment-result-detail + .payment-result-detail{
    border-top:1px dashed var(--border);
    padding-top:12px;
    margin-top:2px;
}
.payment-result-detail-label{
    font-size:.8rem;
    color:var(--text-muted);
    font-weight:600;
}
.payment-result-detail-value{
    font-size:.9rem;
    color:var(--green);
    text-align:right;
}
.payment-result-detail-value--amount{
    font-size:1.05rem;
    color:var(--green);
}
.payment-result-detail-value--paid{color:#2E7D32}
.payment-result-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    margin-bottom:12px;
}
.payment-result-actions .btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:0;
    min-width:148px;
    justify-content:center;
}
.payment-result-actions .btn .ri{font-size:1rem}
.payment-result-footnote{
    font-size:.78rem;
    color:var(--text-muted);
    line-height:1.5;
    margin:8px 0 0;
    padding-top:14px;
    border-top:1px solid var(--border);
}
.result-icon{font-size:4rem;margin-bottom:16px}
.payment-result .btn{margin:8px}

@media(max-width:576px){
.payment-result-section{padding:28px 0 48px}
.payment-result-card{padding:32px 20px 28px;border-radius:16px}
.payment-result h1{font-size:1.45rem}
.payment-result-actions{flex-direction:column}
.payment-result-actions .btn{width:100%}
.payment-result-detail{flex-direction:column;align-items:flex-start;gap:4px}
.payment-result-detail-value{text-align:left}
}

/* Static */
.static-content{background:var(--white);padding:40px;border-radius:var(--radius);border:1px solid var(--border);max-width:800px}
.static-content h3{color:var(--green);margin:20px 0 8px}
.static-content h2,.static-content h3,.static-content h4{color:var(--green);margin:24px 0 10px;line-height:1.3}
.static-content p{margin:0 0 14px;line-height:1.7}
.static-content ul,.static-content ol{margin:0 0 16px 22px;line-height:1.7}
.static-content li{margin-bottom:6px}
.static-content a{color:var(--green);text-decoration:underline}
.static-content img{max-width:100%;height:auto;border-radius:10px;margin:12px 0}
.static-content blockquote{margin:16px 0;padding:14px 18px;border-left:4px solid var(--gold);background:rgba(201,162,39,.08);border-radius:0 10px 10px 0}
.static-content table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.92rem}
.static-content th,.static-content td{border:1px solid var(--border);padding:10px 12px;text-align:left}
.static-content th{background:var(--cream)}

.legal-page .legal-content{max-width:920px;margin:0 auto}
.legal-page .legal-meta{color:var(--text-muted);font-size:.88rem;margin:-8px 0 20px}
.legal-page .legal-content h2{
    font-size:1.12rem;
    margin:28px 0 10px;
    padding-top:18px;
    border-top:1px solid var(--border);
}
.legal-page .legal-content h2:first-of-type{
    margin-top:0;
    padding-top:0;
    border-top:0;
}
.legal-page .legal-contact{
    margin-top:8px;
    padding:20px 22px;
    border-radius:12px;
    background:var(--green-pale);
    border:1px solid #cfe0d8;
}
.legal-page .legal-contact h2{
    border-top:0;
    padding-top:0;
    margin-top:0;
}
.legal-page .legal-contact ul{margin-bottom:16px}

.blog-section{padding-top:28px}
.blog-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
    gap:22px;
}
.blog-card{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 4px 18px rgba(27,77,62,.05);
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
    display:flex;
    flex-direction:column;
    height:100%;
}
.blog-card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 34px rgba(27,77,62,.1);
    border-color:rgba(201,162,39,.28);
}
.blog-card-media{
    display:block;
    aspect-ratio:16/9;
    background:linear-gradient(180deg,var(--gold-pale),#fff);
    overflow:hidden;
}
.blog-card-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.blog-card-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9eb5a8;
    font-size:2.4rem;
}
.blog-card-body{
    padding:18px 18px 20px;
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1;
}
.blog-card-body time{
    font-size:.74rem;
    color:var(--text-muted);
    font-weight:600;
}
.blog-card-body h2{
    margin:0;
    font-size:1.08rem;
    line-height:1.4;
}
.blog-card-body h2 a{color:var(--green);text-decoration:none}
.blog-card-body h2 a:hover{color:var(--green-light)}
.blog-card-body p{
    margin:0;
    font-size:.86rem;
    color:var(--text-muted);
    line-height:1.55;
    flex:1;
}
.blog-card-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.8rem;
    font-weight:700;
    color:var(--green);
    text-decoration:none;
}
.blog-card-link:hover{color:var(--gold)}

.gallery-section{padding-top:28px;padding-bottom:56px}
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
    gap:18px;
}
.gallery-item{margin:0}
.gallery-item-btn{
    position:relative;
    display:block;
    width:100%;
    padding:0;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    cursor:pointer;
    box-shadow:0 4px 18px rgba(27,77,62,.05);
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.gallery-item-btn:hover{
    transform:translateY(-4px);
    border-color:rgba(201,162,39,.35);
    box-shadow:0 14px 34px rgba(27,77,62,.1);
}
.gallery-item-btn img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
}
.gallery-item-overlay{
    position:absolute;
    inset:auto 0 0 0;
    padding:14px 14px 12px;
    background:linear-gradient(180deg,transparent 0%,rgba(20,61,49,.82) 100%);
    color:#fff;
    text-align:left;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.gallery-item-overlay strong{font-size:.88rem;line-height:1.35}
.gallery-item-overlay small{font-size:.76rem;line-height:1.45;opacity:.92}
.gallery-empty{
    text-align:center;
    padding:56px 20px;
    border:1px dashed var(--border);
    border-radius:16px;
    color:var(--text-muted);
    background:#fff;
}
.gallery-empty svg,.gallery-empty i{font-size:2.4rem;color:#9eb5a8;margin-bottom:12px}
.gallery-empty h3{margin:0 0 8px;color:var(--green)}
.gallery-empty p{margin:0}
body.gallery-lightbox-open{overflow:hidden}
.gallery-lightbox{
    position:fixed;
    inset:0;
    z-index:1200;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.gallery-lightbox[hidden]{display:none!important}
.gallery-lightbox-backdrop{
    position:absolute;
    inset:0;
    background:rgba(10,24,20,.78);
    backdrop-filter:blur(4px);
}
.gallery-lightbox-dialog{
    position:relative;
    z-index:1;
    width:min(920px,100%);
    max-height:calc(100vh - 40px);
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 24px 64px rgba(0,0,0,.28);
}
.gallery-lightbox-close{
    position:absolute;
    top:12px;
    right:12px;
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    color:#1a1a1a;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    z-index:2;
}
.gallery-lightbox-image{
    width:100%;
    max-height:72vh;
    object-fit:contain;
    display:block;
    background:#111;
}
.gallery-lightbox-caption{padding:16px 18px 18px}
.gallery-lightbox-caption strong{
    display:block;
    font-size:1rem;
    color:var(--green);
    margin-bottom:6px;
}
.gallery-lightbox-caption p{
    margin:0;
    font-size:.88rem;
    line-height:1.55;
    color:var(--text-muted);
}

.blog-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-top:28px;
    font-size:.84rem;
    color:var(--text-muted);
}
.blog-empty{
    text-align:center;
    padding:48px 20px;
    color:var(--text-muted);
}
.blog-empty .ri{font-size:2.4rem;color:#9eb5a8;margin-bottom:10px}
.blog-empty h3{margin:0 0 8px;color:var(--green)}
.blog-post-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    font-size:.82rem;
    color:var(--text-muted);
    margin-bottom:10px;
}
.blog-post-meta a{color:var(--green);font-weight:600;text-decoration:none}
.blog-post-section .blog-post{max-width:860px;margin:0 auto}
.blog-post-cover{
    margin-bottom:20px;
    border-radius:16px;
    overflow:hidden;
    border:1px solid var(--border);
}
.blog-post-cover img{
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
}
.blog-post-content{max-width:none}
.blog-post-foot{margin-top:24px}
.steps-list{padding-left:24px}
.steps-list li{margin-bottom:12px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* Help & FAQ */
.help-layout{
    display:grid;
    grid-template-columns:minmax(0,300px) minmax(0,1fr);
    gap:28px;
    align-items:start;
}
.help-sidebar{display:flex;flex-direction:column;gap:16px;position:sticky;top:88px}
.help-card{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:14px;
    padding:20px;
    box-shadow:0 4px 18px rgba(27,77,62,.04);
}
.help-card h3{
    display:flex;align-items:center;gap:8px;
    font-size:.95rem;color:var(--green);margin-bottom:12px;
}
.help-card h3 .ri{font-size:1.1rem;color:var(--gold)}
.help-card--contact .contact-line{margin-bottom:8px}
.help-contact-btn{margin-top:12px}
.help-quick-links,.help-topic-nav{
    list-style:none;margin:0;padding:0;
    display:flex;flex-direction:column;gap:6px;
}
.help-quick-links a,.help-topic-nav a{
    display:flex;align-items:center;gap:8px;
    padding:8px 10px;border-radius:8px;
    font-size:.86rem;color:var(--text);
    transition:background .15s,color .15s;
}
.help-quick-links a:hover,.help-topic-nav a:hover{
    background:var(--green-pale);color:var(--green);
}
.help-quick-links .ri,.help-topic-nav .ri{font-size:1rem;color:var(--gold)}
.help-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.help-search-wrap{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:14px;
    padding:18px 20px;
}
.help-search-label{
    display:flex;align-items:center;gap:8px;
    font-size:.82rem;font-weight:700;color:var(--green);margin-bottom:10px;
}
.help-search-input{
    width:100%;padding:12px 14px;
    border:1px solid var(--border);border-radius:10px;
    font-family:var(--font);font-size:.92rem;
    transition:border-color .2s,box-shadow .2s;
}
.help-search-input:focus{
    outline:none;border-color:var(--green);
    box-shadow:0 0 0 3px rgba(27,94,74,.1);
}
.help-search-hint{
    margin:10px 0 0;font-size:.82rem;color:#c62828;
}
.help-faq{display:flex;flex-direction:column;gap:22px}
.help-faq-section{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:14px;
    padding:20px 22px;
}
.help-faq-section-title{
    display:flex;align-items:center;gap:10px;
    font-size:1rem;color:var(--green);margin-bottom:14px;
}
.help-faq-section-title .ri{font-size:1.15rem;color:var(--gold)}
.help-faq-list{display:flex;flex-direction:column;gap:8px}
.help-faq-item{
    border:1px solid #e3ebe6;
    border-radius:10px;
    padding:12px 14px;
    background:#f8fbf9;
}
.help-faq-item summary{
    cursor:pointer;font-weight:600;font-size:.9rem;color:var(--green);
    list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.help-faq-item summary::-webkit-details-marker{display:none}
.help-faq-item summary::after{
    content:'+';font-size:1.1rem;color:var(--gold);font-weight:700;flex-shrink:0;
}
.help-faq-item[open] summary::after{content:'−'}
.help-faq-answer{
    margin-top:10px;font-size:.86rem;color:var(--text-muted);line-height:1.65;
}
.help-faq-answer a{color:var(--green);font-weight:600}
.help-cta{
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;flex-wrap:wrap;
    padding:22px 24px;border-radius:14px;
    background:linear-gradient(135deg,var(--green),#2A8B6B);color:#fff;
}
.help-cta h3{font-size:1.1rem;margin-bottom:4px}
.help-cta p{margin:0;font-size:.88rem;opacity:.92}

/* Install */
.install-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--green-pale)}
.auth-remember{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 16px;
    font-size:.86rem;
    color:var(--text-muted);
    cursor:pointer;
    user-select:none;
}
.auth-remember input{
    width:16px;
    height:16px;
    accent-color:var(--green);
    cursor:pointer;
}
.install-box .auth-remember{text-align:left}
.install-box{background:var(--white);padding:48px;border-radius:var(--radius);text-align:center;box-shadow:var(--shadow);max-width:480px}
.install-box .install-auth-head{margin-bottom:20px}
.install-box .auth-head-logo-wrap{justify-content:center}
.install-box .install-auth-logo{height:72px;max-width:220px;width:auto;margin:0 auto}
.install-box h1{color:var(--green);margin-bottom:8px;font-size:1.35rem}
.install-box > p{margin:0 0 24px;color:var(--text-muted);font-size:.9rem}

/* Admin */
.admin-body{
    background:#F0F4F2;
    min-height:100vh;
}
.admin-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:1090;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
}
.admin-sidebar{
    position:fixed;
    top:0;
    left:0;
    width:260px;
    height:100vh;
    background:linear-gradient(180deg,#143d31 0%,#1B4D3E 55%,#0f2e25 100%);
    color:#fff;
    display:flex;
    flex-direction:column;
    z-index:1100;
    box-shadow:4px 0 24px rgba(0,0,0,.12);
    transition:transform .28s ease,width .28s ease;
}
.admin-sidebar-brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:20px 18px;
    border-bottom:1px solid rgba(255,255,255,.1);
}
.admin-sidebar-brand-main{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    flex:1;
}
.admin-sidebar-logo{
    width:42px;
    height:42px;
    object-fit:contain;
    border-radius:8px;
    background:rgba(255,255,255,.08);
    padding:4px;
}
.admin-sidebar-icon{
    font-size:1.8rem;
    width:42px;
    text-align:center;
}
.admin-sidebar-brand strong{
    display:block;
    font-size:.95rem;
    font-family:var(--font-display);
    line-height:1.2;
}
.admin-sidebar-brand small{
    font-size:.68rem;
    opacity:.72;
    letter-spacing:.3px;
}
.admin-sidebar-nav{
    flex:1;
    padding:14px 10px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.admin-sidebar-link{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 14px;
    border-radius:10px;
    color:rgba(255,255,255,.82);
    font-size:.88rem;
    font-weight:500;
    transition:background .2s,color .2s;
}
.admin-sidebar-link:hover{
    background:rgba(255,255,255,.1);
    color:#fff;
}
.admin-sidebar-link.active{
    background:rgba(255,255,255,.16);
    color:#fff;
    box-shadow:inset 3px 0 0 var(--gold-light);
}
.admin-sidebar-link-icon{
    width:22px;
    text-align:center;
    font-size:1rem;
    flex-shrink:0;
}
.admin-sidebar-link-icon .ri{font-size:1.1rem}
.admin-sidebar-icon .ri{font-size:1.45rem;color:var(--gold-light)}
.admin-sidebar-user-icon .ri{font-size:1rem}
.admin-sidebar-footer-link .ri{margin-right:6px;font-size:.95rem}
.admin-menu-icon{font-size:1.25rem;line-height:1}
.admin-sidebar-footer{
    padding:14px 16px 18px;
    border-top:1px solid rgba(255,255,255,.1);
    display:flex;
    flex-direction:column;
    gap:6px;
}
.admin-sidebar-user{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.82rem;
    font-weight:600;
    margin-bottom:6px;
    padding:8px 10px;
    background:rgba(0,0,0,.15);
    border-radius:8px;
}
.admin-sidebar-user-name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.admin-sidebar-footer-link{
    font-size:.78rem;
    color:rgba(255,255,255,.75);
    padding:6px 10px;
    border-radius:6px;
    transition:background .2s,color .2s;
}
.admin-sidebar-footer-link:hover{
    background:rgba(255,255,255,.08);
    color:var(--gold-light);
}
.admin-sidebar-logout{
    color:rgba(255,255,255,.55);
}
.admin-shell{
    margin-left:260px;
    min-height:100vh;
    transition:margin-left .28s ease;
}
.admin-topbar{
    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    align-items:center;
    gap:14px;
    height:56px;
    padding:0 20px;
    background:#fff;
    border-bottom:1px solid var(--border);
    box-shadow:0 2px 12px rgba(27,77,62,.06);
}
.admin-menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--white);
    color:var(--green);
    font-size:1.25rem;
    cursor:pointer;
    transition:background .2s,border-color .2s,transform .15s;
    flex-shrink:0;
}
.admin-menu-btn:hover{
    background:var(--green-pale);
    border-color:var(--green-light);
}
.admin-menu-btn:active{
    transform:scale(.96);
}
.admin-topbar-title{
    font-size:1.05rem;
    font-weight:700;
    color:var(--green);
    font-family:var(--font-display);
}
.admin-body.sidebar-collapsed .admin-sidebar{
    transform:translateX(-100%);
}
.admin-body.sidebar-collapsed .admin-shell{
    margin-left:0;
}
.admin-main{
    padding:24px 20px;
    max-width:1400px;
}
.admin-dashboard{
    display:flex;
    flex-direction:column;
    gap:24px;
}
.admin-dash-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
    flex-wrap:wrap;
}
.admin-dash-eyebrow{
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-muted);
    margin-bottom:4px;
}
.admin-dash-greeting{
    font-size:1rem;
    font-weight:600;
    color:var(--text);
}
.admin-dash-date{
    font-size:.82rem;
    color:var(--text-muted);
    background:var(--white);
    border:1px solid var(--border);
    border-radius:8px;
    padding:8px 12px;
}
.admin-kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}
.admin-kpi{
    display:flex;
    flex-direction:column;
    gap:6px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:10px;
    padding:18px 18px 16px;
    text-decoration:none;
    color:inherit;
    transition:border-color .2s,box-shadow .2s;
}
a.admin-kpi:hover{
    border-color:#c5d5cc;
    box-shadow:0 4px 16px rgba(27,77,62,.06);
    color:inherit;
}
.admin-kpi--highlight{
    background:linear-gradient(180deg,#f8fbf9 0%,#fff 100%);
    border-color:#d4e5dc;
}
.admin-kpi-label{
    font-size:.75rem;
    font-weight:600;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.04em;
}
.admin-kpi-value{
    font-size:1.65rem;
    font-weight:700;
    color:var(--green);
    line-height:1.1;
}
.admin-kpi--highlight .admin-kpi-value{
    font-size:1.35rem;
}
.admin-kpi-meta{
    font-size:.78rem;
    color:var(--text-muted);
}
.admin-dash-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 280px;
    gap:18px;
    align-items:start;
}
.admin-gold-price-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,420px);
    gap:18px;
    align-items:start;
}
.admin-gold-price-quicklinks{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 20px;
    padding-bottom:18px;
    border-bottom:1px solid var(--border);
}
.admin-gold-price-quicklinks--page-top{
    margin:0 0 18px;
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--white);
    border-bottom:1px solid var(--border);
}
.admin-gold-price-preview .gold-price-table-widget{
    margin-top:8px;
}
.admin-gold-spread-panel{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    background:var(--green-pale);
    border-radius:10px;
    padding:14px 16px;
    margin-bottom:16px;
}
.admin-gold-spread-panel.is-invalid{
    background:#fff4e5;
}
.admin-gold-spread-item span,
.admin-gold-spread-item label{
    display:block;
    font-size:.78rem;
    color:var(--text-muted);
    margin-bottom:4px;
    font-weight:600;
}
.admin-gold-spread-item strong{
    font-size:1.15rem;
    color:var(--green);
}
.admin-gold-spread-input{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:8px;
    font:inherit;
    font-size:1rem;
    font-weight:700;
    color:var(--green);
    background:var(--white);
}
.admin-gold-spread-input:focus{
    outline:none;
    border-color:var(--green);
}
.admin-gold-spread-input.is-invalid{
    border-color:#d97706;
    color:#9a6700;
}
.admin-gold-spread-note{
    display:block;
    margin-top:6px;
    font-size:.72rem;
    color:var(--text-muted);
    line-height:1.35;
}
.admin-gold-spread-panel.is-invalid .admin-gold-spread-item strong{
    color:#9a6700;
}
.admin-gold-spread-hint{
    margin:-8px 0 16px;
    font-size:.82rem;
    color:#9a6700;
}
.admin-gold-price-display-option{
    margin:0 0 18px;
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#f8faf9;
}
.admin-gold-price-display-option .admin-checkbox-label{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:.88rem;
    line-height:1.45;
    cursor:pointer;
}
.admin-gold-price-display-option .admin-checkbox-label input{
    margin-top:3px;
    flex-shrink:0;
}
.admin-gold-price-section{
    margin-bottom:20px;
}
.admin-gold-price-section-title{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 14px;
    font-size:.95rem;
    color:var(--green);
}
.admin-gold-price-section--others{
    padding-top:18px;
    border-top:1px solid var(--border);
}
.admin-gold-purity-price-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}
.admin-gold-purity-price-row{
    padding:14px;
    border:1px solid #e2ece7;
    border-radius:10px;
    background:#fafcfb;
}
.admin-gold-purity-price-head{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:12px;
}
.admin-gold-purity-price-head strong{
    color:#1a2e28;
    font-size:.88rem;
}
.admin-gold-purity-price-head span{
    font-size:.78rem;
    color:var(--text-muted);
}
.admin-gold-price-preview-stack{
    display:flex;
    flex-direction:column;
    gap:16px;
}
.admin-gold-price-preview-stack .gold-price-table-widget{
    margin-top:0;
}
.admin-gold-price-products-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:0 0 14px;
}
.admin-gold-price-products-table input[type="checkbox"]{
    margin-right:6px;
}
.admin-gold-purity-form-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}
.admin-header-gold-preview-wrap{align-self:end}
.admin-header-gold-preview{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:42px;
    padding:10px 14px;
    border-radius:8px;
    border:1px solid #eadfaa;
    background:linear-gradient(180deg,#fffdf7 0%,#fff 100%);
    font-size:.82rem;
    font-weight:600;
    color:#3f3220;
    white-space:nowrap;
}
.admin-header-gold-preview .ri{color:#c9a227;font-size:1rem}
.admin-header-gold-preview strong{color:#143d31}
.admin-sku-list{
    display:flex;flex-wrap:wrap;gap:6px;
}
.admin-sku-list--compact{max-width:320px}
.admin-sku-chip{
    display:inline-flex;align-items:center;
    padding:4px 8px;border-radius:999px;
    background:#eef4f0;border:1px solid #d4e3da;
    font-family:Consolas,Monaco,monospace;
    font-size:.68rem;color:#1B5E20;line-height:1.2;
}
.admin-product-price-summary{
    display:flex;
    align-items:baseline;
    gap:10px;
    flex-wrap:wrap;
    margin:0 0 16px;
    padding:14px 16px;
    border-radius:10px;
    background:var(--bg);
    border:1px solid var(--border);
}
.admin-product-price-summary strong{
    font-size:1.2rem;
    color:var(--green);
}
.admin-product-price-summary span{
    font-size:.8rem;
    color:var(--text-muted);
}
.admin-card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:16px;
}
.admin-card-head h2{
    font-size:1.05rem;
    font-weight:700;
    color:var(--green);
    margin:0;
}
.admin-card-desc{
    font-size:.8rem;
    color:var(--text-muted);
    margin-top:4px;
}
.admin-card--table{
    margin-bottom:0;
}
.admin-table-wrap{
    overflow-x:auto;
    border:1px solid var(--border);
    border-radius:8px;
}
.admin-table--dashboard{
    margin:0;
    font-size:.82rem;
}
.admin-table--dashboard th{
    font-size:.72rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
    white-space:nowrap;
}
.admin-table--dashboard tbody tr:hover{
    background:#fafcfb;
}
.admin-table--dashboard td{
    vertical-align:top;
}
.admin-mono{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:.78rem;
    color:var(--text);
}
.admin-cell-main{
    display:block;
    font-weight:600;
    color:var(--text);
}
.admin-cell-sub{
    display:block;
    font-size:.75rem;
    color:var(--text-muted);
    margin-top:2px;
}
.admin-cell-muted{
    color:var(--text-muted);
    white-space:nowrap;
}
.admin-empty{
    padding:36px 20px;
    text-align:center;
    border:1px dashed var(--border);
    border-radius:8px;
    background:var(--bg);
}
.admin-empty p{
    font-weight:600;
    color:var(--text);
    margin-bottom:6px;
}
.admin-empty span{
    font-size:.82rem;
    color:var(--text-muted);
}
.admin-dash-aside{
    display:flex;
    flex-direction:column;
    gap:14px;
}
.admin-quick-links{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.admin-quick-links a{
    display:block;
    padding:10px 12px;
    border-radius:8px;
    font-size:.84rem;
    font-weight:500;
    color:var(--text);
    border:1px solid transparent;
    transition:background .15s,border-color .15s;
}
.admin-quick-links a:hover{
    background:var(--green-pale);
    border-color:#d4e5dc;
    color:var(--green);
}
.admin-card--note h2{
    font-size:.95rem;
    margin-bottom:12px;
}
.admin-note-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.admin-note-list li{
    font-size:.8rem;
    line-height:1.55;
    color:var(--text-muted);
    padding-left:14px;
    position:relative;
}
.admin-note-list li::before{
    content:'';
    position:absolute;
    left:0;
    top:.55em;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--gold);
}
.status-unpaid{background:#f3f4f6;color:#5a7268}
.status-processing{background:#e3f2fd;color:#1565c0}
.status-shipped{background:#e8eaf6;color:#3949ab}
.admin-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:24px}
.admin-card h2{font-size:1.2rem;color:var(--green);margin-bottom:16px}
.admin-reward-points-sim{
    background:var(--green-pale);
    padding:16px;
    border-radius:8px;
    font-size:.85rem;
    margin-bottom:16px;
}
.admin-reward-points-sim-head{margin-bottom:12px}
.admin-reward-points-sim-head strong{display:block;color:var(--green);margin-bottom:4px}
.admin-reward-points-sim-head p{margin:0;color:var(--text-muted)}
.admin-reward-points-sim-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 12px;
    margin-bottom:12px;
}
.admin-reward-points-sim-row label{margin:0;font-weight:600;color:var(--green)}
.admin-reward-points-sim-row input{
    width:min(100%,180px);
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:6px;
    font-size:.9rem;
}
.admin-reward-points-sim-result{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:8px;
    margin-bottom:6px;
}
.admin-reward-points-sim-result span{color:var(--text-muted)}
.admin-reward-points-sim-result strong{
    font-size:1.35rem;
    color:var(--green);
}
.admin-reward-points-sim-breakdown{
    margin:0;
    color:var(--text-muted);
    font-size:.8rem;
}
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.admin-stat{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.admin-stat .num{font-size:1.8rem;font-weight:700;color:var(--green)}
.admin-stat .lbl{font-size:.8rem;color:var(--text-muted)}
.admin-table{width:100%;border-collapse:collapse;font-size:.85rem}
.admin-table th,.admin-table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left}
.admin-table th{background:var(--green-pale);color:var(--green)}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.btn-danger{background:#C62828;color:#fff}
.btn-danger:hover{background:#B71C1C;color:#fff}
.btn-small{padding:4px 10px;font-size:.78rem}
.media-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;margin-top:8px}
.media-admin-item{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:8px;text-align:center}
.media-admin-item img,.media-admin-item video{width:100%;height:80px;object-fit:cover;border-radius:6px;background:var(--white)}
.media-admin-video span{display:block;font-size:.72rem;color:var(--text-muted);margin:4px 0}
.media-admin-item form{margin-top:6px}
.upload-dropzone{
    position:relative;
    border:2px dashed var(--border);
    border-radius:12px;
    background:var(--bg);
    padding:18px;
    transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.upload-dropzone-target{
    position:relative;
    min-height:78px;
}
.upload-dropzone:hover{border-color:rgba(27,77,62,.35);background:#f4faf7}
.upload-dropzone.is-dragover{
    border-color:rgba(27,77,62,.65);
    background:#e8f5ef;
    box-shadow:0 0 0 4px rgba(27,77,62,.08);
}
.upload-dropzone input[type=file]{
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
    width:100%;
    height:100%;
    z-index:3;
    font-size:0;
}
.upload-dropzone-input{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
}
.upload-dropzone-input:focus + .upload-dropzone-label{
    box-shadow:0 0 0 3px rgba(27,77,62,.12);
    border-radius:10px;
}
.upload-dropzone.has-file{
    border-color:rgba(27,77,62,.45);
    background:#f4faf7;
}
.upload-dropzone-filename{
    margin:10px 0 0;
    font-size:.82rem;
    font-weight:600;
    color:var(--green);
    text-align:center;
    word-break:break-word;
}
.upload-dropzone-preview{
    margin-top:12px;
    text-align:center;
}
.upload-dropzone-preview img{
    max-width:100%;
    max-height:180px;
    border-radius:8px;
    border:1px solid var(--border);
    display:inline-block;
}
.upload-dropzone-label{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    text-align:center;
    color:var(--text-muted);
    pointer-events:none;
    min-height:78px;
    justify-content:center;
}
.upload-dropzone--label-trigger .upload-dropzone-label{
    pointer-events:auto;
    cursor:pointer;
}
.upload-dropzone-label strong{font-size:.9rem;color:var(--green)}
.upload-dropzone-label span{font-size:.78rem}
.upload-dropzone--video{padding:14px}
.upload-dropzone--video .upload-dropzone-target{min-height:56px}
.upload-dropzone--video .upload-dropzone-label{min-height:56px}
.form-hint{display:block;margin-top:8px;font-size:.78rem;color:var(--text-muted)}
.upload-preview-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
    gap:8px;
    margin-top:14px;
    position:relative;
    z-index:2;
}
.upload-preview-item{
    position:relative;
    border-radius:8px;
    overflow:hidden;
    border:1px solid var(--border);
    background:#fff;
}
.upload-preview-item img{width:100%;height:72px;object-fit:cover;display:block}
.upload-preview-remove{
    position:absolute;
    top:4px;
    right:4px;
    width:22px;
    height:22px;
    border:0;
    border-radius:999px;
    background:rgba(0,0,0,.62);
    color:#fff;
    font-size:1rem;
    line-height:1;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.upload-preview-remove:hover{background:#C62828}
.upload-preview-meta{
    grid-column:1 / -1;
    margin:2px 0 0;
    font-size:.78rem;
    font-weight:600;
    color:var(--green);
}
.banner-admin-preview{margin-top:12px}
.banner-admin-preview img{max-width:100%;max-height:180px;border-radius:8px;border:1px solid var(--border);display:block}
.banner-admin-thumb{width:120px;height:48px;object-fit:cover;border-radius:6px;border:1px solid var(--border);display:block}
.banner-admin-fallback{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:120px;
    height:48px;
    border-radius:6px;
    background:linear-gradient(135deg,#1B4D3E,#C9A227);
    color:#fff;
    font-size:.68rem;
    font-weight:700;
}

/* Responsive */
@media(max-width:1024px){
.layout-with-sidebar{grid-template-columns:1fr}
.layout-products{
    display:flex;
    flex-direction:column;
    gap:24px;
}
.layout-products .products-sidebar{
    display:contents;
    position:static;
}
.layout-products .product-filter-widget{order:1}
.layout-products .products-main{order:2}
.layout-products .gold-price-table-widget{order:3;width:100%}
.layout-products .products-payment-widget{order:4;width:100%;display:none}
.layout-with-sidebar:not(.layout-products) .sidebar{grid-row:1}
.layout-with-sidebar:not(.layout-products) .main-col{grid-row:2}
.product-grid,.product-grid-full{grid-template-columns:repeat(2,minmax(0,1fr))}
.slider-arrow{width:36px;height:36px;font-size:1.3rem}
.slider-prev{left:8px}
.slider-next{right:8px}
.slide--theme{
    min-height:clamp(120px,32vw,420px);
}
.slide-overlay{
    background:linear-gradient(0deg,rgba(20,61,49,.88) 0%,rgba(20,61,49,.35) 55%,transparent 100%);
    align-items:flex-end;
}
.slide-caption{padding-bottom:48px}
.page-hero--below-banner{display:none}
.service-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:1fr 1fr}
.footer-main{grid-template-columns:1fr 1fr}
.payment-icons-footer{grid-template-columns:repeat(4,1fr)}
.checkout-grid,.checkout-page-grid,.product-detail,.account-grid,.agent-grid,.contact-grid,.help-layout{grid-template-columns:1fr}
.checkout-delivery-methods{grid-template-columns:1fr}
.checkout-payment-methods{grid-template-columns:1fr}
.checkout-manual-details{grid-template-columns:1fr}
.checkout-side{position:static}
.help-sidebar{position:static}
.agent-stats,.admin-stats{grid-template-columns:repeat(2,1fr)}
.admin-kpi-grid{grid-template-columns:repeat(2,1fr)}
.admin-dash-layout{grid-template-columns:1fr}
.admin-gold-price-layout{grid-template-columns:1fr}
}
.main-header.is-menu-open{
    z-index:2000;
}
@media(max-width:768px){
.main-nav{
    display:none;
    position:fixed;
    top:var(--main-header-height,112px);
    left:0;
    right:0;
    bottom:0;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:16px 20px calc(20px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
    box-shadow:0 16px 40px rgba(27,77,62,.1);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:2001;
}
.main-nav.is-open{display:flex}
.main-nav,
.main-nav.is-open{
    justify-content:flex-start;
    align-items:stretch;
    flex:none;
    padding-left:20px;
}
.main-nav-backdrop{
    display:none;
    position:fixed;
    inset:0;
    top:var(--main-header-height,112px);
    background:rgba(16,24,20,.42);
    z-index:2000;
    border:0;
    padding:0;
    cursor:pointer;
}
body.main-nav-open .main-nav-backdrop{display:block}
body.main-nav-open{overflow:hidden}
body.main-nav-open .mobile-menu-btn{
    position:relative;
    z-index:2002;
}
.main-nav a{
    border-radius:10px;
    padding:12px 14px;
}
.main-nav a::after{display:none}
.main-nav-dropdown{width:100%}
.main-nav-dropdown.is-open,
.main-nav-dropdown:hover{z-index:auto}
.main-nav-dropdown-toggle{
    width:100%;
    justify-content:space-between;
    border-radius:10px;
    padding:12px 14px;
}
.main-nav-dropdown.is-open .main-nav-dropdown-chevron{transform:rotate(180deg)}
.main-nav-dropdown-toggle::after{display:none}
.main-nav-submenu{
    position:static;
    left:auto;
    right:auto;
    top:auto;
    transform:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    min-width:0;
    width:100%;
    margin:4px 0 6px;
    padding:6px 8px 8px;
    border:1px solid rgba(0,0,0,.08);
    border-left:3px solid rgba(27,77,62,.28);
    border-radius:10px;
    box-shadow:none;
    background:#f8faf9;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.main-nav-submenu::before{display:none}
.main-nav-dropdown:not(.is-open) .main-nav-submenu{display:none}
.main-nav-dropdown.is-open .main-nav-submenu{display:flex}
.main-nav-submenu--products{
    max-height:min(260px,42vh);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
}
.main-nav-submenu a{
    padding:11px 12px;
    border-radius:8px;
    white-space:normal;
}
.main-nav-auth{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:12px;
    padding-top:14px;
    border-top:1px solid var(--border);
}
.main-nav-auth-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 16px;
    font-size:.9rem;
}
.main-nav-auth-btn.btn-green,
.main-nav-auth-btn.btn-green:hover{
    color:#fff;
}
.layout-products .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.layout-products .product-card .product-img-wrap{padding:14px}
.layout-products .product-card .product-info{padding:12px}
.layout-products .product-card .product-info h3{font-size:.82rem;margin-bottom:6px}
.layout-products .product-card .product-price{font-size:1rem}
.layout-products .product-card .product-ppg{font-size:.72rem;margin-bottom:8px}
.layout-products .product-card .product-stock{font-size:.72rem;margin-bottom:6px}
.layout-products .product-card .btn{padding:8px 10px;font-size:.75rem}
.layout-products .product-weight-badge{font-size:.65rem;padding:3px 6px;margin-bottom:6px}
.layout-products .products-pagination{gap:6px;margin-top:20px}
.layout-products .products-page-btn,.layout-products .products-page-num{min-width:34px;height:34px;font-size:.82rem}
.gold-price-table-spot-price strong{font-size:1.45rem}
.gold-price-table-banner h3{font-size:1.15rem}
.gold-price-table thead th,.gold-price-table tbody td{font-size:.78rem;padding:9px 6px}
.service-grid,.footer-grid,.footer-main{grid-template-columns:1fr}
.footer-bottom-inner{flex-direction:column;text-align:center}
.footer-legal{justify-content:center}
.payment-icons-footer{grid-template-columns:repeat(3,1fr)}
.form-row{grid-template-columns:1fr}
.header-actions .header-text-link{display:none}
.header-topbar-welcome{display:none}
.header-topbar-inner{justify-content:center;padding:6px 12px}
.header-topbar-links{gap:10px;font-size:.72rem}
.header-main-inner{
    grid-template-columns:auto 1fr auto;
    gap:10px;
    padding:10px 12px;
    min-height:64px;
}
.header-search-inline{display:none}
.header-contact-chip{display:none}
.header-navbar{
    border-top:0;
    min-height:0;
}
.header-navbar-inner{
    min-height:0;
    padding:0;
}
.header-browse-wrap,
.header-navbar-meta{
    display:none;
}
.logo{justify-self:center}
.mobile-menu-btn{
    display:inline-flex;
    justify-self:start;
    position:relative;
    z-index:512;
}
.header-actions{
    justify-self:end;
    margin-left:0;
}
.header-account-name{display:none}
.header-search-modal{padding:64px 12px 16px}
.header-search-modal-dialog{padding:18px 16px 20px}
.header-search-input-wrap{flex-wrap:wrap;padding:10px 12px}
.header-search-submit{width:100%}
.auth-brand-list{display:none}
}
@media(max-width:900px){
.admin-shell{margin-left:0!important}
.admin-body.sidebar-open{overflow:hidden}
.admin-body.sidebar-open .admin-overlay{
    display:block;
    opacity:1;
    pointer-events:auto;
}
.admin-sidebar{transform:translateX(-100%)}
.admin-body.sidebar-open .admin-sidebar{transform:translateX(0)}
}

/* Floating dock — cart + chatbot */
.pkb-floating-dock{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:9999;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    font-family:var(--font);
}
.pkb-floating-cart-wrap{
    animation:pkbFloatingBob 3.2s ease-in-out infinite;
}
.pkb-floating-cart-wrap:hover{
    animation-play-state:paused;
}
.pkb-floating-cart{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    transition:transform .2s ease,box-shadow .2s ease;
}
.pkb-floating-cart:hover{
    color:#fff;
    transform:scale(1.05);
}
.pkb-floating-cart-icon-wrap{
    position:relative;
    display:inline-flex;
}
.pkb-floating-cart-icon{
    width:56px;
    height:56px;
    border-radius:50%;
    background:linear-gradient(135deg,#1B4D3E,#2A6B55);
    box-shadow:0 8px 24px rgba(27,77,62,.35);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:3px solid #E8C547;
    transition:box-shadow .2s ease,background .2s ease;
}
.pkb-floating-cart:hover .pkb-floating-cart-icon{
    background:linear-gradient(135deg,#245a48,#2f7a62);
    box-shadow:0 12px 28px rgba(27,77,62,.42);
}
.pkb-floating-cart-icon .ri{font-size:1.35rem}
.pkb-floating-cart-badge{
    position:absolute;
    top:-4px;
    right:-4px;
    min-width:20px;
    height:20px;
    padding:0 6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--gold-light),var(--gold));
    color:#fff;
    font-size:.68rem;
    border-radius:20px;
    font-weight:700;
    border:2px solid #fff;
    box-shadow:0 2px 8px rgba(201,162,39,.35);
}

.pkb-floating-dock-actions{
    display:flex;
    align-items:flex-end;
    gap:10px;
}

@keyframes pkbFloatingBob{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
}

/* Floating WhatsApp — kiri bawah */
.pkb-floating-whatsapp-wrap{
    position:fixed;
    left:20px;
    bottom:20px;
    z-index:9999;
    animation:pkbFloatingBob 3.2s ease-in-out infinite;
}
.pkb-floating-whatsapp-wrap:hover{
    animation-play-state:paused;
}
.pkb-floating-whatsapp{
    display:inline-flex;
    flex-direction:row-reverse;
    align-items:center;
    gap:0;
    padding:0;
    border-radius:14px;
    background:#fff;
    color:#1a2744;
    box-shadow:0 8px 24px rgba(15,23,42,.14);
    border:1px solid rgba(15,23,42,.06);
    transition:transform .2s ease,box-shadow .2s ease;
    overflow:visible;
}
.pkb-floating-whatsapp:hover{
    color:#1a2744;
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(15,23,42,.18);
}
.pkb-floating-whatsapp-copy{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:10px 12px 10px 14px;
    text-align:left;
    min-width:0;
}
.pkb-floating-whatsapp-eyebrow{
    font-size:.74rem;
    line-height:1.2;
    color:#667085;
    font-weight:500;
    white-space:nowrap;
}
.pkb-floating-whatsapp-title{
    font-size:.88rem;
    line-height:1.25;
    color:#0f172a;
    font-weight:800;
    white-space:nowrap;
}
.pkb-floating-whatsapp-icon{
    width:52px;
    height:52px;
    margin:4px 0 4px 4px;
    border-radius:50%;
    background:linear-gradient(180deg,#2fe06a 0%,#25D366 55%,#1ebe57 100%);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    box-shadow:0 6px 16px rgba(37,211,102,.35);
}
.pkb-floating-whatsapp-icon .ri{
    font-size:1.55rem;
    color:#fff;
}

/* PKB AI Chatbot */
.pkb-chatbot{
    position:relative;
    font-family:var(--font);
}
.pkb-chatbot-toggle{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    width:auto;
    height:auto;
    border:none;
    border-radius:0;
    padding:0;
    cursor:pointer;
    background:transparent;
    box-shadow:none;
    transition:transform .2s;
    overflow:visible;
}
.pkb-chatbot-toggle-avatar{
    width:68px;
    height:68px;
    border-radius:50%;
    background:linear-gradient(135deg,#1B4D3E,#2A6B55);
    box-shadow:0 8px 28px rgba(27,77,62,.35);
    transition:transform .2s,box-shadow .2s;
    flex-shrink:0;
    overflow:hidden;
}
.pkb-chatbot-toggle:hover .pkb-chatbot-toggle-avatar{
    transform:translateY(-2px) scale(1.03);
    box-shadow:0 12px 32px rgba(27,77,62,.4);
}
.pkb-chatbot-toggle img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #E8C547;
    display:block;
}
.pkb-chatbot-badge{
    position:static;
    background:linear-gradient(135deg,#E8C547,#C9A227);
    color:#1B4D3E;
    font-size:.62rem;
    font-weight:800;
    padding:3px 8px;
    border-radius:999px;
    border:2px solid #fff;
    letter-spacing:.04em;
    line-height:1.2;
    box-shadow:0 4px 12px rgba(27,77,62,.18);
}
.pkb-chatbot-panel{
    position:absolute;
    right:0;
    bottom:100px;
    width:min(380px,calc(100vw - 32px));
    background:#fff;
    border-radius:18px;
    border:1px solid var(--border);
    box-shadow:0 20px 60px rgba(27,77,62,.18);
    display:none;
    flex-direction:column;
    overflow:hidden;
    z-index:2;
}
.pkb-chatbot-panel.is-open{
    display:flex;
    animation:pkbChatSlide .25s ease;
}
.pkb-chatbot-panel[hidden]{
    display:none !important;
}
@keyframes pkbChatSlide{
    from{opacity:0;transform:translateY(12px) scale(.96)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
.pkb-chatbot-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    background:linear-gradient(135deg,#1B4D3E,#2A6B55);
    color:#fff;
}
.pkb-chatbot-header-avatar{
    border-radius:50%;
    border:2px solid #E8C547;
    flex-shrink:0;
}
.pkb-chatbot-header-text{
    flex:1;
    min-width:0;
}
.pkb-chatbot-header-text strong{
    display:block;
    font-size:.95rem;
    font-weight:700;
}
.pkb-chatbot-status{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:.75rem;
    opacity:.9;
}
.pkb-chatbot-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#7CFC9A;
    box-shadow:0 0 0 2px rgba(124,252,154,.3);
}
.pkb-chatbot-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border:none;
    border-radius:8px;
    background:rgba(255,255,255,.15);
    color:#fff;
    font-size:1.4rem;
    line-height:1;
    cursor:pointer;
    flex-shrink:0;
    position:relative;
    z-index:3;
}
.pkb-chatbot-close:hover{background:rgba(255,255,255,.25)}
.pkb-chatbot-messages{
    flex:1;
    min-height:280px;
    max-height:360px;
    overflow-y:auto;
    padding:16px;
    background:linear-gradient(180deg,#f8fbf9,#fff);
    display:flex;
    flex-direction:column;
    gap:12px;
}
.pkb-chat-msg{
    display:flex;
    flex-direction:column;
    max-width:88%;
    gap:4px;
}
.pkb-chat-msg--user{
    align-self:flex-end;
    align-items:flex-end;
}
.pkb-chat-msg--bot{
    align-self:flex-start;
    align-items:flex-start;
}
.pkb-chat-bubble{
    padding:10px 14px;
    border-radius:14px;
    font-size:.86rem;
    line-height:1.5;
    word-break:break-word;
}
.pkb-chat-bubble .pkb-chat-link{
    color:#1B4D3E;
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:2px;
}
.pkb-chat-bubble .pkb-chat-link:hover{
    color:#2A6B55;
}
.pkb-chat-msg--user .pkb-chat-bubble .pkb-chat-link{
    color:#fff;
}
.pkb-chat-msg--user .pkb-chat-bubble .pkb-chat-link:hover{
    color:#E8F5E9;
}
.pkb-chat-msg--bot .pkb-chat-bubble{
    background:#fff;
    border:1px solid var(--border);
    color:var(--text);
    border-bottom-left-radius:4px;
    max-width:100%;
}
.pkb-chat-product-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:4px 0 2px;
}
.pkb-chat-product-card{
    display:grid;
    grid-template-columns:72px minmax(0,1fr);
    gap:10px;
    align-items:start;
    padding:10px;
    border:1px solid #dbe5df;
    border-radius:12px;
    background:#f8fbf9;
    color:inherit;
    text-decoration:none;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pkb-chat-product-card:hover{
    border-color:#9fc7b3;
    box-shadow:0 8px 18px rgba(27,77,62,.08);
    transform:translateY(-1px);
}
.pkb-chat-product-media{
    display:block;
    width:72px;
    height:72px;
    border-radius:10px;
    overflow:hidden;
    background:#eef3f0;
    border:1px solid #dbe5df;
}
.pkb-chat-product-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.pkb-chat-product-media-ph{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    font-size:1rem;
    font-weight:800;
    color:#1B4D3E;
}
.pkb-chat-product-body{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}
.pkb-chat-product-name{
    font-size:.84rem;
    line-height:1.35;
    color:#1A2E28;
}
.pkb-chat-product-price{
    font-size:.88rem;
    font-weight:800;
    color:#1B4D3E;
}
.pkb-chat-product-meta,
.pkb-chat-product-stock{
    font-size:.74rem;
    line-height:1.35;
    color:#5A7268;
}
.pkb-chat-product-cta{
    margin-top:2px;
    font-size:.72rem;
    font-weight:700;
    color:#2A6B55;
}
.pkb-chat-msg--user .pkb-chat-bubble{
    background:linear-gradient(135deg,#1B4D3E,#2A6B55);
    color:#fff;
    border-bottom-right-radius:4px;
}
.pkb-chat-msg--admin{
    align-self:flex-start;
    align-items:flex-start;
}
.pkb-chat-msg--admin .pkb-chat-bubble{
    background:linear-gradient(135deg,#fff8e8,#fff);
    border:1px solid rgba(201,162,39,.35);
    color:#1A2E28;
    border-bottom-left-radius:4px;
}
.pkb-chat-label{
    font-size:.66rem;
    font-weight:700;
    color:#8A9A94;
    padding:0 4px;
}
.pkb-chat-time{
    font-size:.68rem;
    color:var(--text-muted);
    padding:0 4px;
}
.pkb-chat-typing .pkb-chat-bubble{
    display:flex;
    gap:5px;
    padding:14px 16px;
}
.pkb-chat-typing .pkb-chat-bubble span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green);
    opacity:.4;
    animation:pkbChatTyping 1.2s infinite;
}
.pkb-chat-typing .pkb-chat-bubble span:nth-child(2){animation-delay:.2s}
.pkb-chat-typing .pkb-chat-bubble span:nth-child(3){animation-delay:.4s}
@keyframes pkbChatTyping{
    0%,80%,100%{opacity:.3;transform:translateY(0)}
    40%{opacity:1;transform:translateY(-4px)}
}
.pkb-chatbot-suggestions{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding:10px 14px 0;
    background:#fff;
}
.pkb-chat-suggest{
    border:1px solid rgba(27,77,62,.2);
    background:var(--green-pale);
    color:var(--green);
    font-size:.72rem;
    font-weight:600;
    padding:6px 10px;
    border-radius:999px;
    cursor:pointer;
    transition:background .15s,border-color .15s;
}
.pkb-chat-suggest:hover{
    background:#dff0e8;
    border-color:var(--green);
}
.pkb-chatbot-form{
    display:flex;
    gap:8px;
    padding:12px 14px 14px;
    background:#fff;
    border-top:1px solid var(--border);
}
.pkb-chatbot-input{
    flex:1;
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px 14px;
    font-size:.86rem;
    font-family:var(--font);
    outline:none;
    transition:border-color .15s,box-shadow .15s;
}
.pkb-chatbot-input:focus{
    border-color:var(--green);
    box-shadow:0 0 0 3px rgba(27,77,62,.1);
}
.pkb-chatbot-send{
    width:42px;
    height:42px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#1B4D3E,#2A6B55);
    color:#fff;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:opacity .15s,transform .15s;
}
.pkb-chatbot-send .ri{font-size:1.1rem}
.pkb-chatbot-send:hover{opacity:.92;transform:scale(1.04)}
.pkb-chatbot-send:disabled,.pkb-chatbot-input:disabled{opacity:.6;cursor:not-allowed}
.pkb-chatbot.is-open .pkb-chatbot-toggle .pkb-chatbot-toggle-avatar{
    transform:scale(.95);
}
@media(max-width:768px){
    .pkb-floating-dock{right:14px;bottom:14px;gap:10px}
    .pkb-floating-dock-actions{gap:8px}
    .pkb-floating-whatsapp-wrap{left:14px;bottom:14px}
    .pkb-floating-whatsapp-copy{padding:8px 12px 8px 10px}
    .pkb-floating-whatsapp-eyebrow{font-size:.68rem}
    .pkb-floating-whatsapp-title{font-size:.8rem}
    .pkb-floating-whatsapp-icon{width:46px;height:46px}
    .pkb-floating-whatsapp-icon .ri{font-size:1.35rem}
    .pkb-floating-cart-icon{width:52px;height:52px}
    .pkb-floating-cart-icon .ri{font-size:1.25rem}
    .pkb-chatbot-toggle-avatar{width:60px;height:60px}
    .pkb-chatbot-panel{
        width:min(360px,calc(100vw - 28px));
        bottom:92px;
    }
    .pkb-chatbot-messages{
        min-height:240px;
        max-height:50vh;
    }
}

/* Why-card page: full-width content with side breathing room */
.page-why-card .content-section--why-card .why-card-content,
.page-why-card .content-section--why-card .why-card-content--full,
.page-why-card .content-section--why-card .static-content{
    max-width:none !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

/* PDF export — invisible capture layer, no html2pdf popup */
.pkb-pdf-export-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

body.pkb-pdf-exporting {
    overflow: hidden !important;
}

.html2pdf__overlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.pkb-pdf-export-sandbox {
    position: relative;
    left: 0;
    top: 0;
    z-index: 1;
    background: #fff;
    padding: 0;
    margin: 0;
    overflow: visible;
    pointer-events: none;
    opacity: 1;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}