:root{
  --bg:#e6f9ff;
  --panel:#f7fbff;
  --card:#ffffff;
  --text:#1E2730;
  --muted:#526070;
  --line:rgba(10,20,40,.14);
  --shadow:0 18px 40px rgba(20,30,50,.10);
  --r:18px;
  --max:1100px;
}


*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:#B0BAC6;
  color:var(--text);
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 16px;}
.muted{color:var(--muted)}
.mono{font-variant-numeric:tabular-nums; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;}
.tiny{font-size:12px}

.btn{
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.18);
  color:#ffffff;
  padding:12px 14px;
  border-radius:14px;
  cursor:pointer;
  text-decoration:none;
  font-weight:800;
  backdrop-filter:blur(10px);
}
.btn:hover{background:rgba(255,255,255,.26)}

.btn--dark{
  border:1px solid rgba(10,20,40,.20);
  background:rgba(10,20,40,.92);
  color:#fff;
  backdrop-filter:none;
}
.btn--dark:hover{background:rgba(10,20,40,.86)}

.btn--ghostDark{
  border:1px solid rgba(10,20,40,.20);
  background:transparent;
  color:rgba(10,20,40,.92);
  backdrop-filter:none;
}
.btn--ghostDark:hover{background:rgba(10,20,40,.04)}

.input{
  width:min(260px, 100%);
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  outline:none;
}
.input:focus{border-color:rgba(10,20,40,.30)}

.section{padding:34px 0}
.section__head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.section h2{margin:0; font-size:26px}
.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.grid{margin-top:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.grid--info{grid-template-columns:repeat(3,1fr)}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:12px}

.card{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:var(--r);
  padding:16px;
  box-shadow:var(--shadow);
}
.card--soft{
  background:linear-gradient(180deg, rgba(10,20,40,.03), rgba(10,20,40,.01));
}

.list{margin:12px 0 0; padding-left:18px; color:var(--muted)}
.row{display:flex; gap:10px; flex-wrap:wrap}

.hero{
  position:relative;
  min-height:48vh;
  background:#111;
  z-index:1;
}
.hero--photo{
  background-image:url("hero.jpg");
  background-size:cover;
  background-position:center;
}
.hero__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.32) 100%);
}

.topbar{
  position:absolute;
  left:0; right:0; top:0;
  z-index:60;
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:2px solid rgba(255,255,255,.95);
}
.topbar__left{display:flex; align-items:center; gap:12px}
.topbar__right{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
}

.topbar__link{
  appearance:none;
  border:none;
  background:transparent;
  color:#fff;
  font-weight:850;
  cursor:pointer;
  padding:8px 10px;
  border-radius:12px;
}
.topbar__link:hover{background:rgba(255,255,255,.12)}

.topbar__icon{
  width:44px; height:36px;
  border:none;
  background:transparent;
  display:grid;
  place-items:center;
  gap:6px;
  cursor:pointer;
  padding:6px 8px;
  border-radius:12px;
}
.topbar__icon:hover{background: rgb(255,255,255,.12);}
.topbar__icon span{
  display:block;
  width:18px;
  height:2px;
  background:rgba(255,255,255,.95);
  border-radius:99px;
}

.topbar__catalogWrap{position:relative; display:flex; align-items:center;}

.topbar__search{
  width:180px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.16);
  color:#fff;
  outline:none;
  font-size:14px;
  backdrop-filter:blur(10px);
}
.topbar__search::placeholder{color: #FF5E00}
.topbar__search:focus{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.75);
}

.dropdown,
.contacts{
  position:absolute;
  top:44px;
  min-width:220px;
  display:none;
  padding:10px;
  border-radius:16px;
  background:#FF5E00);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 24px 60px rgba(0,0,0,.25);
  backdrop-filter:blur(10px);
  z-index:70;
}
.dropdown{left:0}
.contacts{right:0}
.dropdown.show,
.contacts.show{display:grid; gap:8px}

.dropItem,
.contacts a{
  appearance:none;
  border:none;
  text-align:left;
  background:transparent;
  color:#0b1220;
  font-weight:800;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  text-decoration:none;
}
.dropItem:hover,
.contacts a:hover{background:rgba(10,20,40,.06)}

.mobileNav{
  display:none;
  border-bottom:1px solid rgba(255,255,255,.25);
  padding:10px 16px 14px;
}
.mobileNav.show{display:grid; gap:8px}
.mobileNav a{
  color:#fff;
  text-decoration:none;
  font-weight:800;
  padding:10px 10px;
  border-radius:12px;
  width:max-content;
}
.mobileNav a:hover{background:rgba(255,255,255,.12)}

.catSectionTitle{
  margin:18px 0 10px;
  font-size:18px;
  font-weight:950;
  letter-spacing:.2px;
}

.product{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:10px;
  cursor:pointer;
  transition:transform .15s ease;
}
.product:hover{transform:translateY(-4px)}

.product__img{
  height:190px;
  border-radius:14px;
  border:1px solid var(--line);
  overflow:hidden;
  background:rgba(10,20,40,.03);
}
.product__img img{width:100%; height:100%; object-fit:cover; display:block}
.product__title{font-weight:950; margin:0}
.product__meta{display:flex; justify-content:space-between; align-items:center; gap:10px}
.price{font-weight:950}

.product__color{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--muted);
  font-weight:700;
}
.colorDot{
  width:14px;
  height:14px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.15);
  display:inline-block;
}

.footer{
  border-top:1px solid var(--line);
  padding:18px 0 30px;
  margin-top:10px;
}
.footer__inner{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

.fab{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:90;
  border:none;
  cursor:pointer;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(10,20,40,.92);
  color:#fff;
  font-size:24px;
}
.fab__badge{
  display:inline-grid;
  place-items:center;
  min-width:22px; height:24px;
  padding:0 6px;
  border-radius:999px;
  background:#ff5e00;
  margin-left:8px;
  font-size:12px;
  font-weight:900;
}

.icon-btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}
.icon-btn:hover{border-color:rgba(10,20,40,.25)}

.drawer{
  position:fixed;
  inset:0;
  display:none;
  z-index:9998;
}
.drawer.show{display:block}

.drawer__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:1;
}

.drawer__panel{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:min(420px, 92vw);
  background:#fff;
  border-left:1px solid var(--line);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  z-index:2;
  overflow:hidden;
}

.drawer__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:#fff;
  flex-shrink:0;
}

.drawer__body{
  flex:1;
  padding:14px 16px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  background:#fff;
}

.drawer__foot{
  padding:14px 16px;
  border-top:1px solid var(--line);
  display:grid;
  gap:10px;
  background:#fff;
  flex-shrink:0;
}

.total{display:flex; justify-content:space-between; font-weight:950}

.cart-item{
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:12px;
  display:grid;
  grid-template-columns:80px 1fr;
  gap:12px;
  align-items:start;
}

.cart-item__media{
  width:80px;
  height:90px;
}

.cart-item__img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--line);
  display:block;
}

.cart-item__img--empty{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:var(--muted);
  background:rgba(10,20,40,.04);
}

.cart-item__content{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
/* TOPBAR COLOR */

.topbar__link{
color:#FF5E00;
}

.topbar__icon span{
background:#FF5E00;
}

.topbar__search{
color:#FF5E00;
}

.topbar__search::placeholder{
color:#FF5E00;
opacity:0.6;
}

.searchIcon{
color:#FF5E00;
}
.cart-item__top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.cart-item__title{
  font-weight:900;
  line-height:1.2;
}

.cart-item__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.cart-item__sum{font-weight:900}
.cart-remove{padding:8px 10px}

.qty{display:flex; align-items:center; gap:8px}
.qty button{padding:6px 10px; border-radius:12px}

.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
.modal.show{display:block}

.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:1;
}

.modal__panel{
  position:relative;
  z-index:2;
  width:min(900px, 92vw);
  margin:6vh auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}

.modal__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
}

.modal__body{
  padding:14px 16px;
  display:grid;
  gap:10px;
}

.two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.pay{display:flex; gap:14px; flex-wrap:wrap}
.radio{display:flex; gap:8px; align-items:center; color:var(--muted); font-weight:750}

.pmGrid{display:grid; grid-template-columns:1.2fr .8fr; gap:14px}
.pmMain{
  height:380px;
  border-radius:16px;
  border:1px solid var(--line);
  overflow:hidden;
  background:rgba(10,20,40,.03);
}
.pmMain img{width:100%; height:100%; object-fit:cover; display:block}
.pmThumbs{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.pmThumb{
  width:70px;
  height:60px;
  border-radius:12px;
  border:1px solid var(--line);
  overflow:hidden;
  cursor:pointer;
  background:rgba(10,20,40,.03);
}
.pmThumb img{width:100%; height:100%; object-fit:cover; display:block}
.pmThumb.active{outline:2px solid rgba(10,20,40,.65)}

.pmRow{display:flex; justify-content:space-between; align-items:center; gap:10px}
.priceBig{font-weight:1000; font-size:22px}
.tag2{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(10,20,40,.14);
  background:rgba(10,20,40,.04);
  color:rgba(10,20,40,.80);
  font-weight:900;
}

.sizes{margin-top:10px}
.sizes__title{font-weight:950; margin-bottom:8px}
.sizes__grid{display:flex; gap:8px; flex-wrap:wrap}
.sizeBtn{
  border:1px solid rgba(10,20,40,.18);
  background:#fff;
  padding:10px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:950;
}
.sizeBtn.active{
  background:rgba(10,20,40,.92);
  color:#fff;
  border-color:rgba(10,20,40,.92);
}

input, select, textarea{font-size:16px}

@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid--info{grid-template-columns:1fr}
  .pmGrid{grid-template-columns:1fr}
  .pmMain{height:320px}
}

@media (max-width:640px){
  .topbar__inner{padding:10px 12px; gap:10px}
  .topbar__link{padding:8px 10px; font-size:14px; border-radius:12px}
  .topbar__icon{width:42px; height:34px}
  .topbar__search{width:120px; padding:9px 10px; font-size:13px}

  .dropdown{
    left:0;
    right:auto;
    min-width:min(92vw, 320px);
    max-height:60vh;
    overflow:auto;
  }

  .contacts{
    right:0;
    min-width:min(92vw, 320px);
    max-height:60vh;
    overflow:auto;
  }

  .dropItem, .contacts a{
    padding:12px 12px;
    font-size:15px;
  }

  .hero{
    min-height:auto !important;
    height:36vh !important;
  }

  .hero--photo{
    background-image:url("hero-mobile.jpg");
    background-position:center top;
  }

  .section{padding:26px 0}
  .section h2{font-size:22px}
  .section__head{align-items:flex-start}

  .filters{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .input{width:100%}
  .grid{grid-template-columns:1fr; gap:12px}
  .product__img{height:210px}

  .modal__panel{
    width:min(94vw, 520px);
    margin:3vh auto;
    max-height:92vh;
    overflow:hidden;
  }

  .modal__body{
    max-height:calc(92vh - 60px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  .pmMain{height:300px}
  .pmThumb{width:74px; height:64px}
  .two{grid-template-columns:1fr}

  .fab{
    right:12px;
    bottom:12px;
    padding:12px 14px;
    border-radius:16px;
  }

  .drawer__panel{
    width:min(92vw, 420px);
  }

  .cart-item{
    grid-template-columns:70px 1fr;
    gap:10px;
  }

  .cart-item__media{
    width:70px;
    height:82px;
  }

  .cart-item__bottom{
    flex-direction:column;
    align-items:flex-start;
  }

  .two-col{grid-template-columns:1fr}
}

.searchBox{
position:relative;
display:flex;
align-items:center;
}

.searchIcon{
position:absolute;
left:10px;
width:18px;
height:18px;
color:#999;
}

#searchInput{
padding:8px 10px 8px 35px;
border-radius:8px;
border:none;
}
.searchBox:hover .searchIcon{
color:#FF5E00;
}

#searchInput{
background:transparent;
border:none;
border-bottom:1px solid rgba(255, 94, 0);
outline:none;
color:white;
padding:8px 10px 8px 35px;
}

#searchInput::placeholder{
color: rgba(255,255,255,0.6);
}
.contacts a{
color:#ff5e00;
}
.dropItem {
color:#ff5e00;
}
.newTitle{
color:#FF5E00;
font-weight:900;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:20px;
}

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

@media (max-width: 640px){

  .wrap{
    padding: 0 12px;
  }

  .topbar{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 100;
  }

  .topbar__inner{
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
  }

  .topbar__left{
    display: contents;
  }

  .topbar__icon{
    width: 40px;
    height: 40px;
    padding: 0;
  }

  .topbar__catalogWrap{
    display: flex;
    align-items: center;
  }

  .topbar__right{
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    margin-top: 6px;
  }

  .topbar__link{
    font-size: 14px;
    padding: 6px 8px;
    white-space: nowrap;
  }

  .topbar__search,
  #searchInput{
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 8px 12px 8px 38px;
    font-size: 14px;
    border-radius: 12px;
    box-sizing: border-box;
  }

  .searchBox{
    width: 100%;
    min-width: 0;
  }

  .searchIcon{
    left: 12px;
    width: 16px;
    height: 16px;
  }

  .contacts,
  .dropdown{
    min-width: 220px;
    max-width: calc(100vw - 24px);
    right: 0;
    left: auto;
    top: 46px;
  }

  .hero{
    min-height: auto !important;
    height: 250px !important;
    padding: 96px 0 0 !important;
    background-position: center center !important;
  }

  .hero__inner{
    display: none;
  }

  .hero--photo{
    background-size: cover;
    background-position: center;
  }

  .section{
    padding: 24px 0;
  }

  .section__head{
    display: block;
  }

  .section h2{
    font-size: 20px;
    margin-bottom: 6px;
  }

  .catalogRedTitle{
    font-size: 16px;
    margin-bottom: 10px;
  }

  .catSectionTitle{
    font-size: 16px;
    margin: 14px 0 10px;
  }

  .grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .product__img{
    height: 220px;
  }

  .product__title{
    font-size: 16px;
    line-height: 1.2;
  }

  .fab{
    right: 12px;
    bottom: 88px;
    padding: 12px 14px;
  }

  .drawer__panel{
    width: 100%;
    max-width: 100%;
  }

  .modal__panel{
    width: calc(100vw - 20px);
    margin: 10px auto;
    max-height: calc(100vh - 20px);
    overflow: hidden;
  }

  .modal__body{
    overflow: auto;
    max-height: calc(100vh - 90px);
  }

  .pmGrid{
    grid-template-columns: 1fr;
  }

  .pmMain{
    height: 280px;
  }

  .two-col,
  .two{
    grid-template-columns: 1fr;
  }
}