/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; color: #222; background: #f5f5f5; line-height: 1.5; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* -- HEADER ------------------------------------------------ */

/* Barre info top — très fine, vert forêt */
.header-top {
    background: #1A2B18;
    color: rgba(255,255,255,.48);
    font-size: 11.5px;
    padding: 6px 0;
    letter-spacing: .2px;
}
.header-top .wrap {
    display: flex;
    gap: 24px;
    align-items: center;
}
.header-top-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.header-top-item i {
    font-size: 10px;
    color: #C97532;
}
.header-top a:hover { color: rgba(255,255,255,.85); }

/* Barre principale logo + search + actions */
.header-main {
    background: #fff;
    border-bottom: 1px solid #EDEBE6;
    padding: 0;
}
.header-main-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 64px;
}

/* Logo */
.logo {
    font-size: 18px;
    font-weight: 700;
    color: #1A2B18;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -.3px;
}
.logo i { color: #C97532; font-size: 22px; }
.logo-img { max-height: 36px; width: auto; display: block; }

/* Recherche */
.header-search {
    flex: 1;
    max-width: 440px;
    display: flex;
    margin-left: auto;
    border: 1.5px solid #E0DBD2;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color .18s;
}
.header-search:focus-within { border-color: #C97532; }
.header-search input {
    flex: 1;
    padding: 9px 14px;
    border: none;
    font-size: 13px;
    outline: none;
    background: #FAFAF7;
    color: #1E1E1E;
}
.header-search input::placeholder { color: #aaa; }
.header-search button {
    padding: 0 16px;
    background: #1A2B18;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    transition: background .18s;
    flex-shrink: 0;
}
.header-search button:hover { background: #C97532; }

/* Burger mobile */
.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    background: none;
    border: 1.5px solid #E0DBD2;
    border-radius: 5px;
    cursor: pointer;
    margin-left: auto;
    transition: border-color .18s;
}
.burger:hover { border-color: #C97532; }
.burger span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: #333;
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
}

/* Barre de navigation principale */
.nav {
    background: #fff;
    border-bottom: 2px solid #1A2B18;
}
.nav .wrap {
    display: flex;
    gap: 0;
    align-items: stretch;
}
.nav-item {
    padding: 11px 20px;
    color: #4A4036;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    transition: color .18s;
    position: relative;
    display: flex;
    align-items: center;
}
.nav-item::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #C97532;
    transform: scaleX(0);
    transition: transform .22s ease;
}
.nav-item:hover { color: #1A2B18; }
.nav-item:hover::after { transform: scaleX(1); }
.nav-item.current { color: #1A2B18; font-weight: 700; }
.nav-item.current::after { transform: scaleX(1); }

/* -- BTN --------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: #e8a317;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.btn:hover { background: #d4940f; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-cart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: #e8a317;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    margin: 16px 0;
}
.btn-cart:hover { background: #d4940f; }

/* -- SECTION ----------------------------------------------- */
.section { padding: 24px 0; }
.section-title {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e8a317;
    display: inline-block;
}
.section-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0;
}
.section-bar a { font-size: 13px; color: #e8a317; font-weight: 500; }
.section-bar a:hover { text-decoration: underline; }
.section-bar .section-title { margin-bottom: 16px; }

/* -- BANNER ------------------------------------------------ */
.banner {
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 0;
}
.banner-inner {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 32px 16px;
}
.banner-text { flex: 1; }
.banner-text h1 { font-size: 26px; font-weight: 700; color: #1b1b1b; margin-bottom: 10px; line-height: 1.3; }
.banner-text p { color: #555; font-size: 14px; margin-bottom: 18px; max-width: 480px; }
.banner-img {
    flex: 0 0 280px;
    height: 200px;
    background: #f5f5f5;
    border-radius: 6px;
    overflow: hidden;
}
.banner-img img { width: 100%; height: 100%; object-fit: contain; }

/* -- RAYONS (categories homepage) -------------------------- */
.rayons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.rayon {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 14px;
    transition: border-color .15s;
}
.rayon:hover { border-color: #e8a317; }
.rayon-img {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
    background: #f5f5f5;
    border-radius: 4px;
    overflow: hidden;
}
.rayon-img img { width: 100%; height: 100%; object-fit: contain; }
.rayon-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #ccc; font-size: 22px; }
.rayon-info strong { display: block; font-size: 14px; color: #222; }
.rayon-info span { font-size: 12px; color: #888; }

/* -- PRODUCT GRID ------------------------------------------ */
.pgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* -- PRODUCT CARD ------------------------------------------ */
.pcard {
    position: relative;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .15s;
}
.pcard:hover { border-color: #bbb; }
.pcard-img {
    display: block;
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f8f8f8;
}
.pcard-img img { width: 100%; height: 100%; object-fit: contain; }
.pcard-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #ddd; font-size: 32px; }
.pcard-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #e63946;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
}
.pcard-body { padding: 10px 12px 14px; flex: 1; display: flex; flex-direction: column; }
.pcard-name {
    font-size: 13px;
    font-weight: 500;
    color: #222;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    margin-bottom: 8px;
}
.pcard-name:hover { color: #e8a317; }
.pcard-name::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.pcard-price {
    margin-top: auto;
    font-size: 16px;
    font-weight: 700;
    color: #222;
}
.pcard-oldprice {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
    font-weight: 400;
    margin-right: 6px;
}

/* -- BREADCRUMB -------------------------------------------- */
.bc {
    font-size: 12px;
    color: #888;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.bc a { color: #555; }
.bc a:hover { color: #e8a317; }
.bc-current { color: #222; }

/* -- CATALOGUE LAYOUT -------------------------------------- */
.cat-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: start;
}
.sidebar { position: sticky; top: 12px; }
.sb-block {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 12px;
}
.sb-block h3 {
    font-size: 13px;
    font-weight: 700;
    color: #222;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.sb-list li + li { border-top: 1px solid #f0f0f0; }
.sb-list a {
    display: flex;
    justify-content: space-between;
    padding: 7px 8px;
    font-size: 13px;
    color: #444;
    border-radius: 3px;
    transition: background .1s;
}
.sb-list a:hover { background: #fdf6e3; }
.sb-list a.active { background: #fdf6e3; color: #b8860b; font-weight: 600; }
.sb-list a span { font-size: 11px; color: #999; }
.sb-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 8px;
    outline: none;
}
.sb-input:focus { border-color: #e8a317; }
.sb-block form { display: flex; gap: 6px; flex-wrap: wrap; }
.sb-block form .sb-input { flex: 1; margin-bottom: 0; }

.cat-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}
.cat-head h1 { font-size: 20px; font-weight: 700; color: #222; }
.cat-controls { display: flex; align-items: center; gap: 12px; }
.cat-count { font-size: 12px; color: #888; }
.cat-controls select {
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    outline: none;
    cursor: pointer;
}

.no-results {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-align: center;
    padding: 40px 20px;
    color: #888;
}
.no-results a { display: inline-block; margin-top: 10px; color: #e8a317; font-weight: 500; }
.no-results a:hover { text-decoration: underline; }

/* -- PAGINATION ------------------------------------------- */
.pagination-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
    padding: 16px 0;
}
.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 500;
    color: #2c3e50;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-decoration: none;
    transition: all .2s;
}
.page-link:hover {
    background: #f5f5f5;
    border-color: #bbb;
    color: #2c3e50;
}
.page-current {
    background: #2c3e50;
    color: #fff;
    border-color: #2c3e50;
    cursor: default;
}
.page-current:hover {
    background: #2c3e50;
    color: #fff;
    border-color: #2c3e50;
}
.page-dots {
    border: none;
    background: none;
    cursor: default;
    min-width: 24px;
}
.page-dots:hover {
    background: none;
    border: none;
}
.page-prev, .page-next {
    font-size: 12px;
}
@media (max-width: 600px) {
    .page-link { min-width: 34px; height: 34px; font-size: 13px; }
    .pagination-nav { gap: 4px; }
}

/* -- ERROR PAGES ------------------------------------------- */
.error-section {
    min-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}
.error-container { text-align: center; max-width: 560px; }
.error-illustration { margin-bottom: 20px; }
.error-illustration svg { width: 220px; height: auto; }
.error-code {
    font-size: 110px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -4px;
}
.error-code--amber { color: #e8a317; }
.error-code--red { color: #dc2626; }
.error-code--orange { color: #f59e0b; }
.error-title { font-size: 26px; font-weight: 700; color: #1b1b1b; margin: 8px 0 14px; }
.error-text { font-size: 15px; color: #777; line-height: 1.7; margin-bottom: 32px; }
.error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.error-actions .btn { padding: 13px 28px; font-size: 14px; font-weight: 600; border-radius: 8px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all .2s; }
.error-actions .btn-primary { background: #e8a317; color: #fff; }
.error-actions .btn-primary:hover { background: #d4930f; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(232,163,23,.3); }
.error-actions .btn-dark { background: #1b1b1b; color: #fff; }
.error-actions .btn-dark:hover { background: #333; transform: translateY(-1px); }
.error-actions .btn-outline { background: #fff; color: #1b1b1b; border: 2px solid #ddd; }
.error-actions .btn-outline:hover { border-color: #bbb; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
@keyframes errorPulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.error-pulse { animation: errorPulse 2s ease-in-out infinite; }
@media (max-width: 480px) {
    .error-code { font-size: 80px; }
    .error-title { font-size: 21px; }
    .error-illustration svg { width: 160px; }
    .error-actions .btn { padding: 11px 22px; font-size: 13px; }
}

/* -- PRODUCT PAGE ------------------------------------------ */
.product-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 24px;
}
.main-img {
    aspect-ratio: 4/3;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
}
.main-img img { width: 100%; height: 100%; object-fit: contain; }
.no-img { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #ddd; font-size: 48px; }
.thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.thumb {
    width: 60px;
    height: 45px;
    border: 2px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    background: #f8f8f8;
    padding: 0;
}
.thumb:hover, .thumb.sel { border-color: #e8a317; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-details h1 { font-size: 20px; font-weight: 700; color: #222; margin-bottom: 14px; line-height: 1.4; }
.product-cat {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    color: #e8a317;
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: 6px;
}
.product-price-box {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
    padding: 12px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.price-now { font-size: 24px; font-weight: 700; color: #222; }
.price-old { font-size: 15px; color: #999; text-decoration: line-through; }
.price-tag { background: #e63946; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 3px; }

.stock {
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}
.stock-ok { color: #16a34a; }
.stock-no { color: #dc2626; }

.product-metas {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: #777;
    margin-bottom: 18px;
}
.product-metas i { width: 16px; color: #bbb; text-align: center; }

.product-desc {
    border-top: 1px solid #eee;
    padding-top: 16px;
    margin-top: 8px;
}
.product-desc h2 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.product-desc p, .product-desc br + br { color: #555; font-size: 13px; line-height: 1.7; }

/* -- FOOTER ------------------------------------------------ */
.footer {
    background: #fff;
    color: #555;
    margin-top: 0;
    font-size: 13px;
    border-top: 1px solid #e5e7eb;
}
.footer-badges {
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
    padding: 22px 0;
}
.footer-badges-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.footer-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}
.footer-badge-icon {
    font-size: 22px;
    color: #C97532;
    flex-shrink: 0;
}
.footer-badge strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1b1b1b;
    line-height: 1.3;
}
.footer-badge span {
    font-size: 11.5px;
    color: #888;
}
.footer-cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 24px;
    padding: 36px 0 28px;
}
.footer-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1b1b1b;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #C97532;
    width: fit-content;
}
.footer-title i { color: #C97532; margin-right: 4px; }
.footer-col p { margin-bottom: 7px; line-height: 1.6; color: #555; }
.footer-col p i { width: 16px; color: #C97532; text-align: center; margin-right: 6px; }
.footer-col ul li + li { margin-top: 6px; }
.footer-col a { color: #555; text-decoration: none; transition: color .15s; }
.footer-col a:hover { color: #C97532; }
.footer-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #C97532;
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 12.5px;
    text-decoration: none !important;
}
.footer-contact-btn:hover { background: #b5672a; color: #fff !important; }
.footer-bottom {
    padding: 14px 0;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
    color: #888;
    background: #f8f9fa;
}

/* -- RESPONSIVE -------------------------------------------- */
@media (max-width: 1024px) {
    .pgrid { grid-template-columns: repeat(3, 1fr); }
    .footer-badges-inner { grid-template-columns: repeat(2, 1fr); }
    .footer-cols { grid-template-columns: repeat(2, 1fr); }
    .banner-img { flex: 0 0 220px; height: 160px; }
}

@media (max-width: 768px) {
    .header-top .wrap { font-size: 10.5px; gap: 12px; flex-wrap: wrap; }
    .burger { display: flex; }
    .header-search { display: none; }
    .nav {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 82%;
        max-width: 300px;
        height: 100vh;
        z-index: 9999;
        background: #1A2B18;
        border-bottom: none;
        transform: translateX(-100%);
        transition: transform .3s ease;
        overflow-y: auto;
        box-shadow: none;
    }
    .nav.open {
        transform: translateX(0);
        box-shadow: 8px 0 32px rgba(0,0,0,.4);
    }
    .nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 9998;
    }
    .nav-overlay.open { display: block; }
    .nav .wrap { flex-direction: column; padding-top: 20px; }
    .nav-item {
        padding: 14px 24px;
        border-top: 1px solid rgba(255,255,255,.07);
        font-size: 14px;
        color: rgba(255,255,255,.75);
        text-transform: none;
        letter-spacing: 0;
    }
    .nav-item::after { display: none; }
    .nav-item:hover { color: #fff; background: rgba(255,255,255,.05); }
    .nav-item.current { color: #C97532; background: rgba(201,117,50,.08); }
    .burger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .burger.active span:nth-child(2) { opacity: 0; }
    .burger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
    .banner-inner { flex-direction: column; gap: 20px; padding: 24px 16px; }
    .banner-img { flex: none; width: 100%; height: 180px; }
    .banner-text h1 { font-size: 22px; }
    .rayons { grid-template-columns: 1fr; }
    .pgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .cat-layout { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .product-page { grid-template-columns: 1fr; padding: 16px; gap: 20px; }
    .footer-badges-inner { grid-template-columns: 1fr; }
    .footer-cols { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .pgrid { grid-template-columns: 1fr; }
    .rayons { grid-template-columns: 1fr; }
    .banner-text h1 { font-size: 19px; }
    .cat-head { flex-direction: column; gap: 6px; }
}

/* -- SPECS TABLE ------------------------------------------- */
.specs-block {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}
.specs-block h2 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
}
.specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.specs-table tr { border-bottom: 1px solid #f0f0f0; }
.specs-table tr:last-child { border-bottom: none; }
.specs-table th {
    text-align: left;
    padding: 8px 12px 8px 0;
    color: #777;
    font-weight: 500;
    width: 40%;
    vertical-align: top;
    white-space: nowrap;
}
.specs-table td {
    padding: 8px 0;
    color: #222;
    font-weight: 500;
}
.specs-table tr:nth-child(even) { background: #fafafa; }
.specs-table tr:nth-child(even) th,
.specs-table tr:nth-child(even) td { padding-left: 8px; }
.specs-table tr:nth-child(odd) th { padding-left: 8px; }

/* ================================================================
   ECOMMERCE FLOW — Header Actions, Auth, Cart, Wishlist, Checkout,
   Account pages
   ================================================================ */

/* -- HEADER ACTIONS ---------------------------------------- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
    flex-shrink: 0;
}
.header-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    color: #4A4036;
    font-size: 16px;
    transition: background .18s, color .18s;
    position: relative;
}
.header-action:hover { background: #F5EDE0; color: #C97532; }
.header-action--cart { position: relative; }
.header-cart-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #C97532;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 15px;
    height: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}
.header-action--login {
    width: auto;
    padding: 0 14px;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    background: #1A2B18;
    color: #fff !important;
    border-radius: 5px;
    height: 36px;
    letter-spacing: .2px;
}
.header-action--login:hover { background: #C97532 !important; color: #fff !important; }
.header-login-text { font-size: 12.5px; }
.header-action--user {
    width: auto;
    padding: 0 10px;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    border-radius: 6px;
}
.header-action--user:hover { background: #F5EDE0; color: #C97532; }
.header-user-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-user-dropdown { position: relative; }
.header-user-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: #fff;
    border: 1.5px solid #EDEBE6;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,.1);
    min-width: 210px;
    z-index: 100;
    padding: 6px 0;
    overflow: hidden;
}
.header-user-menu.open { display: block; }
.header-user-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    font-size: 13px;
    color: #3A3028;
    transition: background .12s;
}
.header-user-menu a i { color: #C97532; width: 14px; text-align: center; }
.header-user-menu a:hover { background: #F5EDE0; color: #1A2B18; }
.header-user-menu__sep { height: 1px; background: #F0EBE2; margin: 4px 0; }
.header-user-menu__logout { color: #b91c1c !important; }
.header-user-menu__logout:hover { background: #fef2f2 !important; }
.header-user-menu__logout i { color: #b91c1c !important; }

/* -- PAGE HEAD -------------------------------------------- */
.page-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 0 20px;
    border-bottom: 2px solid #e8a317;
    margin-bottom: 24px;
}
.page-head h1 {
    font-size: 22px;
    font-weight: 700;
    color: #1b1b1b;
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-head h1 i { color: #e8a317; }
.page-head__count {
    font-size: 13px;
    color: #888;
    background: #f5f5f5;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 500;
}

/* -- AUTH PAGES ------------------------------------------- */
.auth-page {
    padding: 48px 0;
    background: #f8f7f5;
    min-height: 60vh;
}
.auth-card {
    max-width: 460px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e4e0d8;
    border-radius: 8px;
    padding: 36px;
}
.auth-header {
    text-align: center;
    margin-bottom: 28px;
}
.auth-header i { font-size: 36px; color: #e8a317; margin-bottom: 12px; display: block; }
.auth-header h1 { font-size: 22px; font-weight: 700; color: #1b1b1b; margin-bottom: 4px; }
.auth-header p { color: #888; font-size: 13px; }
.auth-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 10px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 5px;
}
.auth-field label i { color: #bbb; margin-right: 2px; }
.auth-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e0dbd2;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
    transition: border-color .15s;
}
.auth-field input:focus { border-color: #e8a317; }
.auth-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; }
.auth-check input { width: auto; }
.auth-btn {
    width: 100%;
    padding: 12px;
    background: #e8a317;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.auth-btn:hover { background: #d4940f; }
.auth-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: #888;
}
.auth-footer a { color: #e8a317; font-weight: 600; }
.auth-footer a:hover { text-decoration: underline; }

/* -- CART PAGE -------------------------------------------- */
.cart-page { padding: 0 0 48px; background: #f8f7f5; min-height: 60vh; }
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: 0; }
.cart-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e8e4dc;
    border-bottom: none;
}
.cart-item:first-child { border-radius: 6px 6px 0 0; }
.cart-item:last-child { border-bottom: 1px solid #e8e4dc; border-radius: 0 0 6px 6px; }
.cart-item:only-child { border-radius: 6px; border-bottom: 1px solid #e8e4dc; }
.cart-item__img { width: 80px; height: 60px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background: #f5f5f5; display: flex; align-items: center; justify-content: center; }
.cart-item__img img { width: 100%; height: 100%; object-fit: contain; }
.cart-item__noimg { color: #ddd; font-size: 24px; }
.cart-item__info { flex: 1; min-width: 0; }
.cart-item__name { font-size: 13px; font-weight: 600; color: #333; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-item__name:hover { color: #e8a317; }
.cart-item__cat { font-size: 11px; color: #999; display: block; }
.cart-item__unit { font-size: 12px; color: #888; }
.cart-item__qty { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.cart-qty-btn {
    width: 30px; height: 30px;
    border: 1px solid #e0dbd2;
    background: #f8f7f4;
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    transition: background .1s;
}
.cart-qty-btn:first-child { border-radius: 4px 0 0 4px; }
.cart-qty-btn:last-child { border-radius: 0 4px 4px 0; }
.cart-qty-btn:hover { background: #ede9e0; color: #e8a317; }
.cart-qty-btn:disabled { opacity: .4; cursor: not-allowed; }
.cart-qty-inp {
    width: 38px; height: 30px;
    border: 1px solid #e0dbd2;
    border-left: none;
    border-right: none;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    background: #fff;
    outline: none;
    -moz-appearance: textfield;
}
.cart-qty-inp::-webkit-outer-spin-button,
.cart-qty-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-item__total { font-size: 15px; font-weight: 700; color: #1b1b1b; white-space: nowrap; min-width: 80px; text-align: right; }
.cart-item__del {
    background: none;
    border: none;
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
    padding: 6px;
    transition: color .15s;
}
.cart-item__del:hover { color: #e63946; }

/* Cart Summary */
.cart-summary__card {
    background: #fff;
    border: 1px solid #e8e4dc;
    border-radius: 6px;
    padding: 20px;
}
.cart-summary__card h3 {
    font-size: 15px;
    font-weight: 700;
    color: #1b1b1b;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cart-summary__card h3 i { color: #e8a317; }
.cart-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    font-size: 13px;
    color: #333;
}
.cart-summary__row--muted { color: #999; font-size: 12px; }
.cart-summary__divider { height: 1px; background: #f0ece4; margin: 8px 0; }
.cart-summary__row--total { font-size: 16px; font-weight: 700; color: #1b1b1b; padding: 12px 0; }
.cart-summary__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    background: #e8a317;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-radius: 4px;
    margin-top: 16px;
    transition: background .15s;
}
.cart-summary__btn:hover { background: #d4940f; color: #fff; }
.cart-summary__continue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    font-size: 13px;
    color: #888;
    transition: color .15s;
}
.cart-summary__continue:hover { color: #e8a317; }
.cart-clear { margin-top: 12px; text-align: center; }
.cart-clear button {
    background: none;
    border: none;
    color: #ccc;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.cart-clear button:hover { color: #e63946; }

/* Cart Empty */
.cart-empty {
    text-align: center;
    padding: 64px 20px;
    background: #fff;
    border: 1px solid #e8e4dc;
    border-radius: 8px;
}
.cart-empty > i { font-size: 48px; color: #ddd; display: block; margin-bottom: 16px; }
.cart-empty h2 { font-size: 20px; font-weight: 700; color: #333; margin-bottom: 8px; }
.cart-empty p { color: #888; font-size: 14px; margin-bottom: 20px; }

/* -- WISHLIST PAGE --------------------------------------- */
.wishlist-page { padding: 0 0 48px; background: #f8f7f5; min-height: 60vh; }
.wishlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.wishlist-card {
    background: #fff;
    border: 1px solid #e8e4dc;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.wishlist-card__img { display: block; height: 180px; background: #f9f8f5; overflow: hidden; }
.wishlist-card__img img { width: 100%; height: 100%; object-fit: contain; }
.wishlist-card__noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: #ddd; font-size: 40px; }
.wishlist-card__body { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.wishlist-card__name { font-size: 13px; font-weight: 600; color: #333; }
.wishlist-card__name:hover { color: #e8a317; }
.wishlist-card__price { font-size: 14px; font-weight: 700; color: #1b1b1b; }
.wishlist-card__old { text-decoration: line-through; color: #bbb; font-weight: 400; font-size: 12px; margin-right: 6px; }
.wishlist-card__now { color: #e8a317; }
.wishlist-card__actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; }
.wishlist-card__remove {
    width: 36px;
    height: 36px;
    border: 1px solid #e0dbd2;
    border-radius: 4px;
    background: #fff;
    color: #ccc;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.wishlist-card__remove:hover { color: #e63946; border-color: #e63946; background: #fef2f2; }

/* -- CHECKOUT PAGES --------------------------------------- */
.checkout-page { padding: 0 0 48px; background: #f8f7f5; min-height: 60vh; }
.checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.checkout-main { background: #fff; border: 1px solid #e8e4dc; border-radius: 6px; padding: 24px; }
.checkout-title {
    font-size: 18px;
    font-weight: 700;
    color: #1b1b1b;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.checkout-title i { color: #e8a317; }
.checkout-subtitle { font-size: 14px; font-weight: 700; color: #333; margin-bottom: 12px; }
.checkout-section { margin-bottom: 24px; }
.checkout-or {
    text-align: center;
    position: relative;
    margin: 24px 0;
}
.checkout-or::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e8e4dc;
}
.checkout-or span {
    position: relative;
    background: #fff;
    padding: 0 16px;
    font-size: 12px;
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
}

/* Checkout Steps */
.checkout-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 24px 0;
    margin-bottom: 4px;
}
.checkout-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.checkout-step__num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e8e4dc;
    color: #999;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.checkout-step--active .checkout-step__num { background: #e8a317; color: #fff; }
.checkout-step--done .checkout-step__num { background: #16a34a; color: #fff; }
.checkout-step__label { font-size: 11px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: .5px; }
.checkout-step--active .checkout-step__label { color: #e8a317; }
.checkout-step--done .checkout-step__label { color: #16a34a; }
.checkout-step__line { width: 60px; height: 2px; background: #e8e4dc; margin: 0 8px; margin-bottom: 22px; }
.checkout-step__line--done { background: #16a34a; }

/* Checkout Form */
.checkout-form { display: flex; flex-direction: column; gap: 12px; }
.checkout-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkout-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
}
.checkout-field input,
.checkout-field textarea,
.checkout-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e0dbd2;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
}
.checkout-field input:focus,
.checkout-field textarea:focus { border-color: #e8a317; }
.checkout-field textarea { resize: vertical; }
.checkout-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    gap: 12px;
}
.checkout-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #888;
    font-weight: 500;
    transition: color .15s;
}
.checkout-back:hover { color: #e8a317; }

/* Address Grid */
.address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.address-card {
    border: 1.5px solid #e8e4dc;
    border-radius: 6px;
    padding: 16px;
    background: #faf9f6;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .15s;
}
.address-card:hover { border-color: #e8a317; }
.address-card__head { display: flex; align-items: center; justify-content: space-between; }
.address-card__head strong { font-size: 14px; color: #333; }
.address-card__default { font-size: 10px; background: #e8a317; color: #fff; padding: 2px 8px; border-radius: 3px; font-weight: 700; }
.address-card__body { font-size: 12px; color: #666; line-height: 1.6; flex: 1; }
.address-card__body p { margin: 0; }
.address-card .btn { margin-top: auto; }

/* Shipping Options */
.shipping-form { display: flex; flex-direction: column; gap: 12px; }
.shipping-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1.5px solid #e8e4dc;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.shipping-option:hover { border-color: #ccc; }
.shipping-option--selected { border-color: #e8a317; background: rgba(232,163,23,.04); }
.shipping-option input[type=radio] { display: none; }
.shipping-option__icon { width: 40px; height: 40px; background: #f5f3ee; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #e8a317; flex-shrink: 0; }
.shipping-option--selected .shipping-option__icon { background: #e8a317; color: #fff; }
.shipping-option__info { flex: 1; min-width: 0; }
.shipping-option__info strong { display: block; font-size: 14px; color: #333; margin-bottom: 2px; }
.shipping-option__info span { font-size: 12px; color: #888; }
.shipping-option__price { font-size: 16px; font-weight: 700; color: #1b1b1b; white-space: nowrap; flex-shrink: 0; }
.shipping-option__free { color: #16a34a; font-weight: 700; }

/* Payment Options */
.payment-options { display: flex; flex-direction: column; gap: 10px; }
.payment-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1.5px solid #e8e4dc;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s;
}
.payment-option:hover { border-color: #ccc; }
.payment-option--selected { border-color: #e8a317; background: rgba(232,163,23,.04); }
.payment-option input[type=radio] { display: none; }
.payment-option__icon { width: 36px; height: 36px; background: #f5f3ee; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #e8a317; flex-shrink: 0; }
.payment-option--selected .payment-option__icon { background: #e8a317; color: #fff; }
.payment-option__info { flex: 1; }
.payment-option__info strong { display: block; font-size: 13px; color: #333; margin-bottom: 1px; }
.payment-option__info span { font-size: 12px; color: #888; }
.btn-confirm { padding: 14px 28px; font-size: 15px; }

/* Checkout Recap */
.checkout-recap {
    background: #faf9f6;
    border: 1px solid #e8e4dc;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
}
.checkout-recap__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.checkout-recap__head strong { font-size: 13px; color: #333; display: flex; align-items: center; gap: 6px; }
.checkout-recap__head strong i { color: #e8a317; }
.checkout-recap__head a { font-size: 12px; color: #e8a317; font-weight: 600; }
.checkout-recap p { font-size: 13px; color: #666; margin: 0; line-height: 1.6; }

/* Checkout Order Summary Table */
.checkout-order-summary { margin-bottom: 24px; }
.checkout-order-summary h3 { font-size: 14px; font-weight: 700; color: #333; margin-bottom: 12px; }
.checkout-table { width: 100%; border-collapse: collapse; }
.checkout-table th { text-align: left; padding: 8px 12px; font-size: 11px; color: #999; font-weight: 600; text-transform: uppercase; border-bottom: 1px solid #e8e4dc; }
.checkout-table td { padding: 10px 12px; font-size: 13px; color: #333; border-bottom: 1px solid #f0ece4; }

/* Checkout Totals */
.checkout-totals { border-top: 1px solid #e8e4dc; padding-top: 12px; }
.checkout-totals__row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 13px; color: #666; }
.checkout-totals__row--grand { font-size: 17px; font-weight: 700; color: #1b1b1b; padding: 10px 0; border-top: 2px solid #e8a317; margin-top: 8px; }

/* Mini Cart Sidebar */
.checkout-sidebar { position: sticky; top: 16px; }
.mini-cart {
    background: #fff;
    border: 1px solid #e8e4dc;
    border-radius: 6px;
    padding: 20px;
}
.mini-cart h3 {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mini-cart h3 i { color: #e8a317; }
.mini-cart__item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f5f3ee; }
.mini-cart__img { width: 48px; height: 36px; background: #f5f3ee; border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mini-cart__img img { width: 100%; height: 100%; object-fit: contain; }
.mini-cart__img i { color: #ddd; font-size: 16px; }
.mini-cart__info { flex: 1; min-width: 0; }
.mini-cart__name { font-size: 12px; color: #333; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-cart__qty { font-size: 11px; color: #999; }
.mini-cart__total { display: flex; justify-content: space-between; padding-top: 12px; margin-top: 8px; border-top: 1px solid #e8e4dc; font-size: 14px; }
.mini-cart__total strong { color: #e8a317; font-weight: 700; }

/* -- SUCCESS PAGE ----------------------------------------- */
.success-card {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e8e4dc;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
}
.success-card__icon { font-size: 56px; color: #16a34a; margin-bottom: 16px; }
.success-card h1 { font-size: 24px; font-weight: 700; color: #1b1b1b; margin-bottom: 8px; }
.success-card__ref { font-size: 15px; color: #888; margin-bottom: 4px; }
.success-card__ref strong { color: #e8a317; }
.success-card p { font-size: 14px; color: #666; margin-bottom: 20px; }
.success-detail {
    background: #faf9f6;
    border: 1px solid #e8e4dc;
    border-radius: 6px;
    padding: 16px;
    margin: 20px 0;
    text-align: left;
}
.success-detail__row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: #555;
    border-bottom: 1px solid #f0ece4;
}
.success-detail__row:last-child { border-bottom: none; }
.success-items { text-align: left; margin: 16px 0; }
.success-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f0ece4;
    font-size: 13px;
}
.success-item__name { flex: 1; color: #333; font-weight: 500; }
.success-item__qty { color: #999; }
.success-item__price { font-weight: 700; color: #1b1b1b; }
.success-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.btn-outline-dark {
    background: transparent !important;
    color: #333 !important;
    border: 1.5px solid #d8d3c8;
}
.btn-outline-dark:hover { border-color: #e8a317; color: #e8a317 !important; background: rgba(232,163,23,.04) !important; }

/* -- ACCOUNT PAGES ---------------------------------------- */
.account-page { padding: 0 0 48px; background: #f8f7f5; min-height: 60vh; }
.account-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.account-sidebar { position: sticky; top: 16px; }
.account-user-card {
    background: #fff;
    border: 1px solid #e8e4dc;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    margin-bottom: 12px;
}
.account-user-card__avatar { font-size: 44px; color: #e8a317; margin-bottom: 8px; }
.account-user-card strong { display: block; font-size: 15px; color: #333; }
.account-user-card span { font-size: 12px; color: #999; }
.account-nav {
    background: #fff;
    border: 1px solid #e8e4dc;
    border-radius: 6px;
    overflow: hidden;
}
.account-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    border-bottom: 1px solid #f0ece4;
    transition: background .1s, color .1s;
}
.account-nav__item:last-child { border-bottom: none; }
.account-nav__item:hover { background: #f8f7f5; color: #e8a317; }
.account-nav__item--active { background: rgba(232,163,23,.06); color: #e8a317; font-weight: 700; border-left: 3px solid #e8a317; }
.account-nav__item--danger { color: #c0392b; }
.account-nav__item--danger:hover { background: #fef2f2; color: #c0392b; }
.account-nav__item i { width: 16px; text-align: center; }
.account-main {
    background: #fff;
    border: 1px solid #e8e4dc;
    border-radius: 6px;
    padding: 24px;
}
.account-main h2 {
    font-size: 17px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.account-main h2 i { color: #e8a317; }

/* Orders Table */
.orders-table-wrap { overflow-x: auto; }
.orders-table { width: 100%; border-collapse: collapse; }
.orders-table th { text-align: left; padding: 10px 12px; font-size: 11px; color: #999; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid #e8e4dc; }
.orders-table td { padding: 12px; font-size: 13px; color: #333; border-bottom: 1px solid #f0ece4; }
.orders-table tr:hover td { background: #faf9f6; }
.order-status {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.order-status--warning { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.order-status--info { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.order-status--success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.order-status--danger { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

/* Order Detail */
.order-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.order-detail-card {
    background: #fff;
    border: 1px solid #e8e4dc;
    border-radius: 6px;
    padding: 20px;
}
.order-detail-card h3 {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.order-detail-card h3 i { color: #e8a317; }
.order-detail-card p { font-size: 13px; color: #666; line-height: 1.6; margin: 0; }
.order-detail__row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: #555;
    border-bottom: 1px solid #f0ece4;
}
.order-detail__row:last-child { border-bottom: none; }

/* -- PRODUCT CARD HOVER ACTIONS --------------------------- */
.pcard-img { position: relative; }
.pcard-hover-actions {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s, transform .2s;
    z-index: 2;
}
.pcard:hover .pcard-hover-actions { opacity: 1; transform: translateY(0); }
.pcard-hover-form { display: inline; }
.pcard-hover-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition: transform .15s, background .15s;
}
.pcard-hover-btn:hover { transform: scale(1.1); }
.pcard-hover-btn--cart { background: #e8a317; color: #fff; }
.pcard-hover-btn--cart:hover { background: #d4940f; }
.pcard-hover-btn--wish { background: #fff; color: #e63946; }
.pcard-hover-btn--wish:hover { background: #fef2f2; }

/* ── Product card: firewood-specific ─── */
.pcard-cat {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #e8a317;
    font-weight: 600;
    margin-bottom: 4px;
}
.pcard-specs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #888;
    margin-bottom: 6px;
}
.pcard-specs span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.pcard-specs i { font-size: 10px; color: #b8860b; }
.pcard-cert {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(22, 163, 74, 0.9);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.pcard-cert i { font-size: 9px; }
.pcard-unit {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

/* -- RESPONSIVE ------------------------------------------- */
@media (max-width: 960px) {
    .cart-layout { grid-template-columns: 1fr; }
    .checkout-layout { grid-template-columns: 1fr; }
    .account-layout { grid-template-columns: 1fr; }
    .order-detail-grid { grid-template-columns: 1fr; }
    .header-login-text { display: none; }
}
@media (max-width: 768px) {
    .checkout-steps { gap: 0; }
    .checkout-step__line { width: 30px; margin: 0 4px; }
    .checkout-step__label { font-size: 10px; }
    .checkout-form__row { grid-template-columns: 1fr; }
    .auth-row { grid-template-columns: 1fr; }
    .header-user-name { display: none; }
}
@media (max-width: 480px) {
    .auth-card { padding: 24px 16px; }
    .checkout-main { padding: 16px; }
    .page-head { flex-wrap: wrap; }
    .page-head h1 { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   TOAST NOTIFICATION SYSTEM
   ═══════════════════════════════════════════════════════════════ */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: flex-start;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
    padding: 14px 16px;
    pointer-events: all;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    position: relative;
    overflow: hidden;
    border-left: 4px solid #999;
    min-width: 320px;
}
.toast--visible {
    transform: translateX(0);
    opacity: 1;
}
.toast--hiding {
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.3s ease-in, opacity 0.2s ease;
}
.toast--success { border-left-color: #22c55e; }
.toast--error { border-left-color: #ef4444; }
.toast--warning { border-left-color: #f59e0b; }
.toast--info { border-left-color: #3b82f6; }
.toast__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 12px;
    font-size: 14px;
    color: #fff;
}
.toast--success .toast__icon { background: #22c55e; }
.toast--error .toast__icon { background: #ef4444; }
.toast--warning .toast__icon { background: #f59e0b; }
.toast--info .toast__icon { background: #3b82f6; }
.toast__body {
    flex: 1;
    font-size: 13px;
    line-height: 1.5;
    color: #333;
    padding-top: 3px;
}
.toast__close {
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    font-size: 14px;
    padding: 2px 4px;
    margin-left: 8px;
    flex-shrink: 0;
    transition: color 0.2s;
}
.toast__close:hover { color: #333; }
.toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    border-radius: 0 0 8px 8px;
}
.toast--success .toast__progress { background: #22c55e; }
.toast--error .toast__progress { background: #ef4444; }
.toast--warning .toast__progress { background: #f59e0b; }
.toast--info .toast__progress { background: #3b82f6; }

/* ═══════════════════════════════════════════════════════════════
   STRIPE-LIKE CARD INPUT
   ═══════════════════════════════════════════════════════════════ */
.stripe-card-section {
    margin-top: 20px;
}
.stripe-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}
.stripe-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e0e0e0;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}
.stripe-card__brands {
    display: flex;
    gap: 6px;
    font-size: 22px;
    color: #999;
}
.stripe-card__brands i { opacity: 0.6; }
.stripe-card__field {
    position: relative;
    border-bottom: 1px solid #e0e0e0;
}
.stripe-card__field:last-child { border-bottom: none; }
.stripe-card__field input {
    width: 100%;
    border: none;
    padding: 14px 16px;
    font-size: 15px;
    font-family: 'Inter', monospace;
    color: #1b1b1b;
    outline: none;
    background: transparent;
    box-sizing: border-box;
}
.stripe-card__field input::placeholder { color: #aab7c4; }
.stripe-card__field input:focus { background: #f7f9fc; }
.stripe-card__field-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #aab7c4;
    font-size: 14px;
    pointer-events: none;
}
.stripe-card__row {
    display: flex;
}
.stripe-card__row .stripe-card__field {
    flex: 1;
    border-bottom: 1px solid #e0e0e0;
}
.stripe-card__row .stripe-card__field:first-child {
    border-right: 1px solid #e0e0e0;
}
.stripe-card__field--full { width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   VIREMENT INFO PANEL
   ═══════════════════════════════════════════════════════════════ */
.virement-info-section {
    margin-top: 20px;
}
.virement-info-card {
    background: #f0f7ff;
    border: 1px solid #bfe0ff;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
}
.virement-info-card__icon {
    font-size: 36px;
    color: #3b82f6;
    margin-bottom: 12px;
}
.virement-info-card h4 {
    margin: 0 0 8px;
    font-size: 16px;
    color: #1b1b1b;
}
.virement-info-card p {
    margin: 4px 0;
    font-size: 13px;
    color: #555;
}
.virement-info-card__note {
    margin-top: 16px;
    background: #fff;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 12px;
    color: #666;
    display: inline-block;
}
.virement-info-card__note i { color: #3b82f6; margin-right: 6px; }

/* Virement bank details (success page, order page) */
.virement-bank-details {
    background: #fff8e1;
    border: 1px solid #e8a317;
    border-radius: 8px;
    padding: 24px;
    margin-top: 24px;
}
.virement-bank-details h3 {
    margin: 0 0 16px;
    font-size: 16px;
    color: #e8a317;
}
.virement-bank-details__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.virement-bank-details__grid > div {
    background: #fff;
    border-radius: 6px;
    padding: 10px 14px;
}
.virement-bank-details__grid > div span {
    display: block;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.virement-bank-details__grid > div strong {
    font-size: 13px;
    color: #1b1b1b;
    word-break: break-all;
}
.virement-bank-details__note {
    margin-top: 16px;
    font-size: 13px;
    color: #555;
}
.virement-bank-details__note i { color: #e8a317; margin-right: 6px; }

/* ═══════════════════════════════════════════════════════════════
   FIELD-LEVEL ERRORS
   ═══════════════════════════════════════════════════════════════ */
.checkout-field--error input,
.checkout-field--error select,
.checkout-field--error textarea {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
}
.checkout-field--error input:focus,
.checkout-field--error select:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
}
.field-error {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #ef4444;
    font-weight: 500;
}
.field-error::before {
    content: '\f06a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 4px;
    font-size: 11px;
}
.required { color: #ef4444; }

/* Country select styling */
.checkout-field select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    background: #fff;
    color: #333;
    appearance: auto;
    cursor: pointer;
}
.checkout-field select:focus {
    border-color: #e8a317;
    outline: none;
    box-shadow: 0 0 0 3px rgba(232, 163, 23, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   FREE SHIPPING BANNER
   ═══════════════════════════════════════════════════════════════ */
.free-shipping-banner {
    background: #fffbe6;
    border: 1px solid #f5d060;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 24px;
    color: #8a6d00;
    display: flex;
    align-items: center;
    gap: 12px;
}
.free-shipping-banner i { font-size: 20px; color: #e8a317; flex-shrink: 0; }
.free-shipping-banner--achieved {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #065f46;
}
.free-shipping-banner--achieved i { color: #10b981; }
.fsb-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fsb-amount { font-size: 15px; font-weight: 700; line-height: 1.3; }
.fsb-label { font-size: 12px; opacity: .75; line-height: 1.3; }

/* Shipping old price (struck-through) */
.shipping-option__old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 12px;
    margin-left: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE HEAD ACTIONS
   ═══════════════════════════════════════════════════════════════ */
.page-head__actions {
    display: flex;
    gap: 10px;
    align-items: center;
}
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── Shipping options mobile ── */
@media (max-width: 520px) {
    .shipping-option { gap: 12px; padding: 14px 12px; flex-wrap: wrap; }
    .shipping-option__info strong { font-size: 13px; white-space: normal; word-break: break-word; }
    .shipping-option__price { font-size: 15px; margin-left: auto; }
    .checkout-nav .btn { font-size: 13px; padding: 10px 16px; }
}

@media (max-width: 600px) {
    .toast-container { right: 10px; left: 10px; max-width: 100%; }
    .toast { min-width: auto; }
    .stripe-card__row { flex-direction: column; }
    .stripe-card__row .stripe-card__field:first-child { border-right: none; }
    .virement-bank-details__grid { grid-template-columns: 1fr; }
    .page-head { flex-direction: column; align-items: flex-start; }
}

/* WhatsApp move to left */
.wa-float {
  left: 16px;
  right: auto;
  bottom: 16px;
}

/* Smartsupp stay on right */
#widgetButtonFrame {
  position: fixed;
  left: auto;
  right: 12px;
  bottom: 16px;
  z-index: 9998;
}

/* Smartsupp chat frame on right */
#chat-application-iframe {
  left: auto;
  right: 12px;
}

/* Mobile safe area */
@media (max-width: 768px) {
  .wa-float {
    left: max(12px, env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  #widgetButtonFrame {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}