/*
Theme Name: MJ Perfume
Theme URI: https://mjperfume.lovable.app
Author: MJ Perfume
Author URI: https://mjperfume.lovable.app
Description: Luxury fragrance storefront theme for MJ Perfume — dark green and gold design, hero slider, circular collections, signature range, campaign video section, product grid, and full Elementor support with an importable homepage template.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mj-perfume
*/

:root{
  --primary:#0e2a1f;
  --primary-deep:#081b13;
  --on-dark:#f3ead8;
  --gold:#c9a24b;
  --gold-soft:#e2c98f;
  --paper:#f7f2e7;
  --ink:#16211b;
  --font-display:"Bodoni Moda",serif;
  --font-sans:"Manrope",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ---------- Header ---------- */
.mk-header{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 4%;background:var(--primary);color:var(--on-dark);border-bottom:1px solid rgba(201,162,75,.35)}
.mk-header-left{display:flex;align-items:center;gap:18px}
.mk-icon-btn{color:var(--on-dark);display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.mk-icon-btn svg{width:20px;height:20px}
.mk-brand{text-align:center}
.mk-brand img{height:44px;width:auto;margin:0 auto}
.mk-brand span{display:block;font-family:var(--font-display);font-size:10px;letter-spacing:.5em;color:var(--gold);margin-top:2px}
.mk-header-right{display:flex;justify-content:flex-end;align-items:center;gap:18px}
.mk-bag-btn{position:relative;color:var(--on-dark);display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.mk-bag-btn svg{width:20px;height:20px}
.mk-bag-count{position:absolute;top:-7px;right:-10px;background:var(--gold);color:var(--primary-deep);font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:50%;display:grid;place-items:center;padding:0 4px}
.mk-nav{display:flex;gap:26px;justify-content:center;background:var(--primary-deep);padding:10px 4%;border-bottom:1px solid rgba(201,162,75,.25)}
.mk-nav a{color:var(--on-dark);font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.85;transition:color .3s,opacity .3s}
.mk-nav a:hover{color:var(--gold);opacity:1}
.mk-mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--primary-deep);padding:18px 6%;flex-direction:column;gap:14px;border-bottom:1px solid rgba(201,162,75,.3)}
.mk-mobile-menu.open{display:flex}
.mk-mobile-menu a{color:var(--on-dark);font-size:12px;letter-spacing:.2em;text-transform:uppercase}

/* ---------- Hero slider ---------- */
.mk-hero{position:relative;height:min(86vh,760px);min-height:480px;overflow:hidden;background:var(--primary-deep)}
.mk-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.mk-slide.active{opacity:1;pointer-events:auto}
.mk-slide img{width:100%;height:100%;object-fit:cover;animation:mkKenBurns 9s ease-in-out infinite alternate}
@keyframes mkKenBurns{from{transform:scale(1)}to{transform:scale(1.07)}}
.mk-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,27,19,.82) 0%,rgba(8,27,19,.35) 45%,rgba(8,27,19,0) 75%)}
.mk-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(226,201,143,.14) 45%,transparent 60%);background-size:250% 100%;animation:mkShine 7s ease-in-out infinite;pointer-events:none}
@keyframes mkShine{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}
.mk-hero-copy{position:absolute;left:7%;bottom:16%;z-index:3;max-width:560px;color:var(--on-dark)}
.mk-eyebrow{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.mk-hero-copy h1{font-family:var(--font-display);font-size:clamp(42px,6vw,84px);line-height:.98;font-weight:600;margin-bottom:18px}
.mk-hero-copy p{font-size:14px;line-height:1.7;opacity:.85;max-width:420px;margin-bottom:28px}
.mk-btn{display:inline-flex;align-items:center;gap:12px;background:var(--on-dark);color:var(--primary);padding:15px 30px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;transition:background .3s,transform .3s}
.mk-btn:hover{background:var(--gold);transform:translateY(-2px)}
.mk-btn.ghost{background:transparent;color:var(--on-dark);border:1px solid rgba(243,234,216,.5)}
.mk-btn.ghost:hover{border-color:var(--gold);color:var(--gold);background:transparent}
.mk-hero-controls{position:absolute;right:6%;bottom:8%;z-index:4;display:flex;align-items:center;gap:14px}
.mk-arrow{width:44px;height:44px;border:1px solid rgba(243,234,216,.4);border-radius:50%;color:var(--on-dark);display:grid;place-items:center;transition:border-color .3s,color .3s}
.mk-arrow:hover{border-color:var(--gold);color:var(--gold)}
.mk-dots{display:flex;gap:8px}
.mk-dot{width:26px;height:2px;background:rgba(243,234,216,.35);transition:background .3s}
.mk-dot.active{background:var(--gold)}

/* ---------- Circular collections ---------- */
.mk-collections{background:var(--primary);padding:70px 5% 80px;text-align:center}
.mk-section-eyebrow{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.mk-section-title{font-family:var(--font-display);color:var(--on-dark);font-size:clamp(30px,4vw,52px);font-weight:600;margin-bottom:44px}
.mk-coll-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;max-width:1200px;margin:0 auto}
.mk-coll{display:block;text-align:center}
.mk-coll-img{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid var(--gold);box-shadow:0 18px 40px rgba(0,0,0,.45);transition:transform .5s ease}
.mk-coll-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.mk-coll:hover .mk-coll-img{transform:translateY(-8px)}
.mk-coll:hover .mk-coll-img img{transform:scale(1.08) rotate(-2deg)}
.mk-coll h3{font-family:var(--font-display);color:var(--on-dark);font-size:20px;margin:18px 0 4px;text-transform:uppercase;letter-spacing:.06em}
.mk-coll span{color:var(--gold);font-size:11px;letter-spacing:.3em;text-transform:uppercase}

/* ---------- Signature split (dark) ---------- */
.mk-dark{display:grid;grid-template-columns:1fr 1fr;background:var(--primary-deep);min-height:640px}
.mk-feature{position:relative;overflow:hidden;min-height:420px}
.mk-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:mkBreathe 8s ease-in-out infinite alternate}
@keyframes mkBreathe{from{transform:scale(1)}to{transform:scale(1.05)}}
.mk-feature::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,27,19,.15),rgba(8,27,19,.75))}
.mk-feature-copy{position:absolute;left:8%;bottom:10%;z-index:2;color:var(--on-dark)}
.mk-chip{display:inline-block;border:1px solid var(--gold);color:var(--gold);font-size:10px;letter-spacing:.34em;text-transform:uppercase;padding:8px 16px;margin-bottom:16px}
.mk-feature-copy h2{font-family:var(--font-display);font-size:clamp(28px,3.4vw,46px);line-height:1.05;max-width:380px}
.mk-rail-box{padding:60px 6%;display:flex;flex-direction:column;justify-content:center}
.mk-rail-box>h2{font-family:var(--font-display);color:var(--on-dark);font-size:clamp(24px,2.6vw,36px);margin-bottom:6px}
.mk-rail-box>p{color:var(--gold);font-size:11px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:30px}
.mk-rail{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.mk-card{background:var(--primary);border:1px solid rgba(201,162,75,.25);border-radius:14px;padding:18px;text-align:center;transition:transform .4s,box-shadow .4s}
.mk-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.45)}
.mk-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;margin-bottom:14px}
.mk-card h3{font-family:var(--font-display);color:var(--on-dark);font-size:17px;text-transform:uppercase;letter-spacing:.05em}
.mk-card .mk-price{color:var(--gold);font-weight:700;font-size:15px;margin:6px 0 12px}
.mk-qty{display:inline-flex;align-items:center;gap:14px;border:1px solid rgba(243,234,216,.3);border-radius:999px;padding:5px 14px;margin-bottom:12px;color:var(--on-dark)}
.mk-qty button{color:var(--gold);font-size:16px;width:22px}
.mk-card .mk-add{display:inline-block;background:var(--gold);color:var(--primary-deep);font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:800;padding:11px 22px;border-radius:999px;transition:transform .3s,background .3s}
.mk-card .mk-add:hover{transform:translateY(-2px);background:var(--gold-soft)}

/* ---------- Campaign video split ---------- */
.campaign-section{display:grid;grid-template-columns:1fr 1fr;background:var(--primary);min-height:550px;height:660px;color:var(--on-dark)}
.campaign-copy{padding:60px 9%;display:flex;flex-direction:column;justify-content:center}
.campaign-copy .mk-eyebrow{margin-bottom:18px}
.campaign-copy h2{font-family:var(--font-display);font-size:clamp(40px,4.6vw,72px);line-height:.97;font-weight:600;margin-bottom:20px}
.campaign-copy p{font-size:13px;line-height:1.75;opacity:.85;max-width:340px;margin-bottom:30px}
.campaign-copy .mk-btn{align-self:flex-start}
.campaign-media{position:relative;overflow:hidden}
.campaign-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center;transition:transform 1.5s ease}
.campaign-media:hover video{transform:scale(1.025)}
.campaign-caption{position:absolute;left:8%;bottom:30px;color:var(--gold);font-size:9px;letter-spacing:.4em;text-transform:uppercase;z-index:3}

/* ---------- Product grid (dark tiles) ---------- */
.collection-section{padding:80px 5%;background:var(--paper)}
.collection-head{text-align:center;margin-bottom:40px}
.collection-head .mk-section-title{color:var(--ink)}
.collection-head .mk-section-eyebrow{color:var(--gold)}
.filters{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:44px}
.filters button{font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:10px 22px;border:1px solid rgba(14,42,31,.3);border-radius:999px;color:var(--ink);transition:all .3s}
.filters button.active,.filters button:hover{background:var(--primary);color:var(--on-dark);border-color:var(--primary)}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;max-width:1240px;margin:0 auto}
.product-card{background:var(--primary);color:var(--on-dark);border-radius:16px;padding:20px 18px 24px;text-align:center;position:relative;transition:transform .45s ease,box-shadow .45s ease}
.product-card:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(8,27,19,.4)}
.product-image-wrap{width:74%;aspect-ratio:1;margin:6px auto 16px;border-radius:50%;overflow:hidden;border:2px solid var(--gold);transition:transform .5s ease}
.product-image-wrap img{width:100%;height:100%;object-fit:cover}
.product-card:hover .product-image-wrap{transform:scale(1.06) rotate(-3deg)}
.product-tag{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:var(--primary-deep);color:var(--gold);font-size:9px;letter-spacing:.3em;text-transform:uppercase;padding:6px 14px;border-radius:999px;z-index:2}
.product-meta h3{font-family:var(--font-display);font-size:19px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.product-meta p{font-size:11px;opacity:.7;margin-bottom:10px}
.product-price{color:var(--gold);font-weight:800;font-size:16px}
.product-add{margin-top:12px;width:42px;height:42px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);font-size:20px;display:inline-grid;place-items:center;transition:all .3s}
.product-add:hover{background:var(--gold);color:var(--primary-deep)}

/* ---------- Story / promises / footer ---------- */
.story-section{padding:90px 6%;background:var(--paper);text-align:center;max-width:820px;margin:0 auto}
.story-section h2{font-family:var(--font-display);font-size:clamp(30px,4vw,50px);margin:14px 0 22px}
.story-section p{font-size:14px;line-height:1.9;opacity:.8}
.promises{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:0 5% 90px;max-width:1100px;margin:0 auto}
.promise{background:#fff;border:1px solid rgba(14,42,31,.12);border-radius:16px;padding:34px 26px;text-align:center}
.promise h3{font-family:var(--font-display);font-size:19px;margin:14px 0 8px}
.promise p{font-size:12px;line-height:1.7;opacity:.75}
.promise .p-ico{width:46px;height:46px;border-radius:50%;background:var(--primary);color:var(--gold);display:inline-grid;place-items:center;font-size:20px}
.mk-footer{background:var(--primary-deep);color:var(--on-dark);padding:60px 6% 30px}
.mk-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;max-width:1200px;margin:0 auto 40px}
.mk-footer h4{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.mk-footer a,.mk-footer p{display:block;font-size:12px;opacity:.8;line-height:2}
.mk-footer a:hover{color:var(--gold);opacity:1}
.mk-footer-brand{font-family:var(--font-display);font-size:26px;margin-bottom:10px}
.mk-footer-bottom{border-top:1px solid rgba(201,162,75,.2);padding-top:22px;text-align:center;font-size:11px;opacity:.6;letter-spacing:.14em}

/* ---------- Cart drawer ---------- */
.cart-drawer{position:fixed;top:0;right:-420px;width:min(420px,92vw);height:100vh;background:var(--paper);z-index:100;transition:right .45s ease;box-shadow:-20px 0 60px rgba(0,0,0,.3);display:flex;flex-direction:column}
.cart-drawer.open{right:0}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid rgba(14,42,31,.15)}
.cart-head h3{font-family:var(--font-display);font-size:22px}
.cart-items{flex:1;overflow-y:auto;padding:20px 24px}
.cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(14,42,31,.1)}
.cart-item img{width:64px;height:64px;object-fit:cover;border-radius:10px}
.cart-item h4{font-family:var(--font-display);font-size:15px}
.cart-item span{font-size:12px;color:var(--gold);font-weight:700}
.cart-item button{color:#a33;font-size:11px}
.cart-foot{padding:22px 24px;border-top:1px solid rgba(14,42,31,.15)}
.cart-total{display:flex;justify-content:space-between;font-weight:800;margin-bottom:14px}
.cart-note{font-size:11px;opacity:.7;margin-top:10px;text-align:center}
.cart-overlay{position:fixed;inset:0;background:rgba(8,27,19,.55);z-index:99;opacity:0;pointer-events:none;transition:opacity .4s}
.cart-overlay.open{opacity:1;pointer-events:auto}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(34px);filter:blur(6px);transition:opacity .9s ease,transform .9s ease,filter .9s ease}
.reveal.in{opacity:1;transform:none;filter:none}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .mk-coll-grid{grid-template-columns:repeat(2,1fr)}
  .mk-dark{grid-template-columns:1fr}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .promises{grid-template-columns:1fr}
  .mk-footer-grid{grid-template-columns:1fr}
  .mk-nav{display:none}
}
@media (max-width:640px){
  .campaign-section{grid-template-columns:1fr;grid-template-rows:390px auto auto;height:auto;min-height:0}
  .campaign-media{grid-row:1;min-height:390px}
  .campaign-media video{object-position:84% center}
  .campaign-copy{grid-row:2;padding:33px 7% 30px}
  .campaign-copy h2{font-size:50px}
  .campaign-caption{position:static;padding:0 7% 22px 8px}
  .mk-hero-copy{left:6%;right:6%;bottom:12%}
  .product-grid{grid-template-columns:1fr 1fr;gap:14px}
  .product-card{padding:14px 12px 18px}
  .product-image-wrap{width:82%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none;filter:none}
}


/* ---------- Builder pages (Elementor / block editor) ---------- */
.mj-page{min-height:60vh}
.mj-page-inner{max-width:1120px;margin:0 auto;padding:90px 6%}
.mj-page-flush .mj-page-body{width:100%}
.mj-page-title{font-family:var(--font-display);font-size:clamp(34px,5vw,58px);line-height:1.05;margin:0 0 26px;color:var(--on-dark)}
.mj-page-body{font-size:15px;line-height:1.85;color:var(--on-dark)}
.mj-page-body a{color:var(--gold)}
.mj-page-body h2,.mj-page-body h3{font-family:var(--font-display);color:var(--on-dark)}
.mj-list{display:grid;gap:34px}
.mj-list-item h2{font-family:var(--font-display);font-size:26px;margin:0 0 8px}
.mj-list-item a{color:var(--gold);text-decoration:none}
.mj-list-excerpt{font-size:14px;line-height:1.8;opacity:.85}
.mj-404 p{max-width:520px}