*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#0a0a0f;--bg2:#12121a;--bg3:#1a1a26;
--text:#f0f0f5;--text2:#9898a8;--accent:#6c5ce7;--accent2:#a29bfe;
--success:#00b894;--error:#ff6b6b;--border:#2a2a3a;
--radius:12px;--shadow:0 4px 24px rgba(0,0,0,.4);
}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Marquee / announcement bar */
.marquee-bar{
overflow:hidden;
background:linear-gradient(90deg,#6c5ce7,#a29bfe);
color:#fff;
padding:10px 0;
font-size:.8rem;
font-weight:600;
letter-spacing:.03em;
border-bottom:1px solid rgba(255,255,255,.12);
}
.marquee-track{
display:flex;
align-items:center;
gap:40px;
width:max-content;
animation:marquee-scroll 28s linear infinite;
}
.marquee-item{
display:inline-flex;
align-items:center;
gap:10px;
white-space:nowrap;
flex-shrink:0;
}
.marquee-item .fa-circle{font-size:.35rem;opacity:.85}
@keyframes marquee-scroll{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
.hero-content .marquee-bar{
border-radius:var(--radius);
margin-bottom:24px;
border:1px solid var(--border);
}
.hero-content{text-align:center}
.hero-logo{
height:clamp(90px,22vw,150px);
width:auto;
max-width:min(100%,340px);
margin:0 auto 20px;
display:block;
object-fit:contain;
}
.hero-desc{color:var(--text2);margin-bottom:24px;font-size:1rem;max-width:520px;margin-left:auto;margin-right:auto}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(10,10,15,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
.logo{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.1rem;flex-shrink:0}
.logo-img{height:64px;width:auto;max-width:200px;display:block;object-fit:contain}
.footer-logo{height:48px;max-width:160px;margin-bottom:10px}
.cart-btn i{font-size:1.15rem}
.cart-btn{display:flex;align-items:center}
.category-card-icon{font-size:2rem;color:var(--accent2)}
.category-card-icon i{display:block}
.category-arrow i{font-size:.9rem;color:var(--accent)}
.product-placeholder i{font-size:2.5rem;opacity:.35;color:var(--text2)}
.product-placeholder.large i{font-size:4rem}
.product-placeholder.small i{font-size:1.5rem}
.product-meta i{margin-right:6px;color:var(--success)}
.empty-icon i{font-size:3rem;color:var(--text2);opacity:.5}
.success-icon i{font-size:3rem;color:var(--success)}
.upload-icon i{font-size:2rem;color:var(--text2)}
.cart-item-remove i{font-size:1rem}
.whatsapp-link i{font-size:1.1rem}
.main-nav{display:flex;gap:20px}
.main-nav a{color:var(--text2);font-size:.9rem;font-weight:500;transition:color .2s}
.main-nav a:hover{color:var(--text)}
@media(min-width:769px){
.main-nav .nav-cat{display:none}
}
.header-actions{display:flex;align-items:center;gap:12px}
.cart-btn{position:relative;padding:8px;color:var(--text)}
.cart-count{position:absolute;top:0;right:0;background:var(--accent);color:#fff;font-size:.65rem;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:.3s}

/* Hero */
.hero{background:linear-gradient(135deg,#1a1040 0%,#0a0a0f 60%);padding:48px 0 40px}
.hero-cats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.hero-cat-btn{padding:10px 20px;background:var(--accent);border-radius:50px;font-weight:600;font-size:.9rem;transition:transform .2s,background .2s}
.hero-cat-btn:hover{background:var(--accent2);transform:translateY(-2px)}

/* Sections */
.section-title{font-size:1.3rem;font-weight:700;margin-bottom:20px}
.categories-section,.products-section{padding:32px 0}
.page-header{padding:24px 0 8px}
.page-header h1{font-size:1.5rem;font-weight:700}
.page-desc{color:var(--text2);margin-top:4px}
.breadcrumb{display:flex;gap:8px;font-size:.85rem;color:var(--text2);margin-bottom:12px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--accent2)}

/* Category grid */
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.category-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:border-color .2s,transform .2s;position:relative}
.category-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.category-card-icon{font-size:2.5rem;margin-bottom:12px}
.category-card h3{font-size:1.1rem;margin-bottom:6px}
.category-card p{color:var(--text2);font-size:.85rem}
.category-arrow{position:absolute;top:20px;right:20px;color:var(--accent);font-size:1.2rem}

/* Product grid */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.product-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .2s,transform .2s}
.product-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.product-image{aspect-ratio:1;background:var(--bg3);display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-image img{width:100%;height:100%;object-fit:cover}
.product-placeholder{font-size:2.5rem;opacity:.4;display:flex;align-items:center;justify-content:center;height:100%}
.product-placeholder.small{font-size:1.5rem}
.product-placeholder.large{font-size:4rem;aspect-ratio:1}
.product-info{padding:12px}
.product-category{font-size:.7rem;color:var(--accent2);text-transform:uppercase;letter-spacing:.5px}
.product-info h3{font-size:.9rem;font-weight:600;margin:4px 0}
.product-price{color:var(--accent2);font-weight:700;font-size:.95rem}

/* Product detail */
.product-detail{padding:16px 0 40px}
.product-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.product-image-zoom{
display:block;width:100%;padding:0;border:none;background:none;cursor:zoom-in;
position:relative;border-radius:var(--radius);overflow:hidden;
}
.product-image-zoom:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.product-main-image{border-radius:var(--radius);width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .3s}
.product-image-zoom:hover .product-main-image{transform:scale(1.03)}
.zoom-hint{
position:absolute;bottom:12px;right:12px;
background:rgba(10,10,15,.75);color:#fff;
padding:8px 14px;border-radius:50px;font-size:.8rem;font-weight:600;
display:flex;align-items:center;gap:8px;pointer-events:none;
opacity:0;transition:opacity .25s;
}
.product-image-zoom:hover .zoom-hint{opacity:1}
.image-lightbox{
position:fixed;inset:0;z-index:9999;
display:none;align-items:center;justify-content:center;
padding:20px;
}
.image-lightbox.is-open{display:flex}
.lightbox-backdrop{
position:absolute;inset:0;background:rgba(0,0,0,.88);
backdrop-filter:blur(6px);cursor:zoom-out;
}
.lightbox-content{
position:relative;z-index:2;max-width:min(95vw,900px);max-height:90vh;
display:flex;align-items:center;justify-content:center;
}
.lightbox-content img{
max-width:100%;max-height:90vh;width:auto;height:auto;
object-fit:contain;border-radius:var(--radius);
box-shadow:0 8px 40px rgba(0,0,0,.5);
}
.lightbox-close{
position:absolute;top:16px;right:16px;z-index:3;
width:44px;height:44px;border:none;border-radius:50%;
background:rgba(255,255,255,.15);color:#fff;font-size:1.25rem;
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:background .2s;
}
.lightbox-close:hover{background:rgba(255,255,255,.25)}
body.lightbox-open{overflow:hidden}
.product-detail-info h1{font-size:1.5rem;margin:8px 0}
.product-price-large{font-size:1.8rem;font-weight:700;color:var(--accent2);margin:12px 0}
.product-description{color:var(--text2);margin-top:20px;margin-bottom:0;padding-top:20px;border-top:1px solid var(--border)}
.product-actions{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
.product-meta{margin-bottom:4px}
.qty-selector{display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.qty-btn,.qty-selector input{background:var(--bg3);border:none;color:var(--text);width:40px;height:44px;font-size:1.1rem;cursor:pointer;text-align:center}
.qty-selector input{width:50px;font-size:1rem}
.product-meta{display:flex;gap:16px;color:var(--text2);font-size:.85rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:8px;font-weight:600;font-size:.9rem;border:none;cursor:pointer;transition:all .2s;font-family:inherit}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2)}
.btn-whatsapp{background:#25d366;color:#fff;border:none;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.btn-whatsapp:hover{background:#20bd5a;color:#fff}
.btn-whatsapp i{font-size:1.2rem}
.payment-support{margin-top:20px;padding-top:20px;border-top:1px solid var(--border);text-align:center}
.payment-support p{color:var(--text2);font-size:.9rem;margin-bottom:12px}
.payment-success .btn-whatsapp{margin-top:16px}
.success-hint{color:var(--text2);font-size:.85rem;margin-top:12px}
.btn-lg{padding:14px 32px;font-size:1rem}
.btn-block{width:100%}
.btn-copy{background:var(--bg3);color:var(--text);border:1px solid var(--border);padding:8px 16px;border-radius:6px;font-size:.8rem;cursor:pointer;font-family:inherit}
.btn-copy:hover{border-color:var(--accent)}

/* Cart */
.cart-layout{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.cart-item{display:grid;grid-template-columns:60px 1fr auto auto auto;gap:12px;align-items:center;padding:16px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px}
.cart-item-image{width:60px;height:60px;border-radius:8px;overflow:hidden;background:var(--bg3)}
.cart-item-image img{width:100%;height:100%;object-fit:cover}
.cart-item-info h3{font-size:.9rem}
.cart-item-price{color:var(--text2);font-size:.8rem}
.cart-item-qty{display:flex;align-items:center;gap:4px}
.qty-value{min-width:24px;text-align:center;font-weight:600}
.cart-item-total{font-weight:700;white-space:nowrap}
.cart-item-remove{background:none;border:none;color:var(--error);font-size:1.4rem;cursor:pointer;padding:4px}
.cart-summary,.checkout-summary{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;position:sticky;top:80px}
.cart-summary h3,.checkout-summary h3{margin-bottom:16px;font-size:1rem}
.summary-row{display:flex;justify-content:space-between;padding:8px 0;font-size:.9rem}
.summary-row.total{font-weight:700;font-size:1.1rem;border-top:1px solid var(--border);margin-top:8px;padding-top:12px}
.summary-item{display:flex;justify-content:space-between;font-size:.85rem;padding:4px 0;color:var(--text2)}
.free-shipping{color:var(--success)}
.empty-state{text-align:center;padding:60px 20px}
.empty-icon{font-size:3rem;margin-bottom:16px}
.empty-state h2{margin-bottom:8px}
.empty-state p{color:var(--text2);margin-bottom:20px}

/* Checkout */
.checkout-steps{display:flex;gap:8px;margin-bottom:16px}
.step{padding:6px 14px;border-radius:20px;font-size:.8rem;background:var(--bg3);color:var(--text2)}
.step.active,.step.done{background:var(--accent);color:#fff}
.checkout-layout{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start;padding-bottom:40px}
.checkout-form{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.85rem;font-weight:500;margin-bottom:6px;color:var(--text2)}
.form-group input,.form-group textarea{width:100%;padding:12px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.95rem;font-family:inherit;transition:border-color .2s}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--accent)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Payment */
.payment-layout{display:grid;grid-template-columns:1fr 300px;gap:24px;padding-bottom:40px}
.payment-info{display:flex;flex-direction:column;gap:20px}
.iban-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.iban-box h3{margin-bottom:16px}
.iban-detail{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:.9rem;flex-wrap:wrap;gap:8px}
.iban-detail .label{color:var(--text2)}
.iban-number-row{align-items:center}
.iban-value{font-family:monospace;font-size:.95rem;word-break:break-all}
.amount-highlight{color:var(--success);font-weight:700;font-size:1.1rem}
.payment-instructions{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.payment-instructions ol{padding-left:20px}
.payment-instructions li{margin-bottom:8px;font-size:.9rem;color:var(--text2)}
.receipt-form{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.file-upload{position:relative;margin:12px 0 20px}
.file-upload input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer}
.file-upload label{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px;border:2px dashed var(--border);border-radius:var(--radius);cursor:pointer;transition:border-color .2s;text-align:center}
.file-upload label:hover{border-color:var(--accent)}
.upload-icon{font-size:2rem}
.file-upload small{color:var(--text2)}
.file-name{display:block;text-align:center;color:var(--accent2);font-size:.85rem;margin-top:8px}
.payment-success{text-align:center;padding:60px 20px;background:var(--bg2);border-radius:var(--radius);grid-column:1/-1}
.success-icon{font-size:3rem;color:var(--success);margin-bottom:16px}
.alert{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:.9rem}
.alert-error{background:rgba(255,107,107,.15);border:1px solid var(--error);color:var(--error)}
.alert-success{background:rgba(0,184,148,.15);border:1px solid var(--success);color:var(--success)}

/* Footer */
.site-footer{background:var(--bg2);border-top:1px solid var(--border);padding:40px 0 20px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:24px;margin-bottom:24px}
.footer-desc{color:var(--text2);font-size:.85rem;margin-top:8px}
.footer-links h4,.footer-contact h4{margin-bottom:12px;font-size:.9rem}
.footer-links a,.footer-contact a{display:block;color:var(--text2);font-size:.85rem;margin-bottom:6px}
.footer-links a:hover{color:var(--text)}
.whatsapp-link{display:flex!important;align-items:center;gap:8px;color:var(--success)!important}
.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid var(--border);color:var(--text2);font-size:.8rem}

/* WhatsApp floating button */
.whatsapp-float{
position:fixed;bottom:24px;right:20px;z-index:150;
width:56px;height:56px;border-radius:50%;
background:#25d366;color:#fff;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 20px rgba(37,211,102,.45);
transition:transform .2s,box-shadow .2s;
}
.whatsapp-float i{font-size:1.75rem}
.whatsapp-float:hover{
transform:scale(1.08);
box-shadow:0 6px 28px rgba(37,211,102,.55);
color:#fff;
}

/* Payment page header - mobile center */
.page-header--payment .payment-page-title{line-height:1.35}

/* Toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--bg3);border:1px solid var(--border);padding:12px 24px;border-radius:8px;font-size:.9rem;z-index:200;opacity:0;transition:all .3s;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* Mobile */
@media(max-width:768px){
.marquee-bar{font-size:.72rem;padding:8px 0}
.marquee-track{gap:28px;animation-duration:22s}
.hero-logo{height:clamp(72px,28vw,110px);margin-bottom:16px}
.hero-content .marquee-bar{margin-bottom:18px}
.header-inner{height:70px}
.logo-img{height:52px;max-width:160px}
.logo-text{font-size:1rem}
.footer-logo{height:44px;max-width:140px}
.page-header--category{text-align:center}
.page-header--category .breadcrumb{justify-content:center}
.page-header--category h1{font-size:1.35rem}
.page-header--category .page-desc{margin-left:auto;margin-right:auto;max-width:320px}
.page-header--payment{text-align:center}
.page-header--payment .checkout-steps{justify-content:center;flex-wrap:wrap}
.page-header--payment .payment-page-title{
text-align:center;
font-size:1.25rem;
max-width:100%;
}
.whatsapp-float{bottom:20px;right:16px;width:52px;height:52px}
.whatsapp-float i{font-size:1.6rem}
.main-nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--bg2);flex-direction:column;padding:16px;border-bottom:1px solid var(--border)}
.main-nav.open{display:flex}
.menu-toggle{display:flex}
.product-image-zoom .zoom-hint{opacity:1;font-size:.75rem;padding:6px 12px}
.lightbox-close{top:12px;right:12px}
.product-detail-grid,.cart-layout,.checkout-layout,.payment-layout{grid-template-columns:1fr}
.cart-item{grid-template-columns:50px 1fr;gap:8px}
.cart-item-qty,.cart-item-total,.cart-item-remove{grid-column:2}
.form-row{grid-template-columns:1fr}
.cart-summary,.checkout-summary{position:static}
}