/* Base Styles */
  main{
    padding:.2rem 1%;
  }
  .main {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 0.5fr 1.5fr 1.1fr;
    grid-template-areas:
      "categories-side-bar home-slider right-menu"
      "categories-side-bar categories categories"
      "content content content";
    grid-gap: 0.2rem;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    color: #004d40;
    text-align: center;
  }

#categories-side-bar {
  background: #fff;
  grid-area: categories-side-bar;
  border-radius: 6px;
  height: 460px;
  overflow-y: auto;               /* Enable vertical scroll */
  scrollbar-width: thin;          /* For Firefox */
  scrollbar-color: #ccc transparent; /* Thumb color and track for Firefox */
}

/* For Chrome, Edge, Safari */
#categories-side-bar::-webkit-scrollbar {
  width: 4px;
}

#categories-side-bar::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 10px;
}

#categories-side-bar::-webkit-scrollbar-track {
  background: transparent;
}
.categorylink{
    text-decoration: none;
}
  #categories-side-bar .title{
    width: 100%;
    text-align: center;
    text-transform: capitalize;
    font-size: 12pt;
    color: #fff;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: var(--color-success-bg);
  }
  #categories-side-bar .home-categories{
    text-align: left;
    list-style: none;
    overflow: hidden;
  }
  #categories-side-bar .home-categories li{
    border-bottom: .01px solid gainsboro;
    text-transform: capitalize;
    font-size: 10pt;
    line-height:10pt;
    color: black;
    padding:.5rem .8rem;
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effect */
    font-family: "Inter", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  }
  #categories-side-bar .home-categories li i{
    font-size: 12pt;
    margin-right: .5rem;
  }
  #categories-side-bar .home-categories li a{
    text-decoration: none;
    color: black;
  }
  #categories-side-bar .home-categories li:hover {
    font-size: 10.2pt; /* Slightly larger font size on hover */
    padding:.5rem .8rem;
    border-radius: 5px; /* Round the edges */
    transform: scale(1.05); /* Scale up the element slightly */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
  }

  #home-slider {
    grid-area: home-slider;
    border-radius: 6px;
    height: 300px;
  }
  #home-slider .extensions{
    position: absolute;
  }
  #right-menu {
    background: #fff;
    grid-area: right-menu;
    border-radius: 6px;
    height: 300px;
  }
  #categories{
    background: #fff;
    grid-area: categories;
    border-radius: 6px;
    height: 160px;
  }

  #content {
    background: transparent;
    grid-area: content;
    position: relative;
    background: #fff;
  }
  .section-title{
    width: 100%;
    text-align: center;
    text-transform: capitalize;
    color: #fff;
    background: var(--color-success-bg);
    font-size: 12pt;
  }
  /* Responsive Styles */
  @media only screen and (max-width: 768px) {
    main{
        padding: 0;
      }
    .main {
      grid-template-columns:1fr;
      grid-template-rows: auto auto auto;
      grid-template-areas:
        "home-slider"
        "categories"
        "content";
    }

    #categories-side-bar,
    #right-menu {
      display: none; /* Hide sidebar and right menu on small devices */
    }

    #home-slider {
      grid-area: home-slider; /* Ensure home-slider remains visible */
      height: fit-content;
    }

    #content {
      grid-area: content; /* Ensure content remains visible */
    }
  }
/*  black friday css */
 /* Container sticky so it remains visible on small screens */
.bf-bar-title{
  width:100%;
  box-sizing: border-box;
  background: linear-gradient(90deg,#0b0b0b,#2b0707);
  color:#fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-weight:700;
  border-bottom:1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
  padding: 6px 12px;
  display: block;
  position: sticky;
  top: 0;
  z-index: 99;
}

/* Desktop single-row */
.bf-row.bf-single { display:flex; align-items:center; gap:12px; width:100%; }
.bf-left { display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; }
.bf-text { white-space: nowrap; overflow:hidden; text-overflow: ellipsis; font-size:15px; line-height:1; }
.bf-save { padding:5px 10px; border-radius:999px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); color:#ffdede; font-size:13px; font-weight:800; white-space:nowrap; }
.bf-center { display:flex; align-items:center; gap:10px; justify-content:center; flex:0 0 auto; min-width:180px; }
.bf-live { display:inline-flex; align-items:center; gap:8px; padding:5px 10px; border-radius:12px; background: rgba(0,0,0,0.28); font-size:12px; }
.bf-dot { width:8px; height:8px; border-radius:50%; background:#ff3b3b; box-shadow:0 0 6px rgba(255,60,60,0.8); animation: bfPulse 1.6s linear infinite; }
.bf-countdown { font-variant-numeric: tabular-nums; font-weight:800; font-size:14px; padding:4px 8px; border-radius:8px; background: rgba(255,255,255,0.03); }
.bf-right { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.bf-shop { display:inline-block; text-decoration:none; padding:8px 14px; border-radius:8px; background: rgba(255,255,255,0.08); color:#fff; font-weight:800; font-size:13px; border:1px solid rgba(255,255,255,0.04); }
.bf-close { display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:6px; border:none; background:transparent; color:rgba(255,255,255,0.9); font-size:18px; cursor:pointer; }

@keyframes bfPulse { 0%{ transform: scale(1);} 50%{ transform: scale(1.12);} 100%{ transform: scale(1);} }

/* Small two-row layout */
@media (max-width:720px) {
  .bf-row.bf-single { display:none !important; }
  .bf-row.bf-two-rows { display:block !important; }
  .bf-row.bf-two-rows .bf-top, .bf-row.bf-two-rows .bf-bottom {
    display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  }
  .bf-top-left { flex:1 1 auto; min-width:0; }
  .bf-top-center { flex:0 0 auto; }
  .bf-top-right { flex:0 0 auto; }
  .bf-bottom-left { flex:1 1 auto; min-width:0; }
  .bf-bottom-center { flex:0 0 auto; min-width:120px; text-align:center; }
  .bf-bottom-right { flex:0 0 auto; }
  .bf-text { font-size:16px; }
  .bf-save { padding:6px 12px; font-size:14px; }
  .bf-live { padding:6px 10px; font-size:13px; }
  .bf-countdown, #bfCountdownSmall { font-size:15px; padding:6px 10px; }
  .bf-shop, #bfShopBtnSmall { padding:8px 12px; font-size:14px; }
  .bf-close.small { display:inline-flex; width:36px; height:36px; font-size:20px; }
}

/* default: hide two-row for desktop */
.bf-row.bf-two-rows { display:none; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bf-dot { animation: none !important; }
  .bf-shop, .bf-shop:hover { transform: none !important; }
}