html {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

article, aside, footer, header, nav, section {
  display: block
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

figcaption, figure, main {
  display: block
}

figure {
  margin: 1em 40px
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

pre {
  font-family: monospace, monospace;
  font-size: 1em
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects
}

a:active, a:hover {
  outline-width: 0
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted
}

b, strong {
  font-weight: inherit;
  font-weight: bolder
}

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: 1em
}

dfn {
  font-style: italic
}

mark {
  background-color: #ff0;
  color: #000
}

small {
  font-size: 80%
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

audio, video {
  display: inline-block
}

audio:not([controls]) {
  display: none;
  height: 0
}

img {
  border-style: none
}

svg:not(:root) {
  overflow: hidden
}

button, input, optgroup, select, textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button, input {
  overflow: visible
}

button, select {
  text-transform: none
}

[type=reset], [type=submit], button, html [type=button] {
  -webkit-appearance: button
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0
}

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: .35em .625em .75em
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

progress {
  display: inline-block;
  vertical-align: baseline
}

textarea {
  overflow: auto
}

[type=checkbox], [type=radio] {
  box-sizing: border-box;
  padding: 0
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

details, menu {
  display: block
}

summary {
  display: list-item
}

canvas {
  display: inline-block
}

[hidden], template {
  display: none
}

.clearfix:after {
  content: "";
  display: table;
  clear: both
}

@font-face {
  font-family: fontello;
  src: url(../fonts/fontello.eot?32283594);
  src: url(../fonts/fontello.eot?32283594#iefix) format("embedded-opentype"), url(../fonts/fontello.woff2?32283594) format("woff2"), url(../fonts/fontello.woff?32283594) format("woff"), url(../fonts/fontello.ttf?32283594) format("truetype"), url(../fonts/fontello.svg?32283594#fontello) format("svg");
  font-weight: 400;
  font-style: normal
}

[class*=" icon-"]:before, [class^=icon-]:before {
  font-family: fontello;
  font-style: normal;
  font-weight: 400;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.icon-down-open-1:before {
  content: "\e800"
}

.icon-info-circled:before {
  content: "\e801"
}

.icon-heart-empty:before {
  content: "\e802"
}

.icon-twitter:before {
  content: "\e803"
}

.icon-facebook:before {
  content: "\e804"
}

.icon-gplus:before {
  content: "\e805"
}

.icon-basket:before {
  content: "\e806"
}

.icon-down-open:before {
  content: "\e807"
}

.icon-down-circled2:before {
  content: "\e808"
}

.icon-location:before {
  content: "\e809"
}

.icon-phone:before {
  content: "\e80a"
}

.icon-link:before {
  content: "\e80b"
}

.icon-mail:before {
  content: "\e80c"
}

.icon-star:before {
  content: "\e80d"
}

.icon-clock-1:before {
  content: "\e80e"
}

.icon-left-open-big:before {
  content: "\e80f"
}

.icon-right-open-big:before {
  content: "\e810"
}

.icon-pinterest-circled:before {
  content: "\f0d2"
}

.icon-angle-down:before {
  content: "\f107"
}

.icon-instagram-1:before {
  content: "\f16d"
}

.icon-instagram:before {
  content: "\f32d"
}

.icon-search:before {
  content: "\f50d"
}

@font-face {
  font-family: montserratlight;
  src: url(../fonts/montserrat-light-webfont.woff2) format("woff2"), url(../fonts/montserrat-light-webfont.woff) format("woff"), url(../fonts/montserrat-light-webfont.ttf) format("truetype"), url(../fonts/montserrat-light-webfont.svg#montserratlight) format("svg");
  font-weight: 400;
  font-style: normal
}

html {
  box-sizing: border-box
}

*, :after, :before {
  box-sizing: inherit
}

body {
  min-width: 1190px;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  background-color: white;
}

.container {
  width: 1170px;
  margin: 0 auto
}

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

@-webkit-keyframes a {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 0
  }
  to {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1
  }
}

@keyframes a {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 0
  }
  to {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1
  }
}

.page-header__topline {
  height: 45px;
  background-color: #d12a2a
}

.page-header__topline .currency {
  float: left;
  min-width: 120px
}

.page-header__topline .currency__change {
  display: block;
  color: #efe8e8;
  font-size: 13px;
  line-height: 45px;
  text-decoration: none;
  -webkit-transition: color .3s;
  transition: color .3s
}

.page-header__topline .currency__change:hover {
  color: #5e5e5e
}

.page-header__topline .login {
  float: right;
  min-width: 135px;
  margin: 0;
  padding: 0;
  margin-right: 82px;
  list-style: none;
  font-size: 0
}

.page-header__topline .login__item {
  display: inline-block;
  vertical-align: top;
  margin-right: 35px
}

.page-header__topline .login__item:last-child {
  margin-right: 0
}

.page-header__topline .login__link {
  display: block;
  font-size: 13px;
  color: #efe8e8;
  line-height: 45px;
  text-decoration: none;
  -webkit-transition: color .3s;
  transition: color .3s
}

.page-header__topline .login__link:hover {
  color: gray
}

.page-header__topline .basket {
  float: right;
  width: 147px
}

.page-header__bottomline {
  background-color: #f8f8f8
}

.page-header__bottomline .logo {
  float: left
}

.page-header__bottomline .logo__link {
    margin-top: 25px;
    display: block;
}

.page-header__bottomline .main-nav {
  float: right
}

.page-header__bottomline .main-nav .categories {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0
}

.page-header__bottomline .main-nav .categories__item {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-right: 57px
}

.page-header__bottomline .main-nav .categories__item:last-child {
  margin-right: 0
}

.page-header__bottomline .main-nav .categories__item:hover>.dropdown {
  display: block;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-animation: a .2s;
  animation: a .2s
}

.page-header__bottomline .main-nav .categories__link {
  position: relative;
  display: block;
  padding-top: 45px;
  padding-bottom: 53px;
  font-size: 13px;
  color: #222;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: color .3s;
  transition: color .3s
}

.page-header__bottomline .main-nav .categories__link:hover {
  color: #00c8c8
}

.page-header__bottomline .main-nav .categories__link i {
  position: absolute;
  top: 63px;
  left: -5px;
  line-height: normal
}

.page-header__bottomline .main-nav .categories__link--active {
  color: #00c8c8
}

.page-header .dropdown {
  position: absolute;
  display: none;
  left: 0;
  width: 467px;
  padding: 30px;
  padding-top: 10px;
  padding-left: 27px;
  background-color: #f8f8f8;
  box-shadow: 0 17px 24px rgba(0, 0, 0, .2);
  z-index: 1
}

.page-header .dropdown--lookbook {
  right: 0;
  left: auto
}

.page-header .dropdown__half {
  float: left;
  width: 170px;
  margin-right: 68px
}

.page-header .dropdown__half:last-child {
  margin-right: 0
}

.page-header .dropdown__heading {
  margin-bottom: 30px;
  font-size: 12px;
  font-weight: 700;
  color: #575153;
  text-transform: uppercase
}

.page-header .dropdown__items {
  margin: 0;
  padding: 0;
  list-style: none
}

.page-header .dropdown__item {
  margin-bottom: 12px
}

.page-header .dropdown__link {
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  color: #727272;
  text-decoration: none;
  -webkit-transition: color .2s;
  transition: color .2s
}

.page-header .dropdown__link:hover {
  color: #262626
}

.page-header .dropdown__banner {
  display: block;
  margin-top: 45px;
  padding: 56px 51px;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  background-color: #333
}

.page-header .dropdown__banner span {
  display: inline-block;
  margin-top: 7px;
  font-weight: 400
}

.page-footer .footer-nav {
  padding: 60px 0 55px;
  background-color: #f8f8f8
}

.page-footer .footer-nav__col {
  float: left;
  width: 160px
}

.page-footer .footer-nav__col--info, .page-footer .footer-nav__col--whybuy {
  margin-right: 77px
}

.page-footer .footer-nav__col--account {
  margin-right: 76px
}

.page-footer .footer-nav__col--lookbook {
  margin-right: 78px;
  margin-right: 60px
}

.page-footer .footer-nav__col--contacts {
  width: 240px
}

.page-footer .footer-nav__col .address {
  margin-bottom: 23px;
  padding-top: 4px;
  color: #777;
  font-size: 14px;
  line-height: 20px;
  font-style: normal;
  text-decoration: none
}

.page-footer .footer-nav__col .phone {
  margin-bottom: 14px;
  color: #777;
  font-size: 14px
}

.page-footer .footer-nav__col .phone__number {
  color: #777;
  font-size: 14px;
  text-decoration: underline;
  -webkit-transition: color .2s;
  transition: color .2s
}

.page-footer .footer-nav__col .phone__number:hover {
  color: #2b2b2b
}

.page-footer .footer-nav__col .email {
  color: #777;
  font-size: 14px
}

.page-footer .footer-nav__col .email__addr {
  color: #777;
  font-size: 14px;
  text-decoration: underline;
  -webkit-transition: color .2s;
  transition: color .2s
}

.page-footer .footer-nav__col .email__addr:hover {
  color: #2b2b2b
}

.page-footer .footer-nav__heading {
  margin-bottom: 23px;
  color: #575153;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase
}

.page-footer .footer-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0
}

.page-footer .footer-nav__item {
  padding: 0
}

.page-footer .footer-nav__link {
  color: #777;
  font-size: 14px;
  line-height: 30px;
  text-decoration: none;
  -webkit-transition: color .2s;
  transition: color .2s
}

.page-footer .footer-nav__link:hover {
  color: #2b2b2b
}

.page-footer .banners {
  padding-bottom: 56px;
  background-color: #f8f8f8
}

.page-footer .banners .banner-award {
  float: left;
  width: 570px;
  height: 200px;
  padding-top: 55px;
  font-size: 36px;
  letter-spacing: 2px;
  line-height: 44px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  background-color: #333
}

.page-footer .banners .banner-award span {
  font-weight: 700
}

.page-footer .banners .banner-social {
  float: right;
  width: 570px;
  height: 200px;
  padding-top: 80px;
  font-size: 0;
  text-align: center;
  background-color: #00c8c8
}

.page-footer .banners .banner-social__link {
  display: inline-block;
  margin-right: 36px;
  font-size: 36px;
  color: #fff;
  text-decoration: none;
  -webkit-transition: color .3s;
  transition: color .3s
}

.page-footer .banners .banner-social__link:last-child {
  margin-right: 0
}

.page-footer .banners .banner-social__link:hover {
  color: #333
}

.page-footer__subline {
  padding: 15px;
  font-size: 13px;
  color: #d7cdcd;
  background-color: #333
}

.page-footer__subline .copyright {
  float: left;
  width: 300px
}

.page-footer__subline .designby {
  float: right;
  width: 220px
}

.page-footer__subline .developer {
  float: right;
  width: 170px
}

.brand {
  padding-top: 63px;
  padding-bottom: 120px
}

.brand .block-left {
  float: left;
  width: 570px;
  margin-right: 30px
}

.brand .block-right {
  float: right;
  width: 570px
}

.brand__row {
  margin-bottom: 62px
}

.brand__row:last-child {
  margin-bottom: 0
}

.brand__col--buyer {
  margin-top: -162px;
  margin-bottom: 68px
}

.brand__img {
  display: block
}

.brand__img--offset {
  margin-bottom: 27px
}

.brand__descr--designer {
  margin-top: 60px
}

.brand__heading {
  margin: 0;
  margin-bottom: 26px;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #575153;
  text-transform: uppercase
}

.brand__subheading {
  margin: 0;
  margin-bottom: 16px;
  font-size: 13px;
  color: #727272;
  text-transform: uppercase
}

.brand__text {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  color: #8e8c8c
}

.brand__link {
  color: #00c8c8;
  text-decoration: none
}

.brand__link:hover {
  text-decoration: underline
}

.btn {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  line-height: 20px;
  text-decoration: none;
  -webkit-transition: .3s;
  transition: .3s
}

.btn--basket {
  width: 100%;
  height: 45px;
  padding-left: 18px;
      background-color: #a2eded;
  -webkit-transition: background-color .3s;
  transition: background-color .3s
}

.btn--basket:hover {
  background-color: #009595
}

.btn--basket .icon-basket {
  position: relative;
  top: 3px;
  margin-right: 13px;
  font-size: 20px
}

/*cover*/

.nero {
  padding-top: 160px;
  padding-bottom: 140px;
  font-family: 'montserratlight', sans-serif;
  text-align: center;
  text-transform: uppercase;
  color: #FFF;
  background: #666 url("../images/banner-ave.jpg") no-repeat;
  background-size: cover;
  background-position: center;
}

.nero__heading {
  font-size: 48px;
}

.nero__bold {
  font-weight: 700;
}

.nero__text {
  font-size: 30px;
}

.hero {
  padding-top: 300px;
  padding-bottom: 140px;
  color: #fff;
  background: #666 url(../images/photo0.png) no-repeat;
  background-size: cover;
  background-position: 50%
}

.hero .btn1 {
  text-decoration: none;
  text-align: center;
  color: gray;
  font-size: 14px;
  font-family: Roboto;
  border: 1.5px solid gray;
  background-color: #f8f8f8;
  position: relative;
  line-height: 40px;
  float: right;
  right: 210px;
  top: 80px;
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
}

.hero .btn1:hover {
  background-color: #009595;
  color: white;
}

.wrapper {
  text-align: center;
  width: 40em;
  margin: 2.5em auto;
  padding: 1em;
  border-radius: 8px;
  border-top: 1px solid #eee;
}

.wrapper> :first-child {
  margin-top: 0;
}

.wrapper> :last-child {
  margin-bottom: 0;
}


.todo a {
  padding: 1em;
  border-radius: 4px;
  color: BLACK;
  font-family: montserratlight;
  font-weight: lighter;
  font-size: .9em;
  text-decoration: none;
}

.todo ul {
  margin: .4em 0;
  padding: 0 1em;
}

.todo li {
  display: inline;
  margin-right: 12px;
}

.todo a:hover {
  color: #009595;
}

.tac {
  text-align: center;
}
.footer {
  background: #0d1117;
  color: #ccc;
  padding: 50px 20px 20px;
  font-family: Arial, sans-serif;
}
.footer .container {
  max-width: 1200px;
  margin: auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}
.footer-col h4, .footer-col h2 {
  color: #fff;
  margin-bottom: 15px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
}
.footer-col ul li {
  margin-bottom: 10px;
}
.footer-col ul li a {
  color: #bbb;
  text-decoration: none;
  transition: 0.3s;
}
.footer-col ul li a:hover {
  color: #4d9eff;
}
.footer p {
  margin: 5px 0;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  flex-wrap: wrap;
}
.social-icons a {
  color: #bbb;
  margin-right: 15px;
  font-size: 18px;
  transition: 0.3s;
}
.social-icons a:hover {
  color: #4d9eff;
}
.payments img {
  height: 30px;
  margin-right: 10px;
}
.footer .copyright {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #888;
}

/* Animations */
.fade-in { animation: fadeIn 1.5s ease-in-out; }
.zoom-in { animation: zoomIn 1.5s ease-in-out; }
.slide-up { animation: slideUp 1.5s ease-in-out; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Testimonials (global) */
.reviews-block { background: #fff; padding: 60px 20px; }
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.testimonial-card {
  background: #f8f8f8;
  padding: 18px;
  border-radius: 12px;
  max-width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-2px);
}
.testimonial-card .t-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: #4d9eff; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.meta strong { font-size: 15px; }
.meta small { color: #777; display: block; font-size: 12px; }
.stars { color: #f5a623; margin: 4px 0; }
.testimonial-card p { font-style: italic; margin: 8px 0 0; line-height: 1.5; }

/* Brands strip */
.brands-strip { background: #0d1117; padding: 18px 0; }
.brands-strip .container { overflow: hidden; position: relative; }
.brands-track { 
  display: flex; 
  gap: 12px; 
  animation: brandScroll 25s linear infinite; 
  white-space: nowrap;
  width: calc(200% + 24px); /* Double width for seamless loop */
}
.brand-pill { 
  background: #1f2937; 
  color: #e5e7eb; 
  border: 1px solid #374151; 
  padding: 8px 14px; 
  border-radius: 999px; 
  font-weight: 600;
  font-size: 13px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.brand-pill:hover {
  background: #374151;
  transform: scale(1.05);
}
@keyframes brandScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Responsive Design */
@media (max-width: 768px) {
  .reviews-block { padding: 40px 15px; }
  .testimonial-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .testimonial-card {
    padding: 15px;
  }
  .avatar {
    width: 38px;
    height: 38px;
    font-size: 12px;
  }
  .meta strong {
    font-size: 14px;
  }
  .brands-track {
    gap: 8px;
  }
  .brand-pill {
    padding: 6px 10px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .testimonial-card .t-head {
    gap: 8px;
  }
  .testimonial-card p {
    font-size: 14px;
  }
  .section-title {
    font-size: 1.5rem;
  }
}

/* Legacy testimonials selector kept for compatibility */
.testimonials { background: #fff; padding: 60px 20px; text-align: center; }

/* ===== IT DEPOT STYLE REDESIGN ===== */

/* Banner Carousel - TOP POSITION like IT Depot */
.banner-carousel {
  position: relative;
  margin: 0 0 40px 0;
  width: 100%;
}

.carousel-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
}

.carousel-slides {
  display: flex;
  transition: transform 0.8s ease-in-out;
}

.carousel-slide {
  min-width: 100%;
  display: none;
}

.carousel-slide.active {
  display: block;
}

.carousel-slide img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  border-radius: 12px;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.carousel-nav:hover {
  background: rgba(0,0,0,0.8);
}

.carousel-prev {
  left: 20px;
}

.carousel-next {
  right: 20px;
}

.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background: #ea580c;
}

.view-all-products-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
}

/* Vishal Peripherals Style Categories */
.category-slider-container { position: relative; overflow: hidden; margin-top: 20px; }
.category-slider { display: flex; gap: 12px; transition: transform .5s ease; }
.cat-slide-item { flex: 0 0 calc(14.2857% - 10px); background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; text-decoration: none; display: block; transition: transform .25s ease, box-shadow .25s ease; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.cat-slide-item:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.12); border-color:#1e40af; }
.category-card { display:flex; align-items:center; gap:10px; }
.cat-thumb { width:110px; height:110px; margin: 8px auto 12px auto; border-radius:50%; background:#eef2f6; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cat-thumb img { width:84%; height:84%; object-fit:contain; transition: transform .25s ease; filter: drop-shadow(0 4px 8px rgba(0,0,0,.15)); }
.cat-slide-item:hover .cat-thumb img { transform: scale(1.06); }
.category-details h3 { font-size: 15px; margin:0; color:#0f172a; text-align:center; }
.category-details .product-count { display:block; margin-top:6px; font-size:12px; color:#6b7280; text-align:center; }

.category-vishal-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.category-vishal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  border-color: #ea580c;
}

.category-icon-large {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #ea580c, #dc2626);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 22px;
  flex-shrink: 0;
}

.category-details h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 4px 0;
}

.product-count {
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 500;
}

/* 5 Products Per Row Slider */
.product-slider-container {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
}

  .product-slider {
  display: flex;
  transition: transform 0.5s ease;
  gap: 16px;
}

.product-slide-item {
  flex: 0 0 calc(25% - 12px);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

/* Bluish fade overlay on hover */
.product-slide-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 64, 175, 0.08);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.product-slide-item:hover::after { opacity: 1; }

.product-slide-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(29, 78, 216, 0.18);
  border-color: #1e40af;
}

.slider-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #1e40af;
  color: white;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
  z-index: 10;
  border: none;
}

.slider-nav-btn:hover {
  background: #1d4ed8;
  transform: translateY(-50%) scale(1.05);
}

/* Always visible inside the container */
.prev-btn { left: 10px; }
.next-btn { right: 10px; }

/* Product actions row */
.product-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Position wishlist in the top-left of the image */
.product-image .wishlist-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 3;
  background: rgba(255,255,255,0.95);
  border: 1px solid #e5e7eb;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wishlist-btn i { color: #9ca3af; font-size: 16px; }
.product-image .wishlist-btn:hover { border-color: #1e40af; }
.wishlist-btn.active i { color: #1e40af; }
.wishlist-btn.active i::before { content: "\f004"; } /* solid heart fallback */

/* Buy Now button next to Add to Cart */
.product-actions .add-cart-btn { flex: 1; }
.buy-now-btn {
  flex: 1;
  background: #fff;
  color: #1e293b;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
}
.buy-now-btn:hover {
  border-color: #1e40af;
  color: #1e40af;
}

/* Reviews and Sidebar Section */
.reviews-sidebar-section {
  padding: 60px 0;
  background: #f8fafc;
}

.reviews-sidebar-container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
}

/* Sliding Reviews */
.reviews-slider-container {
  position: relative;
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.section-subtitle {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 24px;
  text-align: center;
}

.reviews-slider {
  position: relative;
  overflow: hidden;
  height: 200px;
}

.review-slide {
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.5s ease-in-out;
}

.review-slide.active {
  opacity: 1;
  transform: translateX(0);
}

.review-content {
  text-align: center;
  padding: 20px;
}

.review-content .stars {
  color: #f59e0b;
  margin-bottom: 16px;
  font-size: 18px;
}

.review-content p {
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: #4b5563;
  margin-bottom: 20px;
}

.reviewer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.reviewer-avatar {
  width: 40px;
  height: 40px;
  background: #1e40af;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.reviewer-info strong {
  display: block;
  color: #1e293b;
  font-size: 14px;
}

.reviewer-info span {
  color: #64748b;
  font-size: 12px;
}

.review-nav-arrow {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  background: #1e40af;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  z-index: 10;
}

.review-nav-arrow:hover {
  background: #1d4ed8;
}

/* Sidebar Content */
.sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-widget {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  animation: fadeInUp 0.6s ease-out;
}

.sidebar-widget h4 {
  color: #1e293b;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-widget h4 i {
  color: #ea580c;
}

/* Hot Deals */
.hot-deals {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.deal-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.deal-item:hover {
  background: #f1f5f9;
}

.deal-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.deal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.deal-info h5 {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 4px;
}

.deal-price {
  color: #dc2626;
  font-weight: 700;
  font-size: 14px;
}

.deal-price small {
  color: #94a3b8;
  text-decoration: line-through;
  font-weight: normal;
  margin-left: 4px;
}

/* Quick Links */
.quick-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quick-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: #4b5563;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s ease;
  font-size: 14px;
}

.quick-link:hover {
  background: #f1f5f9;
  color: #1e40af;
}

.quick-link i {
  color: #ea580c;
  width: 16px;
}

/* Features List */
.features-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.feature-item i {
  color: #16a34a;
  width: 20px;
  text-align: center;
}

.feature-item span {
  color: #4b5563;
  font-weight: 500;
}

/* Animated Brands Section with Logos */
.animated-brands-section {
  background: transparent;
  padding: 30px 0;
  overflow: hidden;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.brands-scroll-container {
  width: 100%;
  overflow: hidden;
}

.brands-scroll-track {
  display: flex;
  align-items: center;
  animation: brandScroll 30s linear infinite;
  white-space: nowrap;
  gap: 50px;
}

.brand-item-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 8px;
  background: transparent;
  transition: all 0.3s ease;
  flex-shrink: 0;
  cursor: pointer;
}

.brand-item-logo:hover {
  background: rgba(234, 88, 12, 0.1);
  transform: scale(1.05);
}

.brand-logo-img {
  width: 32px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.brand-item-logo:hover .brand-logo-img {
  transform: scale(1.1);
  filter: brightness(1.2);
}

.brand-name {
  font-size: 16px;
  font-weight: 600;
  color: #4b5563;
  transition: all 0.3s ease;
}

.brand-item-logo:hover .brand-name {
  color: #ea580c;
}

@keyframes brandScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Why Buy / Reviews styled like reference */
.why-buy { padding: 50px 0; background: #fff; }
.why-title { text-align: center; font-size: 28px; margin-bottom: 30px; color: #1f2937; }
.why-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: stretch; }

.review-panel { position: relative; background: #fff; padding: 30px 40px 26px 40px; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 24px 55px rgba(2,6,23,.06); max-width: 900px; }
.review-heading { color: #0f172a; font-weight: 800; font-size: 18px; letter-spacing: .6px; margin: 0 0 14px 0; }
.review-quote { width: 40px; height: 40px; background: #1e40af; color: #fff; border-radius: 8px; display: flex; align-items:center; justify-content:center; margin-bottom: 14px; box-shadow: 0 10px 24px rgba(29,78,216,.35); }
.review-quote i { font-size: 18px; }
.review-slider2 { position: relative; min-height: 140px; }
.review-item2 { position: absolute; opacity: 0; transform: translateX(12px); transition: all .35s ease; width: 100%; }
.review-item2.active { opacity: 1; transform: translateX(0); }
.review-text { font-size: 20px; line-height: 1.5; color: #0f172a; margin: 0 0 8px 0; font-weight: 700; }
.review-author { font-style: italic; color: #475569; margin: 6px 0 0 0; font-weight: 600; }
.review-dots { display: flex; gap: 8px; margin-top: 22px; align-items: center; }
.review-dots span { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.review-dots span:hover { transform: scale(1.1); }
.review-dots .active { background: #e53945; transform: scale(1.15); }

/* Manual navigation arrows for review slider */
.review-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1e40af;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(29,78,216,.35);
  transition: transform .2s ease, background .2s ease;
  z-index: 5;
  pointer-events: auto;
}
.review-nav-btn:hover { background: #1d4ed8; transform: translateY(-50%) scale(1.07); }
.review-nav-btn.prev { left: -35px; }
.review-nav-btn.next { right: -35px; }
@media (max-width: 600px){
  .review-nav-btn.prev { left: 6px; }
  .review-nav-btn.next { right: 6px; }
  .review-text { font-size: 18px; }
}

.features-panel { display: grid; grid-template-columns: 1fr; gap: 18px; }
.feature-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 26px 22px; box-shadow: 0 20px 45px rgba(0,0,0,.06); display: flex; align-items: center; gap: 18px; transition: transform .25s ease, box-shadow .25s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(0,0,0,.10); }
.feature-icon { width: 80px; height: 80px; background: #e53945; color: #fff; border-radius: 50%; display: flex; align-items:center; justify-content:center; box-shadow: 0 12px 30px rgba(229,57,69,.35); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.feature-card:hover .feature-icon { transform: scale(1.08) rotate(2deg); box-shadow: 0 18px 36px rgba(229,57,69,.45); }
.feature-icon i { font-size: 28px; }
.feature-title { font-weight: 800; color: #0f172a; letter-spacing: .5px; }
.feature-sub { color: #6b7280; font-size: 14px; }

@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; }

  padding: 30px 0;
  background: #fff;
  border-top: 1px solid #e2e8f0;
}

.reviews-compact-slider {
  position: relative;
  background: #f8fafc;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  max-width: 800px;
  margin: 0 auto;
}

.compact-review-slide {
  display: none;
  text-align: center;
}

.compact-review-slide.active {
  display: block;
  animation: fadeIn 0.5s ease-in-out;
}

.compact-review .stars {
  color: #f59e0b;
  margin-bottom: 12px;
  font-size: 16px;
}

.compact-review p {
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: #4b5563;
  margin-bottom: 16px;
}

.reviewer-compact {
  font-size: 14px;
  color: #6b7280;
}

.reviewer-name {
  font-weight: 600;
  color: #1e293b;
}

.reviewer-location {
  color: #64748b;
}

.compact-review-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #ea580c;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  z-index: 10;
}

.compact-review-nav:hover {
  background: #dc2626;
}

.compact-review-nav {
  left: 15px;
}

.compact-review-nav.next {
  left: auto;
  right: 15px;
}

/* Hot Deals Section */
.hot-deals-section {
  padding: 40px 0;
  background: #f8fafc;
}

.hot-deals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.deal-product-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.deal-product-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  border-color: #1e40af;
}

.hot-deal-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #1e40af !important; /* blue */
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  z-index: 2;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Best Picks Section */
.best-picks-section {
  padding: 40px 0;
  background: #fff;
}

.best-picks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.pick-product-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.pick-product-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  border-color: #1e40af;
}

.best-pick-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #7c3aed;
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  z-index: 2;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Hero Banner */
.hero-banner {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding: 60px 0;
  margin-bottom: 40px;
}

/* ===== Mobile / Responsive fixes (appended) ===== */

/* Make layout mobile-first friendly by removing rigid min-width and using fluid containers */
html, body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* Remove harmful global min-width set earlier for desktop */
body {
  min-width: 0; /* override desktop-only rule */
}

/* Container: use max-width and padding so it can shrink on small screens */
.container {
  width: 100%;
  max-width: 1200px;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* Helpers for stacked content */
.stack { display: block; width: 100%; }
.hide-mobile { display: none !important; }
.show-mobile { display: block !important; }

/* Header adjustments */
.page-header__topline .currency,
.page-header__topline .login,
.page-header__topline .basket {
  float: none;
  display: inline-block;
  vertical-align: middle;
}

/* Make dropdowns full width on small screens */
.page-header .dropdown {
  position: static;
  width: 100%;
  box-shadow: none;
  padding: 12px;
}

/* Ensure images and slides scale */
.carousel-slide img, .hero img, .brand__img, .product-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Make text and interactive elements large enough on mobile */
button, .btn, .buy-now-btn, .add-cart-btn, .slider-nav-btn { touch-action: manipulation; }

/* Responsive grid and sidebar collapse */
@media (max-width: 1024px) {
  .reviews-sidebar-container { grid-template-columns: 1fr; }
  .reviews-sidebar-container .sidebar-content { order: 2; }
  .reviews-sidebar-container .reviews-slider-container { order: 1; }
  .brand .block-left, .brand .block-right { float: none; width: 100%; margin: 0 0 20px 0; }
  .page-header__bottomline .main-nav { float: none; text-align: center; }
}

@media (max-width: 768px) {
  /* Navigation stacking */
  .page-header__topline { height: auto; padding: 8px 0; }
  .page-header__topline .login__item { margin-right: 10px; }
  .page-header__bottomline .logo { float: none; text-align: center; }
  .page-header__bottomline .logo__link { margin-top: 12px; }
  .page-header__bottomline .main-nav { display: block; margin-top: 10px; }
  .page-header__bottomline .main-nav .categories__item { display: inline-block; margin-right: 18px; }

  /* Make dropdowns behave as accordions visually */
  .page-header .dropdown { padding: 12px 10px; }

  /* Product slider: reduce columns and allow wrapping */
  .product-slider { gap: 12px; }
  .product-slide-item { flex: 0 0 calc(50% - 8px); }

  /* Category slider fallback to grid */
  .category-slider { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .cat-thumb { width: 80px; height:80px; }

  /* Reviews / sidebar collapse handled above, make widgets full width */
  .sidebar-widget { width: 100%; }

  /* Footer adjustments */
  .page-footer .footer-nav__col { float: none; width: 100%; margin-bottom: 16px; }

  /* Buttons and inputs stretch */
  .btn--basket, .buy-now-btn, .add-cart-btn { width: 100%; box-sizing: border-box; }

  /* Reduce heavy paddings that break small screens */
  .brand { padding-top: 30px; padding-bottom: 40px; }
  .nero, .hero { padding-top: 80px; padding-bottom: 60px; }
}

@media (max-width: 480px) {
  /* Single column everywhere */
  .product-slide-item { flex: 0 0 100%; }
  .category-slider { grid-template-columns: repeat(2, 1fr); }

  /* Reduce font sizes slightly */
  .nero__heading { font-size: 28px; }
  .nero__text { font-size: 18px; }
  .hero .btn1 { position: static; float: none; right: auto; top: auto; margin-top: 12px; }

  /* Make header compact */
  .page-header__bottomline .main-nav .categories__link { padding-top: 12px; padding-bottom: 12px; }

  /* Review slider height adapt */
  .reviews-slider { height: auto; min-height: 0; }

  /* Small interactive targets */
  .slider-nav-btn, .carousel-nav { width: 40px; height: 40px; }

  /* Hide less important large banners */
  .page-footer .banners .banner-award, .page-footer .banners .banner-social { height: auto; padding: 20px; }
}

/* Accessibility: ensure focus outlines visible on small screens */
a:focus, button:focus, input:focus { outline: 2px solid #ea580c; outline-offset: 2px; }


.banner-content {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.banner-text {
  flex: 1;
}

.banner-text h1 {
  font-size: 3rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 16px;
  line-height: 1.2;
}

.banner-text p {
  font-size: 1.2rem;
  color: #64748b;
  margin-bottom: 24px;
  line-height: 1.5;
}

.banner-image {
  flex: 1;
}

.banner-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Primary buttons (blue) */
.orange-btn, .cta-btn {
  background: #1e40af;
  color: white;
  padding: 12px 32px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  cursor: pointer;
}

.orange-btn:hover, .cta-btn:hover {
  background: #1d4ed8;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(29, 78, 216, 0.3);
}

/* Keep Add to Cart in orange */
.add-cart-btn { background: #ea580c !important; }
.add-cart-btn:hover { background: #d64e09 !important; }

/* Section Headers */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.section-title {
  font-size: 2.75rem; /* eye-catching size */
  font-weight: 800;
  color: #1e293b;
  margin: 0;
}

.view-all-link {
  color: #1e40af;
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}

.view-all-link:hover {
  color: #1d4ed8;
}

/* Categories Section */
.categories-section {
  padding: 40px 0;
  background: #fff;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
}

.category-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.category-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  border-color: #1e40af;
}

.category-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #1e40af, #3b82f6);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: white;
  font-size: 24px;
}

.category-info h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}

.category-info span {
  color: #64748b;
  font-size: 0.9rem;
}

/* Featured & Bestsellers Sections */
.featured-section, .bestsellers-section {
  padding: 40px 0;
  background: #f8fafc;
}

.bestsellers-section {
  background: #fff;
}

.featured-grid, .bestsellers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.product-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.product-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  border-color: #1e40af;
}

.product-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1; /* make image area square */
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* Ensure shop grid product images are square too */
#content .product img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #f8fafc;
}

.product-item:hover .product-image img {
  transform: scale(1.05);
}

.discount-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #dc2626;
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  z-index: 2;
}

.bestseller-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #16a34a;
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  z-index: 2;
}

.product-details {
  padding: 20px;
}

.product-details h3 {
  margin: 0 0 12px;
  font-size: 1.5rem;
  font-weight: 600;
}

.product-details h3 a {
  color: #1e293b;
  text-decoration: none;
  transition: color 0.3s ease;
}

.product-details h3 a:hover {
  color: #1e40af;
}

.product-price {
  margin-bottom: 16px;
}

.old-price {
  color: #94a3b8;
  text-decoration: line-through;
  margin-right: 8px;
  font-size: 1rem;
}

.current-price {
  color: #dc2626;
  font-weight: 700;
  font-size: 1.5rem;
}

.add-cart-btn {
  width: 100%;
  padding: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
}

/* Brands Section */
.brands-section {
  background: #f8fafc;
  padding: 40px 0;
  border-top: 1px solid #e2e8f0;
}

.brands-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 32px;
}

.brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.brand-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  padding: 16px;
  text-align: center;
  border-radius: 8px;
  font-weight: 600;
  color: #64748b;
  transition: all 0.3s ease;
}

.brand-item:hover {
  border-color: #1e40af;
  color: #1e40af;
  transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .reviews-sidebar-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .sidebar-content {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
  }
}

@media (max-width: 768px) {
  .banner-content {
    flex-direction: column;
    text-align: center;
    gap: 32px;
  }
  
  .banner-text h1 {
    font-size: 2.5rem;
  }
  
  .categories-buttons-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .category-btn {
    padding: 12px 16px;
    font-size: 14px;
  }
  
  .featured-grid, .bestsellers-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  
  .carousel-slide img {
    height: 300px;
  }
  
  .carousel-nav {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  .reviews-slider-container {
    padding: 20px;
  }
  
  .reviews-slider {
    height: 180px;
  }
  
  .sidebar-content {
    display: block;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .brand-logo {
    font-size: 14px;
    padding: 6px 12px;
  }
}

@media (max-width: 480px) {
  .banner-text h1 {
    font-size: 2rem;
  }
  
  .categories-buttons-grid {
    grid-template-columns: 1fr;
  }
  
  .category-btn {
    padding: 14px 20px;
    font-size: 15px;
  }
  
  .featured-grid, .bestsellers-grid {
    grid-template-columns: 1fr;
  }
  
  .carousel-slide img {
    height: 250px;
  }
  
  .carousel-nav {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
  
  .carousel-prev {
    left: 10px;
  }
  
  .carousel-next {
    right: 10px;
  }
  
  .view-all-products-btn {
    bottom: 15px;
    right: 15px;
    font-size: 14px;
    padding: 8px 16px;
  }
  
  .reviews-slider {
    height: 220px;
  }
  
  .review-content p {
    font-size: 14px;
  }
  
  .deal-item {
    flex-direction: column;
    text-align: center;
  }
  
  .deal-image {
    align-self: center;
  }
  
  .brand-logo {
    font-size: 13px;
    padding: 5px 10px;
  }
  
  .brands-scroll-track {
    gap: 20px;
  }
  
  .customer-reviews-section {
    padding: 20px 0;
  }
  
  .reviews-compact-slider {
    padding: 20px;
    margin: 0 10px;
  }
  
  .compact-review p {
    font-size: 14px;
  }
  
  .hot-deals-grid, .best-picks-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .deal-product-item, .pick-product-item {
    margin: 0 10px;
  }
  
  /* Vishal Categories Responsive */
  .categories-vishal-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .category-vishal-card {
    padding: 15px;
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .category-icon-large {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  
  .category-details h3 {
    font-size: 1rem;
  }
  
  .product-count {
    font-size: 0.8rem;
  }
  
  /* Product Sliders Responsive */
  .product-slide-item {
    flex: 0 0 calc(50% - 10px);
  }
  
  .prev-btn, .next-btn {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
  
  .prev-btn {
    left: -15px;
  }
  
  .next-btn {
    right: -15px;
  }
}

  .best-sellers {
  padding: 60px 20px;
  background: #f8f8f8;
  text-align: center;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin: 30px auto 0;
  max-width: 1200px; /* keeps it centered */
  justify-content: center;
}
.product-card {
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  position: relative;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}
.product-card:hover {
  transform: translateY(-5px);
}
.product-card img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  margin-bottom: 10px;
}
.product-card h4 {
  font-size: 1rem;
  margin-bottom: 10px;
  height: 40px;
  overflow: hidden;
}
.price-box {
  margin-bottom: 12px;
}
.old-price {
  text-decoration: line-through;
  color: #888;
  margin-right: 8px;
}
.new-price {
  color: #e53935;
  font-weight: bold;
  font-size: 1.1rem;
}
.discount-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #e53935;
  color: #fff;
  padding: 4px 8px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: bold;
}
.buy-btn {
  display: inline-block;
  background: #e53935;
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 25px;
  font-size: 0.9rem;
  transition: 0.3s;
}
.buy-btn:hover {
  background: #c62828;
}

/* Static Banners */
.banner-slider {
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}
.slider-container {
  display: flex;
  transition: transform 0.8s ease-in-out;
}
.slide {
  min-width: 100%;
  box-sizing: border-box;
}
.slide img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  border-radius: 8px;
}
/* Arrows */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: white;
  background: rgba(0,0,0,0.4);
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
}
.prev { left: 20px; }
.next { right: 20px; }
/* Dots */
.slider-dots {
  text-align: center;
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
}
.slider-dots span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 5px;
  background: #ddd;
  border-radius: 50%;
  cursor: pointer;
}
.slider-dots .active {
  background: #ff4500;
}
.static-banners .banner-wrapper {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.static-banner img {
  width: 100%;
  max-width: 400px;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
.static-banner img:hover {
  transform: scale(1.03);
}

/* Hero */
.hero {
  background: url('images/hero-bg.jpg') no-repeat center center/cover;
  padding: 120px 20px;
  text-align: center;
  animation: fadeIn 2s ease-in-out;
}
.btn1 {
  padding: 12px 30px;
  background: #ff4500;
  color: #fff;
  text-decoration: none;
  border-radius: 30px;
  transition: 0.3s;
}
.btn1:hover {
  background: #e63e00;
  transform: scale(1.05);
}

/* Categories */
.categories {
  padding: 60px 20px;
  text-align: center;
}
.section-title {
  font-size: 2.75rem;
  margin-bottom: 26px;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.category-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.category-card:hover {
  transform: translateY(-8px);
}
.category-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.category-card h3 {
  padding: 15px;
  font-size: 1.2rem;
}
/* Best Sellers Carousel */
.best-sellers {
  padding: 60px 20px;
  background: #f8f8f8;
  text-align: center;
}
.carousel-container {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 20px 0;
}
.carousel-track {
  display: inline-flex;
  gap: 20px;
  animation: scroll 25s linear infinite;
}
.carousel-item {
  flex: 0 0 auto;
  width: 220px;
}
.product-box {
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}
.product-box:hover {
  transform: scale(1.05);
}
.product-box img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
}
.product-box h4 {
  margin: 10px 0 5px;
  font-size: 1rem;
}
.product-box .price {
  color: #ff4500;
  font-weight: bold;
  margin-bottom: 10px;
}
.buy-btn {
  display: inline-block;
  background: #ff4500;
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 25px;
  font-size: 0.9rem;
}
.buy-btn:hover {
  background: #e63e00;
}

/* Animation */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* Animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.banner-slider {
  position: relative;
}

.view-all-btn {
  position: absolute;
  bottom: 20px;   /* distance from bottom */
  right: 20px;    /* distance from right */
  background: #4d9eff;
  color: white;
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.view-all-btn:hover {
  background: #d10808;
}



/* ===== Prevent horizontal overflow ===== */
/* Keep carousels and tracks working but prevent body-level horizontal scroll */
html, body {
  overflow-x: hidden; /* prevents left-right scrolling caused by positioned or wide elements */
}

/* Constrain animated/scrolling tracks so they don't force body overflow */
.carousel-track, .brands-track, .carousel-slides, .carousel-container, .product-slider, .category-slider, .slider-container {
  max-width: 100%;
  box-sizing: border-box;
}

/* Ensure containers that intentionally scroll are clipped rather than pushing the page width */
.carousel-container, .banner-slider, .brands-scroll-container, .brands-strip .container {
  overflow-x: hidden; /* clip animated content to container */
}

/* Some nav arrows are positioned with negative offsets which can create overflow on narrow screens.
   Reset those at common breakpoints. */
@media (max-width: 1024px) {
  .review-nav-btn.prev { left: 6px; }
  .review-nav-btn.next { right: 6px; }
  .review-nav-btn.prev, .review-nav-btn.next { position: absolute; }
}

@media (max-width: 600px) {
  /* More conservative offsets for tiny screens */
  .review-nav-btn.prev { left: 6px !important; }
  .review-nav-btn.next { right: 6px !important; }
  .page-header .dropdown { padding-left: 10px; padding-right: 10px; }
}

/* If you need to allow intentional off-canvas panels, add a class `allow-overflow` to those elements
   and they'll opt-out of the root clipping: */
.allow-overflow { overflow-x: visible !important; }