:root {
    --dark: #14100d;
    --dark2: #211812;
    --brown: #4a2f1f;
    --gold: #d8a85d;
    --cream: #fff3df;
    --muted: #bda88f;
    --card: rgba(255, 246, 232, 0.92);
    --line: rgba(216, 168, 93, 0.28);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(216,168,93,.18), transparent 34%),
        linear-gradient(135deg, #16100c, #291b12 45%, #0f0d0c);
    color: var(--cream);
    min-height: 100vh;
}

/* Footer */
.site-footer {
    margin-top: 60px;
    padding: 40px 20px;
    background: linear-gradient(135deg, #140f0c, #2a1b12);
    border-top: 1px solid rgba(216,168,93,0.2);
    text-align: center;
}

.site-footer h3 {
    margin-bottom: 12px;
    color: #e8d8c0;
}

.site-footer p {
    margin: 4px 0;
    color: #e8d8c0;
}

/* WhatsApp floating button */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #25D366;
    color: white;
    padding: 14px 18px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 999;
    transition: transform 0.2s ease;
}

.whatsapp-float:hover {
    transform: scale(1.05);
}

/* WhatsApp order button */
.whatsapp-order-btn {
    display: inline-block;
    margin-top: 10px;
    background: #25D366;
    color: white;
    padding: 12px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
}
.noise {
    pointer-events: none;
    position: fixed;
    inset: 0;
    opacity: .08;
    background-image:
        linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,.05) 25%, transparent 25%);
    background-size: 7px 7px;
    z-index: 50;
}

.site-hero {
    min-height: 92vh;
    background:
        linear-gradient(90deg, rgba(13,10,8,.88), rgba(13,10,8,.36)),
        url('./picture24.jpg') center/cover no-repeat;
    position: relative;
    overflow: hidden;
    padding: 28px clamp(18px, 5vw, 70px);
}

.site-hero::after {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    right: -130px;
    top: 120px;
    background: radial-gradient(circle, rgba(216,168,93,.28), transparent 62%);
    animation: floatGlow 6s ease-in-out infinite alternate;
}

.nav {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nav a,
.back {
    color: var(--cream);
    text-decoration: none;
    border: 1px solid var(--line);
    padding: 11px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(12px);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    padding-top: 18vh;
}

.eyebrow {
    display: inline-flex;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 16px;
}

.eyebrow.dark {
    color: #9b642d;
}

h1 {
    font-size: clamp(42px, 7vw, 82px);
    line-height: .95;
    margin: 0 0 20px;
    letter-spacing: -0.06em;
}

.hero-content p {
    max-width: 610px;
    color: #ead7bd;
    font-size: 19px;
    line-height: 1.7;
}

.primary-link,
.btn,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0c77c, #ad6c2d);
    color: #1a100b;
    padding: 15px 22px;
    border: 0;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    font-weight: 900;
    box-shadow: 0 18px 38px rgba(216,168,93,.22);
    transition: transform .25s ease, box-shadow .25s ease;
}

.primary-link:hover,
button:hover,
.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px rgba(216,168,93,.33);
}

.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 54px 18px;
}

.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 34px;
}

.section-head h2 {
    font-size: clamp(34px, 4vw, 56px);
    margin: 0 0 10px;
    letter-spacing: -0.05em;
}

.section-head p {
    color: #d6c5ad;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.product-card {
    display: block;
    color: #23160f;
    text-decoration: none;
    border-radius: 30px;
    overflow: hidden;
    background: var(--card);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 25px 70px rgba(0,0,0,.28);
    transform: translateY(0);
    transition: transform .28s ease, box-shadow .28s ease;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 36px 80px rgba(0,0,0,.38);
}

.product-image {
    position: relative;
    overflow: hidden;
    height: 330px;
}

.product-image img,
.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.product-card:hover img {
    transform: scale(1.08);
}

.floating-badge,
.glass-chip {
    position: absolute;
    right: 18px;
    top: 18px;
    padding: 10px 14px;
    border-radius: 999px;
    color: var(--cream);
    background: rgba(20,16,13,.5);
    border: 1px solid rgba(255,255,255,.24);
    backdrop-filter: blur(12px);
    font-weight: 800;
}

.card-body {
    padding: 24px;
}

.card-body h2 {
    margin: 0 0 10px;
    font-size: 24px;
    letter-spacing: -0.03em;
}

.card-body p {
    color: #684c36;
    line-height: 1.55;
}

.card-foot {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(74,47,31,.14);
    padding-top: 18px;
    margin-top: 18px;
    font-weight: 900;
}

.product-wrap {
    padding-top: 28px;
}

.product-layout {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 30px;
    align-items: start;
}

.image-box,
.product-info,
.receipt,
table {
    background: rgba(255, 246, 232, .92);
    color: #21150e;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 34px;
    box-shadow: 0 26px 80px rgba(0,0,0,.34);
}

.pro-image {
    position: sticky;
    top: 22px;
    overflow: hidden;
    height: 650px;
    padding: 0;
}

.pro-image img {
    border-radius: 34px;
}

.glass-panel {
    padding: 34px;
}

.product-info h1 {
    color: #21150e;
    font-size: clamp(36px, 5vw, 60px);
}

.product-info p {
    color: #6a503b;
    line-height: 1.65;
}

.order-form {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

label {
    font-weight: 900;
    color: #2d1e15;
}

input,
select,
textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #e1c8a9;
    border-radius: 16px;
    background: rgba(255,255,255,.82);
    color: #21150e;
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #b97936;
    box-shadow: 0 0 0 4px rgba(216,168,93,.18);
}

textarea {
    min-height: 100px;
}

.premium-summary {
    background:
        linear-gradient(135deg, rgba(216,168,93,.20), rgba(255,255,255,.60));
    border: 1px solid rgba(173,108,45,.25);
    border-radius: 22px;
    padding: 18px;
}

.alert {
    padding: 16px;
    border-radius: 18px;
    margin: 14px 0;
}

.alert.error {
    background: #ffe5e5;
    color: #8b0000;
}

.alert.success {
    background: #e8ffe8;
    color: #075b16;
}

table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
}

th,
td {
    padding: 16px;
    border-bottom: 1px solid rgba(74,47,31,.12);
    text-align: left;
}

.receipt {
    padding: 34px;
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .75s ease, transform .75s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 { transition-delay: .05s; }
.delay-2 { transition-delay: .15s; }
.delay-3 { transition-delay: .25s; }

@keyframes floatGlow {
    from { transform: translateY(0) scale(1); opacity: .7; }
    to { transform: translateY(35px) scale(1.08); opacity: 1; }
}

@media (max-width: 900px) {
    .product-grid,
    .product-layout {
        grid-template-columns: 1fr;
    }

    .pro-image {
        position: relative;
        height: 430px;
    }

    .site-hero {
        min-height: 760px;
    }
}








/* Admin Orders Page */
.admin-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px}
.admin-top h1{margin-bottom:10px}
.admin-top p{color:#e2d0b8;max-width:680px}
.admin-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.secondary-btn{background:rgba(255,255,255,.08);color:#fff3df;border:1px solid rgba(216,168,93,.28);box-shadow:none}
.refresh-pill{display:inline-flex;align-items:center;padding:12px 15px;border-radius:999px;background:rgba(37,211,102,.16);color:#dcffe9;border:1px solid rgba(37,211,102,.35);font-weight:900}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:22px}
.stat-card{padding:22px;border-radius:24px;background:rgba(255,246,232,.92);color:#21150e;box-shadow:0 18px 50px rgba(0,0,0,.22)}
.stat-card span{display:block;color:#74543d;font-weight:800;margin-bottom:8px}
.stat-card strong{font-size:28px}
.admin-filter{display:grid;grid-template-columns:1fr 180px auto auto;gap:12px;margin-bottom:20px;background:rgba(255,246,232,.12);border:1px solid rgba(216,168,93,.18);padding:16px;border-radius:24px}
.table-shell{overflow-x:auto;border-radius:24px;box-shadow:0 24px 70px rgba(0,0,0,.26)}
.orders-table{min-width:1120px}
.orders-table th{background:#21150e;color:#fff3df;white-space:nowrap}
.orders-table td{vertical-align:top}
.orders-table small{color:#755943}
.empty-cell{text-align:center;padding:30px;font-weight:900}
.address-row td{background:rgba(216,168,93,.10);color:#4b3323;font-size:14px}
.status-pill{display:inline-flex;padding:8px 10px;border-radius:999px;font-size:12px;font-weight:900}
.status-pending{background:#fff3cd;color:#7a5200}
.status-paid{background:#d7ffe1;color:#12632a}
.status-failed{background:#ffe0e0;color:#8b0000}
.mini-whatsapp{display:inline-flex;padding:9px 12px;border-radius:999px;background:#25D366;color:white;text-decoration:none;font-weight:900;white-space:nowrap}
@media(max-width:850px){.admin-top{display:block}.admin-actions{justify-content:flex-start;margin-top:16px}.stats-grid,.admin-filter{grid-template-columns:1fr}}



/* Order Status Update */
.status-form {
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 170px;
}

.status-select {
    width: auto;
    min-width: 98px;
    padding: 8px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
}

.status-select.status-pending {
    background: #fff3cd;
    color: #7a5200;
}

.status-select.status-paid {
    background: #d7ffe1;
    color: #12632a;
}

.status-select.status-failed {
    background: #ffe0e0;
    color: #8b0000;
}

.mini-save {
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 12px;
    box-shadow: none;
}

.payment-choice {
    display: grid;
    gap: 10px;
    margin: 8px 0 16px;
}

.payment-choice label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(88, 55, 25, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
    cursor: pointer;
}

.paypal-box {
    margin-top: 18px;
    max-width: 420px;
}