/* CLASH Jewelry — site-wide chrome styles.
   Shared by EVERY content page (ticker, nav, mobile menu, footer,
   cart drawer, lightbox). Page-specific styles (e.g. product detail)
   live in their own stylesheet and are added via pageStyles. */

:root{
  --ink:#141210;
  --ink-2:#3a352f;
  --muted:#8a8378;
  --line:#e7e1d6;
  --line-2:#efe9de;
  --paper:#F4F0E8;
  --bg:#FBF9F5;
  --card:#ffffff;
  --orange:#F68C48;
  --orange-deep:#ee7a2f;
  --orange-soft:#fdeadb;
  --green:#15a05f;
  --shadow-sm:0 1px 2px rgba(20,18,16,.06), 0 2px 8px rgba(20,18,16,.05);
  --shadow-md:0 8px 30px rgba(20,18,16,.10), 0 2px 8px rgba(20,18,16,.06);
  --shadow-lg:0 24px 70px rgba(20,18,16,.18), 0 8px 24px rgba(20,18,16,.10);
  --r:14px;
  --maxw:1280px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Poppins',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
a{color:#d97a3d;text-decoration:none;}
a:hover{color:var(--orange);}
::selection{background:var(--orange);color:#fff;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.kbar{height:4px;width:34px;background:var(--orange);border-radius:2px;}

/* ---------- Marquee ticker ---------- */
.ticker{background:#d97a3d;color:#fff;overflow:hidden;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.22);}
.ticker__track{display:inline-flex;gap:0;animation:ticker 28s linear infinite;will-change:transform;}
.ticker__track span{display:inline-flex;align-items:center;gap:14px;padding:8px 0;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;}
.ticker__track span::after{content:'✦';margin:0 26px;opacity:.7;}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.ticker__track{animation:none;}}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(246,140,72,.97);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.08);}
.nav__row{display:flex;align-items:center;gap:22px;height:68px;}
.brand{display:inline-flex;flex-direction:column;align-items:flex-end;font-weight:800;letter-spacing:-.01em;line-height:.92;color:#FBF4EC;}
.brand b{font-size:25px;}
.brand i{font-style:normal;font-weight:600;font-size:13px;color:inherit;margin-top:2px;letter-spacing:.005em;}
.brand.dark{color:var(--ink);}
.brand.dark i{color:var(--orange-deep);}
.nav__links{display:flex;align-items:center;gap:4px;margin-left:14px;flex:1;}
.nav__links a{position:relative;padding:9px 13px;border-radius:9px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.88);transition:.16s;}
.nav__links a:hover{background:rgba(255,255,255,.18);color:#fff;}
.nav__links a.active{color:#fff;font-weight:600;}
.nav__links a.active::after{content:'';position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:#fff;border-radius:2px;}
.nav__actions{display:flex;align-items:center;gap:6px;}
.iconbtn{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:var(--ink);transition:.16s;position:relative;}
.iconbtn:hover{background:var(--paper);}
.nav .iconbtn{color:#fff;}
.nav .iconbtn:hover{background:rgba(255,255,255,.18);}
.cartdot{position:absolute;top:5px;right:5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#141210;color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;transform:scale(0);transition:transform .28s cubic-bezier(.34,1.56,.64,1);}
.cartdot.show{transform:scale(1);}
.hamburger{display:none;}

/* breadcrumb */
.crumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:16px 0 4px;}
.crumb a:hover{color:var(--orange-deep);}
.crumb span.sep{opacity:.5;}
.crumb .cur{color:var(--ink-2);font-weight:500;}

/* ---------- footer ---------- */
.footer{margin-top:60px;background:#d97a3d;border-top:none;}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:54px 0 38px;}
.footer h4{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);margin:0 0 16px;}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.footer ul a{font-size:13.5px;color:rgba(255,255,255,.92);}
.footer ul a:hover{color:#141210;}
.footer__brand b{font-size:26px;font-weight:800;}
.footer__brand i{font-style:normal;color:inherit;font-weight:600;}
.footer__brand p{font-size:13px;color:rgba(255,255,255,.84);line-height:1.6;max-width:260px;margin:14px 0 0;}
.footer__bar{border-top:1px solid rgba(255,255,255,.28);padding:18px 0;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.84);}

/* ---------- Cart drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(20,18,16,.42);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:90;}
.scrim.show{opacity:1;pointer-events:auto;}
.drawer{position:fixed;top:0;right:0;height:100%;width:420px;max-width:92vw;background:var(--bg);z-index:100;transform:translateX(100%);transition:transform .38s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column;box-shadow:var(--shadow-lg);}
.drawer.show{transform:translateX(0);}
.drawer__head{background:var(--orange);color:#fff;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;}
.drawer__head h3{margin:0;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:10px;}
.drawer__close{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;transition:.16s;}
.drawer__close:hover{background:rgba(255,255,255,.18);}
.ship{padding:16px 22px;background:#fff;border-bottom:1px solid var(--line);}
.ship__txt{font-size:12.5px;font-weight:500;color:var(--ink-2);margin-bottom:9px;}
.ship__txt b{color:var(--orange-deep);font-weight:700;}
.ship__bar{height:7px;border-radius:4px;background:var(--paper);overflow:hidden;}
.ship__fill{height:100%;background:linear-gradient(90deg,var(--orange),var(--orange-deep));border-radius:4px;transition:width .5s cubic-bezier(.2,.7,.3,1);}
.cartitems{flex:1;overflow-y:auto;padding:8px 22px;}
.citem{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);animation:slidein .35s ease;}
@keyframes slidein{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}
.citem__img{width:74px;height:74px;border-radius:12px;background:#fff;border:1px solid var(--line);padding:6px;flex:none;}
.citem__img img{width:100%;height:100%;object-fit:contain;}
.citem__body{flex:1;min-width:0;}
.citem__name{font-size:14px;font-weight:600;line-height:1.25;}
.citem__var{font-size:11.5px;color:var(--muted);margin-top:3px;}
.citem__foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
.citem .qty{border-radius:10px;}
.citem .qty button{width:32px;height:32px;font-size:16px;}
.citem .qty span{min-width:24px;font-size:14px;}
.citem__price{font-size:14px;font-weight:700;}
.citem__rm{font-size:11px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;margin-top:6px;}
.citem__rm:hover{color:var(--orange-deep);}
.citem--unavailable{opacity:.5;}
.cart-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--muted);text-align:center;padding:40px;}
.cart-empty svg{width:46px;height:46px;opacity:.4;}
.drawer__foot{padding:18px 22px 22px;background:#fff;border-top:1px solid var(--line);}
.subrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;font-size:13px;color:var(--ink-2);}
.subrow.total{font-size:17px;font-weight:700;color:var(--ink);margin:8px 0 14px;}
.btn-checkout{width:100%;height:54px;border-radius:14px;background:var(--ink);color:#fff;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;transition:.2s;}
.btn-checkout:hover{background:#000;}
.btn-checkout svg{width:17px;height:17px;}
.stripe-note{text-align:center;font-size:11px;color:var(--muted);margin-top:12px;display:flex;align-items:center;justify-content:center;gap:6px;}
.stripe-note svg{width:13px;height:13px;}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;}
.qty button{width:46px;height:56px;font-size:20px;color:var(--ink-2);transition:.14s;}
.qty button:hover{background:var(--paper);color:var(--ink);}
.qty span{min-width:34px;text-align:center;font-size:16px;font-weight:600;}
.btn-add{flex:1;height:56px;border-radius:14px;background:var(--ink);color:#fff;font-size:15.5px;font-weight:600;letter-spacing:.01em;display:flex;align-items:center;justify-content:center;gap:10px;transition:.2s;box-shadow:var(--shadow-sm);}
.btn-add:hover{background:#000;transform:translateY(-1px);box-shadow:var(--shadow-md);}
.btn-add:active{transform:translateY(0);}
.btn-add svg{width:19px;height:19px;}
.btn-add.added{background:var(--orange-deep);}

/* ---------- lightbox (generic image viewer, reusable anywhere) ---------- */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(20,18,16,.9);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;}
.lightbox.show{opacity:1;pointer-events:auto;}
.lightbox img{max-width:84vw;max-height:80vh;object-fit:contain;}
.lightbox__close{position:absolute;top:24px;right:28px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;font-size:22px;}
.lightbox__close:hover{background:rgba(255,255,255,.24);}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;}
.lightbox__nav:hover{background:rgba(255,255,255,.24);}
.lightbox__nav.prev{left:28px;}
.lightbox__nav.next{right:28px;}

/* ---------- mobile menu ---------- */
.mmenu{position:fixed;inset:0;z-index:110;background:var(--bg);transform:translateX(-100%);transition:transform .34s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column;padding:22px;}
.mmenu.show{transform:translateX(0);}
.mmenu__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.mmenu a{font-size:24px;font-weight:700;letter-spacing:-.02em;padding:14px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:var(--ink);}
.mmenu a.active{color:var(--orange-deep);}
.mmenu a svg{width:20px;height:20px;opacity:.4;}

/* ---------- shared responsive ---------- */
@media (max-width:1000px){
  .nav__links{display:none;}
  .hamburger{display:grid;}
  .footer__top{grid-template-columns:1fr 1fr;gap:30px;}
}
@media (max-width:560px){
  .wrap{padding:0 18px;}
  .footer{margin-top:44px;}
  .footer__top{grid-template-columns:1fr;gap:34px;padding:44px 0 40px;}
  .footer__brand p{max-width:none;}
  .footer ul{gap:9px;}
  .footer__bar{flex-direction:column;align-items:flex-start;gap:6px;padding:22px 0;}
}