@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap);
@import url(https://fonts.googleapis.com/css?family=EB+Garamond:400,500,600,700,800&display=swap);
.webshop-container {
  max-width: 1140px;
}

.overflow-hidden {
  overflow: hidden !important;
}

#webshop-content {
  /*************  Pagination  *************/
  /************* Custom CSS *************/
  /*************  Seller page  *************/
  /* The Modal (background) */
  /* 100% Image Width on Smaller Screens */
  /* Navbar container */
  /* Add a red background color to navbar links on hover */
}

#webshop-content .account .del_icon {
  width: 23px;
  margin-right: 7px;
  height: auto !important;
}

#webshop-content .arrow {
  width: 20px;
  height: 20px;
  position: relative;
  display: inline-block;
  margin: 5px 5px;
}

#webshop-content .arrow:before, #webshop-content .arrow:after {
  content: "";
  border-color: transparent;
  border-style: solid;
  position: absolute;
}

#webshop-content .arrow:after {
  content: "";
  border-color: transparent;
  border-style: solid;
  position: absolute;
}

#webshop-content .arrow-left.disabled:before {
  background-color: #8f8f8f;
}

#webshop-content .arrow-left.disabled:after {
  border-right-color: #8F8F8F;
}

#webshop-content .arrow-left:before {
  border: none;
  background-color: #000;
  height: 30%;
  width: 50%;
  top: 35%;
  left: 50%;
}

#webshop-content .arrow-left:after {
  left: -50%;
  top: 0;
  border-width: 10px 10px;
  border-right-color: #000;
}

#webshop-content *, #webshop-content ::after, #webshop-content ::before {
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

#webshop-content .h1, #webshop-content .h2, #webshop-content .h3, #webshop-content .h4, #webshop-content .h5, #webshop-content .h6, #webshop-content h1, #webshop-content h2, #webshop-content h3, #webshop-content h4, #webshop-content h5, #webshop-content h6 {
  margin-top: 0;
  margin-bottom: 8px;
  font-weight: 500;
  line-height: 1.2;
  color: #000;
}

#webshop-content .h1, #webshop-content h1 {
  font-size: 36px;
}

#webshop-content .h2, #webshop-content h2 {
  font-size: 28.8px;
}

#webshop-content .h3, #webshop-content h3 {
  font-size: 25.2px;
}

#webshop-content .h4, #webshop-content h4 {
  font-size: 21.6px;
}

#webshop-content .h5, #webshop-content h5 {
  font-size: 18px;
}

#webshop-content .h6, #webshop-content h6 {
  font-size: 14.4px;
}

#webshop-content ul {
  margin-bottom: 16px;
}

#webshop-content dl, #webshop-content ol, #webshop-content ul {
  margin-top: 0;
}

#webshop-content ol ol, #webshop-content ol ul, #webshop-content ul ol, #webshop-content ul ul {
  margin-bottom: 0;
}

#webshop-content p {
  margin-top: 0;
  margin-bottom: 16px;
}

#webshop-content b, #webshop-content strong {
  font-weight: 600;
}

#webshop-content small {
  font-size: 80%;
}

#webshop-content sub, #webshop-content sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

#webshop-content sub {
  bottom: -0.25em;
}

#webshop-content sup {
  top: -0.5em;
}

#webshop-content a {
  color: #3490dc;
  text-decoration: none;
  background-color: transparent;
}

#webshop-content a:hover {
  color: #1d68a7;
  text-decoration: underline;
}

#webshop-content a.zellrs-dark-green:hover {
  color: #508100;
  text-decoration: underline;
}

#webshop-content a:not([href]), #webshop-content a:not([href]):hover {
  color: inherit;
  text-decoration: none;
}

#webshop-content img, #webshop-content video {
  border-style: none;
  max-width: 100%;
  height: auto;
}

#webshop-content img, #webshop-content svg {
  vertical-align: middle;
}

#webshop-content svg {
  overflow: hidden;
}

#webshop-content ul.categories {
  list-style: none;
  padding-left: 0;
}

#webshop-content ul.categories li {
  padding-bottom: 5px;
}

#webshop-content ul.categories li.selected > a {
  color: #dc3545;
}

#webshop-content ul.categories ul {
  list-style: none;
  padding-left: 15px;
}

#webshop-content ul.categories ul.collapsed {
  display: none;
}

#webshop-content .hidden {
  display: none !important;
}

#webshop-content .webshop-right-side-content {
  width: 100%;
}

#webshop-content .flex-center {
  display: flex;
  align-items: center;
}

#webshop-content .nav-link {
  display: block;
  padding: 8px 16px;
}

#webshop-content .webshop-hero-image {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

#webshop-content .webshop-hero-image img {
  width: 100%;
  max-height: 200px;
  -o-object-fit: contain;
  object-fit: contain;
}

#webshop-content .webshop-page-link.seller-link {
  color: #508100;
  font-weight: bold;
  font-family: "Open Sans";
  font-size: 14px;
}

#webshop-content .webshop-page-link.seller-link:hover {
  color: #508100;
  text-decoration: underline;
}

#webshop-content .webshop-page-link.store-link {
  color: #508100;
  font-weight: bold;
  font-family: "Open Sans";
  font-size: 14px;
}

#webshop-content .webshop-page-link.store-link:hover {
  color: #666666;
  text-decoration: underline;
}

#webshop-content .webshop-go-back {
  padding-left: 0;
  margin-right: 20px;
  cursor: pointer;
}

#webshop-content .disabled, #webshop-content .btn:disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
  pointer-events: none;
}

#webshop-content .btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#webshop-content .btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.5;
  border-radius: 4px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#webshop-content .btn-success {
  color: #fff;
  background-color: #508100;
  border-color: #508100;
}

#webshop-content .btn-success:hover {
  color: #fff;
  background-color: #508100;
  border-color: #508100;
  text-decoration: none;
}

#webshop-content .card {
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 4px;
}

#webshop-content .card-body {
  flex: 1 1 auto;
  min-height: 1px;
  padding: 10px;
}

#webshop-content .card-title {
  margin-bottom: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#webshop-content .card-title:first-child {
  margin-bottom: 0;
}

#webshop-content .button-square {
  width: 32px;
  height: 28px;
  padding: 2px 4px 4px 4px;
  margin-left: 5px;
}

#webshop-content .button-square.active {
  color: rgb(255, 255, 255);
  background: rgb(102, 102, 102);
}

#webshop-content .button-square:focus {
  outline: none;
}

#webshop-content .input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

#webshop-content .input-group > .custom-file, #webshop-content .input-group > .custom-select, #webshop-content .input-group > .form-control, #webshop-content .input-group > .form-control-plaintext {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  margin-bottom: 0;
}

#webshop-content .input-group > .custom-file + .custom-file, #webshop-content .input-group > .custom-file + .custom-select, #webshop-content .input-group > .custom-file + .form-control, #webshop-content .input-group > .custom-select + .custom-file, #webshop-content .input-group > .custom-select + .custom-select, #webshop-content .input-group > .custom-select + .form-control, #webshop-content .input-group > .form-control + .custom-file, #webshop-content .input-group > .form-control + .custom-select, #webshop-content .input-group > .form-control + .form-control, #webshop-content .input-group > .form-control-plaintext + .custom-file, #webshop-content .input-group > .form-control-plaintext + .custom-select, #webshop-content .input-group > .form-control-plaintext + .form-control {
  margin-left: -1px;
}

#webshop-content .input-group > .custom-file .custom-file-input:focus ~ .custom-file-label, #webshop-content .input-group > .custom-select:focus, #webshop-content .input-group > .form-control:focus {
  z-index: 3;
}

#webshop-content .input-group > .custom-file .custom-file-input:focus {
  z-index: 4;
}

#webshop-content .input-group > .custom-select:not(:last-child), #webshop-content .input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#webshop-content .input-group > .custom-select:not(:first-child), #webshop-content .input-group > .form-control:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#webshop-content .input-group > .custom-file {
  display: flex;
  align-items: center;
}

#webshop-content .input-group > .custom-file:not(:last-child) .custom-file-label, #webshop-content .input-group > .custom-file:not(:last-child) .custom-file-label:after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#webshop-content .input-group > .custom-file:not(:first-child) .custom-file-label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#webshop-content .input-group-append, #webshop-content .input-group-prepend {
  display: flex;
}

#webshop-content .input-group-append .btn, #webshop-content .input-group-prepend .btn {
  position: relative;
  z-index: 2;
}

#webshop-content .input-group-append .btn:focus, #webshop-content .input-group-prepend .btn:focus {
  z-index: 3;
}

#webshop-content .input-group-append .btn + .btn, #webshop-content .input-group-append .btn + .input-group-text, #webshop-content .input-group-append .input-group-text + .btn, #webshop-content .input-group-append .input-group-text + .input-group-text, #webshop-content .input-group-prepend .btn + .btn, #webshop-content .input-group-prepend .btn + .input-group-text, #webshop-content .input-group-prepend .input-group-text + .btn, #webshop-content .input-group-prepend .input-group-text + .input-group-text {
  margin-left: -1px;
}

#webshop-content .input-group-prepend {
  margin-right: -1px;
}

#webshop-content .input-group-append {
  margin-left: -1px;
}

#webshop-content .input-group-text {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14.4px;
  font-weight: 400;
  line-height: 1.6;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

#webshop-content .input-group-text input[type=checkbox], #webshop-content .input-group-text input[type=radio] {
  margin-top: 0;
}

#webshop-content .input-group-lg > .custom-select, #webshop-content .input-group-lg > .form-control:not(textarea) {
  height: calc(1.5em + 16px + 2px);
}

#webshop-content .input-group-lg > .custom-select, #webshop-content .input-group-lg > .form-control, #webshop-content .input-group-lg > .input-group-append > .btn, #webshop-content .input-group-lg > .input-group-append > .input-group-text, #webshop-content .input-group-lg > .input-group-prepend > .btn, #webshop-content .input-group-lg > .input-group-prepend > .input-group-text {
  padding: 8px 16px;
  font-size: 18px;
  line-height: 1.5;
  border-radius: 4.8px;
}

#webshop-content .input-group-sm > .custom-select, #webshop-content .input-group-sm > .form-control:not(textarea) {
  height: calc(1.5em + 8px + 2px);
}

#webshop-content .input-group-sm > .custom-select, #webshop-content .input-group-sm > .form-control, #webshop-content .input-group-sm > .input-group-append > .btn, #webshop-content .input-group-sm > .input-group-append > .input-group-text, #webshop-content .input-group-sm > .input-group-prepend > .btn, #webshop-content .input-group-sm > .input-group-prepend > .input-group-text {
  padding: 4px 8px;
  font-size: 12.6px;
  line-height: 1.5;
  border-radius: 3.2px;
}

#webshop-content .input-group-lg > .custom-select, #webshop-content .input-group-sm > .custom-select {
  padding-right: 28px;
}

#webshop-content .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), #webshop-content .input-group > .input-group-append:last-child > .input-group-text:not(:last-child), #webshop-content .input-group > .input-group-append:not(:last-child) > .btn, #webshop-content .input-group > .input-group-append:not(:last-child) > .input-group-text, #webshop-content .input-group > .input-group-prepend > .btn, #webshop-content .input-group > .input-group-prepend > .input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#webshop-content .input-group > .input-group-append > .btn, #webshop-content .input-group > .input-group-append > .input-group-text, #webshop-content .input-group > .input-group-prepend:first-child > .btn:not(:first-child), #webshop-content .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child), #webshop-content .input-group > .input-group-prepend:not(:first-child) > .btn, #webshop-content .input-group > .input-group-prepend:not(:first-child) > .input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#webshop-content .form-control {
  display: block;
  width: 100%;
  height: calc(1.6em + 12px + 2px);
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 4px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  #webshop-content .form-control {
    transition: none;
  }
}
#webshop-content .form-control::-ms-expand {
  background-color: transparent;
  border: 0;
}

#webshop-content .form-control:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #495057;
}

#webshop-content .form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #a1cbef;
  outline: 0;
  box-shadow: 0 0 0 3.2px rgba(52, 144, 220, 0.25);
}

#webshop-content .form-control::-moz-placeholder {
  color: #6c757d;
  opacity: 1;
}

#webshop-content .form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}

#webshop-content .form-control:disabled, #webshop-content .form-control[readonly] {
  opacity: 1;
}

#webshop-content select.form-control:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}

#webshop-content .form-control-file, #webshop-content .form-control-range {
  display: block;
  width: 100%;
}

#webshop-content .search-button.btn {
  width: 32px;
  padding: 4px 6px 6px;
  color: #6c757d;
  border: 1px solid #ced4da;
  border-radius: 0 4px 4px 0;
}

#webshop-content .search-button:focus {
  outline: none;
}

#webshop-content .media {
  display: flex;
  align-items: flex-start;
}

#webshop-content .media-body {
  flex: 1 1;
}

#webshop-content .media-body h5 {
  margin-top: 0;
  font-size: 20px;
}

#webshop-content .product-page .product-title {
  margin-top: 0px;
  font-family: "EB Garamond", serif;
  font-size: 32px;
  font-weight: bold;
}

#webshop-content .product-page .product_description {
  margin-bottom: 16px;
  font-size: 16px;
}

#webshop-content .pagination {
  display: flex;
  font-size: 16px;
  padding-left: 0;
  list-style: none;
  border-radius: 4px;
}

#webshop-content .page-link {
  position: relative;
  display: block;
  padding: 8px 12px;
  margin-left: -1px;
  line-height: 1.25;
  color: #3490dc;
  background-color: #fff;
  border: 1px solid #dee2e6;
}

#webshop-content .page-link:hover {
  z-index: 2;
  color: #1d68a7;
  text-decoration: none;
  border-color: #dee2e6;
}

#webshop-content .page-link:focus {
  z-index: 3;
  outline: 0;
  box-shadow: 0 0 0 3.2px rgba(52, 144, 220, 0.25);
}

#webshop-content .page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

#webshop-content .page-item:last-child .page-link {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

#webshop-content .page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #3490dc;
  border-color: #3490dc;
}

#webshop-content .page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #dee2e6;
}

#webshop-content .pagination-lg .page-link {
  padding: 12px 24px;
  font-size: 18px;
  line-height: 1.5;
}

#webshop-content .pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 4.8px;
  border-bottom-left-radius: 4.8px;
}

#webshop-content .pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 4.8px;
  border-bottom-right-radius: 4.8px;
}

#webshop-content .pagination-sm .page-link {
  padding: 4px 8px;
  font-size: 12.6px;
  line-height: 1.5;
}

#webshop-content .pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 3.2px;
  border-bottom-left-radius: 3.2px;
}

#webshop-content .pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 3.2px;
  border-bottom-right-radius: 3.2px;
}

#webshop-content .search-button.btn {
  width: 32px;
  padding: 4px 6px 6px 6px;
}

#webshop-content .search-button:focus {
  outline: none;
}

#webshop-content #filter-dropdown {
  color: #495057;
  background-color: #ffffff;
  border-color: #495057;
}

#webshop-content .input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

#webshop-content .webshop-ptitle-block p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
  font-size: 14px;
}

#webshop-content .webshop-ptitle-block a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  font-size: 14px;
  color: #000;
}

#webshop-content .webshop-price-block > a > p {
  margin-bottom: 5px;
}

#webshop-content .webshop-price-block > a > p:last-child {
  margin-bottom: 0;
}

#webshop-content .webshop-price-block a {
  color: #000;
  font-size: 13px;
}

#webshop-content .webshop-price-block a p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

#webshop-content .webshop-price-block .prod-description {
  display: none;
}

#webshop-content .price {
  color: #009402;
  margin: 10px 0;
  font-size: 17px;
}

#webshop-content .price.discount small {
  color: #000;
  font-size: 0.86em;
}

#webshop-content .webshop-product-img {
  -o-object-fit: cover;
  object-fit: cover;
  height: 210px;
  width: 100%;
}

#webshop-content .webshop-image-block a {
  padding: 0;
}

#webshop-content .table-name {
  font-size: 13px;
}

#webshop-content .webshop-product-icon-view .table-name,
#webshop-content .webshop-product-grid-view .table-name {
  display: none;
}

#webshop-content .webshop-product-icon-view .webshop-ptitle-block .card-text,
#webshop-content .webshop-product-grid-view .webshop-ptitle-block .card-text {
  display: none;
}

#webshop-content .col, #webshop-content .col-1, #webshop-content .col-2, #webshop-content .col-3, #webshop-content .col-4, #webshop-content .col-5, #webshop-content .col-6, #webshop-content .col-7, #webshop-content .col-8, #webshop-content .col-9, #webshop-content .col-10, #webshop-content .col-11, #webshop-content .col-12, #webshop-content .col-auto, #webshop-content .col-lg, #webshop-content .col-lg-1, #webshop-content .col-lg-2, #webshop-content .col-lg-3, #webshop-content .col-lg-4, #webshop-content .col-lg-5, #webshop-content .col-lg-6, #webshop-content .col-lg-7, #webshop-content .col-lg-8, #webshop-content .col-lg-9, #webshop-content .col-lg-10, #webshop-content .col-lg-11, #webshop-content .col-lg-12, #webshop-content .col-lg-auto, #webshop-content .col-md, #webshop-content .col-md-1, #webshop-content .col-md-2, #webshop-content .col-md-3, #webshop-content .col-md-4, #webshop-content .col-md-5, #webshop-content .col-md-6, #webshop-content .col-md-7, #webshop-content .col-md-8, #webshop-content .col-md-9, #webshop-content .col-md-10, #webshop-content .col-md-11, #webshop-content .col-md-12, #webshop-content .col-md-auto, #webshop-content .col-sm, #webshop-content .col-sm-1, #webshop-content .col-sm-2, #webshop-content .col-sm-3, #webshop-content .col-sm-4, #webshop-content .col-sm-5, #webshop-content .col-sm-6, #webshop-content .col-sm-7, #webshop-content .col-sm-8, #webshop-content .col-sm-9, #webshop-content .col-sm-10, #webshop-content .col-sm-11, #webshop-content .col-sm-12, #webshop-content .col-sm-auto, #webshop-content .col-xl, #webshop-content .col-xl-1, #webshop-content .col-xl-2, #webshop-content .col-xl-3, #webshop-content .col-xl-4, #webshop-content .col-xl-5, #webshop-content .col-xl-6, #webshop-content .col-xl-7, #webshop-content .col-xl-8, #webshop-content .col-xl-9, #webshop-content .col-xl-10, #webshop-content .col-xl-11, #webshop-content .col-xl-12, #webshop-content .col-xl-auto,
#webshop-content .webshop-product-item,
#webshop-content .webshop-product-list-view .card .webshop-image-block,
#webshop-content .webshop-product-list-view .card .webshop-price-block,
#webshop-content .webshop-product-list-view .card .webshop-ptitle-block {
  position: relative;
  width: 100%;
}

#webshop-content .col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

#webshop-content .col-6, #webshop-content .col-7 {
  -webkit-box-flex: 0;
}

#webshop-content .webshop-row.products-listing {
  justify-content: center;
  display: grid;
  grid-template-columns: repeat(auto-fill, 210px);
  grid-gap: 16px;
}

#webshop-content .webshop-row.products-listing.container-webshop-product-list-view {
  display: flex;
}

#webshop-content .webshop-product-item {
  margin-top: 24px;
  width: 210px;
  max-width: 280px !important;
  display: inline-flex;
  box-sizing: content-box;
}

#webshop-content .col-12, #webshop-content .webshop-product-list-view {
  width: 100% !important;
  max-width: 100% !important;
  display: inline-flex;
  box-sizing: content-box;
  padding-right: 0px;
}

#webshop-content .col-12 .card, #webshop-content .webshop-product-list-view .card {
  width: 100%;
}

#webshop-content .col-12 .condition-webshop-row, #webshop-content .webshop-product-list-view .condition-webshop-row {
  display: flex;
  flex-wrap: wrap;
}

#webshop-content .webshop-product-list-view .card .webshop-image-block {
  width: 210px;
  box-sizing: content-box;
}

#webshop-content .webshop-product-list-view .card .webshop-ptitle-block {
  width: calc(100% - 380px);
}

#webshop-content .webshop-product-list-view .card .webshop-price-block {
  max-width: 170px;
}

#webshop-content .webshop-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

#webshop-content .jumbotron {
  padding: 20px;
  box-shadow: 4px 7px 7px 2px #ddd;
  border: 1px solid #eee;
  border-radius: 10px;
}

#webshop-content .jumbotron img {
  vertical-align: middle;
  border-style: none;
}

#webshop-content .jumbotron .webshop-row {
  flex-wrap: nowrap;
}

#webshop-content .jumbotron .col-12 {
  display: block;
}

#webshop-content .jumbotron p, #webshop-content .jumbotron b {
  font-size: 14px;
}

@media (min-width: 576px) {
  #webshop-content .jumbotron {
    padding: 20px;
  }
}
#webshop-content .jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

#webshop-content .rounded-circle {
  border-radius: 50% !important;
}

#webshop-content .img-fluid {
  max-width: 100%;
  height: auto;
}

#webshop-content .webshop-product-view {
  cursor: pointer;
}

#webshop-content .webshop-sort-select {
  padding-bottom: 3px;
}

#webshop-content .webshop-products-sort {
  height: calc(1.6em + 12px - 1px);
  width: auto;
  margin: 0 auto;
  border: 1px solid #ced4da;
}

#webshop-content .webshop-list-type-buttons {
  align-content: center;
  justify-content: flex-end;
  align-items: center;
  padding: 0px;
  width: auto;
}

#webshop-content .align-items-center {
  align-items: center;
}

#webshop-content .webshop-product-icon-view .card-body.webshop-ptitle-block,
#webshop-content .webshop-product-grid-view .card-body.webshop-ptitle-block {
  padding-bottom: 0px;
}

#webshop-content .webshop-product-icon-view .card-body.webshop-price-block,
#webshop-content .webshop-product-grid-view .card-body.webshop-price-block {
  padding-top: 0px;
}

#webshop-content .webshop-left-side-content {
  display: none;
  padding-top: 8px;
}

#webshop-content #webshop-products {
  position: relative;
}

#webshop-content #webshop-products .align-items-center {
  justify-content: space-between;
}

#webshop-content #webshop-products .product_images {
  width: 240px;
  display: block;
  float: left;
  margin-top: -10px;
}

#webshop-content #webshop-products .product_images img {
  width: 100px;
  height: auto;
  padding-top: 10px;
  margin-right: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#webshop-content #webshop-products .product_images img:hover {
  opacity: 0.7;
}

#webshop-content #webshop-products .selected_image {
  float: left;
}

#webshop-content #webshop-products .selected_image img {
  height: auto;
  cursor: pointer;
  transition: 0.3s;
}

#webshop-content #webshop-products .selected_image img:hover {
  opacity: 0.7;
}

#webshop-content #webshop-products .media-body {
  padding-left: 20px;
  padding-top: 5px;
  font-family: "EB Garamond", serif;
  font-size: 16px;
  background-color: #f8f8f8;
  border-radius: 8px;
}

#webshop-content #webshop-products .media-body .table-name {
  font-size: 16px;
  font-weight: 600;
}

#webshop-content #webshop-products > .commercial_block {
  max-width: 100% !important;
  width: 100% !important;
}

#webshop-content #webshop-products > .commercial_block * {
  max-width: 100% !important;
}

#webshop-content .store-name, #webshop-content .seller-name {
  margin-top: 0;
  color: #508100;
}

#webshop-content .zellrs-grey {
  color: #666;
}

#webshop-content .zellrs-greyb {
  font-weight: bold;
}

#webshop-content .zellrs-dark-green {
  color: #508100;
}

#webshop-content .product_images_block {
  display: flex;
}

#webshop-content #webshop-top-bar {
  margin: 0px !important;
}

#webshop-content #webshop-top-bar div {
  padding-left: 0px;
  padding-right: 0px;
}

#webshop-content #webshop-top-bar .top-bar-left {
  width: 150px;
}

#webshop-content #webshop-top-bar .top-bar-left a {
  margin: 0 auto;
}

#webshop-content #webshop-top-bar .top-bar-right {
  width: calc(100% - 160px);
  margin-left: 10px;
}

#webshop-content #webshop-top-bar .top-bar-right.with-custom-block {
  width: calc(100% - 270px);
  margin-right: 10px;
}

#webshop-content #webshop-top-bar .top-bar-custom-html {
  max-width: 100px !important;
  width: 100px !important;
  max-height: 37px !important;
  overflow: hidden;
}

#webshop-content #webshop-top-bar .top-bar-custom-html * {
  max-width: 100px !important;
  max-height: 40px !important;
}

#webshop-content #webshop-image-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  padding: 75px 0;
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
  /* Modal Content (image) */
  /* The Close Button */
}

#webshop-content #webshop-image-modal #webshop-modal-content {
  margin: auto;
  display: block;
  width: 80%;
  height: auto;
  max-width: 700px;
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

#webshop-content #webshop-image-modal .webshop-modal-close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

#webshop-content #webshop-image-modal .webshop-modal-close:hover,
#webshop-content #webshop-image-modal .webshop-modal-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@media only screen and (max-width: 700px) {
  #webshop-content #webshop-content .webshop-modal-content {
    width: 100%;
  }
}
#webshop-content .seller-img, #webshop-content .store-img {
  width: 150px;
  max-width: 150px;
}

#webshop-content .seller-img img, #webshop-content .store-img img {
  width: 150px;
  height: 150px;
  max-width: 150px;
  max-height: 150px;
  -o-object-fit: cover;
  object-fit: cover;
}

#webshop-content .category-title {
  font-size: 20px;
  margin-top: 10px;
  text-align: center;
  width: auto;
}

#webshop-content .webshop-hamburger-menu {
  display: none;
}

#webshop-content .webshop-mobile-menu {
  background-color: #fff;
  display: none;
  font-size: 16px;
  position: relative;
  height: calc(100vh - 75px);
  margin-bottom: 40px;
  top: -50px;
  overflow-y: scroll;
  z-index: 9;
}

#webshop-content .webshop-mobile-menu .menu-arrow {
  position: absolute;
  top: 3px;
  right: 0px;
}

#webshop-content .webshop-mobile-menu .menu-arrow svg {
  width: 25px;
}

#webshop-content .webshop-mobile-menu .active {
  display: block !important;
}

#webshop-content .webshop-mobile-menu .webshop-mobile-top-item:first-child {
  border-top: 1px solid #eee;
}

#webshop-content .webshop-mobile-menu .webshop-mobile-top-item {
  position: relative;
  border-bottom: 1px solid #eee;
}

#webshop-content .webshop-mobile-menu .webshop-mobile-top-item .webshop-page-link {
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 100%;
  height: 100%;
  display: block;
}

#webshop-content .webshop-mobile-menu .webshop-mobile-top-item .webshop-mobile-top-item-link {
  color: #000;
  text-decoration: none;
}

#webshop-content .webshop-mobile-nav-header {
  text-align: center;
  padding: 5px 0;
  font-weight: 600;
}

#webshop-content .view-current-cat {
  text-align: center;
}

#webshop-content .view-current-cat a {
  color: #222;
  text-decoration: underline;
}

#webshop-content .mobile-menu-row {
  display: none;
  width: 100%;
  position: absolute;
  top: 0px;
  background-color: #fff;
}

#webshop-content .mobile-menu-row .column {
  display: flex;
  flex-direction: column;
}

#webshop-content .mobile-menu-row .column h3 {
  color: #000;
  font-size: 1em;
  font-weight: 600;
  line-height: 1;
  margin: 7px 0;
  padding: 0;
}

#webshop-content .mobile-menu-row .column a {
  color: #000;
}

#webshop-content .webshop-sub-category {
  display: none;
  position: relative;
}

#webshop-content .webshop-sub-category h2 {
  padding: 4px;
  margin: 0;
  font-size: 17px;
}

#webshop-content .webshop-sub-category h2 a {
  color: #000;
  text-decoration: none;
}

#webshop-content .webshop-close-mobile-menu {
  right: 0px;
  position: absolute;
  top: -2px;
  width: 20px;
  z-index: 100;
  padding: 5px 0;
  font-size: 20px;
}

#webshop-content .webshop-domain_logo {
  max-width: 105px;
  max-height: 37px;
  -o-object-fit: contain;
  object-fit: contain;
}

#webshop-content .webshop-page-count {
  font-size: 16px;
}

#webshop-content .webshop-navbar {
  overflow: visible;
  background-color: #fff;
  display: table;
  vertical-align: baseline;
  width: 100%;
  margin: 10px 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  /* Dropdown button */
}

#webshop-content .webshop-navbar a {
  float: none;
  font-size: 13px;
  color: #000;
  text-align: center;
  padding: 0;
  text-decoration: none;
}

#webshop-content .webshop-navbar .dropdown {
  border-right: 1px solid #bbb;
  padding: 0;
  float: none;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: auto;
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  height: 42px;
  margin: 0;
}

#webshop-content .webshop-navbar .dropdown:first-child {
  border-left: 1px solid #bbb;
}

#webshop-content .webshop-navbar .dropdown:hover + .dropdown-content {
  display: flex;
}

#webshop-content .webshop-navbar:first-child {
  border-left: 1px solid #bbb;
}

#webshop-content .webshop-navbar .dropbtn {
  padding: 0px;
  text-align: center;
  width: 100%;
  height: 100%;
}

#webshop-content .webshop-navbar .dropbtn .top-level-category {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 3.5em;
}

#webshop-content .webshop-navbar .dropdown-content:hover {
  display: flex;
}

#webshop-content .webshop-navbar .dropdown-content {
  display: none;
  flex-direction: column;
  position: absolute;
  width: 100%;
  left: 0;
  min-height: 170px;
  flex-flow: row wrap;
  align-content: baseline;
  overflow: visible;
  top: 41px;
  padding: 10px 0 10px 10px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  text-align: left;
  z-index: 9;
  border: 1px solid #ccc;
  background: #fff;
}

#webshop-content .webshop-navbar .dropdown-content a {
  float: none;
  font-size: 13px;
  color: #000;
  text-align: start;
  padding: 0 10px;
  margin-left: 10px;
  text-decoration: none;
}

#webshop-content .webshop-navbar .dropdown-content a:hover + commercial_block {
  background: #0b0b0b;
  display: flex;
}

#webshop-content .webshop-navbar .dropdown-content .content-children {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#webshop-content .webshop-navbar .dropdown-content .header {
  flex-direction: row;
  padding: 0 5px;
  color: #000;
  display: flex;
  width: 100%;
}

#webshop-content .webshop-navbar .dropdown-content .header a {
  float: none;
  font-size: 13px;
  color: #000;
  text-align: start;
  padding: 0;
  text-decoration: none;
}

#webshop-content .webshop-navbar .dropdown-content .header:hover h2 {
  cursor: pointer;
  background-color: #e8e8e8;
}

#webshop-content .webshop-navbar .dropdown-content .header:hover h2 a {
  text-decoration: underline;
  color: #dc3545;
  cursor: pointer;
}

#webshop-content .webshop-navbar .dropdown-content .header h2 {
  margin: 0;
  width: 200px;
  padding: 5px 10px;
  margin-left: -15px;
  position: relative;
  font-weight: 600;
}

#webshop-content .webshop-navbar .dropdown-content .header .menu-row {
  background: #0a1520;
  display: none;
  position: absolute;
  top: 0;
  flex-flow: row wrap;
  align-content: baseline;
  overflow-y: visible;
  border-left: 1px solid #ccc;
  width: 100%;
  padding: 5px 10px 0 10px;
  margin-left: 10px;
  background: #fff;
  z-index: 9;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

#webshop-content .webshop-navbar .dropdown-content .header .menu-row a {
  float: none;
  font-size: 13px;
  color: #000;
  text-align: start;
  padding: 0;
  margin-left: 10px;
  text-decoration: none;
}

#webshop-content .webshop-navbar .dropdown-content .header .menu-row .column {
  width: 100%;
  background: #fff;
  padding: 5px 10px;
}

#webshop-content .webshop-navbar .dropdown-content .header .menu-row .column h3 {
  margin: 0;
}

#webshop-content .webshop-navbar .dropdown-content .header .menu-row .column h3 a {
  font-size: 13px;
  font-weight: 500;
}

#webshop-content .webshop-navbar .dropdown-content .header .menu-row .column a {
  float: none;
  font-size: 13px;
  color: black;
  padding: 0;
  text-decoration: none;
  display: block;
  text-align: left;
}

#webshop-content .webshop-navbar .dropdown-content .header .menu-row.half {
  width: calc(50% - 200px);
}

#webshop-content .webshop-navbar .dropdown-content .header .menu-row.half .column {
  width: 50%;
}

#webshop-content .webshop-navbar .dropdown-content .header .menu-arrow {
  position: absolute;
  top: 0px;
  right: -5px;
}

#webshop-content .webshop-navbar .dropdown-content .header .menu-arrow svg {
  width: 25px;
}

#webshop-content .webshop-navbar .dropdown-content .header.half {
  width: 50%;
}

#webshop-content .webshop-navbar .dropdown-content .header.half .menu-row {
  width: calc(50% - 200px);
}

#webshop-content .webshop-navbar .dropdown-content .header.half .menu-row .column {
  width: 50%;
}

#webshop-content .webshop-navbar .dropdown-content .cat_content {
  overflow-y: scroll;
  height: 100%;
  max-height: 100%;
  width: 100%;
}

#webshop-content .webshop-navbar .dropdown-content .cat_content h2 {
  margin-top: 10px;
  font-weight: bold;
}

#webshop-content .webshop-navbar .dropdown-content .cat_content.half {
  width: 50%;
}

#webshop-content .webshop-navbar .dropdown-content .subcats {
  display: flex;
  flex-wrap: wrap;
}

#webshop-content .webshop-navbar .dropdown-content .subcats .column h3 a {
  font-weight: 400;
}

#webshop-content .webshop-navbar .dropdown-content .commercial_block_category {
  background: #fff;
  display: flex;
  justify-content: center;
  width: 100%;
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  padding: 10px;
  overflow: hidden;
}

#webshop-content .webshop-navbar .dropdown-content .commercial_block_category .store-img {
  align-self: center;
}

#webshop-content .webshop-navbar .dropdown .dropbtn {
  font-size: 12px;
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  margin: 0; /* Important for vertical align on mobile phones */
}

#webshop-content .webshop-navbar a:hover,
#webshop-content .dropdown:hover .dropbtn,
#webshop-content .dropdown .dropbtn:hover a,
#webshop-content .webshop-navbar .dropdown .dropbtn.selected,
#webshop-content .webshop-navbar .dropdown .dropbtn.selected a,
#webshop-content .webshop-navbar .dropdown .dropbtn.selected a,
#webshop-content .webshop-navbar .dropdown a.selected {
  color: #dc3545 !important;
  cursor: pointer;
}

#webshop-content .mt-4 {
  margin-top: 4px;
}

#webshop-content .mt-05-rem {
  margin-top: 8px;
}

#webshop-content .mt-15-rem {
  margin-top: 24px;
}

#webshop-content .mb-3 {
  margin-bottom: 3px;
}

#webshop-content .mb-4, #webshop-content .my-4 {
  margin-bottom: 24px !important;
}

#webshop-content .mb-5 {
  margin-bottom: 5px;
}

#webshop-content .mr-3, #webshop-content .mx-3 {
  margin-right: 16px !important;
}

#webshop-content .pl-40 {
  padding-left: 40px;
}

#webshop-content .breadcrumbs {
  padding: 5px 0;
}

#webshop-content .breadcrumbs span {
  line-height: 1em;
  vertical-align: middle;
}

#webshop-content .breadcrumbs a {
  color: #898989;
  font-size: 14px;
}

#webshop-content .breadcrumbs a:hover {
  color: #898989;
  text-decoration: underline;
}

.custom_checkout_box {
  float: right !important;
}

@media (min-width: 576px) {
  #webshop-content .col-sm-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
}
@media (min-width: 768px) {
  #webshop-content .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  #webshop-content .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  #webshop-content .col-md-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  #webshop-content .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  #webshop-content .col-md-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  #webshop-content .justify-content-center {
    justify-content: center !important;
  }
  #webshop-content .col-md-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
}
.webshop-container {
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media screen and (max-width: 992px) {
  #webshop-content .webshop-navbar {
    display: none;
  }
  #webshop-content .webshop-mobile-menu {
    display: block;
  }
  #webshop-content .webshop-mobile-menu .webshop-sub-category {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  #webshop-content .webshop-row.products-listing.container-webshop-product-list-view .condition-webshop-row {
    display: block;
  }
  #webshop-content .webshop-row.products-listing.container-webshop-product-list-view .condition-webshop-row .webshop-image-block {
    float: left;
    padding-right: 10px;
  }
  #webshop-content .webshop-row.products-listing.container-webshop-product-list-view .condition-webshop-row .card-body.webshop-price-block {
    float: left;
    padding: 0;
  }
  #webshop-content .product_images_block {
    width: 300px;
    flex-direction: row-reverse;
    flex-wrap: wrap-reverse;
  }
  #webshop-content .media.product-page {
    flex-wrap: wrap;
  }
  #webshop-content #webshop-products .product_images {
    margin-top: 0px;
    width: 100%;
    padding: 0 20px;
  }
  #webshop-content #webshop-products .selected_image {
    text-align: center;
    max-width: 100%;
    width: 100%;
  }
  #webshop-content #webshop-products .webshop-sort-select,
  #webshop-content #webshop-products .webshop-products-view-options,
  #webshop-content #webshop-products .webshop-page-count {
    width: auto;
  }
  #webshop-content .jumbotron > .webshop-row {
    display: inline-block;
  }
  #webshop-content .jumbotron > .webshop-row .webshop-row {
    flex-wrap: wrap;
  }
  #webshop-content .jumbotron > .webshop-row .seller-img, #webshop-content .jumbotron > .webshop-row .store-img, #webshop-content .jumbotron > .webshop-row .seller-name, #webshop-content .jumbotron > .webshop-row .store-name {
    text-align: center;
    margin: 0 auto;
    width: 150px;
    max-width: 150px;
    max-height: 150px;
    -o-object-fit: contain;
    object-fit: contain;
  }
  #webshop-content .jumbotron > .webshop-row > div {
    width: 100%;
    padding: 0;
  }
  #webshop-content .webshop-product-list-view .card .webshop-ptitle-block {
    width: 100%;
  }
}
@media screen and (max-width: 575px) {
  #webshop-content .product_images_block {
    width: 100%;
  }
  #webshop-content #webshop-top-bar .col-md-2,
  #webshop-content #webshop-top-bar .col-md-10 {
    flex: 1;
    max-width: 100%;
  }
  .webshop-page-count {
    display: none;
  }
  #webshop-content .webshop-hamburger-menu {
    display: block;
    width: 37px;
    height: 37px;
    cursor: pointer;
  }
  .custom_checkout_box {
    width: 100% !important;
    margin-top: 10px;
  }
}
@media screen and (max-width: 452px) {
  #webshop-content .webshop-row.products-listing {
    display: flex;
    grid-gap: 0;
  }
  #webshop-content .webshop-product-item {
    width: 50%;
    box-sizing: border-box;
  }
  #webshop-content .webshop-image-block {
    width: 100% !important;
    text-align: center;
  }
  #webshop-content .webshop-image-block img {
    width: 100%;
  }
  #webshop-content .webshop-row.products-listing.container-webshop-product-list-view .condition-webshop-row .card-body.webshop-price-block {
    padding: 0 10px 10px 10px !important;
  }
  #webshop-content .webshop-row.products-listing.container-webshop-product-list-view .condition-webshop-row .card-body.webshop-price-block .price {
    margin-top: 0;
  }
  #webshop-content .webshop-ptitle-block {
    clear: both;
    text-align: center;
    padding-bottom: 0px;
  }
  #webshop-content .webshop-ptitle-block p {
    margin-bottom: 0px;
  }
  #webshop-content .webshop-ptitle-block .prod-description {
    display: none;
  }
  #webshop-content .webshop-product-list-view .card .webshop-price-block {
    max-width: 100%;
  }
  #webshop-content .webshop-product-list-view .card .webshop-price-block .price {
    text-align: center;
    margin-bottom: 0px;
  }
  #webshop-content .webshop-product-list-view .card .webshop-price-block .prod-description {
    display: block;
    font-size: 13px;
    text-align: center;
    margin-bottom: 5px;
  }
  #webshop-content #webshop-top-bar .top-bar-left {
    width: 100px;
  }
  #webshop-content #webshop-top-bar .top-bar-right, #webshop-content #webshop-top-bar .top-bar-right.with-custom-block {
    width: calc(100% - 110px);
    margin-right: 0px;
  }
  #webshop-content .webshop-domain_logo {
    max-width: 55px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .custom_logo {
    width: 100%;
  }
  #webshop-content .category-title {
    font-size: 15px;
  }
  #webshop-content .top-bar-custom-html {
    display: none;
  }
  #webshop-content li.page-item {
    display: none;
  }
  #webshop-content .page-item:first-child,
  #webshop-content .page-item:nth-child(2),
  #webshop-content .page-item:nth-last-child(2),
  #webshop-content .page-item:last-child,
  #webshop-content .page-item.active,
  #webshop-content .page-item.disabled {
    display: block;
  }
}
.container {
  margin: auto;
}

body {
  background-color: white !important;
}

.webshop-product-list-view.condition-webshop-row,
.register-container,
.login-container,
.selected_image img,
.media-seller-shop,
.media-auction,
#webshop-content .card {
  border-radius: 10px;
  box-shadow: 4px 3px 7px 2px #ddd;
}

.media-auction,
.media-seller-shop {
  border: 1px solid lightgray;
}

.card-img-top {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.webshop-product-list-view.condition-webshop-row,
.register-container,
.login-container,
.commercial_block {
  background-color: white;
  border: 1px solid lightgrey;
  border-radius: 10px;
  padding: 7px;
  margin-top: 15px;
}

#webshop-top-bar {
  background-color: white;
  border: 1px solid #eee;
  border-bottom: 0px solid white;
  border-right: 0px solid white;
}

#custom-header-separator {
  display: none;
}

#webshop-content .webshop-navbar {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

#webshop-content .webshop-navbar .dropdown {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
}

#webshop-content .webshop-navbar .dropdown:first-child {
  border-left: 1px solid #eee;
  border-bottom-left-radius: 10px;
}

.last-dropdown {
  border-right: 1px solid #eee;
  border-bottom-right-radius: 10px;
}

#webshop-content .price {
  text-align: right;
}

.custom_logo {
  margin-right: 0px !important;
}

.searchbar-large {
  margin-right: 25px !important;
  width: 50% !important;
}

.product-name-label {
  max-width: none !important;
}

#webshop-content .product_images_block {
  display: block;
}

.product_images {
  margin-top: 25px !important;
}

.dropbtn a:hover,
a:hover {
  text-decoration: none !important;
}

.product_images,
.selected_image img {
  width: 100% !important;
}

.login-container,
.media-body,
.jumbotron,
.media-auction,
.media-seller-shop {
  background-color: white !important;
}

.table-at-store {
  margin-left: 25px;
}

#webshop-content .price-or-discount .price {
  font-size: 30px;
}

#webshop-content #webshop-products .product_images img {
  border-radius: 10px;
}

#webshop-top-bar {
  box-shadow: 4px 7px 7px 2px #ddd;
}

.webshop-navbar {
  z-index: 999;
  box-shadow: 4px 7px 7px 2px #ddd;
}

#webshop-content #webshop-products .media-body {
  padding-top: 25px;
}

.showroom-store-name {
  font-family: "Kanit", sans-serif !important;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  padding-left: 10px !important;
  text-align: center;
}

.header-left {
  margin-left: 15px;
  margin-right: 15px;
}

.mb-3.input-group.searchbar-large {
  width: 50% !important;
  flex-grow: 0 !important;
}

.showroom-footer {
  width: 100%;
  background-color: white;
  bottom: 0;
  text-align: center;
}

.col-sm-6.custom_block {
  margin-top: 30px;
  margin-bottom: 30px;
}

.custom_block {
  padding-right: 0px !important;
}

.webshop-product-img {
  border-radius: 10px !important;
}

.custom_continue_btn,
.sidebar_checkout {
  background-color: white !important;
  border-radius: 10px !important;
  z-index: 9999;
  box-shadow: 4px 7px 7px 2px #ddd;
  position: relative;
}

.shopping-cart,
.checkout-form {
  background-color: white;
  border-radius: 10px !important;
  box-shadow: 4px 7px 7px 2px #ddd;
}

.totalprice {
  background-color: #c2e1c5 !important;
  box-shadow: 4px 7px 7px 2px #ddd;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  border-bottom: 1px solid #bcbcbc !important;
}

.custom_checkout_btn,
.cancel-button {
  box-shadow: 4px 7px 7px 2px #ddd;
  border: 1px solid #eee !important;
  border-radius: 10px !important;
}

.apply-border,
.shopping-cart {
  border: 1px solid #eee !important;
}

.media-seller-shop .jumbotron {
  box-shadow: none !important;
  border: 0px none white !important;
  border-radius: none !important;
}

.custom_continue_btn {
  color: green !important;
}

.all-container {
  background-color: #f5f5f5 !important;
}

.no-orders-container,
.account-form-container,
.reset-pass-container,
.no-products-container,
.shipping-container,
.order-container {
  background-color: white;
  border: 1px solid #eee !important;
  border-radius: 10px !important;
  box-shadow: 4px 7px 7px 2px #ddd;
}

.service-block {
  border-radius: 10px;
  border-color: #eee !important;
}

.no-orders-container,
.no-products-container {
  min-height: 400px;
  position: relative;
}

.no-orders-container p,
.no-products-container p {
  top: 50%;
  left: 50%;
  position: absolute;
  margin: 0;
  transform: translate(-50%, -50%);
  font-size: large;
}

.icons-container {
  display: flex;
  justify-content: space-between;
}

.webshop-hamburger-menu,
.webshop-cross {
  margin-left: 10px;
  font-size: 1.8em;
}

.green {
  color: #009402;
}

.auction-popup {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  margin-inline: auto !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  z-index: 5;
  height: 250px;
  display: none;
}

.auction-top {
  display: flex;
  justify-content: space-between;
}

.auction-close {
  cursor: pointer;
  font-weight: 900;
}

.auction-body {
  padding-top: 20px;
}

.view-blocker {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
  z-index: 4;
  position: absolute !important;
}

#auction-input {
  text-align: right;
}

.result-view {
  display: none;
}

.success {
  color: #009402 !important;
}

.offer-text,
.error {
  color: red !important;
}

.auction-offer {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

.offer-text {
  margin-left: 10px;
  font-weight: 600;
}

.auction-offer-button {
  cursor: pointer;
  border: none;
  background-color: rgb(213, 232, 212) !important;
  padding: 10px;
  border: solid;
  border-width: 1px;
  border-color: rgb(147, 192, 144);
  border-radius: 4px;
}

.auction-offer-button:hover {
  color: black !important;
}

.btn-cancel {
  background-color: blue !important;
  color: white !important;
}

/* Showroom tags layer. Renders only when products.tags is populated; the blades
   emit no wrapper at all when it is empty, so none of this costs layout space.

   Every selector is qualified with #webshop-content, which is not cosmetic: the
   showroom topbar partial emits `#webshop-content a { color: black }` inline in
   the BODY, and embed.css pins `#webshop-content h2`. Both are (1,0,1) and beat a
   bare class, so unscoped rules here lost their colour and heading sizing
   outright. Scoped they are (1,1,0), which wins on specificity rather than on
   source order.

   Values read the showroom theme's custom properties where one is active and fall
   back to the unthemed palette otherwise. */
#webshop-content .webshop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

#webshop-content .webshop-tag {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--sr-accent, #ddd);
  border-radius: var(--sr-radius, 10px);
  background-color: transparent;
  color: var(--sr-text, #000);
  font-size: 12px;
  line-height: 1.6;
  text-decoration: none;
}

#webshop-content .webshop-tag:hover {
  border-color: var(--sr-primary, #009402);
  color: var(--sr-primary, #009402);
  text-decoration: none;
}

#webshop-content .webshop-tag-active {
  border-color: var(--sr-primary, #009402);
  background-color: var(--sr-primary, #009402);
  color: #fff;
}

#webshop-content .webshop-tag-clear {
  border-style: dashed;
}

#webshop-content .webshop-similar {
  margin-top: 32px;
}

#webshop-content .webshop-similar-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--sr-text, #000);
}

#webshop-content .webshop-similar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

#webshop-content .webshop-similar-item {
  display: block;
  color: var(--sr-text, #000);
  text-decoration: none;
}

#webshop-content .webshop-similar-item:hover {
  text-decoration: none;
}

#webshop-content .webshop-similar-img {
  width: 100%;
  height: 140px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: var(--sr-radius, 10px);
}

#webshop-content .webshop-similar-name {
  display: block;
  font-size: 13px;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#webshop-content .webshop-similar-price {
  display: block;
  font-size: 13px;
  font-weight: bold;
  color: var(--sr-primary, #009402);
}

/* Showroom store location. Renders only when the store row has a usable address
   or coordinates; the blade emits no wrapper otherwise, so this costs no layout.

   Every selector is qualified with #webshop-content for the same reason as the
   tags layer: the showroom topbar emits `#webshop-content a { color: black }`
   inline in the body at (1,0,1), which beats a bare class. */
#webshop-content .webshop-location {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 16px 0 24px;
  padding: 14px 16px;
  border: 1px solid var(--sr-accent, #eee);
  border-radius: var(--sr-radius, 10px);
  background-color: transparent;
}

#webshop-content .webshop-location-pin {
  flex: 0 0 auto;
  color: var(--sr-primary, #009402);
  line-height: 0;
}

#webshop-content .webshop-location-body {
  flex: 1 1 auto;
  min-width: 0;
}

#webshop-content .webshop-location-address {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: bold;
  color: var(--sr-text, #000);
}

#webshop-content .webshop-location-hours {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  font-size: 13px;
  color: var(--sr-text, #000);
}

#webshop-content .webshop-location-hours li {
  margin: 0;
}

#webshop-content .webshop-location-link {
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
  color: var(--sr-primary, #009402);
  text-decoration: underline;
}

#webshop-content .webshop-location-link:hover {
  color: var(--sr-primary, #009402);
}

@media (max-width: 575px) {
  #webshop-content .webshop-location {
    margin: 12px 0 16px;
  }
}

/* Touch targets, phones and tablets.

   Bounded at 1023px on purpose. The controls it grows — the search field and its
   button, the sort select, product titles, breadcrumbs, seller names — are shared
   with verkkokauppa and the main storefront, and this is not an invitation to
   restyle those at desktop widths. Below 1024px, where the pointer is a finger,
   the existing sizes are simply wrong: measured on the showroom they ranged from
   16px to 38px tall against the 44px minimum. 1024px rather than 768px because
   768px is iPad portrait, which is as much a touch device as a phone.

   The showroom-only components (tag chips, the location link, the category
   panel) are sized in their own blocks above and apply at every width. */
@media (max-width: 1023px) {
  #webshop-content .webshop-global-search.form-control,
  #webshop-content .webshop-product-search.form-control,
  #webshop-content .form-control.webshop-products-sort {
    min-height: 44px;
    /* 16px exactly: below that, iOS Safari zooms the page when the field takes
       focus and the visitor has to pinch back out. */
    font-size: 16px;
  }

  #webshop-content .search-button.btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* The seller name under a tile, and the seller heading link.

     flex, not inline-flex: an inline-flex box takes its intrinsic content width
     and stops shrinking, which pushed the list-layout presets 101px off the side
     of a 375px screen. Block-level flex fills the space it is given and shrinks
     with its parent; min-width:0 on the child lets the text itself wrap. */
  /* The anchor itself is display:inline around a block <p>, so its own box is a
     sliver even though the tappable area is the whole paragraph. block makes the
     anchor's box match what a finger can actually hit. */
  #webshop-content .webshop-price-block a {
    display: block;
  }

  #webshop-content .webshop-price-block a > .card-text,
  #webshop-content h1.seller-name a {
    display: flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #webshop-content .breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-right: 4px;
  }
}

/* Showroom components, every width: these render only on the showroom, so
   growing them cannot reach another storefront. */
#webshop-content .webshop-tag {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}

#webshop-content .webshop-location-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (max-width: 1023px) {
  #webshop-content .webshop-tag {
    min-height: 44px;
  }
}

/* Tag chips: one horizontally scrollable row below the sidebar breakpoint.

   The store filter offers up to ProductTags::FILTER_LIMIT (30) chips. Wrapped at
   375px, and 44px tall each for touch, that is a 230px block of chips before any
   product — more screen than the products themselves. One row that swipes keeps
   every chip reachable without spending the fold on them. */
@media (max-width: 1023px) {
  #webshop-content .webshop-tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  #webshop-content .webshop-tags::-webkit-scrollbar {
    display: none;
  }

  #webshop-content .webshop-tag {
    flex: 0 0 auto;
  }
}

/* Keeping products above the fold below the sidebar breakpoint.

   Two blocks were spending a whole phone screen before the first product. */
@media (max-width: 1023px) {
  /* The seller header was 570px tall at 375px for a name, an avatar and three
     short fields. 55px of that was padding reserving space for a share button
     that has been commented out in the markup for years, and 150px was an
     avatar that does not need to be that big on a phone. */
  #webshop-content .jumbotron {
    padding: 14px;
    margin: 12px 0;
  }

  #webshop-content .store-name,
  #webshop-content .seller-name {
    padding-bottom: 0;
    margin: 6px 0 4px;
    font-size: 22px;
    line-height: 1.25;
  }

  #webshop-content .seller-img,
  #webshop-content .store-img,
  #webshop-content .jumbotron > .webshop-row .seller-img,
  #webshop-content .jumbotron > .webshop-row .store-img {
    width: 88px;
    max-width: 88px;
  }

  #webshop-content .seller-img img,
  #webshop-content .store-img img {
    width: 88px;
    height: 88px;
    max-width: 88px;
    max-height: 88px;
  }
}

/* Tile for a product with no photo.

   Matches the height of the image band so a photo-less tile sits level with its
   neighbours in the grid instead of collapsing to its title, and carries the
   theme's own surface and radius so it reads as a deliberate blank rather than
   an image that failed to load. */
#webshop-content .webshop-product-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 210px;
  background-color: var(--sr-background, #f2f2f2);
  border: 1px dashed var(--sr-accent, #d8d8d8);
  border-radius: var(--sr-radius, 10px);
  box-sizing: border-box;
}

#webshop-content .webshop-product-noimg svg {
  width: 34px;
  height: 34px;
  fill: var(--sr-text, #9a9a9a);
  opacity: 0.28;
}

/* Phone product grid.

   embed.css lays the listing out as `repeat(auto-fill, 210px)` with tiles fixed
   at 210px wide. At 375px that is one column with 150px of the screen unused,
   so a phone shows barely more than one product at a time. Two fluid columns
   show four.

   Kept to 767px: the list-layout presets override display on their own scope and
   are unaffected, and from 768px up the fixed 210px track already yields three
   or more columns. */
@media (max-width: 767px) {
  /* display:grid is stated here on purpose: embed.css:1776 switches the listing
     to flex below 452px and sizes the tile at width:50%. Setting only the
     columns left that flex rule in charge, and the tile then took the full row.
     One grid definition for the whole phone range replaces both. */
  #webshop-content .webshop-row.products-listing {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 12px;
    gap: 12px;
  }

  #webshop-content .webshop-product-item {
    width: auto;
    max-width: none !important;
    box-sizing: border-box;
  }

  #webshop-content .webshop-product-img,
  #webshop-content .webshop-product-noimg {
    height: 150px;
  }

  #webshop-content .webshop-ptitle-block .h5 {
    font-size: 14px;
  }
}

/* Product tile titles: two lines, using the width of the card.

   The listing blades each carry an inline `.product-name-label { max-width:150px;
   white-space:nowrap; text-overflow:ellipsis }`. On the fixture that looked fine
   because the seeded titles are short. On a real store it is not: 55 of KUUL's
   165 available titles are longer than 150px holds, so the listing was a column
   of "Het dikke verjaardagsbo…".

   Stated at every width, not inside a breakpoint — the clamp used to be phone-only
   and 1024px+ fell back to the blades' nowrap rule, which is where the truncation
   was actually seen. Specificity (1,2,0) beats the blades' (0,1,0), so their rule
   is inert rather than removed; it lives in four files per storefront.

   min-height keeps the tile grid aligned when one title wraps and its neighbour
   does not, and doubles as the touch target. */
#webshop-content .product-name-label.products-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: none;
  white-space: normal;
  min-height: 44px;
}

/* Pagination. 165 products is nine pages, so this is a primary control, and at
   38x35 it was under the touch minimum on every one of them. */
@media (max-width: 1023px) {
  #webshop-content .page-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Social links on seller and product pages. The icon itself is a 23px SVG with
   its size set inline, so the hit area grows around it rather than scaling it —
   the anchor was 22x23. Fixture sellers have no social URLs, so these only
   appear on real data. */
@media (max-width: 1023px) {
  #webshop-content .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* Showroom store identity: the store's own logo, or its name.

   The header used to show the generic ShowRoom wordmark for every store with the
   name in small type beneath it, so nothing above the fold said which shop you
   were in. Both branches are themed: the logo sits on the theme's surface so a
   transparent PNG does not vanish on a dark preset, and the name takes the
   heading font and text colour. */
#webshop-content .webshop-store-identity-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

#webshop-content .webshop-store-identity-link:hover {
  text-decoration: none;
}

/* The legacy header clamps its mark hard — .custom_logo is height:37px and
   #webshop-content .webshop-domain_logo is max-height:37px, both sized for a
   small platform wordmark. A store's own logo is the primary identifier on the
   page and needs more than 37px, so the container is released too. */
#webshop-content .webshop-store-identity {
  height: auto;
  max-height: none;
}

#webshop-content .webshop-store-logo {
  max-width: 190px;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* A logo is usually a transparent PNG drawn in one colour. On midnight or any
     other dark preset that is an invisible mark, so it gets the card surface and
     a little padding rather than the page ground. */
  background-color: var(--sr-surface, transparent);
  border-radius: var(--sr-radius, 0);
  padding: 2px 4px;
  box-sizing: border-box;
}

/* The store name, when there is no logo to show instead. */
#webshop-content .webshop-store-identity .showroom-store-name {
  padding-left: 0 !important;
  text-align: left;
  font-size: 22px;
  line-height: 1.2;
}

/* The store's own description, above its shelf. */
#webshop-content .webshop-store-intro {
  margin: 12px 0 4px;
  color: var(--sr-text, #000);
}

#webshop-content .webshop-store-intro p {
  margin: 0;
  max-width: 70ch;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.85;
  overflow-wrap: anywhere;
}

/* On a phone the intro must not push the first product off the screen: three
   lines, then it stops. The full text is on the store's own site. */
@media (max-width: 767px) {
  #webshop-content .webshop-store-intro p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
  }

  #webshop-content .webshop-store-logo {
    max-width: 130px;
    max-height: 48px;
  }
}

/* Store identity inside the LEGACY header bar (main-tier presentation domains).

   The showroom header carries only the mark; this one packs a search field, a
   profile menu and a cart into the same row. Measured at 375px the row is
   already 436px wide before any of this — a 62px overflow that predates the
   feature — so the identity here is clamped to the exact footprint of the mark
   it replaces (.custom_logo is height:37px) rather than the showroom's 64px.
   Turning the presentation on then costs the row nothing. The unsuffixed
   .webshop-store-identity rules above are the showroom's and are untouched. */
#webshop-content .webshop-store-identity-inline {
  height: 37px;
  max-height: 37px;
}

#webshop-content .webshop-store-identity-inline .webshop-store-logo {
  max-height: 37px;
  padding: 0;
}

#webshop-content .webshop-store-identity-inline .showroom-store-name {
  font-size: 16px;
  line-height: 37px;
}

/* The dense header clamps the identity box to 37px to keep the row's width, but
   the link inside it is still a tap target: give it 44px of height and pull the
   extra back with negative block margin, so the hit area grows without moving
   anything around it. */
#webshop-content .webshop-store-identity-inline .webshop-store-identity-link {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  margin-top: -4px;
  margin-bottom: -4px;
}