.tpcategory { position: inherit } .tpcateghttps://a4poster.com/admin/simple-slidersory__icon{ background-color: hsla(0, 0%, 100%, .5); border-radius: 50%; height: 130px; line-height: 130px; margin: auto auto 25px; position: relative; text-align: center; transition: all .3s ease-out 0s; width: 130px; } /* ===================================================== HEADER FIX (ONE TIME ONLY) ===================================================== */ header, #header, .site-header, .main-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 9999 !important; } /* Body offset for fixed header */ body { padding-top: 120px !important; } @media (max-width: 768px) { body { padding-top: 85px !important; } } /* ===================================================== SLIDER & HERO ORDER SAFETY ===================================================== */ .simple-slider, .owl-carousel { position: relative; z-index: 2; } .hero-swap { position: relative; z-index: 1; padding: 120px 0; background: #fff; overflow: hidden; } /* ===================================================== HERO LAYOUT ===================================================== */ .hero-inner { max-width: 1200px; margin: auto; display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 40px; } /* Text */ .hero-text h1 { font-size: 56px; font-weight: 700; color: #111; margin-bottom: 15px; } .hero-text p { font-size: 18px; color: #555; margin-bottom: 30px; } .hero-btn { display: inline-block; padding: 14px 36px; border: 2px solid #111; color: #111; text-decoration: none; transition: all 0.35s ease; } .hero-btn:hover { background: #111; color: #fff; } /* Products */ .hero-products { position: relative; height: 420px; } .hero-card { position: absolute; width: 260px; height: 360px; background: #fff; box-shadow: 0 20px 40px rgba(0,0,0,0.15); transition: all 0.9s ease; } .hero-card img { width: 100%; height: 100%; object-fit: cover; } /* Positions */ .pos-left { left: 0; top: 40px; transform: scale(0.85); opacity: 0.6; z-index: 1; } .pos-center { left: 160px; top: 0; transform: scale(1); opacity: 1; z-index: 3; } .pos-right { left: 320px; top: 40px; transform: scale(0.85); opacity: 0.6; z-index: 1; } /* ===================================================== HERO MOBILE ===================================================== */ @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; text-align: center; } .hero-products { height: 360px; margin-top: 40px; } .hero-card { left: 50% !important; transform: translateX(-50%) scale(0.9) !important; } .pos-left, .pos-right { display: none; } .hero-text h1 { font-size: 34px; } } /* ===================================================== PRE-FOOTER CTA ===================================================== */ .pre-footer-cta { background: #f6f6f6; padding: 90px 20px; text-align: center; } .pre-footer-inner { max-width: 720px; margin: auto; } .pre-footer-inner h2 { font-size: 46px; font-weight: 700; color: #111; margin-bottom: 18px; } .pre-footer-inner p { font-size: 17px; color: #555; margin-bottom: 35px; } .pre-footer-cta .cta-btn { padding: 14px 38px; border: 2px solid #111; color: #111; text-decoration: none; transition: all 0.35s ease; } .pre-footer-cta .cta-btn:hover { background: #111; color: #fff; } @media (max-width: 768px) { .pre-footer-inner h2 { font-size: 28px; } .pre-footer-inner p { font-size: 14px; } } /* ===================================================== FOOTER ===================================================== */ footer, #footer, .footer, .site-footer { background: #000 !important; color: #fff !important; padding: 60px 0 30px; } footer * { background: transparent !important; } footer h1, footer h2, footer h3, footer h4 { color: #fff !important; font-weight: 600; } footer p, footer li, footer span { color: #bbb !important; font-size: 14px; line-height: 1.7; } footer a { color: #bbb !important; transition: 0.3s; } footer a:hover { color: #fff !important; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 40px; padding-top: 20px; text-align: center; font-size: 13px; color: #888 !important; } footer .social-icons a { display: inline-flex; width: 36px; height: 36px; border: 1px solid #444; border-radius: 50%; align-items: center; justify-content: center; } /* header on top */ header, #header, .site-header, .main-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 9999 !important; } /* slider above hero */ .simple-slider, .owl-carousel { position: relative; z-index: 2; } /* hero below slider */ .hero-swap { position: relative; z-index: 1; } .simple-slider, .owl-carousel { position: relative; z-index: 2; } .hero-swap { position: relative; z-index: 1; } .pre-footer-cta { position: relative; z-index: 2; } footer, #footer, .site-footer, .footer { position: relative; z-index: 1; } .hero-swap { background: #111; } .hero-text h1, .hero-text p { color: #fff; } .hero-btn { border-color: #fff; color: #fff; } .tpcategory__icon { background: rgba(255,255,255,0.6); backdrop-filter: blur(8px); transition: transform .35s ease, box-shadow .35s ease; } .tpcategory:hover .tpcategory__icon { transform: translateY(-6px) scale(1.05); box-shadow: 0 18px 40px rgba(0,0,0,.15); } .split-banner{ display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:100px 0; } .split-image img{width:100%;} @media(max-width:768px){ .split-banner{grid-template-columns:1fr;} } .product-item { border: none; background: transparent; } .product-item img { transition: transform .4s ease; } .product-item:hover img { transform: scale(1.06); } /* ===== LUXURY HERO (ISOLATED) ===== */ .lux-hero{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:#fafafa; overflow:hidden; } .lux-hero-inner{ width:100%; max-width:1200px; padding:60px; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; } /* TEXT */ .lux-tag{ font-size:12px; letter-spacing:3px; text-transform:uppercase; color:#777; display:inline-block; margin-bottom:18px; } .lux-hero-text h1{ font-family:'Playfair Display',serif; font-size:64px; line-height:1.1; margin-bottom:25px; color:#111; } .lux-hero-text h1 span{ color:#c39a6b; } .lux-hero-text p{ font-size:16px; line-height:1.7; color:#555; max-width:420px; margin-bottom:35px; } /* BUTTON */ .lux-btn{ display:inline-block; text-decoration:none; background:#111; color:#fff; padding:16px 38px; font-size:14px; letter-spacing:1px; position:relative; overflow:hidden; transition:color .4s ease; } .lux-btn::before{ content:''; position:absolute; inset:0; background:#c39a6b; transform:translateX(-100%); transition:transform .4s ease; z-index:-1; } .lux-btn:hover{ color:#111; } .lux-btn:hover::before{ transform:translateX(0); } /* IMAGE */ .lux-hero-image img{ width:100%; border-radius:14px; box-shadow:0 40px 90px rgba(0,0,0,.18); animation:floatImage 6s ease-in-out infinite; } /* FLOATING EFFECT */ @keyframes floatImage{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-18px); } } /* RESPONSIVE */ @media(max-width:900px){ .lux-hero-inner{ grid-template-columns:1fr; text-align:center; } .lux-hero-text h1{ font-size:46px; } .lux-hero-text p{ margin-left:auto; margin-right:auto; } } .lux-hero{ position: relative; z-index: 1; margin-top: 40px; } /* ===================================================== DISABLE OLD HERO-SWAP (CARD HERO) HTML rehne do, CSS se band ===================================================== */ .hero-swap{ display: none !important; } /* Agar kisi page pe hero-swap future me chahiye ho to sirf display:block karna hoga */ /* ===================================================== KEEP LUXURY HERO ACTIVE & SAFE ===================================================== */ .lux-hero{ position: relative; z-index: 1; margin-top: 40px; padding: 120px 0; background: #fafafa; } /* header fixed hai – body offset already correct */ body{ padding-top: 120px !important; } @media (max-width:768px){ body{ padding-top: 85px !important; } } /* ===================================================== LUX HERO LAYOUT (NO CONFLICT) ===================================================== */ .lux-hero-inner{ max-width: 1200px; margin: auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } /* TEXT */ .lux-tag{ font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #777; margin-bottom: 18px; display: inline-block; } .lux-hero-text h1{ font-family: 'Playfair Display', serif; font-size: 64px; line-height: 1.1; margin-bottom: 25px; color: #111; } .lux-hero-text h1 span{ color: #c39a6b; } .lux-hero-text p{ font-size: 16px; line-height: 1.7; color: #555; max-width: 420px; margin-bottom: 35px; } /* BUTTON */ .lux-btn{ display: inline-block; padding: 16px 38px; background: #111; color: #fff; text-decoration: none; letter-spacing: 1px; transition: all .35s ease; } .lux-btn:hover{ background: #c39a6b; color: #111; } /* IMAGE */ .lux-hero-image img{ width: 100%; border-radius: 14px; box-shadow: 0 40px 90px rgba(0,0,0,.18); animation: floatImage 6s ease-in-out infinite; } @keyframes floatImage{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-18px); } } /* MOBILE */ @media(max-width:900px){ .lux-hero-inner{ grid-template-columns: 1fr; text-align: center; } .lux-hero-text h1{ font-size: 42px; } .lux-hero-text p{ margin-left: auto; margin-right: auto; } } /* ===================================== DISABLE OLD / UNUSED HERO SYSTEMS ===================================== */ .hero-swap, .lux-hero{ display:none !important; } /* ===================================== HERO A (3 CARD POSTERO STYLE) ===================================== */ .heroA{ background:#111; padding:120px 0; } .heroA-inner{ max-width:1200px; margin:auto; padding:0 20px; display:grid; grid-template-columns:1fr 1.2fr; gap:50px; align-items:center; } .heroA-tag{ font-size:12px; letter-spacing:3px; color:#aaa; } .heroA-text h1{ font-size:56px; line-height:1.1; color:#fff; } .heroA-text h1 span{ color:#c39a6b; } .heroA-text p{ color:#ccc; margin:20px 0 30px; } .heroA-btn{ border:2px solid #fff; padding:14px 36px; color:#fff; text-decoration:none; } /* cards */ .heroA-products{ position:relative; height:420px; } .heroA-card{ position:absolute; width:260px; height:360px; box-shadow:0 25px 50px rgba(0,0,0,.4); transition:.9s; } .heroA-card img{ width:100%; height:100%; object-fit:cover; } .posA-left{ left:0; top:40px; transform:scale(.85); opacity:.6; } .posA-center{ left:160px; top:0; z-index:3; } .posA-right{ left:320px; top:40px; transform:scale(.85); opacity:.6; } /* ===================================== HERO B (SINGLE IMAGE LUXURY) ===================================== */ .heroB{ background:#fafafa; padding:120px 0; } .heroB-inner{ max-width:1200px; margin:auto; padding:0 20px; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; } .heroB-tag{ font-size:12px; letter-spacing:3px; color:#777; } .heroB-text h1{ font-size:64px; line-height:1.1; } .heroB-btn{ background:#111; color:#fff; padding:16px 38px; text-decoration:none; } .heroB-image img{ width:100%; border-radius:14px; box-shadow:0 40px 90px rgba(0,0,0,.18); } /* ===================================== HERO B – COLOR + HIGHLIGHT ANIMATION ===================================== */ .heroB-title{ font-size:64px; line-height:1.1; font-weight:700; } /* base state */ .heroB-title .hl{ position:relative; display:inline-block; padding:6px 14px; margin-bottom:6px; color:#111; background:linear-gradient( 120deg, transparent 0%, transparent 50%, #c39a6b 50%, #f1d8b5 100% ); background-size:200% 100%; background-position:0% 0%; transition: background-position .8s ease, color .6s ease; } /* animated state */ .heroB-title .hl.active{ background-position:100% 0%; color:#111; } /* luxury gold moment (mid animation look) */ .heroB-title .hl.active::after{ content:''; position:absolute; inset:0; background:linear-gradient(120deg,#c39a6b,#f1d8b5); z-index:-1; animation:goldFlash .9s ease forwards; } @keyframes goldFlash{ 0%{ opacity:1; } 60%{ opacity:1; } 100%{ opacity:0; } } /* mobile */ @media(max-width:768px){ .heroB-title{ font-size:42px; } } /* ===================================== HERO B DESCRIPTION – LUXURY STYLE ===================================== */ .heroB-desc{ font-size:17px; line-height:1.8; color:#555; max-width:420px; margin-top:28px; /* heading se gap */ margin-bottom:46px; /* button se proper space */ position:relative; letter-spacing:.3px; } /* subtle luxury line */ .heroB-desc::before{ content:''; position:absolute; left:0; top:-14px; width:48px; height:2px; background:linear-gradient(90deg,#c39a6b,#f1d8b5); } /* mobile */ @media(max-width:768px){ .heroB-desc{ margin-left:auto; margin-right:auto; } .heroB-desc::before{ left:50%; transform:translateX(-50%); } } /* animation state */ .animateDesc{ opacity:0; transform:translateY(24px); transition:all .9s ease; } .animateDesc.show{ opacity:1; transform:none; } /* ============================== NEO INNOVATION SLIDER ============================== */ .neo-slider{ position:relative; height:90vh; background:#0e0e0e; overflow:hidden; color:#fff; } .neo-track{ width:100%; height:100%; position:relative; } .neo-slide{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transform:scale(1.1); transition:opacity .9s ease, transform 1.4s cubic-bezier(.19,1,.22,1); } .neo-slide.active{ opacity:1; pointer-events:auto; transform:scale(1); } /* IMAGE */ .neo-media{ position:absolute; inset:0; overflow:hidden; } .neo-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.2); transition:transform 2.2s cubic-bezier(.19,1,.22,1); } .neo-slide.active .neo-media img{ transform:scale(1); } /* DARK OVERLAY */ .neo-media::after{ content:''; position:absolute; inset:0; background:linear-gradient( to bottom, rgba(0,0,0,.25), rgba(0,0,0,.75) ); } /* TEXT */ .neo-content{ position:relative; z-index:2; text-align:center; max-width:800px; transform:translateY(40px); opacity:0; transition:all 1s ease .6s; } .neo-slide.active .neo-content{ transform:none; opacity:1; } .neo-tag{ font-size:12px; letter-spacing:3px; color:#c39a6b; text-transform:uppercase; } .neo-content h2{ font-size:68px; line-height:1.05; margin-top:18px; font-weight:700; } /* PROGRESS BAR */ .neo-progress{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); width:220px; height:3px; background:rgba(255,255,255,.25); } .neo-progress::before{ content:''; position:absolute; inset:0; width:0%; background:#c39a6b; } /* MOBILE */ @media(max-width:768px){ .neo-content h2{ font-size:38px; } } /* ===================================== MOBILE RESET – HERO & SLIDER ===================================== */ @media (max-width: 768px) { /* slider normal flow */ .neo-slider, .simple-slider { position: relative !important; height: auto !important; min-height: unset !important; } /* overlay ko block bana do */ .slider-neo-overlay { position: relative !important; inset: unset !important; padding: 40px 20px 10px; background: #f4f1ec; } .neo-overlay-inner { text-align: center; } /* overlay text resize */ .neo-title span { font-size: 34px !important; display: block; margin: 4px 0; } .neo-sub { font-size: 15px; margin: 18px auto 28px; } /* HERO A & B – force single column */ .heroA-inner, .heroB-inner { grid-template-columns: 1fr !important; text-align: center; } /* disable absolute card layout */ .heroA-products { height: auto !important; margin-top: 30px; } .heroA-card { position: relative !important; left: auto !important; top: auto !important; transform: none !important; opacity: 1 !important; width: 90%; height: auto; margin: 0 auto 20px; } /* Hero B image fix */ .heroB-image img { width: 100%; max-width: 320px; margin: 30px auto 0; } /* spacing fix */ .heroB-desc { margin-bottom: 32px !important; } /* body header offset safe */ body { padding-top: 70px !important; } } /* ===================================== ARTSPACE INSPIRED PRODUCT SECTIONS ===================================== */ .products-section, .products-wrapper{ margin-top:60px; } .section-title, .products-title{ text-align:center; margin-bottom:40px; } .section-title h2, .products-title h2{ font-size:42px; font-weight:700; } .section-title h2 span, .products-title h2 span{ color:#c39a6b; } .section-title p{ color:#777; } /* Product card polish */ .product-item{ background:transparent !important; border:none !important; } .product-item img{ transition:transform .45s ease; } .product-item:hover img{ transform:scale(1.05); } /* price clean look */ .product-item .price{ font-weight:600; } :root{ --bg-main: #f4f1ec; --bg-alt: #ffffff; --text-main: #111111; --text-muted: #777777; --accent: #c39a6b; } body{ background: var(--bg-main); color: var(--text-main); } section{ background: var(--bg-alt); } .reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s ease; } .reveal.show{ opacity:1; transform:none; } .product-item{ transition: transform .4s ease; } .product-item:hover{ transform: translateY(-6px); } .product-item img{ transition: transform .4s ease; } .product-item:hover img{ transform: scale(1.05); } a, button{ transition: all .3s ease; } a:hover{ color: var(--accent); } .btn, .hero-btn{ border:1px solid #111; background:transparent; } .btn:hover{ background:#111; color:#fff; } /* FORCE ARTSPACE FEEL – GUARANTEED */ img{ transition: transform .4s ease !important; } img:hover{ transform: scale(1.05) !important; } section{ opacity:1 !important; } /* ================================ ARTSPACE LOOK – TPPRODUCT ================================ */ /* product card */ .tpproduct{ background: transparent !important; border: none !important; padding: 0 !important; transition: transform .35s ease; } /* image wrapper */ .tpproduct img{ transition: transform .6s ease; will-change: transform; } /* hover effect (Artspace feel) */ .tpproduct:hover{ transform: translateY(-6px); } .tpproduct:hover img{ transform: scale(1.06); } /* title */ .tpproduct .product-title, .tpproduct h3{ font-weight: 500; letter-spacing: .2px; } /* price */ .tpproduct .price{ font-weight: 600; margin-top: 6px; } /* remove aggressive buttons look */ .tpproduct .btn, .tpproduct button{ background: transparent; border: 1px solid #111; color: #111; transition: all .3s ease; } .tpproduct .btn:hover, .tpproduct button:hover{ background:#111; color:#fff; } /* reveal animation */ .tp-reveal{ opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; } .tp-reveal.show{ opacity: 1; transform: none; } :root{ --bg-main:#f4f1ec; --text-main:#111; --text-muted:#777; --accent:#c39a6b; } body{ background: var(--bg-main); } .section-title span, .products-title span{ color: var(--accent); } /* ================================ STRONG VISUAL CHANGE – TPPRODUCT ================================ */ /* spacing between products */ .tpproduct{ padding: 14px !important; margin-bottom: 40px !important; } /* card feel */ .tpproduct .tpproduct-inner, .tpproduct > div{ background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 20px 45px rgba(0,0,0,0.06); transition: transform .45s ease, box-shadow .45s ease; } /* hover elevation */ .tpproduct:hover .tpproduct-inner, .tpproduct:hover > div{ transform: translateY(-10px); box-shadow: 0 35px 70px rgba(0,0,0,0.10); } /* product title */ .tpproduct h3, .tpproduct .product-title{ font-size: 16px; font-weight: 500; color: #111; margin-top: 14px; line-height: 1.4; } /* price */ .tpproduct .price{ font-size: 15px; color: #111; font-weight: 600; margin-top: 8px; } /* remove loud colors */ .tpproduct del, .tpproduct .old-price{ color: #aaa; } /* scroll animation */ .tp-reveal{ opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1s ease; } .tp-reveal.show{ opacity: 1; transform: none; } body{ background: #f4f1ec; } .products-wrapper, .products-section{ padding: 80px 0; } /* ================================ 4 PRODUCTS PER ROW – DESKTOP ================================ */ /* grid container (Botble compatible) */ .products-wrapper .row, .products-grid, .product-list{ display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 40px; } /* tablet */ @media (max-width: 991px){ .products-wrapper .row, .products-grid, .product-list{ grid-template-columns: repeat(2, 1fr); gap: 30px; } } /* mobile */ @media (max-width: 575px){ .products-wrapper .row, .products-grid, .product-list{ grid-template-columns: 1fr; gap: 24px; } } /* ================================ BIG IMAGE – GALLERY STYLE ================================ */ .tpproduct img{ width: 100%; height: auto; aspect-ratio: 3 / 4; /* poster ratio */ object-fit: cover; } /* ================================ MINIMAL TEXT STYLE ================================ */ .tpproduct h3, .tpproduct .product-title{ font-size: 15px; font-weight: 400; color: #111; margin-top: 14px; margin-bottom: 4px; line-height: 1.4; } /* price – minimalist */ .tpproduct .price{ font-size: 14px; font-weight: 500; color: #111; } /* remove clutter */ .tpproduct .btn, .tpproduct .add-to-cart, .tpproduct .wishlist{ display: none !important; } /* muted old price */ .tpproduct del, .tpproduct .old-price{ color: #999; font-weight: 400; } /* subtle hover */ @media (min-width: 992px){ .tpproduct img{ transition: transform .45s ease; } .tpproduct:hover img{ transform: scale(1.04); } } .reveal{ opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; } .reveal.show{ opacity: 1; transform: none; } body{ background: #f4f1ec; } section{ background: #fff; } /* =============================== MODERN HEADER – ARTSPACE STYLE =============================== */ .neo-header{ position: sticky; top: 0; background: #fff; z-index: 9999; border-bottom: 1px solid #eee; } .neo-container{ max-width: 1400px; margin: auto; padding: 18px 30px; display: flex; align-items: center; justify-content: space-between; } /* logo */ .neo-logo img{ height: 42px; } /* nav */ .neo-nav ul{ display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; } .neo-nav a{ text-decoration: none; color: #111; font-weight: 500; position: relative; } /* hover underline */ .neo-nav a::after{ content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:#c39a6b; transition:.3s ease; } .neo-nav a:hover::after{ width:100%; } /* dropdown */ .has-dropdown{ position: relative; } .dropdown{ position:absolute; top:140%; left:0; background:#fff; padding:14px 0; min-width:180px; opacity:0; pointer-events:none; transform:translateY(10px); transition:.35s ease; box-shadow:0 20px 40px rgba(0,0,0,.08); } .has-dropdown:hover .dropdown{ opacity:1; pointer-events:auto; transform:none; } .dropdown li{ padding:8px 20px; } /* mega menu */ .has-mega{ position: relative; } .mega-menu{ position:absolute; left:0; top:140%; width:520px; background:#fff; padding:30px; opacity:0; pointer-events:none; transform:translateY(10px); transition:.4s ease; box-shadow:0 30px 60px rgba(0,0,0,.1); } .has-mega:hover .mega-menu{ opacity:1; pointer-events:auto; transform:none; } .mega-inner{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px; } .mega-inner a{ font-size:14px; } /* icons */ .neo-icons a{ margin-left:22px; text-decoration:none; font-size:18px; } /* mobile */ @media(max-width:992px){ .neo-nav{ display:none; } } /* =============================== ARTSPACE HEADER STYLE =============================== */ .as-header{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; padding:24px 48px; background:#fff; } /* NAV */ .as-nav ul{ display:flex; gap:40px; list-style:none; margin:0; padding:0; } .as-nav a{ text-decoration:none; font-size:14px; font-weight:500; color:#111; letter-spacing:.02em; position:relative; } /* underline hover */ .as-nav a::after{ content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:#c39a6b; transition:.3s ease; } .as-nav a:hover::after{ width:100%; } /* LOGO */ .as-logo img{ height:44px; } /* ACTIONS */ .as-actions{ display:flex; justify-content:flex-end; align-items:center; gap:22px; } /* MEGA MENU */ .as-has-mega{ position:relative; } .as-mega{ position:absolute; top:140%; left:0; width:520px; background:#fff; padding:32px; opacity:0; pointer-events:none; transform:translateY(12px); transition:.35s ease; box-shadow:0 30px 60px rgba(0,0,0,.08); } .as-has-mega:hover .as-mega{ opacity:1; pointer-events:auto; transform:none; } .as-mega-inner{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px; } .as-mega-inner a{ font-size:14px; color:#111; } /* =============================== ARTSPACE STYLE HEADER =============================== */ .as-header{ background:#fff; border-bottom:1px solid #eee; } .as-header-inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:22px 0; } /* NAV */ .as-nav ul{ display:flex; gap:38px; list-style:none; margin:0; padding:0; } .as-nav a{ text-decoration:none; font-size:14px; font-weight:500; color:#111; position:relative; letter-spacing:.04em; } .as-nav a::after{ content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:#c39a6b; transition:.3s ease; } .as-nav a:hover::after{ width:100%; } /* LOGO */ .as-logo img{ height:44px; } /* ACTIONS */ .as-actions{ display:flex; justify-content:flex-end; align-items:center; gap:18px; } .as-search input{ border:none; border-bottom:1px solid #ddd; padding:4px 6px; font-size:13px; outline:none; } /* CART */ .as-cart{ background:none; border:none; position:relative; } .tp-product-count{ position:absolute; top:-6px; right:-10px; background:#111; color:#fff; font-size:11px; padding:2px 6px; border-radius:10px; } /* MEGA MENU */ .as-has-mega{ position:relative; } .as-mega{ position:absolute; top:140%; left:0; width:520px; background:#fff; padding:30px; opacity:0; pointer-events:none; transform:translateY(12px); transition:.35s ease; box-shadow:0 30px 60px rgba(0,0,0,.08); z-index:999; } .as-has-mega:hover .as-mega{ opacity:1; pointer-events:auto; transform:none; } .as-mega-inner{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } .as-mega-inner a{ font-size:14px; color:#111; text-decoration:none; } .as-mega-inner a:hover{ color:#c39a6b; }

/* ===============================
   MAIN NAV (ARTSPACE STYLE)
=============================== */

.neo-nav ul,
.main-menu ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:36px;
}

.neo-nav li,
.main-menu li{
  position:relative;
}

.neo-nav a,
.main-menu a{
  font-size:14px;
  font-weight:500;
  color:#111;
  text-decoration:none;
  letter-spacing:.04em;
  position:relative;
}

/* underline hover */
.neo-nav a::after,
.main-menu a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:#c39a6b;
  transition:.3s ease;
}
.neo-nav a:hover::after,
.main-menu a:hover::after{
  width:100%;
}

/* ===============================
   NORMAL DROPDOWN
=============================== */

.submenu{
  position:absolute;
  top:130%;
  left:0;
  background:#fff;
  min-width:220px;
  padding:14px 0;
  opacity:0;
  pointer-events:none;
  transform:translateY(12px);
  transition:.35s ease;
  box-shadow:0 30px 60px rgba(0,0,0,.08);
  z-index:100;
}

.has-dropdown:hover > .submenu{
  opacity:1;
  pointer-events:auto;
  transform:none;
}

.submenu li{
  padding:8px 22px;
}

.submenu a{
  font-size:13px;
  font-weight:400;
  color:#111;
}

/* ===============================
   MEGA MENU (ARTSPACE FEEL)
=============================== */

.mega-menu{
  position:absolute;
  top:130%;
  left:0;
  width:560px;
  background:#fff;
  padding:30px;
  opacity:0;
  pointer-events:none;
  transform:translateY(14px);
  transition:.4s ease;
  box-shadow:0 40px 80px rgba(0,0,0,.12);
  z-index:100;
}

.has-megamenu:hover > .mega-menu{
  opacity:1;
  pointer-events:auto;
  transform:none;
}

/* grid inside mega */
.mega-menu ul{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.mega-menu a{
  font-size:14px;
  font-weight:400;
  color:#111;
  padding:4px 0;
}

.mega-menu a:hover{
  color:#c39a6b;
}

/* mega title */
.mega-menu-title{
  font-weight:600;
}

/* ===============================
   MOBILE SAFETY
=============================== */

@media(max-width:992px){
  .submenu,
  .mega-menu{
    position:relative;
    opacity:1;
    pointer-events:auto;
    transform:none;
    box-shadow:none;
    width:100%;
    padding:10px 0;
  }

  .mega-menu ul{
    grid-template-columns:1fr;
  }
}

/* ===============================
   ARTSPACE STYLE MEGA MENU
=============================== */

.as-mega-menu{
  background:#fff;
  padding:32px 36px;
  box-shadow:0 30px 60px rgba(0,0,0,.08);
  min-width:620px;
}

/* columns */
.as-mega-columns{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:40px;
  list-style:none;
  margin:0;
  padding:0;
}

.as-mega-col ul{
  list-style:none;
  padding:0;
  margin:0;
}

/* links */
.as-mega-col li{
  margin-bottom:12px;
}

.as-mega-col a{
  font-size:14px;
  font-weight:400;
  color:#111;
  text-decoration:none;
  letter-spacing:.02em;
  position:relative;
  padding-bottom:2px;
}

/* underline animation */
.as-mega-col a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1px;
  background:#c39a6b;
  transition:.3s ease;
}

.as-mega-col a:hover{
  color:#c39a6b;
}

.as-mega-col a:hover::after{
  width:100%;
}

/* mobile safe */
@media(max-width:992px){
  .as-mega-columns{
    grid-template-columns:1fr;
    gap:22px;
  }
}

/* ===============================
   ARTSPACE HEADER ICONS
=============================== */

.as-header-meta{
  gap:18px;
}

/* icon button */
.as-icon-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  text-decoration:none;
  color:#111;
  transition:all .35s ease;
}

/* hover effect */
.as-icon-btn:hover{
  background:rgba(0,0,0,.05);
  transform:translateY(-2px);
}

/* icon */
.as-icon-btn i{
  font-size:17px;
}

/* counter badge */
.as-count{
  position:absolute;
  top:-4px;
  right:-6px;
  background:#111;
  color:#fff;
  font-size:11px;
  font-weight:500;
  padding:2px 6px;
  border-radius:10px;
  line-height:1;
}

/* wishlist heart hover */
.as-icon-btn:hover .fa-heart{
  color:#c39a6b;
}

/* cart hover */
.as-icon-btn:hover .fa-shopping-cart{
  color:#c39a6b;
}

/* mobile safety */
@media(max-width:768px){
  .as-icon-btn{
    width:36px;
    height:36px;
  }
}

/* ===============================
   HEADER TOP – ARTSPACE STYLE
=============================== */

.header-top{
  background:#111;
  color:#fff;
  font-size:13px;
}

/* announcement wrapper */
.ae-anno-announcement-wrapper{
  background:transparent !important;
  padding:10px 0;
}

/* text */
.header-welcome-text,
.ae-anno-announcement__text span{
  font-weight:400;
  letter-spacing:.03em;
  opacity:.95;
}

/* button link */
.ae-anno-announcement__button,
.header-welcome-text a{
  color:#c39a6b;
  font-weight:500;
  text-decoration:none;
  transition:all .3s ease;
}

.ae-anno-announcement__button:hover,
.header-welcome-text a:hover{
  color:#fff;
}

/* subtle slide animation */
.ae-anno-announcement{
  animation: fadeSlide .6s ease;
}

@keyframes fadeSlide{
  from{
    opacity:0;
    transform:translateY(6px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

/* right icons */
.headertoplag{
  gap:16px;
}

.menu-top-social a{
  color:#bbb;
  font-size:14px;
  margin-left:10px;
  transition:all .3s ease;
}

.menu-top-social a:hover{
  color:#c39a6b;
}

/* switchers minimal */
.headertoplag select,
.headertoplag a{
  color:#bbb;
  font-size:12px;
}

/* mobile */
@media(max-width:768px){
  .header-top{
    font-size:12px;
    text-align:center;
  }
}

/* ==============================
   LUXURY FOOTER – SAFE OVERRIDE
============================== */
/* ===========================
   LUXURY BLACK FOOTER
=========================== */

.lux-footer{
  position: relative;
  background:#000;
  color:#bbb;
  overflow:hidden;
}

.lux-footer-bg{
  background:#000;
  padding-top:90px;
}

/* TEXT RESET */
.lux-footer *{
  background:transparent !important;
}

/* LINKS */
.lux-footer a{
  color:#bbb;
  transition:all .35s ease;
}
.lux-footer a:hover{
  color:#c39a6b;
}

/* HEADINGS */
.lux-footer h1,
.lux-footer h2,
.lux-footer h3,
.lux-footer h4{
  color:#fff;
  font-weight:600;
}

/* TOP */
.lux-footer-top{
  padding-bottom:60px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* CTA */
.lux-footer-cta{
  padding:50px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* BOTTOM */
.lux-footer-bottom{
  padding:25px 0;
  text-align:center;
  font-size:13px;
  color:#777;
}

/* SOCIAL ICONS */
.lux-footer .social-icons a{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.15);
  border-radius:50%;
}
.lux-footer .social-icons a:hover{
  background:#c39a6b;
  color:#000;
}

/* SCROLL ANIMATION */
.lux-footer .reveal{
  opacity:0;
  transform:translateY(30px);
  transition:all .9s ease;
}
.lux-footer .reveal.show{
  opacity:1;
  transform:none;
}

/* MOBILE */
@media(max-width:768px){
  .lux-footer-bg{
    padding-top:60px;
  }
}

/* ===== LUXURY PRODUCT SECTION ===== */
.lux-products{
  background:#0e0e0e;
  padding:120px 0;
}

.lux-container{
  max-width:1400px;
  margin:auto;
  padding:0 24px;
}

.lux-title{
  text-align:center;
  font-size:52px;
  font-weight:700;
  color:#fff;
  margin-bottom:70px;
}
.lux-title span{
  color:#c39a6b;
}

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

/* CARD */
.lux-card{
  background:#111;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  transform:translateY(20px);
  opacity:0;
  transition:all .6s ease;
}

.lux-card.show{
  transform:none;
  opacity:1;
}

.lux-img{
  overflow:hidden;
}
.lux-img img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  transition:transform .7s ease;
}

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

.lux-info{
  padding:22px;
}

.lux-info h3{
  font-size:16px;
  font-weight:500;
  color:#fff;
  margin-bottom:6px;
}

.lux-price{
  color:#c39a6b;
  font-weight:600;
  font-size:15px;
}

/* RESPONSIVE */
@media(max-width:1200px){
  .lux-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:768px){
  .lux-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){
  .lux-grid{grid-template-columns:1fr;}
  .lux-title{font-size:36px;}
}

.as-header{
  background:#fff;
  border-bottom:1px solid #eee;
  position:sticky;
  top:0;
  z-index:9999;
}

.as-header-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:22px 0;
}

.as-nav ul{
  display:flex;
  gap:38px;
  list-style:none;
  margin:0;
  padding:0;
}

.as-nav a{
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  color:#111;
  position:relative;
  letter-spacing:.04em;
}

.as-nav a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:#c39a6b;
  transition:.3s;
}
.as-nav a:hover::after{ width:100%; }

.as-logo img{
  height:44px;
}

.as-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:18px;
}

.as-cart{
  background:none;
  border:none;
  position:relative;
}

.tp-product-count{
  position:absolute;
  top:-6px;
  right:-10px;
  background:#111;
  color:#fff;
  font-size:11px;
  padding:2px 6px;
  border-radius:10px;
}

/* ==== DISABLE CUSTOM HEADERS ONLY ==== */
.as-header,
.neo-header,
.header-top {
  all: unset !important;
  display: none !important;
}

body {
  padding-top: 0 !important;
}
header,