html:root {
  --tpad: .2rem;
  --spad: .4rem;
  --mpad: 1rem;
  --bpad: 2rem;
  --hpad: 3rem;
  --epad: 4rem;
  --srad: .4rem;
  --mrad: 1rem;
  --brad: 2rem;
  --white: #ffffff;
  --white-a: #ffffff33;
  --white-b: #ffffff66;
  --white-g: #ffffff99;
  --white-d: #ffffffcc;
  --ash: #eee;
  --ash-a: #ddd;
  --ash-b: #ccc;
  --ash-g: #bbb;
  --ash-d: #aaa;
  --black-g: #777;
  --black-d: #888;
  --red: #f55;
  --grey: #3333;
  --black: #3339;
  --fast-in-bezier: cubic-bezier(0.4, 0, 0.2, 1);
}

@font-face {
  font-family: Truculenta;
  src: url(./fonts/Truculenta.ttf);
}
:where(*) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Signika", sans-serif;
}

body {
  scrollbar-width: none;
}

body::-webkit-scrollbar {
  width: none;
}

h1,
h2,
h3 {
  font-family: "Truculenta", sans-serif;
}

p {
  color: #444;
}

span,
li {
  color: #444;
}

a {
  cursor: pointer;
}

small {
  color: #555;
}

strong {
  font-size: 1.5rem;
}

::placeholder {
  color: var(--grey);
}

:where(button) {
  border: none;
  transition: all 200ms;
  cursor: pointer;
}

:where(svg) {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

div:has(> svg) {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
div:has(> svg) * {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

[icon] {
  display: flex;
  cursor: pointer;
}

:where(.close) {
  cursor: pointer;
}

@media screen and (min-width: 1000px) {
  .product {
    aspect-ratio: 2;
  }
}
@media screen and (min-width: 550px) {
  main #filter-layout {
    justify-self: center;
    justify-content: center;
    top: 0.4rem;
    gap: 2rem;
  }
  main #filter-layout #filter-search {
    max-width: 500px;
  }
  main #filter-layout.at-top {
    gap: unset;
    border-radius: var(--mpad);
    max-width: 600px;
  }
  #layout {
    display: none;
  }
  #filter-wrapper #layout {
    display: unset;
  }
}
@media screen and (max-width: 550px) {
  #container.grid .products {
    grid-template-columns: 1fr 1fr;
  }
  #container.grid .products .product {
    aspect-ratio: 6/10;
  }
  #container.grid .products .product.mod {
    grid-column: span 2;
    aspect-ratio: unset;
  }
  #container.grid .pro-about {
    display: none;
  }
  #container.grid .product-back .product-details, #container.landscape .product-back .product-details {
    padding: var(--spad);
  }
  #container.grid .product-back .pro-name h2, #container.landscape .product-back .pro-name h2 {
    font-size: 1.2rem;
  }
  #container.grid .product-back .likes-comments svg, #container.landscape .product-back .likes-comments svg {
    width: 1.8rem;
  }
  #container.grid .product-back .likes-comments .like div,
  #container.grid .product-back .likes-comments .comment div, #container.landscape .product-back .likes-comments .like div,
  #container.landscape .product-back .likes-comments .comment div {
    border-radius: 1rem;
  }
  #container.grid .product-back .likes-comments small:not([class]), #container.landscape .product-back .likes-comments small:not([class]) {
    display: none;
  }
  #container.landscape .products {
    gap: var(--mrad);
  }
  #container.landscape .products .product {
    aspect-ratio: unset;
    height: 200px;
  }
  #container.landscape .products .product.mod {
    height: unset;
  }
  #container.landscape .products .product.mod .product-back {
    grid-template-columns: unset;
  }
  #container.landscape .products .product-back {
    grid-template-columns: 1fr 1fr;
  }
  #container.landscape .products .product-back img {
    height: 100%;
  }
  #container.landscape .products .pro-about p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
/*@media screen and (max-width: 750px) and (min-width: 600px) {
  .products {
    grid-template-columns: 1fr !important;
  }
  .products :is(.product):not(.product.mod) {
    max-width: 700px;
    aspect-ratio: 5/3;

    .product-back {
      display: grid;
      grid-template-columns: 50% 50%;
      align-items: stretch;
    }

    .product-img {
      // flex-grow: 1;
      width: 100%;

      img {
        height: 100%;
      }
    }

    .product-details {
      height: 100%;
    }

    .pro-name {
      height: 100%;
      display: flex;
      align-items: center;
    }

    .pro-rate-price {
      .price {
        align-self: center;
      }

      .likes-comments {
        justify-self: end;
        align-self: center;
      }
    }
  }
}*/
@media screen and (max-width: 750px) {
  body {
    font-size: 90%;
  }
  .hero .hero-content > div {
    grid-template-columns: 1fr !important;
  }
  .hero-intro {
    text-align: center;
    font-size: 1.2rem !important;
    padding: 1rem;
    max-width: 500px;
    margin-top: -6rem;
    background-color: #FCA31111;
    border-radius: 1rem;
  }
  .hero-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    filter: blur(10px);
  }
  #categories {
    max-width: 99dvw;
    gap: var(--spad) !important;
    box-sizing: border-box;
  }
  #categories ul {
    box-sizing: border-box;
    padding: 0 calc(var(--spad) * 1.4);
  }
  #categories ul li {
    padding: calc(var(--spad) * 1.65) 0;
  }
  #categories > div {
    padding: calc(var(--mpad) * 0.8) !important;
  }
  #container.grid,
  #container.landscape {
    padding: 0;
  }
  #container.grid .products,
  #container.landscape .products {
    gap: var(--mpad) var(--srad);
    padding: var(--srad);
  }
  .products .product.mod {
    grid-column: span 1;
    height: fit-content;
  }
  .products .product.mod .product-back {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: unset;
    height: unset;
    padding: 1rem;
  }
  .products .product.mod .product-back .reactions {
    max-height: 300px;
  }
  :root {
    --tpad: 0.2rem;
    --spad: 0.4rem;
    --mpad: 1rem;
    --bpad: 2rem;
    --hpad: 3rem;
    --epad: 4rem;
    --srad: 0.4rem;
    --mrad: 1rem;
    --brad: 2rem;
  }
}
@media screen and (max-width: 460px) {
  .hero-content {
    padding: var(--spad) var(--bpad) !important;
  }
  .hero-content h1 {
    font-size: 170%;
  }
  .hero-content img {
    transform: scale(80%);
  }
  .products {
    padding: var(--spad) !important;
  }
  .products .product.mod .product-back {
    padding: 0.7rem !important;
  }
  #navigate-hero .hero-right {
    left: calc(var(--right-position) - 95px) !important;
  }
  :root {
    --tpad: 0.16rem;
    --spad: 0.3rem;
    --mpad: 0.8rem;
    --bpad: 1.4rem;
    --hpad: 2rem;
    --epad: 3rem;
    --srad: 0.4rem;
    --mrad: 1rem;
    --brad: 2rem;
  }
}
@media screen and (max-width: 360px) {
  body {
    font-size: 80%;
  }
  :rot {
    --tpad: 0.2rem;
    --spad: 0.4rem;
    --mpad: 1rem;
    --bpad: 2rem;
    --hpad: 3rem;
    --epad: 4rem;
    --srad: 0.4rem;
    --mrad: 1rem;
    --brad: 2rem;
  }
}
body {
  background-color: var(--white);
}

html * {
  transition: all 200ms var(--fast-in-bezier);
}

html,
body,
main,
#container {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 5px;
  margin: 1rem 0;
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-thumb {
  border-radius: 100% 0 0 100%;
  background-color: #FCA311;
}

/*.preloader-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--ash);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);

  .preloader {
    height: 5rem;
    position: absolute;
    inset: 0;
    margin: 100%;
    aspect-ratio: 1;
    border-radius: 1rem;
    background-color: var(--white);
    box-shadow: 0 0 15px #7773;

    .spinner {
      height: 2.5rem;
      position: absolute;
      inset: 0;
      margin: 100%;
      aspect-ratio: 1;
      border-radius: 50%;
      animation: pre-spinner 1s ease-in-out 1s infinite;
    }
  }
}
body.document-loaded .preloader-overlay {
  visibility: hidden;
}*/
@keyframes pre-spinner {
  from {
    border: solid 3px #ccc;
    transform: rotate(0deg);
  }
  to {
    border: dashed 3px #ccc;
    transform: rotate(360deg);
  }
}
/*//Header then Hero*/
header {
  display: grid;
  background-color: var(--ash);
  padding: 0 var(--mpad);
  border-bottom: solid 11px #FCA311;
}
header .header-content {
  display: flex;
  justify-content: space-between;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  align-items: start;
  max-width: 1200px;
}
header .header-content .navbar {
  display: flex;
  justify-content: center;
  margin: 1rem;
}
header .header-content .navbar ul {
  display: flex;
  justify-self: center;
  gap: 1rem;
  list-style-type: none;
}
header .header-content .navbar ul li {
  cursor: pointer;
  font-family: "Truculenta", sans-serif;
  position: relative;
}
header .header-content .navbar ul li:before {
  content: "";
  position: absolute;
  inset: 0;
  transition: all 200ms ease-out;
  width: 0%;
}
header .header-content .navbar ul li:hover::before {
  border-bottom: solid 1px;
  width: 70%;
}
header .header-content .navbar ul li:first-child {
  border-bottom: solid 1px;
}
header .header-content .gh-flag {
  transform: rotate(90deg);
}

.bottom-floats {
  position: fixed;
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  right: 1rem;
  bottom: 1rem;
  --floats-height: 2rem;
  z-index: 2;
}
.bottom-floats #back-to-top,
.bottom-floats #cart {
  background-color: var(--black);
  padding: var(--tpad);
  border: solid 1px var(--white);
  border-radius: 0.3rem;
}
.bottom-floats #back-to-top svg,
.bottom-floats #cart svg {
  stroke: var(--white);
}
.bottom-floats #cart {
  border-radius: 4px 4px 8px 8px;
  border: solid 2px var(--white);
}
.bottom-floats #cart svg {
  width: 2rem;
  height: 2rem;
  stroke-width: 1.3px;
}
.bottom-floats #back-to-top {
  opacity: 0;
  bottom: 0rem;
  transform: scale(50%);
  transition: all 200ms var(--fast-in-bezier);
}
.bottom-floats.js #back-to-top {
  opacity: 1;
  transform: scale(100%);
  bottom: 1rem;
}

.after-navbar {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1000px;
  width: 90%;
}

#currency {
  display: flex;
  gap: 0.4rem;
}

#dark {
  background-color: #fff;
  width: 2rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 2px 2px 6px var(--white), -2px -2px 9px #999, inset -1px -1px 2px 1px rgba(102, 102, 102, 0.4), inset 1px 1px 2px 1px var(--white);
}
#dark .dark-back {
  display: grid;
  place-items: center;
  box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
#dark .dark-back svg.js {
  transform: translate(0.5rem) scale(80%) rotate(190deg);
  animation: sunrise 300ms linear alternate 1 forwards;
}
@keyframes sunrise {
  to {
    opacity: 1;
    transform: rotate(360deg);
  }
}
#dark .dark-back svg {
  stroke-width: 1px;
  stroke: url(#Gradient1);
}
#dark .dark-back svg .stop1 {
  stop-color: red;
}
#dark .dark-back svg .stop2 {
  stop-color: black;
}
#dark .dark-back svg .stop3 {
  stop-color: blue;
}
#dark .dark-back svg[icon=brightness-down] {
  stroke-width: 2px;
}
#dark .dark-back svg[icon=brightness-down] .stop1 {
  stop-color: goldenrod;
}
#dark .dark-back svg[icon=brightness-down] .stop2 {
  stop-color: black;
}
#dark .dark-back svg[icon=brightness-down] .stop3 {
  stop-color: blue;
}
#dark .dark-back svg[icon=brightness-down] path:not(:nth-child(9)) {
  stroke: #000;
}
#dark .dark-back svg[icon=brightness-down] path:nth-child(2) {
  stroke: rgb(161, 115, 0);
}
#dark .dark-back svg[icon=brightness-down] path:nth-child(3) {
  stroke: rgb(137, 99, 2);
}
#dark .dark-back svg[icon=brightness-down] path:nth-child(1) {
  stroke: rgb(106, 76, 1);
}

.notifications {
  position: fixed;
  visibility: hidden;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  perspective: 300px;
  transition: all 300ms var(--fast-in-bezier);
}
.notifications .message {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  opacity: 0;
  padding: var(--mpad);
  background-color: var(--red);
  min-width: 200px;
  transform: rotateX(-40deg);
  border-radius: var(--mrad);
  transition: all 300ms var(--fast-in-bezier);
}
.notifications .message > * {
  color: #fff;
}
@keyframes shake-noti {
  from {
    transform: translateX(-0.2rem);
  }
  to {
    transform: translateX(0.2rem);
  }
}
.notifications.js {
  visibility: visible;
}
.notifications.js .message {
  opacity: 1;
  transform: rotateX(0);
  animation: shake-noti 150ms linear 250ms 6 alternate;
}

#outside-accra {
  opacity: 0;
  visibility: hidden;
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  background-color: rgba(102, 102, 102, 0.2);
}
#outside-accra.js {
  opacity: 1;
  visibility: visible;
}
#outside-accra .out-overlay {
  display: grid;
  gap: 1.5rem;
  backdrop-filter: blur(30px);
  width: 90%;
  max-width: 500px;
  background-color: rgba(68, 68, 68, 0.6);
  padding: 2rem;
  border-radius: var(--mrad);
}
#outside-accra .out-overlay svg {
  stroke: #fff;
  border-radius: var(--srad);
  margin: -1rem 0 1rem 0;
  justify-self: right;
}
#outside-accra .out-overlay span {
  color: var(--white);
  padding: 1rem 0;
}
#outside-accra .out-overlay span:not(:last-child) {
  border-bottom: solid 1px rgba(255, 255, 255, 0.6);
  padding: 1rem 0;
}

.hero {
  display: flex;
  margin: 3rem -1rem;
  justify-content: center;
  align-items: center;
}
.hero * {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hero .hero-content {
  display: grid;
  align-items: center;
  padding: var(--hpad) var(--bpad);
  position: relative;
  flex-wrap: wrap;
  flex: 1 2 4;
  width: 100%;
  overflow: hidden;
}
.hero .hero-content > .js[id] {
  animation: hero-carousel 400ms var(--fast-in-bezier) forwards alternate;
}
.hero .hero-content > [id] {
  display: grid;
  align-items: center;
  padding: 1rem;
  grid-template-columns: 1fr 1fr;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: 0;
  width: 78%;
  background-color: rgba(238, 238, 238, 0.2);
  box-shadow: 11px 0 10px -12px rgba(153, 153, 153, 0.4);
  backdrop-filter: blur(30px);
}
.hero .hero-content > [id]:first-child {
  right: 0;
}
.hero .hero-content > [id]:nth-child(2) {
  left: 19%;
  height: 90%;
}
.hero .hero-content > [id]:nth-child(3) {
  left: 12%;
  height: 95%;
}
.hero .hero-content > [id]:last-child {
  min-height: 100%;
}
.hero .hero-content > [id] {
  /*&:not(:last-child) {
    .hero-intro,
    .hero-image {
      filter: blur(30px);
    }
  }*/
}
.hero .hero-content > [id] svg {
  stroke: #a8d;
  width: 13rem;
  height: 13rem;
}
.hero .hero-content > [id] svg :first-child {
  stroke: #83d;
}
.hero .hero-content > [id] svg :last-child {
  stroke: #b2e;
}
@keyframes hero-carousel {
  from {
    transform: translate(-5rem, -50%);
  }
  to {
    transform: translateY(-50%);
  }
}
.hero #navigate-hero {
  display: flex;
  gap: 1rem;
  width: 100%;
  position: absolute;
  display: flex;
  z-index: 1;
}
.hero #navigate-hero .hero-left {
  position: relative;
  left: calc(var(--left-position) - 24px);
  color: var(--white);
}
@media screen and (width > 720px) {
  .hero #navigate-hero .hero-left:hover svg {
    transform: translateX(-0.3rem) scale(102%);
  }
}
.hero #navigate-hero .hero-left:active svg {
  transform: translateX(-0.3rem) scale(108%);
}
.hero #navigate-hero .hero-left svg {
  width: 2.1rem;
  height: 2.1rem;
}
.hero #navigate-hero .hero-right {
  position: relative;
  left: calc(var(--right-position) - 103px);
  color: var(--ash-b);
}
@media screen and (width > 720px) {
  .hero #navigate-hero .hero-right:hover svg {
    transform: translateX(0.3rem) scale(102%);
  }
}
.hero #navigate-hero .hero-right:active svg {
  transform: translateX(0.2rem) scale(106%);
}
.hero #navigate-hero .hero-right svg {
  width: 1.7rem;
  height: 1.7rem;
}
.hero #navigate-hero div {
  background-color: var(--white-a);
  padding: 0.3rem;
  border-radius: 0.9rem;
}
.hero .hero-intro {
  align-self: end;
  order: 2;
  font-size: 1.3rem;
  color: gray !important;
  font-family: "Truculenta" sans-serif;
}
.hero .hero-intro div {
  display: inline;
  font-family: "Truculenta", sans-serif;
  color: #FCA311 !important;
}
.hero .hero-image {
  transform: translateX(-4rem);
  justify-self: center;
  animation: hero-text 700ms cubic-bezier(0.165, 0.84, 0.44, 1) 200ms forwards;
}

@keyframes hero-text {
  100% {
    opacity: 1;
    transform: none;
  }
}
main {
  width: 100%;
  display: grid;
  justify-items: center;
  position: relative;
}

#filter-layout {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: var(--ash);
  position: sticky;
  gap: calc(var(--mrad) * 0.7);
  padding: var(--mrad) calc(var(--mrad) * 0.6);
  border-radius: 0 0 var(--mpad) var(--mpad);
  justify-self: right;
  width: 100%;
  margin-bottom: 5rem;
  top: 0;
  z-index: 8;
  transition: all 500ms;
}
#filter-layout.at-top {
  background-color: rgba(238, 238, 238, 0.1333333333);
  backdrop-filter: blur(30px);
  padding: var(--spad);
  box-shadow: 0 6px 8px -4px rgba(51, 51, 51, 0.1333333333);
}
#filter-layout.at-top > * {
  transform: scale(94%);
  -webkit-transform: scale(94%);
}
#filter-layout #layout svg,
#filter-layout #filter-search svg {
  background-color: var(--white);
  padding: 4px;
  border-radius: 5px;
  width: 2.3rem;
  height: 2.3rem;
  color: var(--black-d);
}
#filter-layout #layout:active {
  transform: scale(2px);
}
#filter-layout #layout:active svg {
  background-color: #fca;
  color: #FCA311;
}
#filter-layout #filter {
  display: flex;
  gap: var(--srad);
  border: none;
  border-bottom: solid 3px rgba(34, 34, 34, 0.1333333333);
  background-color: #FCA311;
  align-items: center;
  border-radius: var(--spad);
  padding: var(--srad) var(--mrad);
  font-size: 1rem;
  transition: all 200ms;
}
#filter-layout #filter svg,
#filter-layout #filter span {
  color: white !important;
}
#filter-layout #filter:active {
  border-bottom: unset;
  box-shadow: 0px 2px 4px -1px inset rgba(34, 34, 34, 0.2);
  filter: brightness(0.95);
}
#filter-layout #filter-search {
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: var(--mpad);
  background-color: rgba(255, 255, 255, 0.7333333333);
}
#filter-layout #filter-search input {
  display: flex;
  width: 100%;
  height: 100%;
  border: none;
  background-color: rgba(0, 0, 0, 0);
  padding: 0 var(--mpad);
}
#filter-layout #filter-search input::placeholder {
  color: var(--black-d);
}
#filter-layout #filter-search svg {
  border-radius: 2rem;
  margin: 1px;
}

#container {
  width: 100%;
  max-width: 1200px;
  padding: var(--epad) var(--mpad);
}

#categories {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 1;
  top: -3rem;
  width: 96%;
  height: 0;
  max-width: 600px;
  border-radius: var(--srad);
}
#categories li {
  list-style-type: none;
  font-size: 90%;
  position: relative;
  padding: calc(var(--mpad) * 0.8);
  max-width: 100%;
}
#categories li a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  background-color: #FCA311;
  height: 0.3rem;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: var(--srad) var(--srad) 0 0;
}
#categories li a {
  color: var(--black);
  max-width: 100%;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
#categories ul {
  border-radius: var(--srad);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#categories ul hr {
  transform: rotate(90deg);
  width: 1rem;
  height: 1px;
  background-image: linear-gradient(90deg, rgba(68, 68, 68, 0.6), rgba(255, 255, 255, 0.6), rgba(68, 68, 68, 0.6));
  border: none;
}
#categories > div {
  flex-shrink: 0;
  padding: var(--mpad);
  background-color: var(--white);
  border-radius: var(--srad);
  position: relative;
}
#categories > div a {
  color: var(--black);
  text-decoration: none;
}
#categories > div a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  background-color: #FCA311;
  height: 0.3rem;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: var(--srad) var(--srad) 0 0;
}

.products {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  justify-content: space-evenly;
  gap: 4rem 2rem;
  padding: var(--bpad);
}

.product {
  visibility: hidden;
  left: 50%;
  translate: -50%;
  width: 100%;
  opacity: 0;
  transform: translateY(30vh) scale(80%);
  border: solid 1px rgba(153, 153, 153, 0.2);
  position: relative;
  max-width: 410px;
  border-radius: 8px;
  overflow: clip;
  aspect-ratio: 5/9;
  cursor: pointer;
}
.product.js {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: all 400ms var(--fast-in-bezier);
}
.product:hover:not(.product.mod) {
  transform: scale(105%) translateY(-1rem);
  box-shadow: 0 10px 10px -5px rgba(119, 119, 119, 0.4);
  font-size: 104%;
  z-index: 1;
  transition: all 300ms 500ms var(--fast-in-bezier);
}
.product:hover:not(.product.mod) .product-img {
  transform: scale(97%);
  border-radius: 0.4rem;
}
.product.mod {
  grid-column: span 2;
  max-width: unset;
  animation: pro-come 1s var(--fast-in-bezier) 1 alternate forwards;
  aspect-ratio: unset;
  cursor: unset;
}
@keyframes pro-come {
  0% {
    transform: scale(90%);
  }
  50% {
    transform: scale(100%);
  }
  100% {
    transform: scale(100%);
  }
}
.product.mod a.po {
  display: none;
}
.product.mod .huge-pro-html {
  display: grid;
  gap: var(--bpad);
  opacity: 0;
  transform: scale(90%);
  transition: all 300ms var(--fast-in-bezier);
}
.product.mod .huge-pro-html.js {
  opacity: 1;
  transform: scale(100%);
}
.product.mod .product-details {
  display: none;
}
.product.mod .product-back {
  display: grid;
  grid-template-columns: 48% 48%;
  grid-template-rows: 40% 55%;
  height: 100%;
  gap: var(--bpad);
  padding: var(--mpad);
}
.product.mod .product-img {
  align-self: center;
  transition: width 300ms ease-in-out 100ms;
  border-radius: var(--srad);
  height: 100%;
  width: 100%;
}
.product.mod .huge-header h2 {
  font-size: 230%;
  text-align: center;
  text-decoration: underline;
}
.product.mod div.pr {
  position: absolute;
  right: -0.4rem;
  top: -0.4rem;
  border: solid 1px red;
  background-color: #ffe0e0;
  border-radius: 4px;
  cursor: pointer;
}
.product.mod div.pr svg {
  stroke-width: 1.2px;
  stroke: red;
}
.product.mod .price {
  display: flex;
  align-items: center;
  justify-self: center;
}
.product.mod .price span {
  color: #666;
}
.product.mod .price strong {
  color: #222;
  font-weight: 100;
}
.product.mod .description-reactions {
  flex-direction: column;
  row-gap: 2rem;
}
.product.mod .description-reactions * {
  text-wrap: wrap;
}
.product.mod article {
  height: 100%;
}
.product.mod .reactions {
  display: flex;
  flex-direction: column;
  align-self: end;
  gap: 1rem;
  border-radius: var(--srad);
}
.product.mod .heart-comment {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-content: center;
  column-gap: var(--spad);
  width: 100%;
}
.product.mod .heart-comment svg[icon=send-2] {
  stroke-width: 1px;
  cursor: pointer;
  transition: all 400ms;
}
.product.mod .heart-comment svg[icon=send-2]:hover {
  stroke-width: 2px;
}
.product.mod input.comment {
  background-color: var(--ash);
  border: solid 1px #fff;
  border-radius: 0.3rem;
  padding: 0 calc(var(--spad) * 1.4);
  height: 100%;
}
.product.mod hr {
  box-shadow: none;
  border: solid 1px #999;
  border-radius: 50%;
  transform: rotate(90deg);
  width: 1rem;
}
.product.mod .heart {
  background-color: var(--white);
  border-radius: var(--srad);
  padding: var(--spad) calc(var(--mpad) * 0.7);
  align-items: center;
}
.product.mod .heart > div {
  display: flex;
  flex-direction: column;
  font-size: 75%;
}
.product.mod .commenter {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: var(--spad);
  flex-grow: 1;
  flex-shrink: 0;
  background-color: var(--white);
  border-radius: var(--srad);
}
.product.mod .commenter input {
  width: 100%;
  margin-right: 0.3rem;
}
.product.mod .commenter svg.js,
.product.mod .commenter hr.js,
.product.mod .commenter div.js {
  display: none;
}
.product.mod .commenter svg {
  stroke: #aaa;
  flex-shrink: 0;
}
.product.mod .commenter hr {
  flex-shrink: 0;
}
.product.mod .commenter div {
  font-size: 0.8rem;
}
.product.mod .comments {
  scrollbar-width: none;
  display: grid;
  gap: var(--mpad);
  background-color: var(--ash);
  position: fixed;
  margin-top: -2.6rem;
  padding: var(--mpad);
  border-radius: var(--srad);
  height: 100%;
  overflow-y: scroll;
  grid-column: span 2;
  visibility: hidden;
  opacity: 0;
  transform: scale(94%, 80%);
  transition: all 200ms var(--fast-in-bezier);
  backdrop-filter: blur(1px);
}
.product.mod .comments::-webkit-scrollbar {
  display: none;
}
.product.mod .comments [close] {
  position: fixed;
  right: 1rem;
  top: 1rem;
  border: solid 1px rgba(85, 85, 85, 0.3333333333);
  border-radius: var(--srad);
  color: rgba(85, 85, 85, 0.9333333333);
  z-index: 1;
  stroke-width: 1.3px;
}
.product.mod .comments strong {
  text-align: center;
}
.product.mod .comments.js {
  visibility: visible;
  opacity: 1;
  top: 0;
  transform: none;
}
.product.mod .each-comment {
  display: flex;
  gap: 0.4rem;
  font-size: 80%;
}
.product.mod .each-comment p {
  position: relative;
  background-color: var(--white);
  padding: 0.5rem 0.8rem;
  border-radius: 0 1rem 1rem 1rem;
  color: #666;
}
.product.mod .each-comment p:before {
  content: "";
  position: absolute;
  margin: 0;
  left: -0.4rem;
  top: 0;
  border-left: solid 0.5rem rgba(0, 0, 0, 0);
  border-top: solid 0.5rem var(--white);
}
.product.mod .comment-user {
  margin-top: 0.3rem;
  align-self: flex-start;
}
.product.mod .comment-user svg {
  background-color: var(--grey);
  padding: 0.2rem;
  border-radius: 40%;
  fill: rgba(255, 255, 255, 0.2);
  color: #444;
}
.product.mod .comment-user span {
  font-size: 0.6rem;
}
.product .huge-pro-html {
  display: none;
}

.pro-back-img {
  position: absolute;
  transform: translate(-50%, -50%) scale(320%);
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  z-index: -1;
  background-color: var(--white-d);
}

.product-back {
  display: grid;
  width: 100%;
  height: 100%;
  flex-direction: column;
}
.product-back a[action] {
  position: absolute;
  inset: 0;
}

.product-img {
  transition: all 300ms 200ms ease-in-out;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1;
}
.product-img:has(img[src="ugly-images/"])::after {
  content: "";
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  height: 1.5rem;
  width: 1.5rem;
  border: solid 1px rgba(0, 0, 0, 0);
  border-left: solid 2px white;
  mix-blend-mode: difference;
  border-radius: 2rem;
  animation: load-img ease-out 600ms infinite;
}
@keyframes load-img {
  to {
    transform: rotate(360deg);
  }
}
.product-img img {
  width: 100%;
  vertical-align: middle;
  backdrop-filter: brightness(110%);
}

.product-details {
  flex-grow: 1;
  display: grid;
  align-items: stretch;
  gap: 1rem;
  height: 100%;
  width: 100%;
  padding: 1.5rem;
}
.product-details .pro-name {
  align-content: start;
}
.product-details .pro-name h2 {
  font-size: 2rem;
  line-height: 1;
}

.pro-about p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pro-rate-price {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 2fr;
  column-gap: 1rem;
}

.price {
  column-gap: 0.5rem;
}
.price .old-price {
  text-decoration: line-through;
}
.price .new-price strong {
  font-size: 1.6rem;
}

.likes-comments,
.heart {
  display: flex;
  justify-self: flex-end;
}
.likes-comments svg,
.heart svg {
  width: 2rem;
  height: 2rem;
  stroke-width: 0.1rem;
  transition: all 200ms ease-in-out;
  cursor: pointer;
}
.likes-comments svg:hover,
.heart svg:hover {
  transform: scale(110%);
}
.likes-comments > *,
.heart > * {
  display: grid;
  justify-items: center;
  align-items: center;
}
.likes-comments small,
.heart small {
  padding: 0.1rem 0.4rem;
  text-align: center;
  color: #fff;
  font-size: 80%;
}
.likes-comments .like div,
.heart .like div {
  background-color: var(--red);
  border-radius: 1rem 0 0 1rem;
}
.likes-comments svg[icon=heart],
.heart svg[icon=heart] {
  color: #f00;
}
.likes-comments svg[icon=heart] :hover,
.heart svg[icon=heart] :hover {
  fill: rgba(255, 153, 153, 0.5333333333);
}
.likes-comments svg[icon=heart].js path,
.heart svg[icon=heart].js path {
  fill: #f44;
  animation: heart-pulse 400ms var(--fast-in-bezier) 2 forwards;
}
@keyframes heart-pulse {
  from {
    transform: scale(110%);
    filter: drop-shadow(0 0 3px #f44);
  }
  to {
    transform: scale(100%);
  }
}
.likes-comments .comment div,
.heart .comment div {
  background-color: #444;
  border-radius: 0 1rem 1rem 0;
}
.likes-comments .comment svg,
.heart .comment svg {
  color: #222;
}
.likes-comments .comment svg :hover,
.heart .comment svg :hover {
  fill: rgba(102, 102, 102, 0.1333333333);
}

.mod .second-info {
  align-content: space-around;
  grid-row: span 2;
  height: 100%;
}

.huge-pro-html table {
  min-width: 230px;
  max-width: 500px;
  width: 90%;
  justify-self: center;
}
.huge-pro-html table td {
  font-family: Truculenta;
  font-weight: 400;
  font-size: 1rem;
  padding: 0.5rem;
  color: #654;
}
.huge-pro-html table tr:first-child td:first-child {
  border-radius: 9px 2px 2px 4px;
}
.huge-pro-html table tr:first-child td:last-child {
  border-radius: 2px 9px 4px 2px;
}
.huge-pro-html table tr:last-child td:first-child {
  border-radius: 4px 2px 2px 9px;
}
.huge-pro-html table tr:last-child td:last-child {
  border-radius: 2px 4px 9px 2px;
}
.huge-pro-html table td:first-child {
  width: 40%;
  min-width: 50%;
  background-color: #ffc083;
  border-radius: 4px 2px 2px 4px;
}
.huge-pro-html table td:last-child {
  background-color: #ffe0c0;
  border-radius: 2px 4px 4px 2px;
}

.cart-manipulations {
  display: flex;
  width: 100%;
  gap: var(--spad);
}
.cart-manipulations button,
.cart-manipulations .wishlisted,
.cart-manipulations .pro-total {
  display: flex;
  gap: var(--srad);
  align-items: center;
  border-radius: var(--spad);
  padding: calc(var(--srad) * 0.5) var(--spad);
}
.cart-manipulations button.add-to-cart {
  background-color: #FCA311;
  border-bottom: solid 3px rgba(34, 34, 34, 0.1333333333);
}
.cart-manipulations button.add-wish {
  background-color: #ddd;
  border-bottom: solid 3px #bbb;
}
.cart-manipulations button.add-wish span,
.cart-manipulations button.add-wish svg {
  color: #444;
}
.cart-manipulations button:where(.pro-cart-subtract, .pro-cart-add) {
  background-color: #FCA311;
  border-bottom: solid 3px rgba(34, 34, 34, 0.1333333333);
}
.cart-manipulations button.pro-cart-units {
  background-color: #ddd;
  border-bottom: solid 3px #bbb;
}
.cart-manipulations button.pro-cart-units span,
.cart-manipulations button.pro-cart-units svg {
  color: #444;
}
.cart-manipulations button svg,
.cart-manipulations button span {
  color: white;
}
.cart-manipulations button:active {
  border-bottom: unset;
  box-shadow: 0px 2px 4px -1px inset rgba(34, 34, 34, 0.2);
  filter: brightness(0.95);
}
.cart-manipulations .wishlisted,
.cart-manipulations .pro-total {
  font-size: 0.9rem;
  background-color: #eee;
  box-shadow: inset 0px 1px 1px rgba(51, 51, 51, 0.2);
}
.cart-manipulations .wishlisted *,
.cart-manipulations .pro-total * {
  color: rgba(17, 17, 17, 0.6) !important;
}
.cart-manipulations:has(.plus-minus) {
  justify-content: space-between;
}
.cart-manipulations .plus-minus {
  display: flex;
  gap: var(--srad);
}
.cart-manipulations .pro-cart-remove {
  background-color: red;
}
.cart-manipulations .pro-cart-units {
  padding: calc(var(--srad) * 0.5) calc(var(--srad) * 1.5);
}
.cart-manipulations .sel-unit {
  display: none;
  gap: calc(var(--srad) * 0.2);
  position: absolute;
  bottom: 3rem;
  background-color: white;
  grid-template-columns: 1fr 1fr 1fr;
  padding: calc(var(--srad) * 0.4);
  border-radius: var(--srad);
  box-shadow: 1px 1px 3px rgba(51, 51, 51, 0.4);
}
.cart-manipulations .sel-unit.js {
  display: grid;
}
.cart-manipulations .sel-unit span {
  background-color: rgba(153, 153, 153, 0.2);
  border-right: solid 2px rgba(153, 153, 153, 0.4);
  border-radius: calc(var(--srad) * 0.6);
  border-bottom: solid 2px rgba(153, 153, 153, 0.4);
  padding: var(--srad) calc(var(--srad) * 1.6);
  cursor: pointer;
}
.cart-manipulations .pro-total {
  animation: total-pulse linear 200ms 1 alternate;
}
@keyframes total-pulse {
  from {
    transform: scale(110%);
    filter: drop-shadow(0 0 3px #4a4);
  }
  to {
    transform: scale(100%);
  }
}
.cart-manipulations > * {
  animation: cart-bounce ease-in 250ms 0ms 1;
}
@keyframes cart-bounce {
  /*from {
    transform: scale(0%);
    opacity: 0;
    }*/
  to {
    transform: scale(70%);
    opacity: 0;
  }
}

#filter-wrapper {
  width: 100%;
  display: grid;
  padding: var(--srad);
  gap: var(--srad);
  grid-template-rows: 1fr 1fr;
  background-color: var(--ash);
  grid-column: span 2;
  position: fixed;
  top: 0;
  z-index: 9;
  inset: 0;
}
#filter-wrapper #extraction {
  display: flex;
  gap: var(--srad);
}
#filter-wrapper #extraction .product {
  width: 100%;
  height: fit-content;
  max-width: 300px;
  left: unset;
  translate: unset;
}
#filter-wrapper #extraction .product .product-details {
  padding: 1rem;
}
#filter-wrapper #filter-card {
  background-color: var(--white);
  height: var(--filter-card-height);
  margin: 0 calc(var(--srad) * -1);
  border-radius: var(--mpad) var(--mpad) 0 0;
}
#filter-wrapper #filter-layout {
  background-color: unset;
}

html[dark-mode] {
  color: #fff;
}
html[dark-mode] p {
  color: #ccc;
}
html[dark-mode] span,
html[dark-mode] li {
  color: #ccc !important;
}
html[dark-mode] small {
  color: #bbb !important;
}
html[dark-mode] strong,
html[dark-mode] div {
  color: #eee !important;
}
html[dark-mode]:root {
  --white: #333;
  --white-a: #3333;
  --white-b: #fff5;
  --white-g: #5559;
  --white-d: #333c;
  --red: #f55;
  --ash: #555555;
  --grey: #eee;
  --black: #eeea;
}