/* =========================================================
   THEMES
   ========================================================= */

html[data-theme="light"]{
  --color-primary:#2563eb;
  --color-primary-hover:#1d4ed8;
  --color-background:#f7f8fa;
  --color-surface:#ffffff;
  --color-surface-soft:#f0f3f7;
  --color-text:#16191f;
  --color-text-muted:#727986;
  --color-border:#e3e7ed;
  --color-success:#168447;
  --color-warning:#bf7700;
  --color-danger:#c63b3b;
  --shadow-sm:0 4px 18px rgba(20,28,45,.06);
  --shadow-md:0 12px 35px rgba(20,28,45,.10)
}

html[data-theme="dark"]{
  --color-primary:#6b8cff;
  --color-primary-hover:#829cff;
  --color-background:#111318;
  --color-surface:#181b21;
  --color-surface-soft:#20242c;
  --color-text:#f0f2f5;
  --color-text-muted:#939ba8;
  --color-border:#2c313a;
  --color-success:#4ac47b;
  --color-warning:#e8a536;
  --color-danger:#ef6464;
  --shadow-sm:0 4px 18px rgba(0,0,0,.18);
  --shadow-md:0 12px 35px rgba(0,0,0,.28)
}

html[data-theme="light"] body,
html[data-theme="dark"] body{
  background:var(--color-background);
  color:var(--color-text)
}

html[data-theme="light"] .site-header,
html[data-theme="light"] .site-navigation,
html[data-theme="light"] .site-footer,
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-navigation,
html[data-theme="dark"] .site-footer{
  background:var(--color-surface)
}

html[data-theme="light"] .site-header,
html[data-theme="dark"] .site-header{
  border-bottom:1px solid var(--color-border)
}

html[data-theme="light"] .site-navigation,
html[data-theme="dark"] .site-navigation{
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border)
}

html[data-theme="light"] .site-utility,
html[data-theme="dark"] .site-utility{
  color:var(--color-text-muted);
  border-bottom:1px solid var(--color-border)
}

html[data-theme="light"] .site-utility{
  background:#f7f8fa
}

html[data-theme="dark"] .site-utility{
  background:#111318
}

html[data-theme="light"] .site-search-field,
html[data-theme="dark"] .site-search-field{
  border:1px solid var(--color-border)
}

html[data-theme="light"] .site-search-field{
  background:var(--color-surface)
}

html[data-theme="dark"] .site-search-field{
  background:var(--color-surface-soft)
}

html[data-theme="light"] .site-search-input,
html[data-theme="light"] .site-search-category{
  background:var(--color-surface);
  color:var(--color-text)
}

html[data-theme="dark"] .site-search-input,
html[data-theme="dark"] .site-search-category{
  background:var(--color-surface-soft);
  color:var(--color-text)
}

html[data-theme="light"] .site-search-input,
html[data-theme="dark"] .site-search-input{
  border-color:var(--color-border)
}

html[data-theme="light"] .site-search-input::placeholder,
html[data-theme="dark"] .site-search-input::placeholder{
  color:var(--color-text-muted)
}

html[data-theme="light"] .site-search-category,
html[data-theme="dark"] .site-search-category{
  border-left-color:var(--color-border)
}

html[data-theme="light"] .site-search-submit,
html[data-theme="light"] .site-search-button,
html[data-theme="light"] .btn-primary,
html[data-theme="dark"] .site-search-submit,
html[data-theme="dark"] .site-search-button,
html[data-theme="dark"] .btn-primary{
  background:var(--color-primary);
  color:#fff
}

html[data-theme="light"] .site-search-submit:hover,
html[data-theme="light"] .site-search-button:hover,
html[data-theme="light"] .btn-primary:hover,
html[data-theme="dark"] .site-search-submit:hover,
html[data-theme="dark"] .site-search-button:hover,
html[data-theme="dark"] .btn-primary:hover{
  background:var(--color-primary-hover)
}

html[data-theme="light"] .btn-outline,
html[data-theme="dark"] .btn-outline{
  border-color:var(--color-border);
  background:transparent;
  color:var(--color-text)
}

html[data-theme="light"] .site-action,
html[data-theme="light"] .site-header-action,
html[data-theme="dark"] .site-action,
html[data-theme="dark"] .site-header-action{
  color:var(--color-text)
}

html[data-theme="light"] .site-cart-count,
html[data-theme="dark"] .site-cart-count{
  background:var(--color-primary);
  color:#fff
}

html[data-theme="light"] .home-hero-card{
  background:#eef3f9
}

html[data-theme="dark"] .home-hero-card{
  background:#1b2029
}

html[data-theme="light"] .home-hero-badge{
  background:#dbeafe;
  color:var(--color-primary)
}

html[data-theme="dark"] .home-hero-badge{
  background:#273754;
  color:var(--color-primary)
}

html[data-theme="light"] .home-hero-title,
html[data-theme="dark"] .home-hero-title{
  color:var(--color-text)
}

html[data-theme="light"] .home-hero-text,
html[data-theme="dark"] .home-hero-text{
  color:var(--color-text-muted)
}

html[data-theme="light"] .home-hero-pagination button{
  background:#c8d0db
}

html[data-theme="dark"] .home-hero-pagination button{
  background:#39414d
}

html[data-theme="light"] .home-hero-pagination button.active,
html[data-theme="dark"] .home-hero-pagination button.active{
  background:var(--color-primary)
}

html[data-theme="light"] .category-card,
html[data-theme="light"] .product-card,
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .product-card{
  border-color:var(--color-border);
  background:var(--color-surface)
}

html[data-theme="light"] .category-card:hover,
html[data-theme="light"] .product-card:hover,
html[data-theme="dark"] .category-card:hover,
html[data-theme="dark"] .product-card:hover{
  border-color:var(--color-primary)
}

html[data-theme="dark"] .category-card-name,
html[data-theme="dark"] .product-name,
html[data-theme="dark"] .product-price{
  color:var(--color-text)
}

html[data-theme="dark"] .product-brand,
html[data-theme="dark"] .product-price-old{
  color:var(--color-text-muted)
}

html[data-theme="light"] .product-favorite,
html[data-theme="dark"] .product-favorite{
  border-color:var(--color-border);
  color:var(--color-text)
}

html[data-theme="light"] .product-favorite{
  background:var(--color-surface)
}

html[data-theme="dark"] .product-favorite{
  background:var(--color-surface-soft)
}

html[data-theme="light"] .home-benefits-bar{
  background:#edf5ff
}

html[data-theme="dark"] .home-benefits-bar{
  background:#192332
}

html[data-theme="dark"] .home-benefit strong{
  color:var(--color-text)
}

html[data-theme="dark"] .home-benefit span{
  color:var(--color-text-muted)
}

html[data-theme="dark"] .brand-strip img{
  opacity:.75
}

html[data-theme="light"] .site-footer,
html[data-theme="dark"] .site-footer{
  border-top:1px solid var(--color-border)
}

html[data-theme="dark"] .site-footer-column strong,
html[data-theme="dark"] .site-footer-newsletter strong{
  color:var(--color-text)
}

html[data-theme="dark"] .site-footer-column a,
html[data-theme="dark"] .site-footer-brand p,
html[data-theme="dark"] .site-footer-newsletter p{
  color:var(--color-text-muted)
}

html[data-theme="dark"] .site-footer-newsletter-form input{
  border-color:var(--color-border);
  background:var(--color-surface-soft);
  color:var(--color-text)
}

html[data-theme="dark"] .site-footer-newsletter-form input::placeholder{
  color:var(--color-text-muted)
}

html[data-theme="light"] .site-footer-bottom,
html[data-theme="dark"] .site-footer-bottom{
  border-top:1px solid var(--color-border);
  color:var(--color-text-muted)
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

*{
  scrollbar-width:thin;
  scrollbar-color:var(--color-primary) transparent
}

*::-webkit-scrollbar{
  width:8px;
  height:8px
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner{
  background:transparent
}

*::-webkit-scrollbar-thumb{
  min-height:32px;
  border:2px solid transparent;
  border-radius:999px;
  background:var(--color-primary);
  background-clip:padding-box
}

*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active{
  background:var(--color-primary-hover);
  background-clip:padding-box
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){
  :root{
    --container-padding:16px
  }

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden
  }

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

  .site-utility-inner{
    gap:10px
  }

  .site-utility-left{
    flex:1;
    gap:14px
  }

  .site-utility-right{
    flex:0 0 auto;
    gap:10px
  }

  .site-header-main{
    flex-wrap:wrap;
    gap:12px;
    min-height:auto;
    padding-top:12px;
    padding-bottom:12px
  }

  .site-logo img{
    max-width:130px;
    max-height:40px
  }

  .site-header-actions{
    flex:1;
    justify-content:flex-end;
    gap:10px;
    margin-left:auto
  }

  .site-action,
  .site-header-action{
    min-width:auto;
    min-height:44px;
    padding:4px 6px
  }

  .site-search{
    order:3;
    flex:0 0 100%;
    width:100%;
    min-width:0
  }

  .site-search-field{
    width:100%
  }

  .site-search-input{
    min-width:0
  }

  .site-navigation{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch
  }

  .site-navigation-inner{
    width:auto;
    min-width:max-content;
    max-width:none;
    min-height:42px;
    gap:20px
  }

  .site-navigation-item{
    flex:0 0 auto;
    white-space:nowrap
  }

  .home-hero-card{
    grid-template-columns:1fr
  }

  .home-hero-content{
    padding:32px
  }

  .home-hero-media{
    min-height:240px
  }

  .category-strip{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px
  }

  .product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px
  }

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

  .product-card-media{
    height:190px;
    padding:16px
  }

  .product-name{
    min-height:40px
  }

  .home-benefits-bar{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .brand-strip{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

  .site-footer{
    margin-top:50px
  }

  .site-footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px;
    padding:35px 0
  }

  html[data-theme="light"] .product-card,
  html[data-theme="light"] .category-card,
  html[data-theme="dark"] .product-card,
  html[data-theme="dark"] .category-card{
    box-shadow:none
  }

  html[data-theme="dark"] .site-utility{
    background:#0d0f13
  }
}


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

@media(max-width:600px){
  :root{
    --container-padding:12px
  }

  body{
    padding-bottom:72px
  }

  .site-utility{
    display:none
  }

  .site-header-main{
    gap:10px
  }

  .site-logo img{
    max-width:115px
  }

  .site-header-actions{
    display:none
  }

  .site-action-label,
  .site-header-action-label{
    display:none
  }

  .site-action,
  .site-header-action{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    min-width:38px;
    height:38px;
    min-height:38px;
    padding:0
  }

  .site-action-icon,
  .site-header-action-icon{
    font-size:18px
  }

  .site-search-category{
    display:none
  }

  .site-navigation-inner{
    gap:22px
  }

  .home-hero-content{
    padding:26px 22px
  }

  .home-hero-title{
    font-size:32px
  }

  .home-hero-text{
    font-size:15px
  }

  .home-hero-media{
    min-height:210px
  }

  .category-strip,
  .product-grid,
  .brand-strip{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .category-strip,
  .product-grid{
    gap:12px
  }

  .category-card{
    height:140px;
    padding:14px 10px
  }

  .category-card-media{
    width:82px;
    height:82px
  }

  .category-card-name{
    margin-top:8px;
    font-size:14px
  }

  .product-card-media{
    height:200px;
    padding:16px
  }

  .product-card-content{
    padding:13px
  }

  .product-brand{
    font-size:12px
  }

  .product-name{
    min-height:42px;
    font-size:14px;
    line-height:1.4
  }

  .product-price{
    font-size:20px
  }

  .product-price-old{
    font-size:13px
  }

  .product-stock{
    font-size:12px
  }

  .product-add-button{
    min-height:40px;
    margin-top:12px;
    padding:0 8px;
    font-size:13px
  }

  .home-benefits-bar{
    grid-template-columns:1fr
  }

  .home-benefit{
    display:grid;
    grid-template-columns:44px 110px minmax(0,1fr);
    align-items:center;
    justify-content:stretch;
    gap:12px;
    min-height:72px;
    padding:12px 16px
  }

  .home-benefit-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px
  }

  .home-benefit strong{
    font-size:14px
  }

  .home-benefit span{
    margin:0;
    font-size:12px;
    line-height:1.4
  }

  .site-footer-grid{
    grid-template-columns:1fr
  }

  .site-footer-bottom{
    align-items:flex-start;
    flex-direction:column
  }

  .mobile-toolbar{
    position:fixed;
    z-index:1000;
    right:0;
    bottom:0;
    left:0;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    height:64px;
    border-top:1px solid var(--color-border);
    background:var(--color-surface);
    box-shadow:0 -6px 20px rgba(0,0,0,.08)
  }

  .mobile-toolbar-item{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-width:0;
    padding:0;
    border:0;
    background:none;
    color:var(--color-text-muted)
  }

  .mobile-toolbar-item i{
    font-size:19px
  }

  .mobile-toolbar-item span{
    font-size:11px;
    font-weight:600
  }

  .mobile-toolbar-item.active{
    color:var(--color-primary)
  }

  .mobile-toolbar-count{
    position:absolute;
    top:6px;
    left:calc(50% + 6px);
    min-width:17px;
    height:17px;
    padding:0 4px;
    border-radius:20px;
    background:var(--color-primary);
    color:#fff!important;
    font-size:10px!important;
    line-height:17px;
    text-align:center
  }
}