/* ============================================================
   Aurelia — "Dark Luxe" jewellery skin (black + gold)
   Scoped under [data-skin="jewellery"]; layers over store.css.
   Bespoke dark storefront + custom home (.jx-*) with 3D diamond.
   ============================================================ */

/* ---------- Dark tokens (recolor the whole storefront) ---------- */
body[data-skin="jewellery"]{
  --bg:#0a0a0c; --surface:#151318; --surface-2:#1e1b23;
  --ink:#f4ecdd; --ink-soft:#cbc0ad; --muted:#8a8273;
  --line:#2a2630; --line-strong:#3a3542;
  --brand:#d4af37; --brand-2:#e7c873; --brand-soft:#241f12; --brand-ink:#1a1408;
  --grad:linear-gradient(135deg,#b8860b 0%,#e7c873 50%,#9c7a1e 100%);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 18px 40px rgba(0,0,0,.55);
  background:#0a0a0c; color:var(--ink);
  font-family:'Jost','Segoe UI',system-ui,sans-serif;
}
body[data-skin="jewellery"] .site-main{background:transparent}
[data-skin="jewellery"] h1,[data-skin="jewellery"] h2,[data-skin="jewellery"] h3,[data-skin="jewellery"] h4{
  font-family:'Playfair Display',Georgia,serif;letter-spacing:.2px;color:var(--ink)}
[data-skin="jewellery"] a{color:var(--brand-2)}
[data-skin="jewellery"] .muted{color:var(--muted)}
[data-skin="jewellery"] .card{background:var(--surface);border-color:var(--line)}
[data-skin="jewellery"] .input,[data-skin="jewellery"] select,[data-skin="jewellery"] textarea{
  background:var(--surface-2);border-color:var(--line-strong);color:var(--ink)}
[data-skin="jewellery"] ::selection{background:rgba(212,175,55,.3)}

@keyframes jx-shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes jx-spin{0%{transform:rotateY(0) rotateZ(.5deg)}50%{transform:rotateY(180deg) rotateZ(-.5deg)}100%{transform:rotateY(360deg) rotateZ(.5deg)}}
@keyframes jx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes jx-pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.08)}}
@keyframes jx-twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes jx-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes jx-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(4deg)}}

/* ---------- Top utility bar ---------- */
[data-skin="jewellery"] .util-bar{background:#000;color:#cdbf9e;border-bottom:1px solid #241f12}
[data-skin="jewellery"] .util-left strong{color:var(--brand-2)}
[data-skin="jewellery"] .util-right a{color:#cdbf9e}
[data-skin="jewellery"] .util-right a:hover{color:#fff}

/* ---------- Header ---------- */
[data-skin="jewellery"] .site-header{background:rgba(10,10,12,.82);border-bottom:1px solid var(--line);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px)}
[data-skin="jewellery"] .site-header.scrolled{background:rgba(10,10,12,.95);box-shadow:0 8px 30px -12px rgba(0,0,0,.8)}
[data-skin="jewellery"] .jw-logo{display:inline-flex;align-items:center;gap:11px}
[data-skin="jewellery"] .jw-logo:hover{text-decoration:none}
[data-skin="jewellery"] .jw-mark{font-size:25px;filter:drop-shadow(0 2px 5px rgba(212,175,55,.55));animation:jx-bob 4s ease-in-out infinite}
[data-skin="jewellery"] .jw-name{display:flex;flex-direction:column;line-height:1;font-family:'Playfair Display',serif;
  font-weight:800;font-size:24px;background:linear-gradient(90deg,#b8860b,#fff2cc,#b8860b);background-size:200% auto;
  color:transparent;-webkit-background-clip:text;background-clip:text;animation:jx-shimmer 5s linear infinite}
[data-skin="jewellery"] .jw-name small{font-family:'Jost',sans-serif;font-size:9px;font-weight:500;letter-spacing:.34em;
  color:var(--muted);-webkit-text-fill-color:var(--muted);margin-top:5px}
[data-skin="jewellery"] .search .input{background:#1b1820;border:1px solid var(--line-strong);color:var(--ink)}
[data-skin="jewellery"] .search .input::placeholder{color:#7c7464}
[data-skin="jewellery"] .search .input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(212,175,55,.18)}
[data-skin="jewellery"] .search-btn{background:var(--grad);color:#1a1408}
[data-skin="jewellery"] .acct-link{color:var(--ink-soft)}
[data-skin="jewellery"] .acct-link .ai,[data-skin="jewellery"] .cart-link,[data-skin="jewellery"] .wish-link{background:#1e1b23;color:var(--brand-2)}
[data-skin="jewellery"] .acct-link:hover{background:#241f12;color:var(--brand-2)}
[data-skin="jewellery"] .nav-div{background:var(--line-strong)}
[data-skin="jewellery"] .nav-row{background:rgba(10,10,12,.9);border-top:1px solid var(--line)}
[data-skin="jewellery"] .nav-row-inner{gap:clamp(14px,2vw,30px)}
[data-skin="jewellery"] .nav-row-inner a{font-family:'Jost',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  font-size:12px;color:var(--ink-soft);padding-left:6px;padding-right:6px}
[data-skin="jewellery"] .nav-row-inner a:hover{color:var(--brand-2);border-bottom-color:var(--brand)}
[data-skin="jewellery"] .nav-hot{color:var(--brand-2)!important}
[data-skin="jewellery"] .util-bar .util-left,[data-skin="jewellery"] .topbar-note{color:#cdbf9e}

/* ---------- Buttons ---------- */
[data-skin="jewellery"] .btn{background:#1e1b23;border:1px solid var(--line-strong);color:var(--ink);border-radius:10px}
[data-skin="jewellery"] .btn:hover{border-color:var(--brand)}
[data-skin="jewellery"] .btn-primary{background:var(--grad);color:#1a1408;border:none;font-weight:700;letter-spacing:.03em}
[data-skin="jewellery"] .btn-primary:hover{filter:brightness(1.07)}

/* ---------- Product cards (dark, shine, tilt-ready) ---------- */
[data-skin="jewellery"] .prod-card{background:#161319;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform .18s ease,box-shadow .25s ease,border-color .25s ease;
  transform-style:preserve-3d;will-change:transform}
[data-skin="jewellery"] .prod-card:hover{border-color:var(--brand);box-shadow:0 26px 50px -18px rgba(0,0,0,.8),0 0 0 1px rgba(212,175,55,.25)}
[data-skin="jewellery"] .prod-thumb{background:radial-gradient(120% 120% at 50% 20%,#fffdf8,#efe2c4 75%)}
[data-skin="jewellery"] .prod-thumb::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.6) 48%,transparent 60%);
  transform:translateX(-120%);transition:transform .8s ease}
[data-skin="jewellery"] .prod-card:hover .prod-thumb::after{transform:translateX(120%)}
[data-skin="jewellery"] .prod-body{background:#161319}
[data-skin="jewellery"] .prod-name{font-family:'Playfair Display',serif;font-size:16px;color:var(--ink)}
[data-skin="jewellery"] .prod-name:hover{color:var(--brand-2)}
[data-skin="jewellery"] .prod-price .price{color:var(--brand-2);font-weight:700}
[data-skin="jewellery"] .prod-price .strike{color:var(--muted)}
[data-skin="jewellery"] .card-rating .stars::before{color:#e7c873}
[data-skin="jewellery"] .card-rating .rc{color:var(--muted)}
[data-skin="jewellery"] .wish-heart{background:rgba(20,17,24,.85);color:#9c917b}
[data-skin="jewellery"] .wish-heart.active,[data-skin="jewellery"] .wish-heart:hover{color:#e7c873}
[data-skin="jewellery"] .sale-badge{background:var(--grad);color:#1a1408}
[data-skin="jewellery"] .add-cart{letter-spacing:.04em}

/* ---------- Shop / filters / PDP (dark) ---------- */
[data-skin="jewellery"] .filter-card{background:#151318;border-color:var(--line)}
[data-skin="jewellery"] .filter-cats a{color:var(--ink-soft)}
[data-skin="jewellery"] .filter-cats a:hover{background:#1e1b23;color:var(--ink)}
[data-skin="jewellery"] .filter-cats a.active{background:var(--brand-soft);color:var(--brand-2)}
[data-skin="jewellery"] .filter-cats a.active b{background:var(--brand);color:#1a1408}
[data-skin="jewellery"] .chip-x{background:var(--brand-soft);color:var(--brand-2)}
[data-skin="jewellery"] .shop-head h1,[data-skin="jewellery"] .pdp h1{font-family:'Playfair Display',serif}
[data-skin="jewellery"] .pdp-brand,[data-skin="jewellery"] .pdp .price{color:var(--brand-2)}
[data-skin="jewellery"] .pdp-media{background:radial-gradient(120% 120% at 50% 20%,#fffdf8,#efe2c4 78%)}
[data-skin="jewellery"] .filters-toggle{background:#151318;border-color:var(--line-strong);color:var(--ink)}

/* ---------- Footer ---------- */
[data-skin="jewellery"] .foot-trust{background:#0d0c0f;border-color:var(--line)}
[data-skin="jewellery"] .newsletter-band{background:linear-gradient(120deg,#1a1509,#2a2008 60%,#1a1509);
  border-top:1px solid #3a2e12;border-bottom:1px solid #3a2e12}
[data-skin="jewellery"] .newsletter-band h3{font-family:'Playfair Display',serif;color:#f4e6c0}
[data-skin="jewellery"] .site-footer{background:#050505;color:#a89e88}
[data-skin="jewellery"] .footer-grid h4{color:#e7c873;font-family:'Playfair Display',serif}
[data-skin="jewellery"] .footer-bottom{border-top-color:#241f12}

/* =====================================================
   BESPOKE DARK-LUXE HOME  (.jx-*)
   ===================================================== */
[data-skin="jewellery"] .reveal[data-d="1"]{transition-delay:.12s}
[data-skin="jewellery"] .reveal[data-d="2"]{transition-delay:.24s}
[data-skin="jewellery"] .reveal[data-d="3"]{transition-delay:.36s}
[data-skin="jewellery"] .reveal[data-d="4"]{transition-delay:.48s}

/* hero */
.jx-hero{position:relative;overflow:hidden;background:#08070a;min-height:88vh;display:flex;align-items:center}
.jx-hero-bg{position:absolute;inset:0;
  background:
   radial-gradient(60% 60% at 78% 30%,rgba(212,175,55,.20),transparent 60%),
   radial-gradient(50% 50% at 15% 80%,rgba(184,134,11,.12),transparent 60%),
   #08070a}
.jx-hero-bg::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(231,200,115,.5) 1px,transparent 1px);background-size:46px 46px;
  -webkit-mask-image:radial-gradient(70% 70% at 70% 40%,#000,transparent);mask-image:radial-gradient(70% 70% at 70% 40%,#000,transparent)}
.jx-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:30px;padding:60px 20px 70px}
.jx-eyebrow{display:inline-block;color:var(--brand-2);letter-spacing:.28em;text-transform:uppercase;font-size:12px;font-weight:600;margin-bottom:18px}
.jx-title{font-family:'Playfair Display',serif;font-weight:800;color:#fff;font-size:clamp(38px,5.6vw,72px);line-height:1.04;margin:0 0 18px}
.jx-title em{font-style:italic;background:linear-gradient(90deg,#b8860b,#fff2cc,#d4af37);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:jx-shimmer 5s linear infinite}
.jx-lead{color:#c8bda8;font-size:18px;max-width:480px;margin:0 0 30px;line-height:1.7}
.jx-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px}
.jx-btn-gold{display:inline-flex;align-items:center;gap:8px;background:var(--grad);color:#080604;font-weight:800;
  -webkit-text-fill-color:#080604;text-shadow:0 1px 0 rgba(255,255,255,.28);
  letter-spacing:.04em;padding:15px 30px;border-radius:999px;box-shadow:0 14px 34px -10px rgba(212,175,55,.55);transition:.18s}
.jx-btn-gold:hover{transform:translateY(-2px);filter:brightness(1.07);text-decoration:none;color:#080604}
/* override the global [data-skin] a colour so button labels stay readable */
[data-skin="jewellery"] .jx-btn-gold,[data-skin="jewellery"] .jx-btn-gold:hover{color:#080604!important;-webkit-text-fill-color:#080604}
[data-skin="jewellery"] .jx-btn-ghost{color:#e9dec6}
[data-skin="jewellery"] .jx-btn-ghost:hover{color:#fff}
.jx-btn-ghost{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);color:#e9dec6;
  padding:15px 26px;border-radius:999px;font-weight:600;transition:.18s}
.jx-btn-ghost:hover{border-color:var(--brand);color:#fff;text-decoration:none}
.jx-stats{display:flex;gap:34px}
.jx-stats b{display:block;font-family:'Playfair Display',serif;font-size:30px;color:#fff;line-height:1}
.jx-stats span{font-size:12px;color:var(--muted);letter-spacing:.04em}

/* hero stage + 3D diamond */
.jx-hero-stage{position:relative;display:grid;place-items:center;min-height:400px}
.jx-glow{position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(231,200,115,.4),rgba(184,134,11,.12) 55%,transparent 72%);
  filter:blur(8px);animation:jx-pulse 4s ease-in-out infinite}
.jx-diamond{position:relative;width:300px;max-width:80%;animation:jx-float 6s ease-in-out infinite}
.jx-diamond img{display:block;width:100%;height:auto;transform-origin:center;
  filter:drop-shadow(0 18px 30px rgba(212,175,55,.45));animation:jx-sway 7s ease-in-out infinite}
@keyframes jx-sway{0%,100%{transform:perspective(680px) rotateY(-15deg)}50%{transform:perspective(680px) rotateY(15deg)}}
.jx-spark{position:absolute;width:18px;height:18px;background:radial-gradient(circle,#fff,rgba(255,247,224,.2) 60%,transparent 70%);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)}
.jx-spark.a{top:10%;left:18%;animation:jx-twinkle 2.6s ease-in-out infinite}
.jx-spark.b{top:24%;right:14%;width:12px;animation:jx-twinkle 2.2s ease-in-out .5s infinite}
.jx-spark.c{bottom:22%;left:24%;width:14px;animation:jx-twinkle 3s ease-in-out 1s infinite}
.jx-spark.d{bottom:14%;right:22%;width:10px;animation:jx-twinkle 2.4s ease-in-out 1.4s infinite}
.jx-scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;width:38px;height:38px;
  border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;color:var(--brand-2);
  animation:jx-float 2.4s ease-in-out infinite}
.jx-scroll:hover{text-decoration:none;border-color:var(--brand)}

/* marquee */
.jx-marquee{background:var(--grad);color:#1a1408;overflow:hidden;white-space:nowrap;padding:11px 0;font-weight:700}
.jx-marquee-track{display:inline-flex;gap:0;animation:jx-marquee 26s linear infinite}
.jx-marquee-track span{padding:0 30px;letter-spacing:.06em;font-size:13.5px;text-transform:uppercase}

/* sections */
.jx-section{padding:64px 20px 10px}
.jx-head{text-align:center;margin-bottom:34px;position:relative}
.jx-head .jx-kicker{display:inline-block;color:var(--brand-2);letter-spacing:.28em;text-transform:uppercase;font-size:12px;font-weight:600;margin-bottom:8px}
.jx-head h2{font-family:'Playfair Display',serif;font-size:clamp(28px,3.6vw,42px);color:#fff;margin:0}
.jx-seeall{position:absolute;right:0;bottom:8px;color:var(--brand-2);font-weight:600;font-size:14px}
@media(max-width:640px){.jx-seeall{position:static;display:block;margin-top:8px}}

/* collections */
.jx-collections{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.jx-coll{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:200px;border:1px solid var(--line);border-radius:18px;
  background:radial-gradient(120% 120% at 50% 0%,#1c1922,#0e0d11);transition:.3s;text-align:center}
.jx-coll::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 80% at 50% -10%,rgba(212,175,55,.22),transparent 60%);opacity:0;transition:.3s}
.jx-coll:hover{border-color:var(--brand);transform:translateY(-6px);text-decoration:none;box-shadow:0 28px 50px -22px rgba(0,0,0,.85)}
.jx-coll:hover::before{opacity:1}
.jx-coll-ic{font-size:48px;filter:drop-shadow(0 8px 14px rgba(212,175,55,.4));transition:.3s}
.jx-coll:hover .jx-coll-ic{transform:scale(1.12) rotate(-4deg)}
.jx-coll b{font-family:'Playfair Display',serif;font-size:20px;color:#fff}
.jx-coll i{font-style:normal;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-2);opacity:0;transition:.3s}
.jx-coll:hover i{opacity:1}

/* story */
.jx-story{margin-top:60px;background:linear-gradient(180deg,#0d0c10,#08070a)}
.jx-story-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:44px;padding:70px 20px}
.jx-story-art{position:relative;min-height:300px;display:grid;place-items:center;border:1px solid var(--line);border-radius:22px;
  background:radial-gradient(120% 120% at 50% 0%,#1c1922,#0c0b0e);overflow:hidden}
.jx-story-art .jx-ring{font-size:140px;filter:drop-shadow(0 16px 30px rgba(212,175,55,.4));animation:jx-float 6s ease-in-out infinite}
.jx-story-glow{position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(212,175,55,.28),transparent 70%);filter:blur(10px);animation:jx-pulse 5s ease-in-out infinite}
.jx-story-copy h2{font-size:clamp(26px,3.4vw,40px);color:#fff;margin:6px 0 14px}
.jx-story-copy p{color:#c4b9a4;line-height:1.8;margin:0 0 18px}
.jx-craft{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:9px}
.jx-craft li{color:#d8cdb6;font-size:14.5px}

/* testimonials */
.jx-testi{margin-top:60px;padding:64px 0 20px;background:radial-gradient(70% 100% at 50% 0%,#16130c,#08070a)}
.jx-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.jx-quote{background:#151318;border:1px solid var(--line);border-radius:16px;padding:24px;margin:0}
.jx-quote .jx-stars{color:#e7c873;letter-spacing:2px;margin-bottom:10px}
.jx-quote blockquote{margin:0 0 16px;font-family:'Playfair Display',serif;font-style:italic;font-size:17px;color:#ece2cf;line-height:1.6}
.jx-quote figcaption b{color:var(--brand-2);font-style:normal}
.jx-quote figcaption{display:flex;flex-direction:column}
.jx-quote figcaption span{font-size:12.5px;color:var(--muted)}

/* responsive */
@media(max-width:860px){
  .jx-hero-inner{grid-template-columns:1fr;text-align:center;padding:46px 18px}
  .jx-lead{margin-left:auto;margin-right:auto}.jx-cta,.jx-stats{justify-content:center}
  .jx-hero-stage{min-height:300px;margin-top:10px}.jx-diamond{width:180px;height:200px}
  .jx-collections,.jx-testi-grid{grid-template-columns:1fr 1fr}
  .jx-story-inner{grid-template-columns:1fr;gap:24px}
}
@media(max-width:560px){.jx-collections,.jx-testi-grid{grid-template-columns:1fr}.jx-stats{gap:22px}}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  [data-skin="jewellery"] *{animation:none!important}
}

[data-skin="jewellery"] .review-gate{color:var(--ink-soft)}