:root {
  --tb-black: #17171b;
  --tb-cyan: #00aeef;
  --tb-cyan-dark: #007ca9;
  --tb-magenta: #d00078;
  --tb-yellow: #ffe03d;
  --tb-paper: #fffdf8;
  --tb-line: #dddde0;
  --bs-link-color: #007ca9;
  --bs-link-hover-color: #ad0065;
  --bs-primary: #d00078;
  --bs-primary-rgb: 208, 0, 120;
}

body { background: var(--tb-paper); color: var(--tb-black); }
h1, h2, h3, h4, h5, h6 { color: var(--tb-black); }
a { color: var(--tb-cyan-dark); }
a:hover { color: var(--tb-magenta); }

#top {
  background: var(--tb-black);
  border: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
#top::after {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--tb-cyan) 0 33.33%, var(--tb-magenta) 33.33% 66.66%, var(--tb-yellow) 66.66% 100%);
}
#top .list-inline-item > a,
#top .list-inline-item .dropdown > a,
#top .list-inline-item .dropdown > span { color: #f7f7f7; }
#top .list-inline-item > a:hover,
#top .list-inline-item .dropdown > span:hover { color: var(--tb-yellow); }
#top .fa-solid { color: var(--tb-cyan); }

header { background: #fff; }
header .container > .row { align-items: center; }
#logo img { max-height: 118px; }
#cart .btn-lg {
  background: var(--tb-black);
  border: 2px solid var(--tb-yellow);
  border-radius: 8px;
  color: #fff;
  box-shadow: 4px 4px 0 var(--tb-yellow);
}
#cart .btn-lg:hover, #cart .btn-lg:focus {
  background: var(--tb-magenta);
  border-color: var(--tb-magenta);
  box-shadow: 4px 4px 0 var(--tb-cyan);
}

#menu {
  background: var(--tb-magenta);
  background-image: none;
  border: 0;
  border-radius: 0;
  border-bottom: 5px solid var(--tb-cyan);
  min-height: 46px;
  margin-bottom: 0;
}
#menu.bg-primary { background-color: var(--tb-magenta) !important; }
#menu .navbar-nav > li > a,
#category, #menu .navbar-toggler i { color: #fff; text-shadow: none; }
#menu .navbar-nav > li > a:hover,
#menu .navbar-nav > li > a:focus { background: var(--tb-black); color: #fff; }
#menu .dropdown-menu { border: 2px solid var(--tb-black); }
#menu .dropdown-item:hover, #menu .dropdown-item:focus { background: #e2f8ff; color: var(--tb-black); }
#search .btn-lg { background: var(--tb-cyan); border-color: var(--tb-cyan); color: var(--tb-black); text-shadow: none; }
#search .btn-lg:hover { background: var(--tb-yellow); border-color: var(--tb-yellow); }

.btn-primary, .btn-primary:disabled {
  background: var(--tb-magenta);
  border-color: var(--tb-magenta);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: #a5005f;
  border-color: #a5005f;
  color: #fff;
}
.btn-outline-primary { border-color: var(--tb-magenta); color: var(--tb-magenta); }
.btn-outline-primary:hover { background: var(--tb-magenta); border-color: var(--tb-magenta); color: #fff; }
.btn-light, .btn-secondary { border-color: var(--tb-line); }
.form-control:focus, .form-select:focus {
  border-color: var(--tb-cyan-dark);
  box-shadow: 0 0 0 .22rem rgba(0, 174, 239, .22);
}
.form-check-input:checked { background-color: var(--tb-magenta); border-color: var(--tb-magenta); }
.page-link { color: var(--tb-cyan-dark); }
.page-item.active .page-link { background: var(--tb-magenta); border-color: var(--tb-magenta); }
.list-group-item.active { background: var(--tb-cyan); border-color: var(--tb-cyan); color: var(--tb-black); }

.breadcrumb {
  background: #fff8d9;
  border-color: #f1dc7f;
  border-radius: 0;
  margin-top: 22px;
}
.breadcrumb > li.breadcrumb-item:after { border-color: #f1dc7f; }
.product-thumb {
  background: #fff;
  border: 1px solid var(--tb-line);
  box-shadow: 0 4px 15px rgba(23, 23, 27, .06);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.product-thumb:hover {
  border-color: var(--tb-cyan);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(23, 23, 27, .12);
}
.product-thumb .description h4 a { color: var(--tb-black); }
.product-thumb .description h4 a:hover { color: var(--tb-magenta); }
.product-thumb .button button { background: #fff; color: var(--tb-black); }
.product-thumb .button button:first-child { background: var(--tb-yellow); color: var(--tb-black); font-weight: 700; }
.product-thumb .button button:hover,
.product-thumb .button button:first-child:hover { background: var(--tb-cyan); color: var(--tb-black); }
.price-new, .price { color: var(--tb-black); }
.price-old { color: var(--tb-magenta); }

footer {
  background: var(--tb-black);
  border: 0;
  border-top: 7px solid var(--tb-yellow);
  color: #e6e6e8;
}
footer h5 { color: var(--tb-cyan); font-size: .9rem; letter-spacing: .04em; }
footer a { color: #f4f4f5; }
footer a:hover { color: var(--tb-yellow); }
footer hr { border-bottom-color: #4a4a4d; }

@media (max-width: 767px) {
  #top .col-4 { display: none; }
  #top .col.text-end { width: 100%; }
  #top .list-inline-item > a, #top .list-inline-item .dropdown > span { font-size: .95em; }
  #logo { text-align: left; }
  #logo img { max-height: 96px; }
  #cart .btn-lg { box-shadow: 3px 3px 0 var(--tb-yellow); }
}