:root {
  --accent: {{themecolor}};  /*Dynamic accent color */
--accent2: {{themecolor}};  /*Dynamic accent color */
--bg: #fafafa;
--text: #212121;
--border: #ffffff;
--shadow: #000000;
--search: #fafafa;
--cards:#EEEEEE;
--footer: #EDEBDE;
--banner: #00000007;
--banner-stroke: #00000044;
}

[data-theme="dark"]{
--bg: #0A0A0A;
--text: #FAFAFA;
--border: #141414;
--shadow: #9e9e9e;
--search: #212121;
--cards:#141414;
--footer:#000001;
--banner: #ffffff07;
--banner-stroke: #ffffff22;
--accent2: #FFFFFF;
}

    @font-face {
      font-family: 'normaltext';
      src: url('/shared-assets/opensans_regular.ttf') format('truetype');
    }
body{
  padding: 0px;
  margin: 0px;
--group_button: #424242;
--whatsapp: #4FEF6B;
 background: var(--bg);
 color: var(--text);
 font-family: 'normaltext',sans-serif;
 padding: 0px;
 margin: 0px;

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
transform: background 0.4s ease;
}
@font-face {
  font-family: 'MyCustomFont';
  src: url('/templates/assets/Reospec.otf') format('truetype');
}
@font-face {
    font-family: 'mulish';
  src: url('/templates/assets/mulish.ttf') format('truetype');
}
.moreinfobox{
  margin: 0;
  padding: 4px;
  margin-right: 8px;
  display: flex;
  justify-items: center;
  align-items: center;
}
.logomain{
  padding: 0px;
  margin: 3px;
  height: 42px;
  width: 42px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0px 0px 2px var(--text);
}
.bname{
  font-family: 'MyCustomFont', sans-serif;
  flex-grow: 1;
  font-weight: 700;
  font-size: 20px;
  color: var(--accent2);
  padding: 0;
  margin: 0;
  margin-left: 4px;
}
.searchic{
  height: 20px;
  width: 20px;
  background-color: var(--accent);
  border-radius: 50%;
  padding: 5px;
  margin: 0;
}
.topbox{
  display: grid;
  place-items: center;
  position: relative;
  margin: 3px;
  margin-bottom: 100px;
}
.logo1{
  grid-area: 1/1;
  height: 550px;
  object-fit: cover;
  width: 100%;
  border-radius: 25px;
}
.overlay{
  grid-area: 1/1;
  height: 550px;
  background-color: #212121;
  width: 100%;
  opacity: 0.8;
  display: flex;
  flex-direction: column;
  justify-items: center;
  justify-content: center;
  align-items: center;
  align-content: center;
  border-radius: 25px;

}
.bname2{
  padding: 0;
  margin: 0px;
  color: #ffffff;
  font-family: 'mulish', sans-serif ;
  padding-bottom: 0;
  font-weight: 700;
  font-size: 45px;
  text-align: center;
}
.bdescription{
  font-family: 'mulish', sans-serif;
  padding: 8px;
  padding-top: 0;
  padding-bottom: 0px;
  margin: 0;
  color: #eeeeee;
  text-align: center;
}
.phoneline{
  padding: 12px;
  color: white;
  border-radius: 30px;
  border: 2px solid #efefef;
  font-family: 'mulish' Sans-Serif;
  font-weight: 550;
  text-align: center;
  margin-left: 30px;
  margin-left: 30px;
}
.contactbox{
 text-align: center;
}

.whatsappic, .phoneic{
  border-radius: 50px;
  height: 50px;
  width: 50px;
  background-color: var(--accent);
  margin: 4px;
  margin-left:9px ;
  margin-right:9px ;
}
.phoneic{
  border: 1px solid #fefefe;
}

.box1{
  align-content: center;
  padding: 12px;
  text-align: center;
}
.location, .category{
  font-weight: 400;
  font-size: 15px;
  padding: 0;
  margin: 0;
  color: #fafafa;
}
.starredlist{
  margin-top: 3px;
  overflow-x: auto;
  scroll-behavior: smooth;
  display: flex;
  align-items: center;
  margin-bottom: 50px;

}
.starredcard{
  padding: 0;
  margin: 7px;
}
.rlbox{
  place-items: center;
  position: relative;
  display: grid;

}
.starredcard-front{
  position: relative;
  display: grid;
  grid-area: 1/1;
  border-radius: 11px;
  width:350px;
  height: 550px;
  align-content: end;
  justify-items: left;
}
.popular{
  border-radius: 50%;
  padding: 6px;
  margin-left: 15px;
  margin-bottom: 15px;
  background-color: var(--group_button);
  width: 30px;
  height: 30px;
  text-align: center;
}
.starredproductimage{
  grid-area: 1/1;
  border-radius: 11px;
  width:350px;
  height: 550px;
  object-fit: cover;
  background-color: #9e9e9e;

}
.pname1{
  text-align: center;
  font-size: 20px;
  color: var(--text);
  font-family: 'mulish', sans-serif ;
}
.questionbox{
  background-color: #D8D8D8;
  border-radius: 15px;
  margin: 8px;
  padding: 8px;
}
.box4{
  overflow-x: auto;
  scroll-behavior: smooth;
  display: flex;
  align-items: center;
}
.qsuggest{
  margin: 6px;
  border-radius: 30px;
  padding: 8px;
  background-color: var(--accent);
  color: #ffffff;
  width: auto;
}
.banner{
  background-color: var(--banner);
  border: 1px solid var(--banner-stroke);
  border-radius: 20px;
  width: 94%;
  margin: 14px;
  padding: 3px;
  padding-bottom: 8px;
  justify-self: center;
}
.bannerimage{
  padding: 0;
  margin: 0;
  height: 400px;
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
  background-color: #9e9e9e;
}
.bannertext{
  padding: 12px;
  color: var(--text);
  font-weight: 500;
  font-family: Segoe UI;
  text-align: left;
}
.search{
  display: flex;
  justify-self: center;
  width: 95%;
  margin: 15px;
  margin-top: 50px;
  padding: 14px;
  border: 1px solid #212121;
  border-radius: 30px;
  background-color: var(--search);
  color: var(--text);
}
.search:focus{
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 4px var(--accent);
}
.tagbar{
  padding-right: 15px;
  padding-left: 15px;
  display: flex;
  align-items: left;
} 
.allbutton{
  background: var(--accent);
  border-radius:30px;
  color: #ffffff;
  padding: 8px;
  padding-left: 35px;
  padding-right: 35px;
  margin-right:6px;
  font-weight: 300;
  font-size:13px;
  border: none;
}
.instockbutton{
  background: var(--group_button) ;
  border-radius: 30px;
  color: #ffffff;
  padding: 8px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left:6px;
  font-weight: 300;
  font-size: 13px;
  border: none;
}
.pricetext{
  line-height: 14%;
  color: #1ebe5d;
  font-weight: 700;
  font-family: 'mulish' Sans-Serif;
  font-size: 17px;
  padding-left: 8px;
}
.box2{
  display: flex;
  margin-top: 23px;
  margin-left: 20px;
}
.heading{
  padding: 0;
  margin: 0;
  margin-left: 8px;
  color: var(--text);
  font-family: 'mulish' Sans-Serif;
  font-weight: 600;
  font-size: 19px;

}
.dv1{
  background-color: var(--group_button);
  height: 1px;
  margin-left: 30px;
  margin-right: 30px;
  flex-grow: 1;
  align-self: center;
}


.productlist{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
  justify-content: center;
}
.productcard{
  max-width: 400px;
  justify-content: center;
  background: var(--cards);
  padding: 3px;
  padding-bottom: 0px;
  margin: 6px;
  margin-top: 0;
  box-shadow: 0 0px 1px var(--shadow);
  border: 2px solid var(--border);
  border-radius: 15px;

}
.productimage{
 max-height: 550px;
 object-fit: cover;
 border-radius:13px;
 width: 100%;  
 height:280px;
 background-color: #9e9e9e;
}
.pname{
  font-size: 17px;
  text-align: left;
  padding: 0;
  margin: 0;
  margin-left: 6px;
  margin-top: 16px;
}
.box3{
  width: auto;
  margin: 3px;

  display: flex;
  align-items: center;
  padding-bottom: 4px;
}
.viewbutton{
  text-decoration: none;
  padding: 11px;
  padding-right: 30px;
  padding-left: 30px;
  background: var(--accent);
  color: #FFFFFF;
  font-weight:700;
  font-size: 15px;
  flex-grow: 2;
  border-radius: 9px;
  margin-right: 6px;
  border: 0px;
  text-align: center;
}
.share{
  background: var(--accent);
  padding: 7px;
  border-radius: 11px;
  height:auto;
  color:#FFFFFF;
  width: 24px;
  height: 24px;
  font-weight:700px;
}


.paginationbox{
  width:100%;
  align-items: center;
}
.pagetext{
  text-align: center;
  padding-bottom: 0;


}
.sub_paginationbox{
  width: 100%;
  padding-top: 0;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.pagecount{
  background: var(--group_button);
  color: #ffffff;
  padding: 8px;
  padding-left: 12px;
  padding-right: 12px;
  padding-left: 12px;
  border-radius: 100%;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
}
.previous, .next{
  background: var(--accent);
  color: #ffffff;
  border-radius: 30px;
  padding: 12px;
  margin: 15px;
  border: none;
  font-size: 14px;
}
.footer{
  background: var(--footer);
  margin: 0px;
  margin-top: 60px;
  border-top: 2px solid var(--group_button);
  padding: 8px;
  text-align: center;
  align-items: center;
}
.builttext{
  font-family: Monospace;

}
.iconbox{
  display: flex;
  align-items: center;
  min-height: 120px;
}
.line1, .line2{
  flex-grow: 1;
  height: 1px;
  background-color: var(--text);
  }

.fortsytelogo{
  width: 70px;
  height: 70px;

}
.fortsytehome{
  border: 2px solid var(--accent);
  background: var(--cards);
  color: var(--text);
  border-radius: 30px;
  padding: 11px;
  font-size: 14px;
  font-weight: 500;
  font-family: Sans-Serif;

}
.box6{
 max-width: 1200px;
  padding: 10px;
  margin: 4px;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  margin: 0 auto;

}
.about, .report, .contact{
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-family: Sans-Serif;
  text-align: center;
  margin: 8px;
}

/* Add these to your existing style.css */

/* Pagination */
.pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 30px 0;
}

.page-btn {
  padding: 8px 16px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.current-page {
  font-weight: bold;
  margin: 0 10px;
}

/* Product Grid Responsiveness */
.productlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  padding: 0 15px;
}

@media (max-width: 600px) {
  .productlist {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Stock Status */
.productcard[data-instock="false"] {
  position: relative;
  opacity: 0.8;
}

.productcard[data-instock="false"]::after {
  content: "Out of Stock";
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 12px;
}
/* Product Page */
.product-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}
.product-image {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 20px;
}
.stock-status {
  display: inline-block;
  padding: 5px 15px;
  border-radius: 20px;
  font-weight: bold;
  margin: 10px 0;
}
/* Responsive Product Grid */
.productlist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 600px) {
  .productlist {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 900px) {
  .productlist {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1200px) {
  .productlist {
    grid-template-columns: repeat(5, 1fr);
  }
}
/* Stock Status Indicators */
.productcard[data-instock="false"] {
  opacity: 0.7;
  position: relative;
}

.productcard[data-instock="false"]::after {
  content: "Out of Stock";
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,0,0,0.7);
  color: white;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 12px;
}

/* Active Filter Button */
.tagbar button.active {
  transform: scale(1.05);
  box-shadow: 0 0 5px var(--accent);
}

/* Search Bar Enhancements */
.searchbar {
  position: relative;
}

.searchbar i {
  position: absolute;
  right: 15px;
  cursor: pointer;
}

/* Product Page Specific Styles */
.product-container {
  padding: 20px;
}

.product-image {
  max-width: 100%;
  border-radius: 15px;
  margin-bottom: 20px;
}

.stock-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 15px;
  font-weight: bold;
  margin-bottom: 15px;
}

.stock-badge.in-stock {
  background: #4CAF50;
  color: white;
}

.stock-badge.out-of-stock {
  background: #F44336;
  color: white;
}


/* FAB WhatsApp Button */
.fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  background-color: var(--whatsapp);
  color: white;
  font-size: 24px;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.0.3);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fablogo{

  height: 24px;
  width: 24px;
  object-fit: contain;
}

.fab:hover {
  background-color: #1EBE5D;
}

/* Theme Toggle Switch */.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text);
}

.theme-switch label {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}
.theme-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 16px;
  background: var(--cards);
  border-radius: 12px;
  margin: 24px auto;
  width: fit-content;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  font-family: 'Poppins', sans-serif;
}

.theme-label {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.theme-switch label {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: #ccc;
  transition: background-color 0.3s ease;
  border-radius: 34px;
}

.slider::before {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  top: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

input:checked + .slider {
  background-color: var(--accent);
}

input:checked + .slider::before {
  transform: translateX(22px);
}

.system-btn {
  background: none;
  border: 1px solid var(--text);
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.3s ease;
}

.system-btn:hover {
  background-color: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.out-of-stock {
  opacity: 0.5;
  position: relative;
}
.out-of-stock::after {
  content: "Out of Stock";
  position: absolute;
  top: 8px;
  right: 8px;
  background: crimson;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}