/* Modern Hero Slider - Mobile First Spacing */
.hs.container{ padding: 2px 0 0; }
.hs{ --badge-h: 0px; --media-w: 96%; }

.hs-wrap{ 
  position:relative; 
  overflow:hidden; 
  border-radius:16px; 
  padding-top: 0; 
  background:#f6f6f6;
}

.hs-track{ 
  position:relative; 
  display:flex; 
  overflow-x:auto; 
  overflow-y:visible; 
  scroll-snap-type:x mandatory; 
  scroll-behavior:smooth; 
  -webkit-overflow-scrolling:touch; 
  touch-action: pan-x pan-y; 
  overscroll-behavior-x: contain; 
  -ms-overflow-style: none; 
  scroll-snap-stop: always; 
  cursor: grab;
  padding: 12px 0;
}

.hs-slide{ 
  position:relative; 
  flex:0 0 100%; 
  display:block; 
  line-height:0; 
  z-index:1;
  scroll-snap-align:start;
}

.hs-track.dragging{ 
  cursor: grabbing; 
  user-select:none; 
  -webkit-user-select:none; 
}

.hs-track::-webkit-scrollbar{ display:none; }

.hs-slide picture, .hs-slide img{ 
  width: var(--media-w); 
  height:auto; 
  display:block; 
  margin: 0 auto;
  transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.hs-slide img{ 
  border-radius:16px;
  pointer-events:none;
}

.hs-slide:hover img{
  transform: scale(1.02);
}

.hs-badge{ display:none; }

/* Modern Navigation Buttons */
.hs-nav{ 
  position:absolute; 
  top:50%; 
  transform:translateY(-50%); 
  width:44px; 
  height:44px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  background: rgba(255,255,255,0.95); 
  color:#1d1d1f; 
  border:none; 
  border-radius:50%; 
  cursor:pointer; 
  box-shadow: 0 4px 16px rgba(0,0,0,.1); 
  z-index:5;
  transition: all .2s cubic-bezier(0.4, 0.0, 0.2, 1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2);
}

.hs-nav:hover{
  background: rgba(255,255,255,1);
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

.hs-nav:active{
  transform: translateY(-50%) scale(0.95);
}

.hs-prev{ left:12px; }
.hs-next{ right:12px; }

/* Modern Dots Indicator */
.hs-dots{ 
  display:flex; 
  gap:6px; 
  justify-content:center; 
  padding:4px 0 0;
}

.hs-dots button{ 
  width:8px; 
  height:8px; 
  border-radius:50%; 
  background:#d1d5db; 
  border:none; 
  padding:0;
  transition: all .2s cubic-bezier(0.4, 0.0, 0.2, 1);
  cursor: pointer;
}

.hs-dots button:hover{
  background:#9ca3af;
  transform: scale(1.2);
}

.hs-dots button[aria-current="true"]{ 
  background:#1d1d1f;
  width:24px;
  border-radius:4px;
}

/* Bestsellers - Optimized Spacing */
.best{ margin-top: 20px; }
.best-title{ margin: 0 0 12px; font-size:20px; font-weight:700; color:#1d1d1f; letter-spacing: -0.02em; }
.best-track{ position:relative; display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scroll-behavior:smooth; }
.best-track::-webkit-scrollbar{ height:4px; }
.best-track::-webkit-scrollbar-thumb{ background:#d0d0d0; border-radius:2px; }

/* Modern card design */
.best-card{ 
  flex:0 0 calc((100% - 16px) / 2); 
  max-width: calc((100% - 16px) / 2); 
  background:#fff; 
  border-radius:16px; 
  border: 1px solid rgba(0,0,0,.04);
  box-shadow: 0 2px 12px rgba(0,0,0,.04); 
  scroll-snap-align:start; 
  text-decoration:none; 
  color:inherit; 
  display:flex; 
  flex-direction:column; 
  transition: all .2s cubic-bezier(0.4, 0.0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.best-card:focus-visible{ 
  outline:2px solid rgba(0,116,217,.4); 
  outline-offset:2px; 
}

/* Image container with better proportions */
.best-card .pic{ 
  padding:12px 12px 8px; 
  aspect-ratio: 1 / 1.4; 
  overflow:hidden; 
  border-radius:0; 
  background:transparent; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
}

.best-card .pic img{ 
  width:100%; 
  height:100%; 
  display:block; 
  object-fit:cover; 
  border-radius:12px; 
  transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/* Content area with better spacing */
.best-card .body{ 
  padding:8px 12px 16px; 
  display:flex; 
  flex-direction:column; 
  gap:8px; 
  flex:1; 
}

/* Rating with refined styling */
.best-card .rating-mini{ 
  display:inline-flex; 
  align-items:center; 
  gap:4px; 
  color:#8e8e93;
  font-size:12px;
  order: -1; /* Show rating first */
}

.best-card .rating-mini .star{ 
  width:12px; 
  height:12px; 
  display:inline-block; 
  background:#ff9500; 
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") center/contain no-repeat; 
  mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") center/contain no-repeat; 
}

.best-card .rating-mini .num{ 
  font-size:12px; 
  font-weight:600; 
  color:#8e8e93;
  font-variant-numeric: tabular-nums;
}

/* Title with better typography */
.best-card .title{ 
  font-size:15px; 
  font-weight:600; 
  line-height:1.3; 
  color:#1d1d1f;
  display:-webkit-box; 
  -webkit-line-clamp:2; 
  -webkit-box-orient:vertical; 
  overflow:hidden; 
  text-overflow:ellipsis; 
  line-clamp:2;
  letter-spacing: -0.01em;
}

/* Price with emphasis */
.best-card .price{ 
  font-size:16px; 
  font-weight:700; 
  color:#1d1d1f;
  margin-top:auto;
  font-variant-numeric: tabular-nums;
}



/* Bestsellers nav arrows */
.best{ position:relative; }
.best-nav{ position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border:none; border-radius:999px; background:rgba(255,255,255,.95); box-shadow:0 6px 16px rgba(0,0,0,.08); display:flex; align-items:center; justify-content:center; color:#1d1d1f; cursor:pointer; }
.best-prev{ left: -6px; }
.best-next{ right: -6px; }
/* Tablet and Desktop Enhancements */
@media (min-width: 768px){
  .hs.container{ padding-top: 8px; }
  .hs-track{ padding: 16px 0; }
  .hs{ --media-w: 90%; }
  
  .hs-nav{ 
    width:48px; 
    height:48px;
    backdrop-filter: blur(16px);
  }
  
  .hs-prev{ left:16px; }
  .hs-next{ right:16px; }
  
  .hs-dots{ padding-top:12px; gap:8px; }
  .hs-dots button{ width:10px; height:10px; }
  .hs-dots button[aria-current="true"]{ width:28px; }
  
  .hs-slide img{ border-radius:12px; }
  
  /* Section spacing improvements */
  .best{ margin-top: 28px; }
  .best-title{ margin-bottom: 16px; font-size:22px; }
  .help{ margin: 40px auto 32px; }
}

@media (min-width: 1024px){
  .hs.container{ padding-top: 12px; }
  .hs{ --media-w: 100%; }
  .hs-track{ padding: 20px 0; }
  .hs-track{ gap:12px; }
  .hs-slide{ flex:0 0 calc((100% - 24px) / 3); }
  
  .hs-nav{ 
    width:52px; 
    height:52px;
  }
  
  .hs-prev{ left:20px; }
  .hs-next{ right:20px; }
  
  .hs-dots{ padding-top:16px; }
  
  /* Enhanced section spacing */
  .best{ margin-top: 32px; }
  .best-title{ font-size:24px; }
  .help{ margin: 48px auto 40px; }
}

/* Hover and interaction states */
@media (hover:hover){
  .best-card:hover{ 
    box-shadow: 0 8px 32px rgba(0,0,0,.12); 
    transform: translateY(-2px);
    border-color: rgba(0,0,0,.08);
  }
  .best-card:hover .pic img{ 
    transform: scale(1.05); 
  }
}

.best-card:active {
  transform: translateY(0);
  transition-duration: .1s;
}

/* Responsive improvements */
@media (min-width:768px){
  .best-card{ 
    flex-basis:calc((100% - 32px) / 3); 
    max-width:calc((100% - 32px) / 3); 
  }
  .best-track{ gap:16px; }
  .best-title{ font-size:22px; }
}

@media (min-width:1024px){
  .best-card{ 
    flex-basis:calc((100% - 48px) / 4); 
    max-width:calc((100% - 48px) / 4); 
  }
  .best-track{ gap:16px; }
}


/* ===== Help / Support (mobile-first) ===== */
.help{ margin: 32px auto 24px; padding-left: 16px; padding-right: 16px; }
.help-card{ color:#fff; border-radius: 20px; padding: 18px 16px 20px; background: linear-gradient(180deg, #1e8cff 0%, #0a6fe8 100%); box-shadow: 0 18px 40px rgba(10,111,232,.20); text-align:center; }
.help-title{ margin: 0 0 14px; font-weight: 800; font-size: clamp(20px, 6vw, 28px); letter-spacing: .2px; }
.help-actions{ display:flex; justify-content:center; gap: clamp(14px, 6vw, 24px); }
.help-btn{ --size: clamp(56px, 16vw, 72px); width: var(--size); height: var(--size); border-radius: 50%; border: 2px solid rgba(255,255,255,.75); background: rgba(255,255,255,.08); display:grid; place-items:center; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); transition: transform .12s ease, background .15s ease, border-color .15s ease; }
.help-btn:hover{ background: rgba(255,255,255,.14); transform: translateY(-1px); }
.help-btn:active{ transform: translateY(0); }
.help-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.help-ico{ width: 40%; height: 40%; display:block; background:#fff; }
.ico-tg{ -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 15.4 9.4 19c.4 0 .6-.2.8-.4l2-1.9 4.1 3c.8.4 1.3.2 1.5-.8l2.7-12.7c.2-1-.4-1.4-1.1-1.2L3.3 9.5c-1 .4-1 1 0 1.3l5.1 1.6 9.5-6.1-8.3 9.1Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 15.4 9.4 19c.4 0 .6-.2.8-.4l2-1.9 4.1 3c.8.4 1.3.2 1.5-.8l2.7-12.7c.2-1-.4-1.4-1.1-1.2L3.3 9.5c-1 .4-1 1 0 1.3л5.1 1.6 9.5-6.1-8.3 9.1Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ico-ig{ -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4' ry='4' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='4.8' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='17.2' cy='7.8' r='1.2' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4' ry='4' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='4.8' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='17.2' cy='7.8' r='1.2' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; }
.ico-fb{ -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 9H16V6h-2.5C11.6 6 11 7.2 11 8.7V10H9v3h2v7h3v-7h2.1L17 10h-3V8.9c0-.6.2-.9.8-.9Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 9H16V6h-2.5C11.6 6 11 7.2 11 8.7V10H9v3h2v7h3v-7h2.1L17 10h-3V8.9c0-.6.2-.9.8-.9Z'/%3E%3C/svg%3E") center/contain no-repeat; }
@media (min-width:600px){ .help-card{ padding: 22px 20px 24px; border-radius: 24px; } }

/* ===== Footer (mobile-first) ===== */
.site-footer{ background:#0b1220; color:#e7ecf3; margin-top: 20px; padding-block-start: 20px; }
.site-footer{ padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.site-footer a{ color:#e7ecf3; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.site-footer .foot-top{ padding-block: 20px 12px; display:grid; row-gap: 12px; }
.site-footer .brand .logo{ height:26px; width:auto; filter: brightness(0) invert(1); }
.site-footer .tagline{ margin:0; color:#b8c2cf; font-size:14px; }
.site-footer .foot-links{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 6px 0 10px; }
.site-footer .foot-links a{ padding-block: 2px; }
.site-footer .foot-social{ display:flex; gap:12px; }
.site-footer .sbtn{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); }
.site-footer .sbtn:hover{ background: rgba(255,255,255,.14); }
.site-footer .sico{ width:20px; height:20px; display:block; background:#fff; }
.site-footer .sico.tg{ -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 15.4 9.4 19c.4 0 .6-.2.8-.4l2-1.9 4.1 3c.8.4 1.3.2 1.5-.8l2.7-12.7c.2-1-.4-1.4-1.1-1.2L3.3 9.5c-1 .4-1 1 0 1.3л5.1 1.6 9.5-6.1-8.3 9.1Z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 15.4 9.4 19c.4 0 .6-.2 .8-.4l2-1.9 4.1 3c.8 .4 1.3 .2 1.5-.8l2.7-12.7c.2-1-.4-1.4-1.1-1.2L3.3 9.5c-1 .4-1 1 0 1.3л5.1 1.6 9.5-6.1-8.3 9.1Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.site-footer .sico.ig{ -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4' ry='4' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='4.8' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='17.2' cy='7.8' r='1.2' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4' ry='4' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='4.8' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='17.2' cy='7.8' r='1.2' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; }
.site-footer .sico.fb{ -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 9H16V6h-2.5C11.6 6 11 7.2 11 8.7V10H9v3h2v7h3v-7h2.1L17 10h-3V8.9c0-.6 .2-.9 .8-.9Z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 9H16V6h-2.5C11.6 6 11 7.2 11 8.7V10H9v3h2v7h3v-7h2.1L17 10h-3V8.9c0-.6 .2-.9 .8-.9Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.site-footer .foot-bottom{ border-top: 1px solid rgba(255,255,255,.12); padding-block: 10px 16px; color:#b8c2cf; font-size:12px; }
@media (min-width:600px){ .site-footer .foot-links{ grid-template-columns: repeat(3,1fr); gap: 12px 24px; } .site-footer .foot-top{ row-gap:14px; padding-block: 22px 14px; } }

/* Reduce motion for users who prefer less animation */
@media (prefers-reduced-motion: reduce){
  .hs-track{ scroll-behavior: auto; }
  .hs-slide img, .best-card .pic img{ transition: none; }
  .hs-slide:hover img{ transform: none; }
  .best-card:hover{ transform:none; }
}