/*
Theme Name: Chronosmith SBRY Atelier
Theme URI: http://sbry.webdevproject.cloud
Author: SBRY Atelier
Author URI: http://sbry.webdevproject.cloud
Description: Luxury Horology Atelier & WooCommerce Theme for Chronosmith by SBRY.
Version: 2.1.0
License: Proprietary
Text Domain: chronosmith-sbry
*/

/* ============ TOKENS ============ */
:root{
  --black:#0c0b0a;
  --charcoal:#161412;
  --panel:#1c1916;
  --panel-raised:#24201c;
  --line: rgba(201,162,75,0.18);
  --line-strong: rgba(201,162,75,0.38);
  --gold:#c9a24b;
  --gold-bright:#f3c77e;
  --gold-dim:#8a6a27;
  --ivory:#f7f4ed;
  --muted:#a39b8e;
  --muted-dim:#6e6659;
  --font-display:'Cormorant Garamond', serif;
  --font-body:'Jost', sans-serif;
  --font-mono:'Space Mono', monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--ivory);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
img,svg{display:block; max-width:100%; height:auto;}
::selection{background:var(--gold); color:var(--black);}

/* faint brushed-metal texture */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(115deg, rgba(201,162,75,0.015) 0px, rgba(201,162,75,0.015) 1px, transparent 1px, transparent 4px);
  opacity:.7;
}

/* ============ AMBIENT ROLEX SITEWIDE BACKGROUND ============ */
.ambient-bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.amb-sweep{
  position:absolute; width:160%; height:160%; top:-30%; left:-30%;
  background:
    radial-gradient(ellipse 900px 700px at 50% 30%, rgba(201,162,75,.15), transparent 60%),
    radial-gradient(ellipse 600px 500px at 80% 80%, rgba(138,106,39,.12), transparent 50%);
  animation:sweepmove 24s ease-in-out infinite;
}
@keyframes sweepmove{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(3%,2%) scale(1.05);}
}
.amb-dial{position:absolute; top:-280px; right:-280px; width:750px; height:750px; opacity:.25; animation:spin 220s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-bright);
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gold);}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:500; letter-spacing:.01em; color:var(--ivory);}
.serif-italic{font-style:italic; color:var(--gold-bright); font-weight:400;}

.wrap{max-width:1240px; margin:0 auto; padding:0 36px;}
@media(max-width:768px){.wrap{padding:0 20px;}}

/* ============ PRELOADER ============ */
#preloader{
  position:fixed; inset:0; z-index:9999; background:var(--black);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
  pointer-events:none;
}
#preloader.done{opacity:0; visibility:hidden;}
.loader-dial{position:relative; width:96px; height:96px;}
.loader-dial .ring{position:absolute; inset:0; border:1px solid var(--line-strong); border-radius:50%;}
.loader-dial .hand{
  position:absolute; left:50%; top:50%; width:2px; height:42px;
  background:linear-gradient(var(--gold-bright), transparent);
  transform-origin:top center; transform:translate(-50%,0) rotate(0deg);
  animation:sweep 1.4s linear infinite;
}
.loader-dial .center{position:absolute; left:50%; top:50%; width:6px; height:6px; background:var(--gold-bright); border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 10px var(--gold-bright);}
@keyframes sweep{to{transform:translate(-50%,0) rotate(360deg);}}

/* ============ CORNER LIVE CLOCK TICKER ============ */
.tick-mark{
  position:fixed; bottom:24px; right:30px; z-index:40;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.18em;
  color:var(--muted-dim); display:flex; align-items:center; gap:10px;
  pointer-events:none; background:rgba(12,11,10,0.85); padding:6px 14px; border:1px solid var(--line); backdrop-filter:blur(8px);
}
.tick-dot{width:6px; height:6px; border-radius:50%; background:var(--gold-bright); animation:pulse 1s steps(2,end) infinite;}
@keyframes pulse{0%,49%{opacity:1;} 50%,100%{opacity:.15;}}
@media(max-width:640px){.tick-mark{display:none;}}

/* ============ HEADER & NAV ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:linear-gradient(to bottom, rgba(12,11,10,.94), rgba(12,11,10,0));
  backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
header.scrolled{background:rgba(12,11,10,.96); border-bottom-color:var(--line); box-shadow:0 4px 30px rgba(0,0,0,0.8);}
.nav-inner{max-width:1240px; margin:0 auto; padding:20px 36px; display:flex; align-items:center; justify-content:space-between; gap:20px;}
@media(max-width:768px){.nav-inner{padding:16px 20px;}}

.logo{font-family:var(--font-display); font-size:22px; letter-spacing:.14em; font-weight:500;}
.logo em{font-style:normal; color:var(--gold-bright);}
.logo small{display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:.32em; color:var(--muted); margin-top:2px;}
@media(max-width:480px){.logo{font-size:18px;}}

nav.links{display:flex; gap:32px; align-items:center;}
nav.links a{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); position:relative; padding:4px 0; transition:color .3s;
}
nav.links a:hover, nav.links a.active{color:var(--ivory);}

.nav-actions{display:flex; align-items:center; gap:14px;}

.cart-btn{
  background:none; border:1px solid var(--line-strong); color:var(--gold-bright);
  padding:8px 14px; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  display:flex; align-items:center; gap:8px; transition:all .3s var(--ease);
}
.cart-btn:hover{background:var(--charcoal); border-color:var(--gold-bright);}
.cart-badge{
  background:var(--gold-bright); color:var(--black); width:18px; height:18px;
  border-radius:50%; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center;
}

.nav-cta{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--black); background:var(--gold-bright); padding:10px 18px; border:1px solid var(--gold-bright);
  transition:all .3s var(--ease); font-weight:700;
}
.nav-cta:hover{background:transparent; color:var(--gold-bright);}
@media(max-width:640px){.nav-cta{display:none;}}

/* ============ HAMBURGER MENU BUTTON & MOBILE DRAWER OVERLAY ============ */
.hamburger-btn{
  display:none; background:none; border:1px solid var(--line-strong); padding:10px;
  flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; cursor:pointer;
  transition:all 0.3s var(--ease);
  position:relative; z-index:110;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.hamburger-btn span{
  display:block; width:100%; height:2px; background:var(--gold-bright); transition:all 0.3s var(--ease);
  pointer-events:none;
}
.hamburger-btn:hover{border-color:var(--gold-bright); background:rgba(201,162,75,0.08);}
.hamburger-btn:active{background:rgba(201,162,75,0.15);}

@media(max-width:960px){
  nav.links{display:none !important;}
  .hamburger-btn{display:flex !important;}
  .nav-cta{display:none !important;}
  .cart-btn span:first-child{display:none;}
  .cart-btn{padding:8px 10px;}
}

.mobile-drawer{
  position:fixed; inset:0; z-index:99999; background:rgba(12,11,10,0.98); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; padding:32px 28px; opacity:0; visibility:hidden;
  transform:translateY(-20px); transition:all 0.4s var(--ease);
  -webkit-overflow-scrolling:touch;
  overflow-y:auto;
}
.mobile-drawer.open{opacity:1; visibility:visible; transform:translateY(0);}

.mobile-drawer-header{
  display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line);
  padding-bottom:20px; margin-bottom:32px;
}
.close-btn{
  background:none; border:1px solid var(--line-strong); color:var(--gold-bright);
  width:44px; height:44px; border-radius:50%; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all 0.3s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.close-btn:hover{border-color:var(--gold-bright); background:var(--gold-bright); color:var(--black);}
.close-btn:active{background:var(--gold); color:var(--black);}

.mobile-drawer-links{
  display:flex; flex-direction:column; gap:20px; flex-grow:1; justify-content:center;
}
.mobile-drawer-links a{
  font-family:var(--font-display); font-size:32px; color:var(--ivory); letter-spacing:.02em;
  transition:color 0.3s; border-bottom:1px solid rgba(201,162,75,0.08); padding-bottom:10px;
  -webkit-tap-highlight-color:transparent;
}
.mobile-drawer-links a:hover, .mobile-drawer-links a.active{color:var(--gold-bright); padding-left:10px;}

.mobile-drawer-footer{padding-top:20px; border-top:1px solid var(--line);}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:16px 32px; border:1px solid var(--gold-dim); color:var(--ivory);
  background:transparent; position:relative; overflow:hidden; transition:color .4s, border-color .4s, transform .3s var(--ease);
  text-align:center;
}
@media(max-width:480px){.btn{width:100%; padding:14px 20px; font-size:10px;}}

.btn-solid{background:var(--gold-bright); color:var(--black); border-color:var(--gold-bright); font-weight:700;}
.btn-ghost{border-color:var(--line-strong); color:var(--muted);}
.btn-small{padding:9px 16px; font-size:10px;}

/* ============ WORLD-CLASS ROLEX CINEMATIC HERO SECTION ============ */
.rolex-hero{
  min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative;
  padding-top:130px; padding-bottom:70px; overflow:hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(201,162,75,0.22) 0%, rgba(22,20,18,0.95) 55%, var(--black) 90%);
}

.rolex-stage{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; width:100%;
}
@media(max-width:960px){
  .rolex-stage{grid-template-columns:1fr; gap:40px; text-align:center;}
}

.rolex-copy .eyebrow{margin-bottom:20px;}
@media(max-width:960px){.rolex-copy .eyebrow{justify-content:center;}}

.rolex-copy h1{
  font-size:clamp(36px,6vw,84px); line-height:1.05; font-weight:400; color:var(--ivory);
  text-shadow:0 10px 40px rgba(0,0,0,0.8);
}
.rolex-copy p.lede{
  margin-top:22px; color:var(--muted); font-size:16px; max-width:480px; line-height:1.6;
}
@media(max-width:960px){.rolex-copy p.lede{margin-left:auto; margin-right:auto;}}

.rolex-actions{
  display:flex; align-items:center; gap:16px; margin-top:36px; flex-wrap:wrap;
}
@media(max-width:960px){.rolex-actions{justify-content:center;}}

/* 3D Interactive Rolex Watch Canvas Stage */
.rolex-watch-wrapper{
  position:relative; width:100%; max-width:480px; aspect-ratio:1/1; margin:0 auto;
  display:flex; align-items:center; justify-content:center; perspective:1200px;
}
@media(max-width:640px){.rolex-watch-wrapper{max-width:320px;}}

.rolex-orbit-ring{
  position:absolute; width:115%; height:115%; inset:-7.5%; z-index:1; pointer-events:none;
  animation:spinOrbit 120s linear infinite; opacity:0.65;
}
@keyframes spinOrbit{to{transform:rotate(360deg);}}

.rolex-watch-card{
  position:relative; z-index:2; width:88%; height:88%; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.06), rgba(20,18,15,0.8));
  border:1.5px solid var(--gold-bright);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.9),
    0 0 50px rgba(201,162,75,0.25);
  overflow:hidden; transform-style:preserve-3d; transition:transform 0.2s var(--ease);
}

.rolex-watch-card img{
  width:100%; height:100%; object-fit:cover; display:block;
}

#rolexThreeCanvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none;
}

.sapphire-glint{
  position:absolute; top:-50%; bottom:-50%; left:-40%; width:40%;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  transform:skewX(-25deg); pointer-events:none; z-index:4;
  animation:rolexGlint 5.5s ease-in-out infinite;
}
@keyframes rolexGlint{
  0%{left:-50%; opacity:0;}
  30%{left:140%; opacity:1;}
  100%{left:140%; opacity:0;}
}

.spec-badge{
  position:absolute; z-index:5; background:rgba(22,20,18,0.88); border:1px solid var(--gold-dim);
  color:var(--gold-bright); font-family:var(--font-mono); font-size:9px; letter-spacing:.16em;
  padding:5px 12px; backdrop-filter:blur(10px); border-radius:20px; white-space:nowrap;
}
.spec-badge.sb-1{top:10%; left:-10px;}
.spec-badge.sb-2{bottom:12%; right:-10px;}
@media(max-width:640px){.spec-badge{display:none;}}

.scroll-indicator{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; color:var(--muted-dim);
}

/* ============ SECTIONS & RESPONSIVE GRIDS ============ */
section{position:relative; z-index:1; padding:90px 0;}
@media(max-width:768px){section{padding:60px 0;}}

.section-head{display:flex; flex-direction:column; gap:12px; margin-bottom:44px; max-width:640px;}
.section-head h2{font-size:clamp(28px,4.5vw,44px); font-weight:400;}

.featured{background:var(--charcoal); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.featured-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:center;}
@media(max-width:900px){.featured-grid{grid-template-columns:1fr; gap:36px;}}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:960px){.grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.grid{grid-template-columns:1fr;}}

.card{
  background:var(--panel); border:1px solid var(--line); transition:border-color .4s, transform .4s var(--ease);
  display:flex; flex-direction:column;
}
.card-body{padding:20px; display:flex; flex-direction:column; gap:10px; flex:1;}
.card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:10px;}
.price{font-family:var(--font-mono); font-size:15px; color:var(--gold-bright);}

/* ============ IMAGE PLACEHOLDER ============ */
.ph{
  position:relative; background:linear-gradient(135deg, var(--charcoal), var(--panel));
  border:1px dashed var(--line-strong); display:flex; align-items:center; justify-content:center;
  flex-direction:column; overflow:hidden; aspect-ratio:4/3;
}
.ph img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; z-index:2;}

/* ============ CART DRAWER (RESPONSIVE) ============ */
.cart-drawer{
  position:fixed; top:0; right:-420px; width:420px; max-width:100vw; height:100%;
  background:var(--panel-raised); border-left:1px solid var(--line-strong);
  z-index:2500; transition:right 450ms var(--ease); padding:28px;
  display:flex; flex-direction:column; box-shadow:-10px 0 30px rgba(0,0,0,0.8);
}
.cart-drawer.active{right:0;}
.cart-items-list{flex-grow:1; overflow-y:auto;}
.cart-item{display:flex; gap:14px; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--line); align-items:center;}
.cart-item-img{width:64px; height:64px; border:1px solid var(--line-strong); object-fit:cover;}
.cart-footer{border-top:1px solid var(--line); padding-top:20px;}

/* ============ SINGLE PRODUCT PAGE ============ */
.product-top{
  position:relative; z-index:1;
  background:
    radial-gradient(circle at 40% 30%, rgba(201,162,75,0.10) 0%, transparent 50%);
}
.product-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start;
}
@media(max-width:900px){
  .product-grid{grid-template-columns:1fr; gap:30px;}
}

.gallery-main{
  position:relative; aspect-ratio:3/4; border:1px solid var(--line);
  background:linear-gradient(135deg, var(--charcoal), var(--panel));
  overflow:hidden;
}
.gallery-main img{
  width:100%; height:100%; object-fit:cover; position:absolute; inset:0; z-index:2;
}

.product-info{
  position:relative;
}
.product-info h1{
  font-size:clamp(28px, 5vw, 42px); font-family:var(--font-display); font-weight:400;
  line-height:1.15; margin-top:14px;
}
.product-story{
  margin:16px 0 22px; color:var(--muted); font-size:15px; line-height:1.7;
}
.product-story p{margin-bottom:12px;}
.price-lg{
  font-family:var(--font-mono); font-size:clamp(22px, 4vw, 28px);
  color:var(--gold-bright); margin-bottom:24px;
}

.product-info .cart{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}
@media(max-width:480px){
  .product-info .cart{flex-direction:column;}
  .product-info .cart .btn{width:100%; justify-content:center;}
}

.back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  color:var(--muted); text-transform:uppercase; margin-bottom:24px;
  transition:color .3s;
}
.back-link:hover{color:var(--gold-bright);}
.back-link::before{content:"<"; font-size:14px;}

/* ============ WOOCOMMERCE OVERRIDES ============ */
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  background:var(--panel) !important; color:var(--ivory) !important;
  border-top:3px solid var(--gold) !important; padding:16px 24px !important;
  font-family:var(--font-body) !important;
}
.woocommerce-message a, .woocommerce-info a{
  color:var(--gold-bright) !important;
}

/* FOOTER */
footer{border-top:1px solid var(--line); padding:50px 0 30px;}
.foot-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px;}
.foot-links{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.foot-links a{font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase;}
.foot-links a:hover{color:var(--gold-bright);}
.foot-bottom{margin-top:36px; padding-top:20px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:10px; color:var(--muted-dim); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

.page{display:none;}
.page.active{display:block;}