html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* fonts styling  and some indiviual margins*/
body {
  font-family: "Work Sans", "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  background-color: #f3f4f6;
  /* bg color: f3f4f6 */
}

#mainTitle {
  font-size: 36px;
  font-weight: 700; /*bold weight */
  color: #ffffff;
  margin-bottom: 4px;
}

#verified {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}

.categoryName {
  font-size: 20px;
  font-weight: 600; /*semi-bold weight */
}

.productTitle {
  display: inline;
  font-size: 16px;
  font-weight: 500;
  width: 195px;
  margin: 0 auto;
}

.price {
  display: inline;
  font-size: 16px;
  font-weight: 400;
  width: 150px;
}

.fullCediPrice {
  font-size: 16px;
  font-weight: 400;
  width: 195px;
  margin: 0 auto;
}

.qtyNumber {
  font-size: 16px;
  font-weight: 600;
}

/* sections styling */
#hero-welcome {
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: 45vh;
  background-size: cover;
  background-position: center;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("assets/images/hero\ img.webp");
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
  margin-bottom: 24px;
}

#heroContent {
  margin-left: 24px;
  margin-bottom: 3em;
}

.category {
  /* margin-top: 24px; */
  margin-bottom: 32px;
  margin-left: 24px;
}

.categoryName {
  margin-bottom: 12px;
}

/* card styling */
.card {
  display: grid;
  grid-template-rows: 2fr, 0.5fr, 0.5fr, 0.5fr;
  width: calc(176px * 1.3);
  height: calc(258px * 1.3);
  background-color: #fffffe;
  border-radius: 16px;
  /* card color: eef0eb */
}

.productImg {
  width: calc(150px * 1.3);
  height: calc(128px * 1.3);
  object-fit: fill;
  border-radius: 12px;
}

.innerContainer {
  width: calc(176px * 1.3);
  height: calc(150px * 1.3);
  display: grid;
  place-items: center;
}

.qtySelect {
  margin: 0 auto;
  width: 195px;
  height: 36px;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  place-items: center;
  background-color: #f9fafb;
  border-radius: 6px;
}

.qtyButton {
  font-size: 18px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  box-shadow: 5px 5px 10px #f2f1f1;
}

/* dark mode correction */
@media (prefers-color-scheme: dark) {
  .qtyButton {
    box-shadow: none;
  }
}

/* horizontal scroll */
.slider {
  width: 100%;
  height: fit-content;
  overflow-x: auto; /* Enables horizontal scrolling */
}

.cards {
  width: fit-content;
  padding: 10px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* Space between cards */
}

.slider::-webkit-scrollbar {
  display: none;
}

#footer {
  display: grid;
  place-items: center;
}

#whatsappButton {
  width: 95%;
  height: 88px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  place-items: center;
  margin: 20px 20px;
  background-color: #13ec5b;
  border-radius: 90px;
}

#whatsappButton span {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

/* Starting with JS classes */
.selectedCard {
  border-width: 2px;
  border-style: solid;
  border-radius: 16px;
  border-color: #128c7e;
  background-color: rgba(37, 211, 102, 0.05);
  transform: scale(1.01);
  transition: all 0.05s ease-in-out;
}

.highlightedQtySelector {
  background-color: #d9f1e8;
  color: #128c7e;
}

.hightlightedMinus {
  background-color: #ffffff;
  color: #128c7e;
  box-shadow: none;
}

.hightlightedPlus {
  background-color: #128c7e;
  color: #ffffff;
  box-shadow: none;
}