:root {
  --gap-xs: clamp(0.5rem, 1vw, 0.75rem);
  --gap-sm: clamp(0.75rem, 1.5vw, 1rem);
  --gap-md: clamp(1rem, 2.5vw, 1.5rem);
  --gap-lg: clamp(1.5rem, 4vw, 2.5rem);

  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.25rem;
  --font-xl: 1.5rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;

  --shadow-sm: 0 0.125rem 0.5rem rgba(0, 0, 0, .08);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Arial, sans-serif;
  background: #f8f8f8;
  color: #222;
  line-height: 1.5;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}


.sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--gap-sm) var(--gap-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
}

.logo {
  width: clamp(2.5rem, 8vw, 4rem);
  height: auto;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAFUElEQVR4AeyXZ6hcRRSAr+IPO6JGscSKYseCKP5QUdTYsIsVCyp2VFTU2HvF3gk2VBR771gQCyk/0ntIQgrpPRBI8n3LnWV28+6+t8myJHvncb49Z9ruzJkzZ+atn5X8Lzmg5AGQpQhIEVByD6QjUPIASEkwHYF0BErugXQESh4A6RYo3RGoj/jkgHqPlK2cIqBsO16/3hQB9R4pWzlFQNl2vH69RRFwEB3Ph75wKRwGG0FP5Qg63gv3w3VwDGwJPZWd6XgrOP529KmwO/RUNqbj4eDcXcN52AfCKhI7YHta34YlMBA+gIfhLfgXFsNnsDfE8i2FFfAG3Agj4G94AO6Dl+BXmAUD4EyI5QYKjh+JPg1+gQnwFDj+CfRXMAamwD1QJG7cdzQugn/AubuGD7EHgWt4E70NVCQ44ARKQ+EScKIPoS+D4+Ei0IvD0WfAMLgY6uVKKp6HneA1uBZOgrPhZtB5B6M/BSeBqpE9KX0Bx4ILvgV9DvSBq+Fl2BweBB25LTqWmyi4cSeih8Cd4Nxdw+XYj8BcuAJsN0or/wztT8UPsAXYaUe04Ws0/Iz9PjwK+4BOQWXv8nEU1MvvVGwH18Cr8D244OfQZ8F+oIOdhDtLsUac4AHUGAnPoj+BH+F1uB6M0t/QOtI5Y1bkXD7tj8ou4MM1PY527q7BSLibsuOfQfcCv7e3EeDiKGdW2Em7CJ3iYmwPC1jPAswBJz4PXSRGmRO03bPtLobx1pl3BmsUMJ96o3A22jMdvutpyoobaLhrF2Fu+ZPGTaGvDjgaQ/Esq7vj67yDidGQzIuZecIJhnKR9owvyxsN99zMrDNXhHKR9jfMMbZ7PHbD6A2Km6jujm/yDn10wAZ5Qa/mZkM1PWo1lExgVvV0/HI6h75bY4fxJi6dQFW3MjXvsRU6zB8zC9+r3YhpeWMvHTAqL3hV5WZDFXbN22Js1LOrnBA1V02TnaFvRfhtbXOQYa3dHWEO3hyTos6rrCFqi80wfoQOCBnZTHlK3KsL2wT1WF7fL9fhDJs8TXx5dZfKt8RHeYvXmoksjLfa5LqJRgNMduFN4NXrRoS5mANM1g2GZ17D3nb2eUUHeE+bKa3wfL+HoSd3QSs78OGV8SLac+4jYzT2HaCEENb2uuqP4cPD98KG2Iap97PXmuPc5QXUXwhKPN7sbZ/baHCMRwQz24sPv9O73euOYqb2zZHxZ0I1GjbD9vd1kg8h505VtisfXocfo72VUJnO76cDLNjow0Pbu9NkNJ6Ck5uMNul4DbmDf1D23eCZxaxKmMwh1JiJfS+4OzMpez97/Tgh7UOp+x9i8RbxoeM1+iQN9puBdg6+QfxOF2W/06n3zYGqiGffts8pOUedo7Ocu+PHUW+C9F2BmfnIq9jBAVbqRUPLEJ9oRYRJR696j3tr6JyouWL+xOce4I+b6TGrshTLBZyM1kHuFmaNuNh9qfH56nXrq41iVf7Cugp8aH2JrhffEIa3t5NHUUfFfdwg3zfeGEbfQhtjB1jWU3dh+Bb3bAZ8QBjC3uM014h9rFB7rt2Z46iwHHBXvLN9ptJUI/axwrm4iHco+OAyF9gWOJJ681Vl4thFYmT5CvV/jzBW7ZH0hWtUVMf6o9VCGY3kgBbsuu9t//Pz3b86X/cfgxz/Arrt0ooI0AH+374mDnC81+w66YC2T7qVP9iKCGjlfNr+XckBbXf5WvaDKQLWsg1p+3Q6LgKa9WByQLMe67T+KQI6bUebXU+KgGY91mn9UwR02o42u54UAc16rNP6pwjotB1tdj0pApr1WKf1TxGwru/oms5/JQAAAP//CPr/ZwAAAAZJREFUAwD0Q/CBQ7mLDAAAAABJRU5ErkJggg==")
}

.nav-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-md);
  font-size: var(--font-sm);
}

.nav-list a {
  color: #767474;
  transition: color .2s;
}

.nav-list a:hover {
  color: #000;
}

.hamburger {
  display: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: #000;
}


.navbar {
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  box-shadow: var(--shadow-sm);
}

.navbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gap-md);
  height: clamp(3rem, 8vh, 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

.navbar-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
  font-size: var(--font-sm);
}

.navbar-links a {
  color: #444;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  transition: background .2s;
}

.navbar-links a:hover {
  background: #e4e4e4;
}


.container {
  max-width: 1200px;
  margin: var(--gap-lg) auto;
  padding: 0 var(--gap-md);
}

.mobile-heading {
  font-size: var(--font-xl);
  margin-bottom: var(--gap-md);
  text-align: center;
}

.product-grid {
  display: grid;
  gap: var(--gap-md);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.product-all {
  display: grid;
  gap: var(--gap-md);
  grid-template-columns: repeat(4,1fr);

}

.product-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--gap-md);
  display: flex;
  flex-direction: column;
  transition: transform .2s;
}

.product-card:hover {
  transform: translateY(-0.25rem);
}

.product-card img {
  margin-bottom: var(--gap-sm);
  width: 100%;
}

.product-card h3 {
  font-size: 1.05rem;
  margin: 0 0 var(--gap-sm);
  color: #333;
}

.price {
  font-size: 0.95rem;
  margin: var(--gap-sm) 0;
}

.price del {
  color: #666;
  margin-left: 0.25rem;
}

.product-card a {
  margin-top: auto;
  font-weight: 600;
  color: #000;
}


footer {
  background: #121212;
  color: #fff;
}

.t_c {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--gap-lg) var(--gap-md) 0;
  font-size: var(--font-sm);
  color: #aaa;
  border-bottom: 1px solid #444;
}

.t_c ul {
  list-style: disc inside;
}

#footer {
  padding: var(--gap-lg) 0;
}

#footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: var(--gap-lg);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  padding: 0 var(--gap-md);
}

.footerdiv h3 {
  font-size: 1.1rem;
  margin-bottom: var(--gap-sm);
}

.footerdiv a {
  display: block;
  color: #aaa;
  font-size: var(--font-sm);
  margin-bottom: 0.4rem;
  transition: color .2s;
}

.footerdiv a:hover {
  color: #fff;
}

#social {
  max-width: 1200px;
  margin: var(--gap-lg) auto 0;
  padding: 0 var(--gap-md);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-md);
  border-bottom: 1px solid #444;
  padding-bottom: var(--gap-md);
}

.supportImg {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-sm);
  color: #fff;
}

#social img {
  width: clamp(1.5rem, 4vw, 2rem);
  height: auto;
  border-radius: 50%;
  background: #555;
  padding: 0.25rem;
}

#lastdiv {
  max-width: 1200px;
  margin: var(--gap-md) auto 0;
  padding: 0 var(--gap-md);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gap-md);
  font-size: var(--font-sm);
  color: #ccc;
}

#lastdiv a {
  color: #ccc;
}


@media(max-width: 1024px){
  .nl2 {
    display: none;
  }
  .product-all{
    grid-template-columns: repeat(3,1fr);
  }
}
@media (max-width: 768px) {
  .nav-list:not(.navbar-links) {
    display: none;
  }

  .hamburger {
    display: block;
  }

  .nav-list.active {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    border-top: 1px solid #e5e5e5;
    padding: var(--gap-md);
  }
  .product-all{
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
  .product-all{
    grid-template-columns: 1fr;
  }
}