/* ================================================
   DekorArt — Premium Catalog CSS
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --gold: #c9a84c;
    --gold-light: #e8c97a;
    --gold-dark: #9d7c2e;
    --dark: #0a0a0f;
    --dark2: #111120;
    --dark3: #16213e;
    --text: #2a2a2a;
    --text-light: #888;
    --white: #fff;
    --light: #f9f8f5;
    --border: #ede8df;
    --shadow: 0 4px 40px rgba(0,0,0,0.08);
    --shadow-hover: 0 20px 60px rgba(0,0,0,0.18);
    --radius: 14px;
    --t: all 0.4s cubic-bezier(0.4,0,0.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',sans-serif;color:var(--text);background:var(--white);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.container{max-width:1300px;margin:0 auto;padding:0 24px}

/* ================================================
   PAGE LOADER
   ================================================ */
#pageLoader {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--dark);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}
#pageLoader.loader-done { opacity: 0; visibility: hidden; }

.loader-inner { text-align: center; }
.loader-logo {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 5vw, 60px);
    font-weight: 700;
    color: var(--white);
    letter-spacing: 8px;
    text-transform: uppercase;
    margin-bottom: 50px;
    animation: loaderLogo 0.8s ease forwards;
}
.loader-logo span { color: var(--gold); }

.loader-bar-wrap {
    width: 280px;
    height: 1px;
    background: rgba(255,255,255,0.12);
    position: relative;
    margin: 0 auto 20px;
}
.loader-bar {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    background: var(--gold);
    width: 0;
    transition: width 0.1s ease;
    animation: loadBar 2.8s ease forwards;
}
@keyframes loadBar { 0%{width:0} 100%{width:100%} }

.loader-count-wrap { display: flex; justify-content: space-between; align-items: center; width: 280px; margin: 0 auto; }
.loader-count { font-size: 13px; color: rgba(255,255,255,0.4); letter-spacing: 2px; }
#loaderCount { font-size: 13px; color: var(--gold); letter-spacing: 1px; }
@keyframes loaderLogo { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ================================================
   SCROLL REVEAL ANIMATIONS
   ================================================ */
.will-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
                transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.will-reveal.revealed { opacity: 1; transform: translateY(0); }
.gallery-main-img { transition: opacity 0.2s ease; }

/* ================================================
   TOP BAR
   ================================================ */
.top-bar {
    background: var(--dark);
    color: rgba(255,255,255,0.7);
    padding: 9px 0;
    font-size: 12.5px;
    letter-spacing: 0.3px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.top-bar-inner { display:flex; justify-content:space-between; align-items:center; }
.top-bar-left a, .top-bar-right a {
    color: rgba(255,255,255,0.6);
    margin-right: 22px;
    transition: var(--t);
    font-size: 12.5px;
}
.top-bar-left a:hover,.top-bar-right a:hover { color: var(--gold); }
.top-bar-left a i,.top-bar-right a i { margin-right: 6px; color: var(--gold); font-size: 11px; }
.top-bar-right a { margin-right: 0; margin-left: 16px; font-size: 15px; }

/* ================================================
   HEADER
   ================================================ */
.main-header {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 0;
    position: sticky; top: 0; z-index: 1000;
    border-bottom: 1px solid transparent;
    transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}
.main-header.scrolled {
    box-shadow: 0 4px 30px rgba(0,0,0,0.1);
    border-bottom-color: var(--border);
}
.main-header.header-hidden { transform: translateY(-100%); }

.header-inner { display:flex; align-items:center; justify-content:space-between; height: 72px; }

.logo { display:flex; align-items:center; gap:12px; }
.logo-icon {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 19px;
    box-shadow: 0 4px 15px rgba(201,168,76,0.35);
    transition: var(--t);
}
.logo:hover .logo-icon { transform: rotate(-5deg) scale(1.05); }
.logo-text { display:flex; flex-direction:column; }
.logo-main { font-family:'Playfair Display',serif; font-size:21px; font-weight:700; color:var(--dark); line-height:1; }
.logo-sub { font-size:10px; color:var(--gold); letter-spacing:3px; text-transform:uppercase; font-weight:600; }

.main-nav ul { display:flex; align-items:center; gap:2px; }
.main-nav ul li { position:relative; }
.main-nav ul li a {
    padding: 10px 17px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    border-radius: 9px;
    transition: var(--t);
    display: flex; align-items: center; gap: 5px;
    letter-spacing: 0.2px;
}
.main-nav ul li a:hover,.main-nav ul li a.active { color:var(--gold); background:rgba(201,168,76,0.08); }
.main-nav ul li a.active { font-weight:600; }

/* Dropdown */
.has-dropdown:hover .dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown {
    position:absolute; top:calc(100% + 12px); left:0;
    background:white; min-width:230px;
    border-radius:14px;
    box-shadow:0 25px 70px rgba(0,0,0,0.15);
    opacity:0; visibility:hidden;
    transform:translateY(-8px);
    transition:var(--t);
    border:1px solid var(--border);
    overflow:hidden; z-index:100;
    padding: 6px 0;
}
.dropdown li a {
    padding:12px 22px !important;
    border-radius:0 !important;
    font-weight:400 !important;
    font-size:13.5px !important;
}
.dropdown li a:hover { padding-left:28px !important; background:var(--light) !important; }

.header-actions { display:flex; align-items:center; gap:12px; }
.btn-whatsapp {
    background: linear-gradient(135deg, #25D366, #1daa53);
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    transition: var(--t);
    display: flex; align-items: center; gap: 6px;
    box-shadow: 0 4px 15px rgba(37,211,102,0.3);
}
.btn-whatsapp:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(37,211,102,0.45); color:white; }

.burger-btn { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.burger-btn span { display:block; width:24px; height:2px; background:var(--dark); transition:var(--t); border-radius:2px; }

/* Mobile Nav */
.mobile-nav {
    position:fixed; top:0; right:-320px; width:300px; height:100vh;
    background:var(--dark2); z-index:2000;
    padding:80px 30px 30px;
    transition: right 0.4s cubic-bezier(0.4,0,0.2,1);
}
.mobile-nav.open { right:0; }
.mobile-nav ul li a {
    display:block; color:rgba(255,255,255,0.85); padding:14px 0;
    font-size:16px; border-bottom:1px solid rgba(255,255,255,0.08);
    transition:var(--t);
}
.mobile-nav ul li a:hover { color:var(--gold); padding-left:10px; }
.mobile-nav-close { position:absolute; top:25px; right:25px; background:none; border:none; color:white; font-size:22px; cursor:pointer; opacity:0.7; transition:var(--t); }
.mobile-nav-close:hover { opacity:1; transform:rotate(90deg); }
.overlay { position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:1999; opacity:0; visibility:hidden; transition:var(--t); backdrop-filter:blur(4px); }
.overlay.show { opacity:1; visibility:visible; }

/* ================================================
   HERO SLIDER
   ================================================ */
.hero-section { position:relative; }
.hero-swiper { width:100%; height:680px; }

.hero-slide {
    position:relative;
    background-size:cover;
    background-position:center;
    display:flex; align-items:center;
    overflow: hidden;
}
.hero-slide::before {
    content:'';
    position:absolute; inset:0;
    background: linear-gradient(105deg,
        rgba(10,10,15,0.88) 0%,
        rgba(10,10,15,0.5) 55%,
        rgba(10,10,15,0.15) 100%);
    z-index:1;
}

.hero-content {
    position:relative; z-index:2;
    max-width: 620px;
    padding: 0 90px;
    color: white;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s ease 0.2s, transform 0.9s cubic-bezier(0.4,0,0.2,1) 0.2s;
}
.hero-content.content-visible { opacity:1; transform:translateY(0); }

.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(201,168,76,0.15);
    border: 1px solid rgba(201,168,76,0.35);
    color: var(--gold-light);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 22px;
}
.hero-title {
    font-family:'Playfair Display',serif;
    font-size: clamp(38px, 5vw, 62px);
    font-weight: 700; line-height: 1.18;
    margin-bottom: 20px;
}
.hero-title span { color: var(--gold-light); font-style: italic; }
.hero-subtitle { font-size:16px; opacity:0.8; line-height:1.8; margin-bottom:38px; font-weight:300; max-width:480px; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; }

/* Hero scroll indicator */
.hero-scroll {
    position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%);
    z-index: 3; text-align: center; color: rgba(255,255,255,0.5);
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
    animation: bounce 2.5s infinite;
}
.hero-scroll i { display: block; font-size: 18px; margin-top: 6px; }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* Swiper custom */
.swiper-pagination-bullet { width:8px; height:8px; background:rgba(255,255,255,0.4); opacity:1; }
.swiper-pagination-bullet-active { background:var(--gold); width:30px; border-radius:4px; }
.swiper-button-next,.swiper-button-prev {
    width:52px; height:52px;
    background:rgba(255,255,255,0.1);
    backdrop-filter:blur(12px);
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.25);
    color:white !important;
    transition:var(--t);
}
.swiper-button-next:hover,.swiper-button-prev:hover { background:var(--gold); border-color:var(--gold); transform:scale(1.08); }
.swiper-button-next::after,.swiper-button-prev::after { font-size:15px !important; font-weight:700; }

/* Buttons */
.btn-gold {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: white; padding:15px 34px; border-radius:50px;
    font-size:13.5px; font-weight:600; transition:var(--t);
    display:inline-flex; align-items:center; gap:8px;
    border:none; cursor:pointer;
    box-shadow: 0 4px 20px rgba(201,168,76,0.35);
}
.btn-gold:hover { transform:translateY(-3px); box-shadow:0 15px 40px rgba(201,168,76,0.5); color:white; }

.btn-outline {
    background:transparent; color:white;
    padding:15px 34px; border-radius:50px;
    font-size:13.5px; font-weight:600;
    border:2px solid rgba(255,255,255,0.4);
    transition:var(--t);
    display:inline-flex; align-items:center; gap:8px;
}
.btn-outline:hover { background:white; color:var(--dark2); border-color:white; transform:translateY(-3px); }

/* ================================================
   SECTION STYLES
   ================================================ */
section { padding: 90px 0; }

.section-header { text-align:center; margin-bottom:60px; }
.section-tag {
    display:inline-flex; align-items:center; gap:10px;
    color:var(--gold); font-size:11px; font-weight:700;
    letter-spacing:4px; text-transform:uppercase; margin-bottom:14px;
}
.section-tag::before,.section-tag::after { content:''; width:32px; height:1px; background:var(--gold); }

.section-title {
    font-family:'Playfair Display',serif;
    font-size: clamp(30px, 4vw, 48px);
    font-weight:700; color:var(--dark); margin-bottom:16px; line-height:1.2;
}
.section-desc { color:var(--text-light); font-size:16px; max-width:580px; margin:0 auto; line-height:1.85; }

/* ================================================
   FEATURES / STATS
   ================================================ */
.features-section {
    background: linear-gradient(135deg, var(--dark) 0%, var(--dark2) 100%);
    color: white; padding: 80px 0;
    position: relative; overflow: hidden;
}
.features-section::before {
    content:''; position:absolute; top:-100px; right:-100px;
    width:400px; height:400px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(201,168,76,0.08) 0%, transparent 70%);
}
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:45px; }
.feature-item { text-align:center; }
.feature-icon {
    width:72px; height:72px;
    background:rgba(201,168,76,0.1);
    border:1px solid rgba(201,168,76,0.25);
    border-radius:20px;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 20px;
    font-size:28px; color:var(--gold-light);
    transition:var(--t);
}
.feature-item:hover .feature-icon { background:var(--gold); color:white; transform:translateY(-5px) rotate(5deg); box-shadow:0 15px 35px rgba(201,168,76,0.4); }
.feature-title { font-family:'Playfair Display',serif; font-size:18px; font-weight:600; margin-bottom:9px; }
.feature-desc { font-size:13.5px; opacity:0.65; line-height:1.7; }

/* ================================================
   CATEGORIES
   ================================================ */
.categories-section { background:var(--light); }
.categories-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }

.category-card {
    position:relative; border-radius:var(--radius);
    overflow:hidden; height:320px; cursor:pointer;
    box-shadow:var(--shadow);
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1), box-shadow 0.5s ease;
}
.category-card:hover { transform:translateY(-10px); box-shadow:var(--shadow-hover); }

.category-card img {
    width:100%; height:100%; object-fit:cover;
    transition:transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.category-card:hover img { transform:scale(1.1); }

.cat-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(10,10,15,0.92) 0%, rgba(10,10,15,0.3) 55%, transparent 100%);
    display:flex; flex-direction:column; justify-content:flex-end; padding:26px;
    transition: background 0.4s ease;
}
.category-card:hover .cat-overlay { background:linear-gradient(to top, rgba(10,10,15,0.96) 0%, rgba(10,10,15,0.5) 65%, rgba(10,10,15,0.1) 100%); }

.cat-icon {
    width:42px; height:42px;
    background:rgba(201,168,76,0.2);
    border:1px solid rgba(201,168,76,0.4);
    border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-light); font-size:18px; margin-bottom:12px;
    transition:var(--t);
}
.category-card:hover .cat-icon { background:var(--gold); border-color:var(--gold); color:white; }
.cat-name { font-family:'Playfair Display',serif; color:white; font-size:21px; font-weight:600; margin-bottom:5px; }
.cat-count { color:var(--gold-light); font-size:12.5px; letter-spacing:1px; }

.category-card.no-img { background:linear-gradient(135deg,var(--dark2),var(--dark3)); }
.category-card.no-img .cat-overlay { background:none; justify-content:center; align-items:center; text-align:center; }
.category-card.no-img .cat-icon { width:60px; height:60px; font-size:26px; margin:0 auto 15px; }

/* ================================================
   PRODUCT CARDS
   ================================================ */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:28px; }

.product-card {
    background:white; border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--border);
    transition: transform 0.45s cubic-bezier(0.4,0,0.2,1), box-shadow 0.45s ease, border-color 0.3s ease;
}
.product-card:hover { transform:translateY(-10px); box-shadow:var(--shadow-hover); border-color:rgba(201,168,76,0.3); }

.product-img-wrap {
    position:relative; padding-top:72%; overflow:hidden;
    background:var(--light);
}
.product-img-wrap img {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover;
    transition:transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.product-card:hover .product-img-wrap img { transform:scale(1.08); }

/* Image overlay on hover */
.product-img-overlay {
    position:absolute; inset:0;
    background:rgba(10,10,15,0);
    transition:background 0.4s ease;
    display:flex; align-items:center; justify-content:center;
    gap: 10px;
}
.product-card:hover .product-img-overlay { background:rgba(10,10,15,0.4); }

.product-img-placeholder {
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:var(--border); font-size:42px; gap:10px;
}
.product-img-placeholder span { font-size:12px; letter-spacing:1px; }

.product-badges { position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:5px; z-index:2; }
.badge { padding:4px 11px; border-radius:20px; font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.badge-new { background:var(--gold); color:white; }
.badge-sale { background:#e53e3e; color:white; }

/* Quick action buttons on hover */
.product-actions {
    position:absolute; top:12px; right:12px;
    display:flex; flex-direction:column; gap:8px;
    opacity:0; transform:translateX(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index:2;
}
.product-card:hover .product-actions { opacity:1; transform:translateX(0); }
.action-btn {
    width:38px; height:38px; background:white;
    border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    color:var(--text); font-size:15px;
    box-shadow:0 4px 15px rgba(0,0,0,0.15);
    transition:var(--t);
}
.action-btn:hover { background:var(--gold); color:white; transform:scale(1.1); }

/* Center button on hover */
.product-overlay-btn {
    background:white;
    color:var(--dark);
    padding:10px 22px;
    border-radius:50px;
    font-size:12.5px;
    font-weight:600;
    display:flex; align-items:center; gap:6px;
    transform:translateY(15px);
    opacity:0;
    transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;
    white-space:nowrap;
}
.product-card:hover .product-overlay-btn { opacity:1; transform:translateY(0); }
.product-overlay-btn:hover { background:var(--gold); color:white; }

.product-info { padding:20px 22px 22px; }
.product-cat { font-size:10.5px; color:var(--gold); text-transform:uppercase; letter-spacing:2.5px; font-weight:700; margin-bottom:7px; }
.product-name {
    font-family:'Playfair Display',serif;
    font-size:18px; font-weight:600; color:var(--dark);
    margin-bottom:8px; line-height:1.4;
    transition:color 0.3s ease;
}
.product-card:hover .product-name { color:var(--gold-dark); }
.product-desc { font-size:13px; color:var(--text-light); line-height:1.65; margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.product-footer {
    display:flex; align-items:center; justify-content:space-between;
    border-top:1px solid var(--border); padding-top:16px;
}
.price-wrap { display:flex; flex-direction:column; }
.price { font-size:22px; font-weight:700; color:var(--dark); font-family:'Playfair Display',serif; }
.price span { font-size:13px; font-weight:400; color:var(--text-light); font-family:'Inter',sans-serif; }
.old-price { font-size:12.5px; color:var(--text-light); text-decoration:line-through; }

.btn-detail {
    background:var(--dark); color:white;
    padding:10px 18px; border-radius:9px;
    font-size:12.5px; font-weight:600;
    transition:var(--t);
    display:flex; align-items:center; gap:6px;
}
.btn-detail:hover { background:var(--gold); color:white; transform:translateX(3px); }

/* ================================================
   PRODUCT DETAIL
   ================================================ */
.product-detail-section { padding:60px 0; }
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-light); margin-bottom:44px; flex-wrap:wrap; }
.breadcrumb a { color:var(--text-light); transition:color 0.3s; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb i { font-size:10px; opacity:0.5; }

.product-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:65px; align-items:start; }

.product-gallery-main { border-radius:var(--radius); overflow:hidden; aspect-ratio:1; background:var(--light); }
.product-gallery-main img { width:100%; height:100%; object-fit:cover; }
.product-gallery-thumbs { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.thumb-item { width:82px; height:82px; border-radius:9px; overflow:hidden; cursor:pointer; border:2px solid transparent; transition:var(--t); }
.thumb-item.active,.thumb-item:hover { border-color:var(--gold); }
.thumb-item img { width:100%; height:100%; object-fit:cover; }

.product-detail-info { padding-top:8px; }
.detail-cat { color:var(--gold); font-size:11px; text-transform:uppercase; letter-spacing:3px; font-weight:700; margin-bottom:12px; }
.detail-title { font-family:'Playfair Display',serif; font-size: clamp(26px,3vw,40px); font-weight:700; color:var(--dark); line-height:1.3; margin-bottom:22px; }
.detail-price { font-family:'Playfair Display',serif; font-size:42px; font-weight:700; color:var(--dark); margin-bottom:28px; }
.detail-price span { font-size:18px; color:var(--text-light); font-weight:400; font-family:'Inter',sans-serif; }
.detail-desc { font-size:15px; color:var(--text-light); line-height:1.85; margin-bottom:32px; border-bottom:1px solid var(--border); padding-bottom:30px; }
.detail-actions { display:flex; gap:14px; flex-wrap:wrap; }
.btn-contact {
    flex:1; background:linear-gradient(135deg,var(--gold),var(--gold-dark));
    color:white; padding:16px 28px; border-radius:12px;
    font-size:15px; font-weight:600;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:var(--t); border:none; cursor:pointer;
}
.btn-contact:hover { transform:translateY(-3px); box-shadow:0 15px 40px rgba(201,168,76,0.4); color:white; }
.btn-wa {
    background:#25D366; color:white;
    padding:16px 28px; border-radius:12px;
    font-size:15px; font-weight:600;
    display:flex; align-items:center; gap:8px;
    transition:var(--t);
}
.btn-wa:hover { background:#20ba58; transform:translateY(-3px); box-shadow:0 15px 40px rgba(37,211,102,0.4); color:white; }

/* ================================================
   CATALOG
   ================================================ */
.catalog-header-section {
    background:linear-gradient(135deg, var(--dark), var(--dark2));
    padding:65px 0; color:white; text-align:center;
    position:relative; overflow:hidden;
}
.catalog-header-section::after {
    content:''; position:absolute; bottom:0; left:0; right:0;
    height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.catalog-header-section h1 { font-family:'Playfair Display',serif; font-size: clamp(32px,5vw,52px); margin-bottom:12px; }
.catalog-header-section p { opacity:0.6; font-size:16px; }

.catalog-section { padding:60px 0; }
.catalog-layout { display:grid; grid-template-columns:270px 1fr; gap:35px; }

.sidebar-box { background:white; border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; margin-bottom:18px; }
.sidebar-box-title { background:var(--dark2); color:white; padding:14px 20px; font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; display:flex; align-items:center; gap:8px; }
.sidebar-box-title i { color:var(--gold); }
.sidebar-list { padding:6px 0; }
.sidebar-list li a {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 20px; font-size:13.5px; color:var(--text);
    transition:var(--t); border-left:3px solid transparent;
}
.sidebar-list li a:hover,.sidebar-list li a.active { color:var(--gold); background:rgba(201,168,76,0.05); border-left-color:var(--gold); padding-left:24px; }
.sidebar-list li a .count { background:var(--light); padding:2px 8px; border-radius:20px; font-size:11px; color:var(--text-light); }

.catalog-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:12px; }
.results-count { font-size:13.5px; color:var(--text-light); }
.results-count strong { color:var(--dark); }
.sort-select { padding:9px 16px; border:1px solid var(--border); border-radius:9px; font-size:13px; color:var(--text); background:white; cursor:pointer; outline:none; transition:border-color 0.3s; }
.sort-select:focus { border-color:var(--gold); }

.pagination { display:flex; justify-content:center; gap:8px; margin-top:55px; flex-wrap:wrap; }
.pagination a,.pagination span { width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:9px; font-size:14px; font-weight:500; border:1px solid var(--border); color:var(--text); transition:var(--t); }
.pagination a:hover,.pagination span.current { background:var(--gold); color:white; border-color:var(--gold); transform:translateY(-2px); }

/* ================================================
   CONTACT
   ================================================ */
.contact-section { padding:85px 0; }
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:55px; }
.contact-info h2 { font-family:'Playfair Display',serif; font-size:34px; color:var(--dark); margin-bottom:16px; }
.contact-info p { color:var(--text-light); line-height:1.85; margin-bottom:36px; }
.contact-items { display:flex; flex-direction:column; gap:22px; }
.contact-item { display:flex; gap:16px; align-items:flex-start; }
.ci-icon { width:48px; height:48px; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); border-radius:13px; display:flex; align-items:center; justify-content:center; color:white; font-size:18px; flex-shrink:0; }
.ci-text h5 { font-size:11px; color:var(--gold); text-transform:uppercase; letter-spacing:2px; margin-bottom:4px; font-weight:700; }
.ci-text p { font-size:15px; color:var(--text); font-weight:500; }

.contact-form-wrap { background:white; border-radius:20px; padding:44px; box-shadow:var(--shadow); border:1px solid var(--border); }
.contact-form-wrap h3 { font-family:'Playfair Display',serif; font-size:28px; color:var(--dark); margin-bottom:28px; }
.form-group { margin-bottom:22px; }
.form-group label { display:block; font-size:12px; font-weight:700; color:var(--dark); margin-bottom:7px; text-transform:uppercase; letter-spacing:1.5px; }
.form-control { width:100%; padding:13px 18px; border:2px solid var(--border); border-radius:11px; font-size:14px; font-family:'Inter',sans-serif; color:var(--text); background:var(--light); transition:var(--t); outline:none; }
.form-control:focus { border-color:var(--gold); background:white; box-shadow:0 0 0 4px rgba(201,168,76,0.1); }
textarea.form-control { resize:vertical; min-height:130px; }

/* ================================================
   FOOTER
   ================================================ */
.main-footer { background:var(--dark); color:rgba(255,255,255,0.7); }
.footer-top { padding:75px 0 55px; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:42px; }
.footer-logo { display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.footer-logo i { color:var(--gold); font-size:22px; }
.footer-logo span { font-family:'Playfair Display',serif; font-size:24px; font-weight:700; color:white; }
.footer-about p { font-size:14px; line-height:1.85; margin-bottom:26px; }
.footer-social { display:flex; gap:12px; }
.footer-social a {
    width:40px; height:40px;
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    font-size:15px; transition:var(--t);
}
.footer-social a:hover { background:var(--gold); border-color:var(--gold); color:white; transform:translateY(-4px); }
.footer-col h4 { color:white; font-size:12px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:22px; position:relative; padding-bottom:12px; }
.footer-col h4::after { content:''; position:absolute; bottom:0; left:0; width:28px; height:2px; background:var(--gold); }
.footer-col ul li { margin-bottom:11px; }
.footer-col ul li a { color:rgba(255,255,255,0.6); font-size:14px; transition:var(--t); display:flex; align-items:center; gap:6px; }
.footer-col ul li a:hover { color:var(--gold); padding-left:5px; }
.footer-col ul li a i { font-size:10px; color:var(--gold); }
.contact-list li { display:flex; gap:12px; margin-bottom:14px; font-size:14px; align-items:flex-start; }
.contact-list li i { color:var(--gold); margin-top:2px; font-size:14px; flex-shrink:0; }
.contact-list li a { color:rgba(255,255,255,0.6); transition:color 0.3s; }
.contact-list li a:hover { color:var(--gold); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.07); padding:22px 0; text-align:center; font-size:13px; color:rgba(255,255,255,0.35); }

/* ================================================
   ADMIN PANEL
   ================================================ */
.admin-login-page { min-height:100vh; background:linear-gradient(135deg,var(--dark2),var(--dark3)); display:flex; align-items:center; justify-content:center; padding:20px; }
.login-box { background:white; border-radius:22px; padding:52px 48px; width:100%; max-width:420px; box-shadow:0 40px 100px rgba(0,0,0,0.5); }
.login-logo { text-align:center; margin-bottom:36px; }
.login-logo i { font-size:40px; color:var(--gold); display:block; margin-bottom:12px; }
.login-logo h2 { font-family:'Playfair Display',serif; font-size:26px; color:var(--dark); }
.login-logo p { color:var(--text-light); font-size:14px; }
.alert { padding:12px 18px; border-radius:11px; font-size:14px; margin-bottom:20px; display:flex; align-items:center; gap:8px; }
.alert-error { background:#fff0f0; color:#e53e3e; border:1px solid #feb2b2; }
.alert-success { background:#f0fff4; color:#276749; border:1px solid #9ae6b4; }

/* Admin Layout */
.admin-layout { display:flex; min-height:100vh; }
.admin-sidebar { width:260px; background:var(--dark2); color:white; flex-shrink:0; display:flex; flex-direction:column; }
.admin-sidebar-logo { padding:25px 25px 20px; border-bottom:1px solid rgba(255,255,255,0.08); }
.admin-nav { padding:15px 0; flex:1; }
.admin-nav-title { padding:14px 25px 6px; font-size:10px; color:rgba(255,255,255,0.3); text-transform:uppercase; letter-spacing:2px; font-weight:700; }
.admin-nav a { display:flex; align-items:center; gap:12px; padding:12px 25px; color:rgba(255,255,255,0.65); font-size:14px; transition:var(--t); border-left:3px solid transparent; }
.admin-nav a:hover,.admin-nav a.active { color:white; background:rgba(255,255,255,0.07); border-left-color:var(--gold); }
.admin-nav a i { width:20px; text-align:center; color:var(--gold); opacity:0.8; }
.admin-main { flex:1; background:#f5f6fa; overflow-x:hidden; }
.admin-topbar { background:white; padding:0 30px; height:65px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 2px 12px rgba(0,0,0,0.05); border-bottom:1px solid var(--border); }
.admin-topbar h1 { font-size:19px; color:var(--dark); font-weight:600; }
.admin-user { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text); }
.admin-avatar { width:36px; height:36px; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:15px; }
.admin-content { padding:30px; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-bottom:28px; }
.stat-card { background:white; border-radius:var(--radius); padding:25px; box-shadow:0 2px 12px rgba(0,0,0,0.05); border:1px solid var(--border); display:flex; gap:18px; align-items:center; transition:var(--t); }
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.stat-icon { width:56px; height:56px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.si-gold{background:rgba(201,168,76,0.12);color:var(--gold)}
.si-blue{background:rgba(66,153,225,0.12);color:#4299e1}
.si-green{background:rgba(72,187,120,0.12);color:#48bb78}
.si-red{background:rgba(229,62,62,0.12);color:#e53e3e}
.stat-info h3{font-size:30px;font-weight:700;color:var(--dark)}
.stat-info p{font-size:13px;color:var(--text-light)}
.admin-card{background:white;border-radius:var(--radius);box-shadow:0 2px 12px rgba(0,0,0,0.05);border:1px solid var(--border);margin-bottom:24px}
.admin-card-header{padding:18px 25px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.admin-card-header h3{font-size:15px;font-weight:600;color:var(--dark);display:flex;align-items:center;gap:8px}
.admin-card-header h3 i{color:var(--gold)}
.admin-card-body{padding:25px}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th{text-align:left;padding:10px 16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-light);border-bottom:2px solid var(--border);background:var(--light)}
.admin-table td{padding:14px 16px;font-size:14px;color:var(--text);border-bottom:1px solid var(--border);vertical-align:middle}
.admin-table tr:hover td{background:rgba(201,168,76,0.03)}
.admin-table img{width:55px;height:55px;object-fit:cover;border-radius:9px}
.table-actions{display:flex;gap:8px}
.btn-sm{padding:6px 14px;border-radius:8px;font-size:12px;font-weight:600;transition:var(--t);border:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.btn-edit{background:rgba(66,153,225,0.1);color:#4299e1}
.btn-edit:hover{background:#4299e1;color:white}
.btn-delete{background:rgba(229,62,62,0.1);color:#e53e3e}
.btn-delete:hover{background:#e53e3e;color:white}
.btn-primary{background:var(--gold);color:white;padding:10px 22px;border-radius:10px;font-size:14px;font-weight:600;border:none;cursor:pointer;transition:var(--t);display:inline-flex;align-items:center;gap:7px}
.btn-primary:hover{background:var(--gold-dark);transform:translateY(-2px);box-shadow:0 8px 25px rgba(201,168,76,0.4)}
.btn-secondary{background:var(--light);color:var(--text);padding:10px 22px;border-radius:10px;font-size:14px;font-weight:600;border:1px solid var(--border);cursor:pointer;transition:var(--t);display:inline-flex;align-items:center;gap:7px}
.btn-secondary:hover{background:var(--dark2);color:white}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-check{display:flex;align-items:center;gap:8px}
.form-check input{width:16px;height:16px;accent-color:var(--gold);cursor:pointer}
.form-check label{font-size:14px;color:var(--text);cursor:pointer}
.badge-active{background:rgba(72,187,120,0.1);color:#38a169;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700}
.badge-inactive{background:rgba(229,62,62,0.1);color:#e53e3e;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700}
.img-preview-wrap{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}
.img-preview-wrap img{width:90px;height:90px;object-fit:cover;border-radius:9px;border:2px solid var(--border)}

/* Empty state */
.empty-state{text-align:center;padding:80px 20px;color:var(--text-light)}
.empty-state i{font-size:60px;opacity:0.15;margin-bottom:20px;display:block}
.empty-state h3{font-size:20px;margin-bottom:8px;color:var(--text)}

/* ================================================
   RESPONSIVE
   ================================================ */
@media(max-width:1100px){
    .catalog-layout{grid-template-columns:1fr}
    .sidebar{display:none}
    .footer-grid{grid-template-columns:1fr 1fr}
    .product-detail-grid{grid-template-columns:1fr;gap:40px}
}
@media(max-width:900px){
    .hero-swiper{height:520px}
    .hero-content{padding:0 40px}
    .main-nav{display:none}
    .burger-btn{display:flex}
    .section-title{font-size:28px}
    .contact-grid{grid-template-columns:1fr}
    .admin-layout{flex-direction:column}
    .admin-sidebar{width:100%}
}
@media(max-width:600px){
    .hero-swiper{height:440px}
    .hero-content{padding:0 24px}
    .hero-btns{flex-direction:column}
    .top-bar-left a:last-child{display:none}
    .footer-grid{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr}
    .products-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
    .admin-content{padding:15px}
    .stats-grid{grid-template-columns:1fr 1fr}
    .btn-whatsapp span{display:none}
}