:root {
  --orange: #fe6a0b;
  --orange-light: #ff8a3d;
  --grey-dark: #5c5c5c;
  --grey-header: #626262;
  --blue: #449DDA;
  --blue-link: #0D58AC;
  --footer-bg: #6a6a6a;
  --radius: 5px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { font-family: Arial, Helvetica, sans-serif; font-size:100%; color:#000; background:#fff; }
body { font-size:0.95rem; }
a { text-decoration:none; color:var(--blue-link); }
img { border:none; display:block; max-width:100%; }
ul { list-style:none; }
h2 { font:normal 1rem verdana, arial, sans-serif; padding:0.4rem 0.7rem; color:#fff; margin:0; line-height:1.3; }
.bold { font-weight:bold; }
.smaller { font-size:0.8rem; }
.toright { text-align:right; }
.right { text-align:right; }

#wrapper {
  max-width:75rem; margin:0 auto; position:relative;
  padding:0 1rem;
  display:flex; flex-direction:column; gap:1rem;
}

#preHeader { padding-top:0.6rem; }
#preHeader ul { display:flex; justify-content:flex-end; gap:0.5rem; }

#headerBox {
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem; position:relative;
  font-family:verdana, arial, sans-serif;
}
#headerBox h1 { flex:none; }
#headerBox h1 a {
  display:flex; align-items:center; gap:0.5rem;
  min-width:12rem; height:4rem;
}
.logoIcon { display:flex; flex:none; }
.logoIcon img { height:auto; width:100%; }
.logoText { color:var(--orange); font-weight:bold; font-style:normal; font-size:1.8rem; }
#headerNav { flex:1; min-width:0; }
#headerNav div {
  background:linear-gradient(to bottom, #8a8a8a 0%, var(--grey-dark) 60%);
  border-radius:var(--radius); overflow:hidden;
}
#topMenu { display:flex; flex-wrap:wrap; justify-content:flex-end; }
#topMenu li a {
  display:block; padding:0.7rem 1rem;
  color:#fff; font-family:verdana, arial, sans-serif; font-size:0.8rem; font-weight:bold;
  border-right:1px solid #6e6e6e;
}
#topMenu li:last-child a { border-right:none; }
#topMenu li a:hover { background:var(--orange); }

#menuToggle {
  display:none; width:2.5rem; height:2.1rem;
  background:var(--grey-dark); border:none; border-radius:var(--radius); cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:0.3rem;
}
#menuToggle span { display:block; width:1.2rem; height:2px; background:#fff; }

#wrapContent {
  display:grid; grid-template-columns:15rem 1fr; gap:1rem; align-items:start;
}

#left { display:flex; flex-direction:column; gap:0.9rem; min-width:0; }
#right { display:flex; flex-direction:column; gap:0.9rem; min-width:0; }

#searchBox { background:linear-gradient(to bottom, #5c5c5c 10%, #eee 46%, #eee 54%, #5c5c5c 90%); border-radius:var(--radius); padding-bottom:0.6rem; }
#searchBox h2 { background:transparent; color:#fff; padding:0.8rem 0.7rem 0.4rem; }
#searchBox form { padding:0 0.7rem; display:flex; flex-direction:column; gap:0.4rem; }
#searchBox input[type=text] {
  width:100%; font-size:0.9rem; padding:0.4rem; border:1px solid #707070; border-radius:3px;
}
#searchBox .searchActions {
  display:flex; align-items:center; justify-content:space-between; gap:0.6rem;
}
#searchBox .form-submit {
  background:#fff; border:1px solid #747474; padding:0.4rem 1rem; cursor:pointer; font-weight:bold; border-radius:3px;
}
#searchBox .searchMore { margin:0; }
#searchBox .searchMore a { color:#fff; font-size:0.8rem; }
#searchBox .searchMore a:hover { text-decoration:underline; }

#categories, #specialOffer {
  border:1px solid #e0e0e0; border-radius:0 0 var(--radius) var(--radius);
}
#categories h2, #specialOffer h2 { background:linear-gradient(to bottom, #ffcb96 0%, var(--orange) 60%); border-radius:var(--radius) var(--radius) 0 0; }
#categories ul, #specialOffer ul { background:#f1f1f1; border-radius:0 0 var(--radius) var(--radius); }
#categories li a, #specialOffer li a {
  display:block; padding:0.7rem 1.1rem; border-bottom:1px solid #e0e0e0; border-top:1px solid #fff;
  color:#000; font-size:0.9rem; font-family:arial, tahoma, sans-serif;
}
#categories li:last-child a, #specialOffer li:last-child a { border-bottom:none; border-radius:0 0 var(--radius) var(--radius); }
#categories li a:hover, #specialOffer li a:hover { background:#e3e3e3; }
.more { text-align:right; font-size:0.8rem; padding:0.7rem 1.1rem; }
.more a { color:#d9d9d9; }
.more a span { color:var(--blue-link); }
.more a:hover { color:#ababab; }

#firstTime {
  border-radius:var(--radius); position:relative;
  background:#fff; border:1px solid #e2e2e2;
  display:flex; flex-wrap:wrap; align-items:center; text-align:center; gap:1rem; padding:1rem;
}
#firstTime .col1 { flex:1 1 12rem; }
#firstTime .col2 {
  flex:2 1 20rem; display:flex; align-items:center; justify-content:center; gap:0.9rem; flex-wrap:wrap;
  border-left:1px solid #e2e2e2; padding-left:1.2rem;
}
#firstTime h3 {
  font-size:1.1rem; font-weight:normal; font-style:italic;
  font-family:georgia, "times new roman", serif; color:#444; margin-bottom:0.6rem;
}
#firstTime p a {
  display:inline-block; color:#fff; font-weight:bold; font-size:0.85rem;
  padding:0.6rem 1.1rem; border-radius:4px;
}
#login { background:var(--orange); }
#login:hover { background:var(--orange-light); }
#register { background:#6cb52d; }
#register:hover { background:#7fca3f; }
#howUse { background:#2ba7c7; position:relative; padding-right:1.7rem !important; }
#howUse:hover { background:#3cc0e0; }
#howUse:after {
  content:"›"; position:absolute; right:0.6rem; top:50%; transform:translateY(-50%);
  font-size:1.1rem; font-weight:bold;
}

#showCase { border:1px solid #c8c8c8; border-top:none; border-radius:var(--radius); position:relative; }
#showCase h2 { background:linear-gradient(to bottom, #b0b0b0 0%, var(--grey-header) 60%); border-radius:var(--radius) var(--radius) 0 0; }
#showCase .ohidden { aspect-ratio:728/360; overflow:hidden; position:relative; border-radius:0 0 var(--radius) var(--radius); }
.dynamicShowcase { position:relative; height:100%; }
.dynamicShowcase .slide {
  position:absolute; inset:0;
  background:linear-gradient(135deg,var(--orange),var(--orange-light));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:clamp(1rem, 3vw, 1.4rem); font-weight:bold; text-align:center;
  opacity:0; transition:opacity .5s ease; z-index:1;
}
.dynamicShowcase .slide.active { opacity:1; z-index:2; }
.dynamicShowcase .slide img {width: 100%;height: 100%;}
.dynamicShowcase .slide a {
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; color:#fff;
}
.dynamicShowcase .slide:nth-child(2) { background:linear-gradient(135deg,var(--blue-link),#4d9fe6); }
.dynamicShowcase .slide:nth-child(3) { background:linear-gradient(135deg,var(--blue),#8fd0f5); }
.dynamicShowcase .slide:nth-child(4) { background:linear-gradient(135deg,#555,#999); }
#carouselNav {
  position:absolute; bottom:0.3rem; right:0.3rem; z-index:3;
  background:#fff; border:1px solid #d9d9d9; padding:0.2rem; border-radius:3px;
}
#carouselNav ul { display:flex; }
#carouselNav li {
  height:1.5rem; min-width:1rem; padding:0 0.2rem;
  font:normal 0.75rem/1.5rem verdana, arial, sans-serif; text-align:center;
  color:#555; cursor:pointer;
}
#carouselNav li.active { color:#fb8724; font-weight:bold; }
#carouselNav li.back, #carouselNav li.forward { width:1.3rem; color:#999; font-weight:bold; }
#carouselNav li.back:hover, #carouselNav li.forward:hover, #carouselNav li:not(.back):not(.forward):hover { color:#fb8724; }

.smallShowCases { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
#smallShowCase1, #smallShowCase2 {
  aspect-ratio:358/220; border:1px solid #c8c8c8; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:bold; font-size:1rem;
  text-align:center;
}
#smallShowCase1 img, #smallShowCase2 img {
    width: 100%;height: 100%;
}

#promoItems { border:1px solid var(--blue); border-radius:var(--radius); }
#promoItems h2 { background:linear-gradient(to bottom, #bfe4f7 0%, var(--blue) 60%); border-radius:var(--radius) var(--radius) 0 0; }
.mainPageGallery {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr)); gap:0.8rem; padding:0.8rem;
}
.mainPageGallery li { text-align:center; font-size:0.85rem; }
.mainPageGallery img { width:100%; aspect-ratio:4/3; object-fit:cover; background:#ddd; margin:0 auto 0.3rem; border-radius:3px; }
.mainPageGallery strong { color:#ff5a00; }
#promoItems .more { clear:both; }

#newsAndEvents { border:1px solid #c8c8c8; border-radius:var(--radius); }
#newsAndEvents h2 { background:linear-gradient(to bottom, #b0b0b0 0%, var(--grey-header) 60%); border-radius:var(--radius) var(--radius) 0 0; }
#newsAndEvents h3 { font-size:0.9rem; padding:0.7rem; }
#newsAndEvents h3 small { font-size:0.7rem; color:#777; font-weight:normal; }
#newsAndEvents p { font-size:0.85rem; padding:0 0.7rem 0.7rem; color:#555; font-family:arial, tahoma, sans-serif; }

#footerContentBox {
  background:var(--footer-bg); padding:0.8rem;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr)); gap:1rem;
}
#footerContentBox h2 { background:var(--orange); font-size:0.9rem; margin-bottom:0.4rem; border-radius:4px; }
.footerMenuSection li { padding:0.15rem 0.6rem; font-size:0.8rem; line-height:1.5; }
.footerMenuSection a { color:#fff; }
.footerMenuSection a:hover { color:#fb8538; }

p.reg { font-size:0.8rem; padding:0.7rem; text-align:center; color:#555; }

.breadcrumb { font-size:0.8rem; color:#777; padding:0.6rem 0; }
.breadcrumb a { color:var(--blue-link); }

.productBox {
  border:1px solid #c8c8c8; border-radius:var(--radius); overflow:hidden;
  display:flex; flex-wrap:wrap;
}
.productImg {
  flex:0 1 18rem;
   max-width:40%;
  aspect-ratio:16/10;
  object-fit:cover; background:#eee;
}
.productInfo { padding:1.2rem; flex:1 1 0; min-width:0; }
.productInfo h1 { font-size:1.2rem; margin-bottom:0.8rem; color:#333; }
.productPrice { font-size:1.6rem; color:#ff5a00; font-weight:bold; margin-bottom:0.9rem; }
.productMeta { font-size:0.8rem; color:#777; margin-bottom:0.9rem; }
.buyBtn {
  display:inline-block; background:var(--orange); color:#fff; font-weight:bold;
  padding:0.6rem 1.3rem; border-radius:4px; margin-right:0.6rem;
}
.buyBtn:hover { background:var(--orange-light); }
.watchBtn {
  display:inline-block; background:#eee; color:#555; font-weight:bold;
  padding:0.6rem 1.3rem; border-radius:4px; border:1px solid #ccc;
}
.watchBtn:hover { background:#e3e3e3; }

.productDesc {
  border:1px solid #c8c8c8; border-radius:var(--radius); padding:1.2rem; font-size:0.85rem; line-height:1.6; color:#333;
}
.productDesc h2 { background:var(--grey-header); margin:-1.2rem -1.2rem 0.9rem; border-radius:var(--radius) var(--radius) 0 0; }
.productDesc h3 { font-size:0.95rem; color:var(--orange); margin:1rem 0 0.5rem; }
.productDesc p { margin-bottom:0.7rem; }
.productDesc ul { margin:0 0 0.7rem; padding-left:0; }
.productDesc ul li { padding-left:1.2rem; position:relative; margin-bottom:0.4rem; }
.productDesc ul li:before { content:"✓"; position:absolute; left:0; color:var(--orange); font-weight:bold; }
.productDesc table { width:100%; border-collapse:collapse; margin-bottom:0.7rem; font-size:0.85rem; }
.productDesc table caption { text-align:left; font-weight:bold; color:#333; padding-bottom:0.4rem; }
.productDesc table th, .productDesc table td { text-align:left; padding:0.4rem 0.6rem; border-bottom:1px solid #e0e0e0; }
.productDesc table th { background:#f1f1f1; width:40%; color:#555; font-weight:normal; }
@media (max-width:38rem) {
  .productDesc table, .productDesc table tbody, .productDesc table tr, .productDesc table th, .productDesc table td { display:block; width:auto; }
  .productDesc table th { border-bottom:none; padding-bottom:0; }
}

.sellerBox { border:1px solid #c8c8c8; border-radius:var(--radius); padding:1.2rem; text-align:center; }
.sellerBox .avatar {
  width:5.5rem; height:5.5rem; border-radius:50%; margin:0 auto 0.9rem;
  background:var(--grey-dark); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; font-weight:bold; object-fit:cover;
}
.sellerBox h1 { font-size:1.25rem; margin-bottom:0.4rem; }
.sellerBox .rating { color:#ff5a00; font-weight:bold; margin-bottom:0.9rem; }
.sellerStats { display:flex; justify-content:center; gap:2rem; margin:1.2rem 0; flex-wrap:wrap; }
.sellerStats div { text-align:center; }
.sellerStats strong { display:block; font-size:1.25rem; color:var(--orange); }
.sellerStats span { font-size:0.7rem; color:#777; }

@media (max-width:56rem) {
  #wrapContent { grid-template-columns:1fr; }
}

@media (max-width:38rem) {
  #headerBox h1 a { min-width:9rem; height:3.2rem; }
  .logoText { font-size:1.3rem; }
  #menuToggle { display:flex; }
  #headerNav { flex-basis:100%; order:3; }
  #headerNav div { background:none; }
  #topMenu { display:none; flex-direction:column; }
  #topMenu.open { display:flex; }
  #topMenu li a { border-right:none; border-bottom:1px solid #6e6e6e; background:var(--grey-dark); }
  .smallShowCases { grid-template-columns:1fr; }
  .productBox { flex-direction:column; }
  .productImg {max-width:100%;}
  #headerBox {justify-content: space-between;}
}