/*
Theme Name: JLUXAURA
Theme URI: https://jluxaura.com
Description: Monochrome luxury storefront for JLUXAURA. Mobile-first, WooCommerce-ready, RTL-friendly. Original design.
Version: 0.1.1
Author: JLUXAURA
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: jluxaura
*/

/* ===== Tokens ===== */
:root{
  --ink:#0a0a0a; --paper:#fff; --muted:#8a8a8a; --line:#e7e7e7;
  --gap:16px; --maxw:1320px;
  --ff:'Helvetica Neue',Arial,'Segoe UI',Tahoma,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.jx-wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gap)}
.jx-up{text-transform:uppercase;letter-spacing:.14em}
.jx-mono{fill:currentColor}

/* ===== Buttons ===== */
.jx-btn{display:inline-block;background:#000;color:#fff;border:1px solid #000;padding:14px 26px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;text-align:center;transition:.2s}
.jx-btn:hover{background:#fff;color:#000}
.jx-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.jx-btn.ghost:hover{background:#fff;color:#000}

/* ===== Promo bar (rotating) ===== */
.jx-promo{background:#000;color:#fff;height:36px;overflow:hidden;position:relative;font-size:11px}
.jx-promo-track{display:flex;flex-direction:column;animation:jxSlide 12s infinite}
.jx-promo-item{height:36px;display:flex;align-items:center;justify-content:center;letter-spacing:.14em;text-transform:uppercase;padding:0 12px;text-align:center}
@keyframes jxSlide{0%,28%{transform:translateY(0)}33%,61%{transform:translateY(-36px)}66%,94%{transform:translateY(-72px)}100%{transform:translateY(0)}}

/* ===== Header (mobile-first) ===== */
.jx-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.jx-bar{display:flex;align-items:center;justify-content:space-between;height:58px;gap:12px}
.jx-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;letter-spacing:.2em}
.jx-logo .jx-mono{width:22px;height:34px}
.jx-logo img{max-height:38px;width:auto}
.jx-wordmark{font-weight:800;letter-spacing:.22em}
.jx-nav{display:none}
.jx-tools{display:flex;align-items:center;gap:14px}
.jx-ic{width:22px;height:22px;stroke:#000;fill:none;stroke-width:1.5}
.jx-cart{position:relative}
.jx-cart .c{position:absolute;top:-7px;right:-9px;background:#000;color:#fff;font-size:10px;min-width:15px;height:15px;border-radius:8px;display:grid;place-items:center;padding:0 3px}
.jx-burger{background:none;border:0;width:26px;height:22px;position:relative}
.jx-burger span{position:absolute;left:0;right:0;height:2px;background:#000;transition:.25s}
.jx-burger span:nth-child(1){top:2px}.jx-burger span:nth-child(2){top:10px}.jx-burger span:nth-child(3){top:18px}

/* mobile drawer */
.jx-drawer{position:fixed;inset:0 0 0 auto;width:84%;max-width:340px;background:#fff;z-index:70;
  transform:translateX(100%);transition:.3s;padding:20px;overflow:auto;box-shadow:-10px 0 40px rgba(0,0,0,.15)}
html[dir="rtl"] .jx-drawer{inset:0 auto 0 0;transform:translateX(-100%)}
.jx-drawer.open{transform:translateX(0)}
.jx-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:65;opacity:0;visibility:hidden;transition:.3s}
.jx-overlay.open{opacity:1;visibility:visible}
.jx-drawer .jx-close{background:none;border:0;font-size:26px;line-height:1;margin-bottom:14px}
.jx-drawer nav a{display:block;padding:14px 4px;border-bottom:1px solid var(--line);font-size:15px;text-transform:uppercase;letter-spacing:.06em}

/* ===== Hero ===== */
.jx-hero{position:relative;min-height:78vh;background:linear-gradient(160deg,#111,#2c2c2c 45%,#0a0a0a);
  color:#fff;overflow:hidden;display:flex;align-items:flex-end}
.jx-hero video,.jx-hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.jx-hero .poster{display:grid;place-items:center;color:#555;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.jx-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 60%);z-index:1}
.jx-hero-in{position:relative;z-index:2;padding:0 var(--gap) 40px;width:100%;max-width:var(--maxw);margin:0 auto}
.jx-hero h1{font-size:clamp(30px,9vw,56px);font-weight:800;line-height:1;letter-spacing:.01em}
.jx-hero p{margin:12px 0 20px;max-width:420px;color:#dcdcdc;font-size:14px}

/* ===== Sections ===== */
.jx-sec{padding:42px 0}
.jx-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.jx-head h2{font-size:clamp(18px,5vw,26px);font-weight:800}
.jx-head a{font-size:12px;border-bottom:1px solid #000;padding-bottom:2px;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}

/* category grid (mobile: 1, then up) */
.jx-cats{display:grid;grid-template-columns:1fr;gap:12px}
.jx-cat{position:relative;aspect-ratio:3/4;overflow:hidden;display:flex;align-items:flex-end;background:linear-gradient(135deg,#ededed,#d7d7d7)}
.jx-cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jx-cat .ph{position:absolute;inset:0;display:grid;place-items:center;color:#b4b4b4;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.jx-cat .nm{position:relative;z-index:2;background:#000;color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;margin:14px}

/* product grid (mobile: 2, then up) */
.jx-prods{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.jx-card .thumb{aspect-ratio:4/5;position:relative;overflow:hidden;background:linear-gradient(135deg,#f0f0f0,#e0e0e0)}
.jx-card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jx-card .thumb .ph{position:absolute;inset:0;display:grid;place-items:center;color:#bdbdbd;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.jx-card .b{position:absolute;top:8px;right:8px;background:#000;color:#fff;font-size:9px;padding:4px 7px;letter-spacing:.1em;z-index:2}
.jx-card .nm{font-size:13px;font-weight:600;margin-top:8px}
.jx-card .pr{font-size:13px;color:#333;margin-top:2px}

/* ===== Footer ===== */
.jx-footer{background:#000;color:#cfcfcf;padding:44px 0 26px;margin-top:20px}
.jx-fcols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.jx-footer h4{color:#fff;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px}
.jx-footer a{display:block;color:#9d9d9d;font-size:13px;padding:5px 0}
.jx-footer a:hover{color:#fff}
.jx-fbrand{grid-column:1 / -1;display:flex;align-items:center;gap:10px;color:#fff;margin-bottom:6px}
.jx-fbrand .jx-mono{width:22px;height:32px;fill:#fff}
.jx-fbottom{border-top:1px solid #222;margin-top:30px;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:11px;color:#777;letter-spacing:.08em}

/* sticky mobile bottom CTA on single product */
.jx-mobile-buy{position:fixed;bottom:0;left:0;right:0;z-index:55;background:#000;color:#fff;border:0;padding:15px;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;display:none}

/* ===== Tablet ===== */
@media(min-width:768px){
  :root{--gap:28px}
  .jx-bar{height:64px}
  .jx-burger{display:none}
  .jx-nav{display:flex;gap:22px;font-size:12.5px;text-transform:uppercase;letter-spacing:.07em}
  .jx-nav a{position:relative;padding:6px 0}
  .jx-nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:#000;transition:.25s}
  .jx-nav a:hover::after{width:100%}
  .jx-cats{grid-template-columns:repeat(3,1fr);gap:14px}
  .jx-prods{grid-template-columns:repeat(3,1fr);gap:16px}
  .jx-fcols{grid-template-columns:1.5fr 1fr 1fr 1fr}
  .jx-fbrand{grid-column:auto;flex-direction:column;align-items:flex-start}
  .jx-sec{padding:64px 0}
}
/* ===== Desktop ===== */
@media(min-width:1024px){
  .jx-prods{grid-template-columns:repeat(4,1fr);gap:18px}
  .jx-hero{min-height:82vh}
}

/* ===== WooCommerce light touch ===== */
.woocommerce ul.products li.product .button,
.woocommerce a.button,.woocommerce button.button.alt{background:#000;color:#fff;border-radius:0}
.woocommerce a.button:hover,.woocommerce button.button.alt:hover{background:#333}
.woocommerce .price{color:#111}