@import "vars.css";

* {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}


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

html{font-size:14px;}

body{
  font-family: var(--bodyFont), serif;
  background:var(--lightGreyColor);color:var(--darkGreyColor);
  height:100dvh;display:flex;flex-direction:column;overflow:scroll;
  -webkit-font-smoothing:antialiased;
}

h1 {
  font-family: var(--bodyFont), serif;
}

button {
  font-family: var(--bodyFont), serif;
  font-weight: bold;
}

button.disabled {
    background: var(--blackColorDim);
    color: var(--whiteColor);
    box-shadow: none;
    opacity: 80%;
    transform: none;
    pointer-events: none;

}

button.disabled :hover :active :disabled {
  transform: none;
  translate: none;
  box-shadow: none;
  border-color: var(--blackColorDim);
  cursor:not-allowed;
  background-color: unset !important;
}

button.noauth {
  opacity: 60%;
}

button.ring {
  animation: ringing 0.35s ease-out;
}

@keyframes ringing {
  0% {    transform: scale(1);  }
  40% {    transform: scale(1.08);  }
  70% {    transform: scale(0.96);  }
  100% {    transform: scale(1);  }
}

.clickable{
  cursor: pointer;
}

.clickable:active .focusable {
  transform: translateY(3px);
  background: var(--primaryColor);
  box-shadow: 1 3 0 var(--primaryColor);  /* remove shadow */
}


::-webkit-scrollbar{width:5px;height:5px;}

::-webkit-scrollbar-track{background:transparent;}

::-webkit-scrollbar-thumb{background:var(--lightGreyColor4);border-radius:10px;}

::-webkit-scrollbar-thumb:hover{background:var(--lightGreyColor5);}

/* ════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════ */
.shop-header-placeholder{
  height:var(--hh);background:var(--whiteColor);
  border-bottom:1px solid var(--lightGreyColor3);
  display:flex;align-items:center;padding:0 1.25rem;
  gap:.75rem;flex-shrink:0;z-index:300;
  box-shadow:var(--sh-xs);
}

.logo-img{height:34px;width:auto;display:block;}

.logo-placeholder{
  height:45px;
  width:150px;
  padding:0.85rem .85rem;background:var(--blackColor);
  border-radius:var(--r-sm);
  display:flex;align-items:center;
  gap:.5rem;
  color:var(--whiteColor);
  font-weight:800;
  font-size:.75rem;
  letter-spacing:-.3px;
  position:relative;overflow:hidden;
  cursor: pointer;
}

.logo-placeholder::after{
  content:'';position:absolute;
  top:-5px;right:-5px;width:14px;height:14px;
  background:var(--primaryColor);border-radius:50%;
}

.logo-placeholder i{
  font-size:.8rem;
  position:relative;z-index:1;
}

.logo-placeholder span{position:relative;z-index:1;}

.shop-header-divider{width:1px;height:24px;background:var(--lightGreyColor3);flex-shrink:0;}

.face-switcher{
  display:flex;align-items:center;background:var(--lightGreyColor2);
  border:1px solid var(--lightGreyColor3);border-radius:var(--r-full);padding:3px;gap:2px;
}

.face-btn{
  padding:.26rem 1rem;
  border-radius:var(--r-full);
  opacity: .5;
}

.face-btn.active{
  opacity: 1;
}

.face-indicator{width:6px;height:6px;border-radius:50%;
  background:var(--primaryColor);opacity:0.5;transition:opacity .15s;
}

.face-btn.active .face-indicator{opacity:1;}

.shop-header-item{display:flex;align-items:center;gap:.4rem;}
.shop-header-left{margin-right:auto;}
.shop-header-middle{margin-left:auto;margin-right: auto}
.shop-header-right{margin-left:auto;}

.helper-btn {
  background:linear-gradient(135deg,var(--blackColor) 0%,var(--darkGreyColor) 100%);
  color:var(--whiteColor);
  border-radius:var(--r-md);
}

.helper-btn:hover:focus{
  background:var(--primaryColor);
  transform:translateY(-1px);
  box-shadow:0 3px 12px var(--secondaryColor);
}

.focus{
  background:var(--primaryColor);
  transform:translateY(-1px);
  box-shadow:0 3px 12px var(--secondaryColor);
}

.shop-loader {
  width: 40px;
  height: 40px;
  border: 4px solid #eee;
  border-top: 4px solid #333;
  border-radius: 50%;
  animation: spin 2s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.hidden {
  display: none;
}

@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.shop-header-btn{
  padding:.28rem .6rem;
  clamp(1rem, calc(100vw / 1024), 1.33rem);
  position: relative;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.32rem;
  padding:.44rem .85rem;border-radius:var(--r-md);
  border:2px solid var(--lightGreyColor3);
  background:var(--whiteColor);color:var(--darkGreyColor);
  font-size:clamp(.8rem, calc(100vw / 1024), 1.06rem);
  font-family: var(--titleFont), serif;
  font-weight:10;
  cursor:pointer;transition:all .14s;white-space:nowrap;
}

@media (max-width:1024px){
  .logo-placeholder{font-size:.8rem;width: auto}
  .shrinkable{display:none;}
}