*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:root{
  --white:#f3f3ef;
  --muted:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.52);
  --soft-line:rgba(255,255,255,.16);
}

html{
  background:#050505;
  scroll-behavior:smooth;
}

body{
  min-height:100svh;
  background:#050505;
  color:var(--white);
  font-family:Arial,Helvetica,sans-serif;
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input{
  font:inherit;
}


/* =========================
   BACKGROUND
   ========================= */

.site-background{
  position:fixed;
  inset:0;
  z-index:0;
  background-image:url("/assets/ruse-bg.jpg");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  background-color:#050505;
  pointer-events:none;
}


/* =========================
   3D LOGO
   ========================= */

.logo-wrap{
  position:relative;

  width:280px;
  height:210px;

  margin:0 auto;

  display:grid;
  place-items:center;
}

.ruse-model{
  position:relative;
  z-index:2;

  width:235px;
  height:175px;

  background:transparent;
  --poster-color:transparent;
}


/* smaller logo requested */
.password-model{
  width:200px;
  height:150px;
}

.shop-model{
  width:215px;
  height:160px;
}

.orbit-ring{
  position:absolute;
  z-index:1;

  width:285px;
  height:82px;

  border:1px solid rgba(174,201,255,.32);
  border-radius:50%;

  transform:rotate(-3deg);

  box-shadow:
    0 0 18px rgba(94,142,255,.08),
    inset 0 0 10px rgba(94,142,255,.04);
}

.spark{
  position:absolute;
  top:50%;

  width:4px;
  height:4px;

  border-radius:50%;
  background:#fff;

  box-shadow:
    0 0 5px 2px #fff,
    0 0 13px 5px rgba(80,137,255,.72);
}

.spark-left{
  left:-2px;
}

.spark-right{
  right:-2px;
}


/* =========================
   PASSWORD PAGE
   ========================= */

.password-page{
  min-height:100svh;
  overflow:hidden;
}

.password-main{
  min-height:calc(100svh - 94px);

  display:grid;
  place-items:center;

  padding:24px 20px 40px;
}

.password-box{
  width:min(390px,90vw);

  text-align:center;

  transform:translateY(5px);
}

.private-access{
  margin-top:3px;
  margin-bottom:31px;

  font-size:10px;
  font-weight:500;
  letter-spacing:5px;

  color:rgba(255,255,255,.78);
}

.password-form label{
  display:block;

  margin-bottom:9px;

  font-size:9px;
  letter-spacing:4.6px;

  color:rgba(255,255,255,.75);
}

.password-form input{
  width:100%;
  height:34px;

  border:0;
  border-bottom:1px solid var(--line);

  outline:none;

  background:transparent;
  color:#fff;

  text-align:center;

  font-size:13px;
  letter-spacing:5px;
}

.password-form button{
  width:100%;

  margin-top:18px;
  padding:14px 18px;

  border:1px solid rgba(255,255,255,.66);

  background:rgba(0,0,0,.16);
  color:#fff;

  cursor:pointer;

  font-size:10px;
  font-weight:700;
  letter-spacing:3px;

  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease;
}

.password-form button span{
  margin-left:9px;

  font-size:15px;
}

.password-form button:hover{
  background:#fff;
  color:#080808;

  transform:translateY(-1px);
}

.password-message{
  min-height:18px;

  margin-top:10px;

  font-size:8px;
  letter-spacing:2.2px;
}


/* =========================
   FOOTER
   ========================= */

.site-footer{
  position:relative;
  z-index:20;

  width:100%;

  padding:6px 20px 22px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:7px;

  text-align:center;
}

.password-page .site-footer{
  position:fixed;

  left:50%;
  bottom:0;

  transform:translateX(-50%);
}

.instagram-link{
  width:29px;
  height:29px;

  display:grid;
  place-items:center;

  transition:
    transform .2s ease,
    filter .2s ease;
}

.instagram-link svg{
  width:21px;
  height:21px;

  fill:none;
  stroke:#fff;
  stroke-width:1.8;
}

.instagram-link .ig-dot{
  fill:#fff;
  stroke:none;
}

.instagram-link:hover{
  transform:translateY(-4px) scale(1.06);

  filter:drop-shadow(0 0 7px rgba(255,255,255,.55));
}

.site-footer p{
  font-size:7px;
  font-weight:700;
  letter-spacing:2.8px;

  color:rgba(255,255,255,.84);
}


/* =========================
   SHOP HEADER
   ========================= */

.store-header{
  width:min(1420px,92%);
  height:82px;

  margin:0 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-bottom:1px solid var(--soft-line);
}

.header-logo img{
  width:58px;
  height:auto;

  display:block;
}

.store-nav{
  display:flex;
  align-items:center;

  gap:29px;

  font-size:9px;
  font-weight:600;
  letter-spacing:2.4px;
}


/* =========================
   SHOP
   ========================= */

.shop-main{
  width:min(1420px,92%);

  margin:0 auto;
}

.shop-hero{
  min-height:calc(100svh - 82px);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:15px 0 82px;

  text-align:center;
}

.shop-logo-wrap{
  width:310px;
  height:225px;

  margin-bottom:7px;
}

.shop-orbit{
  width:305px;
  height:88px;
}

.shop-drop-btn{
  display:inline-flex;
  align-items:center;

  margin-top:6px;
  padding:14px 23px;

  border:1px solid rgba(255,255,255,.66);

  background:rgba(0,0,0,.14);

  font-size:9px;
  font-weight:700;
  letter-spacing:2.8px;

  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease;
}

.shop-drop-btn span{
  margin-left:9px;

  font-size:14px;
}

.shop-drop-btn:hover{
  background:#fff;
  color:#080808;

  transform:translateY(-1px);
}


/* =========================
   PRODUCTS
   ========================= */

.products{
  padding:70px 0 130px;

  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:24px;
}

.product-card{
  min-width:0;
}

.product-image-placeholder{
  aspect-ratio:4 / 5;

  border:1px solid rgba(255,255,255,.14);

  display:grid;
  place-items:center;

  background:rgba(0,0,0,.17);

  backdrop-filter:blur(2px);

  font-size:9px;
  letter-spacing:2.5px;

  color:rgba(255,255,255,.56);
}

.product-meta{
  padding-top:11px;

  display:flex;
  justify-content:space-between;

  gap:15px;

  font-size:9px;
  letter-spacing:1.7px;
}

.info-section{
  min-height:35vh;

  display:grid;
  place-items:center;

  padding-bottom:80px;

  font-size:10px;
  letter-spacing:5px;
}


/* =========================
   MOBILE
   ========================= */

@media(max-width:700px){

  .site-background{
  position:fixed;
  inset:0;
  z-index:0;
  background-image:url("/assets/ruse-bg.jpg");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  background-color:#050505;
  pointer-events:none;
}

  .password-main{
    min-height:calc(100svh - 88px);

    padding:16px 18px 55px;
  }

  .password-box{
    width:min(345px,92vw);

    transform:none;
  }

  .logo-wrap{
    width:230px;
    height:180px;
  }

  .password-model{
    width:190px;
    height:145px;
  }

  .shop-model{
    width:205px;
    height:150px;
  }

  .orbit-ring{
    width:235px;
    height:70px;
  }

  .private-access{
    margin-bottom:27px;
  }

  .password-page .site-footer{
    padding-bottom:12px;
  }

  .site-footer p{
    font-size:6px;
    letter-spacing:2px;
  }

  .store-header{
    width:90%;
    height:72px;
  }

  .header-logo img{
    width:47px;
  }

  .store-nav{
    gap:16px;

    font-size:8px;
    letter-spacing:1.8px;
  }

  .shop-main{
    width:90%;
  }

  .shop-hero{
    min-height:calc(100svh - 72px);

    padding-bottom:60px;
  }

  .shop-logo-wrap{
    width:245px;
    height:190px;
  }

  .shop-orbit{
    width:245px;
    height:72px;
  }

  .products{
    grid-template-columns:1fr;

    gap:42px;

    padding-top:50px;
  }
}


/* FINAL CLEAN LOGO OVERRIDES */
.orbit-ring,
.spark{
  display:none !important;
}

.ruse-model{
  filter:none !important;
  box-shadow:none !important;
  background:transparent !important;
  image-rendering:auto;
}

.password-model{
  width:185px !important;
  height:138px !important;
}

.shop-model{
  width:200px !important;
  height:148px !important;
}

.logo-wrap{
  width:230px !important;
  height:175px !important;
}

.shop-logo-wrap{
  width:245px !important;
  height:185px !important;
}

@media(max-width:700px){
  .password-model{
    width:165px !important;
    height:125px !important;
  }

  .shop-model{
    width:180px !important;
    height:135px !important;
  }

  .logo-wrap,
  .shop-logo-wrap{
    width:210px !important;
    height:165px !important;
  }
}


/* BACKGROUND LAYER FIX */
.password-main,
.site-footer,
.store-header,
.shop-main{
  position:relative;
  z-index:2;
}

body{
  position:relative;
  background:#050505;
}

/* CLEANER MODEL PRESENTATION */
model-viewer{
  background:transparent !important;
  --poster-color:transparent;
}