/*
	Theme Name:   Savoy Child
	Theme URI:    http://themeforest.net/item/savoy-minimalist-ajax-woocommerce-theme/12537825
	Description:  Savoy child theme
	Author:       NordicMade
	Author URI:   http://www.nordicmade.com
	Template:     savoy
	Version:      1.0
*/


/* Child theme CSS
--------------------------------------------------------------- */


.ai-summary-box {
  padding: 15px;
  background: #f1f1f1;
  border-left: 4px solid #016adb;
  font-style: normal;
  min-height: 100px;
  margin-bottom: 30px;
  border-radius: 6px;
}

h2.listing-h2.gen-summary {
  margin: 0px;
}





ins.adsbygoogle {
  text-align: center;
}



.bike-variations.swiper-container {
  width: 100%;
  padding: 20px 0;
}

.bike-variations .swiper-wrapper {
  display: flex;
}

.bike-variations .swiper-slide {
  width: auto;
  box-sizing: border-box;
  flex-shrink: 0;
}

.bike-variations .swiper-button-prev,
.bike-variations .swiper-button-next {
  color: #000;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}


.two-col-row p,
p.bike-variation-price {
  font-style: normal;
}

.nm-main-menu .menu-currency-switcher {
  margin-top: 8px;
}


/* Homepage */

/* Card */
.homepage-card {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  border: 1px solid #e5e5e5;
  /* 👈 light grey solid border */
  background-color: #ffffff;
  padding: 12px;

  transition: background-color 0.2s ease;
}

/* Image */
.homepage-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Text */
.homepage-card p {
  margin: 10px 0 0;
  font-weight: bold;
  font-size: 16px;
}

/* Hover */
.homepage-card:hover {
  background-color: #f5f5f5;
  /* 👈 subtle hover */
}

h3.homepage-hero {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  padding-bottom: 20px;
}

/* Mobile */
@media (max-width: 768px) {

  .homepage-cards,
  .homepage-hero {
    display: none;
  }
}




.page-id-2598 input.sf-input-text {
  font-size: 20px;
  line-height: 30px;
  width: 500px;
  border-radius: 12px;
  box-shadow: rgba(229, 229, 229, 0.8) 0px 2px 4px 0px inset;
  padding: 15px;
}

.page-id-2598 .searchandfilter ul li {
  padding: 0 !important;
  margin: 0;
  border-bottom: none !important;
}

.search-suggestions a {
  text-decoration: underline;
  margin: 0px !important;
}

h2.intro-text {
  font-size: 55px
}

@media (max-width: 600px) {
  .page-id-2598 input.sf-input-text {
    width: 100%;
    font-size: 20px;
    line-height: 30px;
  }

  .page-id-2598 .searchandfilter label {
    width: 100%;
  }

  h2.intro-text {
    font-size: 22px
  }
}


/* Comparison page styles  */
.bike-compare {
  display: flex;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.bike-column {
  flex: 1;
  border: 1px solid #e5e5e5;
  padding: 16px;
  background: #fff;
  box-sizing: border-box;
  border-radius: 15px;
}

.bike-column img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 16px;
}

.bike-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-top: 1px solid #f0f0f0;
  font-size: 14px;
}

.bike-row:first-of-type {
  border-top: none;
}

.bike-row .label {
  color: #777;
}

.bike-row .value {
  font-weight: 500;
}

@media (max-width: 768px) {
  .bike-compare {
    flex-direction: column;
  }
}

button.place-sidebar-button-favourites.compare-all:disabled {
  background-color: #B5C7E6;
  /* muted blue / grey */
  color: #FFFFFF;
  border-color: #B5C7E6;
  cursor: not-allowed;
  opacity: 0.6;
}


button.place-sidebar-button-favourites.compare-all {
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1em;
  color: #FFFFFF;
  background-color: #006ADB;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #006ADB;
  border-radius: 6px;
  padding: 16px 0px;
  /* width: 100%; */
  text-align: center;
  transition: all .3s;
  padding: 15px;
  border: none;
  margin: 0 auto;
}

.product-comparison-container.favorites {
  max-width: 1200px;
  margin: 0 auto;
  /* centres it */
}


.no-results a {
  color: #287bff;
}

.comparison-button-container {
  text-align: center;
}

.comparison-table-container {
  overflow-x: auto;
  margin: 0 auto;
  padding-bottom: 50px;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.comparison-table th,
.comparison-table td {
  padding: 5px;
  border: 1px solid #ddd;
  width: 250px;
}

.comparison-table th {
  background-color: #f8f8f8;
}

.comparison-table a {
  text-decoration: none;
  color: #0073aa;
}

td.table-left {
  font-weight: 600;
  color: #6e6e6e;
}

.comparison-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.comparison-tabs a {
  text-decoration: none;
  padding: 10px 15px;
  margin: 0 10px;
  background: #f0f0f0;
  border-radius: 6px;
  font-weight: bold;
  color: #333;
}

.comparison-tabs a.active {
  background: #287bff;
  color: white;
}



/* Places styles  */
h3.listing-h3 {
  font-size: 16px;
  font-weight: 600;
}


@media (max-width: 768px) {
  .single-place .thumbnail-container .quarter {
    flex: 1;
    max-width: calc(100% / 3 - 10px);
    height: auto;
    object-fit: cover;
  }

  .single-place .thumbnail-container {
    flex-direction: row;
    flex-flow: nowrap !important;
  }

  .single-place .parent-container .child-container:first-child img {
    object-fit: cover !important;
  }

}

.single-place .admin-company-name {
  border: none !important;
  padding-bottom: 0px;
  margin-bottom: 0px;

}

.single-place .thumbnail-container {
  flex-direction: row;
}

.become-member {
  text-align: center;
  padding: 10px 0px;
}


.single-place .child-container {
  flex-direction: column !important;
}

.single-place .main-image-container {
  margin: 0px 0px 10px 0px;
}

.single-place .main-image-container img {
  padding: 0px !important;
}

.parent-container .child-container:first-child img {
  border-radius: 3px !important;
}



.collapsible-container {
  margin-top: 10px;
}

.collapsible {
  background: none;
  border: none !important;
  padding: 0px;
}

.collapsible:hover {
  color: #006ADB;
}

.collapsible-content {
  display: none;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-top: 5px;
  background-color: #f9f9f9;
}

.qr-code-section {
  margin-top: 20px;
}

.qr-code-section img {
  width: 200px;
  height: auto;
  margin-top: 10px;
}


.qr-status {
  text-align: center;
  padding: 20px;
  border-radius: 6px;
  margin: 30px auto;
  max-width: 400px;
  font-size: 18px;
}

.qr-status.success {
  background-color: #e0fbe0;
  border: 2px solid #28a745;
  color: #155724;
}

.qr-status.error {
  background-color: #fdeaea;
  border: 2px solid #dc3545;
  color: #721c24;
}

.qr-status h2 {
  font-size: 24px;
}

.scan-another:hover {
  background-color: #0056b3;
}

div#qr-code-container {
  /* margin: 0 auto; */
  /* align-items: center; */
  text-align: center;
}



.entry-content {
  max-width: 800px;
}

body.page-id-2416 .entry-content,
body.page-id-2645 .entry-content {
  max-width: 100% !important;
}

.parent-container {
  display: flex;
  margin: auto;
  max-width: 1220px;
  position: relative;
  padding: 10px 0px;
}

/* Main image container */
.main-image-container {
  flex: 6;
  display: flex;
  justify-content: center;
  align-items: center;
}


.main-image-container img {
  width: 100%;
  height: auto;
}

.thumbnail-container {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-y: auto;
  /* Allows vertical scrolling if thumbnails exceed height */
}

/* Thumbnail images */
.thumbnail-container .quarter img {
  width: 100%;
  height: auto;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid #dfdcdc
}

img.mfp-img {
  background: #f5f5f5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .parent-container {
    flex-direction: column;
  }
}

.sizing-container {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.sizing-buttons {
  display: flex;
}

h1.listing-h1 {
  font-size: 20px;
  font-weight: 700;
}






/* 
Singe bikes
*/

.wheel-variations,
.frame-variations,
.bike-variations {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 10px;
  column-gap: 10px;
  width: 100%;
  margin-bottom: 20px;
}

.variation-item {
  flex: 0 0 calc(20% - 16px);
  border: 1px solid rgb(221, 221, 221);
  border-radius: 15px;
  box-shadow: rgb(0 0 0 / 8%) 0px 3px 8px;
  padding: 10px;
  flex: 1;
  margin: 5px;
}

.variation-item:hover {
  box-shadow: rgb(0 0 0 / 15%) 0px 3px 8px;
  transition: .2s;
}

.variation-item img {
  border-radius: 6px;
  min-height: 160px;
  max-height: 160px;
  object-fit: contain;
}

.variation-item h3 {
  font-size: 15px;
  color: #222222 !important;
  text-align: left;
  width: 100%;
  padding-bottom: 5px;
  margin-top: 10px;
  min-height: 50px;
}

p.variation-price,
p.bike-variation-price {
  margin: 0px;
  font-weight: 600;
  margin-bottom: 10px;
}

.bike-navigation {
  width: 100%;
  margin: 0 auto;
  border-bottom: 1px solid #e1e1e1;
  border-top: 1px solid #e1e1e1;
  margin-bottom: 20px;
  background-color: #f5f5f594;
}

.sizing-buttons a {
  font-weight: 400;
  text-transform: capitalize;
  color: #FFFFFF;
  border-radius: 6px;
  padding: 0px 15px;
  text-align: center;
  transition: all .3s;

}

.frame-sizes h3 {
  margin-bottom: 0px;
  padding-bottom: 0px !important;
}

#navbar {
  display: block;
  justify-content: flex-start;
  max-width: 1220px;
  margin: 0 auto;
  height: 40px;
  width: 1220px;
  margin: 0 auto;
  height: 100%;
  padding: 5px 5px 5px 0px;
  font-size: 14px;
}

#navbar button {
  background: transparent;
  border: none;
  /* border-radius: 3px !important; */
  overflow-wrap: break-word !important;
  padding: 5px 10px !important;
  margin-left: 10px;
  cursor: pointer;
  margin: 3px;
  color: #525252;
  font-size: 13px !important;
}

#navbar button:hover {
  color: #000000;
  transition: .2s;
}

nav#navbar p {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 0px;
  display: inline-block;
}


.two-col-block.bikes {
  flex-basis: calc(100%) !important;
}

@media screen and (max-width: 768px) {
  .bike-navigation {
    display: none
  }


}

@media screen and (min-width: 768px) {
  .variation-item {
    max-width: 25%;
  }
}




/* 
Favorites page and button
*/

.card-image img {
  object-fit: contain;
  border-radius: 3px 3px 0px 0px;
  max-height: 200px;
}

.page-template-favorites-page-template .card-container {
  max-width: 1700px;
  margin: 0 auto;
  padding: 0px 10px;
}

.result-count-favorites,
.no-results {
  margin: 0px auto;
  width: 100%;
  text-align: center;
  padding-top: 50px;
  font-size: 20px;
  padding-bottom: 20px;
}

button.simplefavorite-button.active {
  color: #FFFFFF;
  background-color: #006ADB;
  padding: 8px 10px;
  width: 100%;
  transition: all .3s;
  border-radius: 6px;
  border: none;
  opacity: 1;
  min-width: 100px;
  padding: 16px 0px;
  margin-top: 10px;
  font-size: 16px;
}

button.simplefavorite-button {
  color: #FFFFFF;
  background-color: #a7a7a7;
  padding: 8px 10px;
  width: 100%;
  transition: all .3s;
  border-radius: 6px;
  border: none;
  opacity: 1;
  min-width: 100px;
  padding: 16px 0px;
  margin-top: 10px;
  cursor: pointer;
}


/* 
Header styles 
*/
.nm-mobile-menu-main.col-xs-12 {
  padding-top: 30px;
}

.nm-header-col {
  display: flex !important;
}

.nm-header.default .nm-main-menu {
  width: 100%;
  flex-direction: column;
}

li#menu-item-2695,
li#menu-item-3153,
li#menu-item-2477,
li#menu-item-3124,
li#menu-item-3120,
li#menu-item-3207,
li#menu-item-3117,
li#menu-item-6366 {
  float: right;
}

.nm-main-menu>ul {
  width: 100%;
}

li#menu-item-2477 a,
li#menu-item-3120 a {
  font-weight: 400;
  /* text-transform: capitalize; */
  color: #FFFFFF;
  background-color: #006ADB;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #006ADB;
  border-radius: 6px;
  text-align: center;
  transition: all .3s;
  color: white !important;
}

@media screen and (max-width: 768px) {

  li.menu-currency-switcher {
    padding: 10px 0px;
  }
}




/* 
Registration and login styles  
*/

ul.user-registration-error {
  max-width: 600px;
  margin: 25px auto;
}

.registration-message-prompt {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 30px;
  line-height: normal;
  margin-bottom: 15px;
}

.registration-message-prompt img {
  max-height: 30px;
}

.page-template-my-account .nm-page-wrap-inner {
  position: relative;
  width: 100%;
  padding: 10px;
}

.ur-frontend-form {
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 2px 20px rgba(45, 53, 89, 0.1);
}

#user-registration.horizontal,
#user-registration {
  box-shadow: 0 2px 20px rgba(45, 53, 89, 0.1);
  margin: 0 auto;
  max-width: 600px;
}

.login-register-swap {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.login-register-swap a {
  text-decoration: underline;
  color: #287bff;
  padding-left: 5px;
}

p.user-registration-register.register {
  display: none;
}

button.btn.button.ur-submit-button,
input.user-registration-Button.button {
  font-size: 18px;
  font-weight: 400;
  line-height: 1em;
  color: #FFFFFF !important;
  background-color: #006ADB !important;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #006ADB;
  border-radius: 6px;
  text-align: center;
  transition: all .3s;
  display: inline-block;
  margin: 0 auto;
}



/* 
Global Styles  
*/

.pagination {
  display: none;
}

.analytics-container {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  max-width: 1220px;
  align-items: center;
  margin: 0 auto;
  border: 1px solid rgb(221, 221, 221);
  border-radius: 15px;
  box-shadow: rgb(0 0 0 / 7%) 0px 6px 16px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.analytics-item {
  text-align: center;
}

.analytics-label {
  font-weight: bold;
  margin-bottom: 10px;
}

/* Updated number styling with animation */
.analytics-number {
  font-size: 24px;
  color: #287cff;
  /* Animation */
  animation: popIn 0.5s ease-out forwards;
  transform: scale(0);
  /* Start scaled down */
}

/* Keyframes for the pop-in effect */
@keyframes popIn {
  0% {
    transform: scale(0);
    /* Start small */
    opacity: 0;
    /* Start transparent */
  }

  80% {
    transform: scale(1.2);
    /* Scale up a bit larger than normal */
    opacity: 1;
  }

  100% {
    transform: scale(1);
    /* Return to normal size */
  }
}

.single-frame section,
.single-wheel section {
  align-items: center;
  width: 100%;
}

.related-content {
  padding: 0px 10px;
}

.card-container.related {
  margin: 20px;
  max-width: 1220px;
  display: flex;
  align-items: center;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 50px;
}

h2.listing-h2.related {
  text-align: center;
  border-top: 1px solid #d6d6d6;
  padding-top: 30px;
}

p.comparison-price {
  margin-bottom: 0px;
}

a.post-edit-link {
  color: #FFFFFF;
  background-color: #006ADB;
  padding: 8px 10px;
  width: 100%;
  transition: all .3s;
  border-radius: 6px;
}

a.post-edit-link:hover {
  background-color: #006fe5;
  color: white;
}

.edit-post-button {
  text-align: center;
}



#content-container {
  display: flex;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0px 10px;
  margin-bottom: 75px;
}

#main-content {
  flex-grow: 1;
  /* This will allow main-content to take up the rest of the space after assigning 350px to sidebar */
}


#custom-sidebar {
  flex-shrink: 0;
  /* This prevents the sidebar from shrinking smaller than 350px */
  width: 350px;
}

@media screen and (max-width: 768px) {

  /* This is a common breakpoint for tablets and smaller devices */
  #content-container {
    flex-direction: column;
    margin: 0px 10px;
  }

  #main-content,
  #custom-sidebar {
    width: 100%;
    /* On small screens, the main content and sidebar will stack and each take up 100% of the width */
  }
}




/* filter styles for all listings */

.searchandfilter ul li li {
  padding: 0px 0;
  border: none;
}

/* Tag badge */
.bikkerr-tags {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  /* row instead of column */
  gap: 6px;
  align-items: center;
}


.bikkerr-tag {
  display: inline-block;
  width: fit-content;

  padding: 0 8px;
  min-height: 23px;
  line-height: 21px;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgb(5, 80, 92);
  background-color: rgba(213, 245, 246, 0.7);
  border: 1px solid rgba(213, 245, 246, 0.8);
  border-radius: 6px;
  box-sizing: border-box;
}


.sf-field-submit input[type="submit"] {
  border-radius: 6px;
}

input.sf-input-range-number {
  border-radius: 3px !important;
  position: relative;
  display: flex;
  width: 100%;
}

.searchandfilter .noUi-connect {
  background-color: #c7c7c7;
}

input.sf-input-text,
.sf-input-select {
  background-color: var(--f-mkcy-f);
  border-radius: 6px;
  transition: box-shadow 0.2s var(--itr-yy-z);
  border: 1px solid #ddd;
}


/* Style for tabs on home and custom post type */
.tabs-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 6px;
}

/* Hide all form elements */
.tabs-main .searchandfilter li {
  display: none !important;
}

/* Show only the search field element */
.tabs-main .searchandfilter li.sf-field-search {
  display: block !important;
  width: 100%;
  text-align: center;
  border: none;
  margin: 0px !important;
  padding: 0px;
}

.tabs-main .searchandfilter li.sf-field-search input {
  margin: 0 auto;
  display: block;
  margin: 0;
  padding: 0;
  border: 1px solid #dddddd;
  vertical-align: top;
  height: 50px;
  border-radius: 6px;
  color: rgb(82, 82, 82);
  font-size: 18px;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  /* text-align: center; */
  width: 100%;
  padding-left: 20px;
}

.tabs-main .searchandfilter label {
  min-width: 300px
}

.tab-button {
  padding: 0px 5px;
  text-align: center;
  box-sizing: border-box;
  flex: 0 0 14%;
  background: white;
  opacity: 0.5;
  transition: opacity 0.3s, border-bottom 0.3s;
  border-bottom: 3px solid white;
  max-width: 90px;
}

.tab-button:hover {
  opacity: 1;
  border-bottom: 3px solid #e8e8e8;
}

.tab-button.active {
  opacity: 1;
}

.tabs-main {
  width: 100%;
  margin-top: 25px;
}

.tab-button img {
  max-width: 100%;
  max-height: 30px;
}

.tab-button span {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  margin-top: 0px;
}


@media (max-width: 600px) {
  .tab-button {
    flex-basis: 100%;
    border-right: none;
    border-bottom: 1px solid #000;
  }

  .tab-button:last-child {
    border-bottom: none;
  }
}


.frame-sizes,
.frame-description,
.in-the-box {
  padding: 10px;
  border: 1px solid rgb(221, 221, 221) !important;
  width: 100%;
  border-radius: 12px;
}


/* main CTA button styles */
a.bpbm-pm-button.extra-class {
  font-size: 18px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1em;
  color: #FFFFFF !important;
  background-color: #006ADB !important;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #006ADB;
  border-radius: 6px;
  padding: 16px 0px !important;
  width: 100%;
  text-align: center;
  transition: all .3s;
  display: inline-block;
}

a.bpbm-pm-button.extra-class:hover {
  font-size: 18px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1em;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #006ADB;
  padding: 16px 0px;
  width: 100%;
  text-align: center;
  color: #467FF7;
  background-color: #02010100;
  transition: all .3s;
}

.redirect-product {
  width: 100%;
}

/* Secondary CTA button styles */
.place-discount-section {
  line-height: 25px;
  padding: 20px 0px;
  border-top: 1px solid rgb(221, 221, 221) !important;
  margin-top: 10px;
}


a.inline-link {
  color: #006ADB;
}

.redirect-product a,
a.place-sidebar-button {
  font-size: 18px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1em;
  color: #006ADB;
  background-color: #ffffff;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #006ADB;
  border-radius: 6px;
  padding: 16px 0px;
  width: 100%;
  text-align: center;
  transition: all .3s;
  display: block;
}

.redirect-product a.manufacturer-website-white {
  font-size: 18px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1em;
  color: #006ADB;
  background-color: #ffffff;
  border-style: solid;
  border-width: 1px;
  border-color: #006ADB;
  border-radius: 6px;
  padding: 16px;
  text-align: center;
  transition: all .3s;
  display: block;
  position: relative;
  /* Needed for absolute positioning of the pseudo-element */
}

.redirect-product a.manufacturer-website-blue {
  position: relative;
  /* Needed for absolute positioning of the pseudo-element */
}

.redirect-product a.manufacturer-website-blue::after {
  content: "";
  position: absolute;
  right: 65px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background-image: url(/wp-content/uploads/2024/03/outgoing-link-blue.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


/* Secondary CTA button styles hover */
.redirect-product a:hover {
  font-size: 18px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1em;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #006ADB;
  width: 100%;
  text-align: center;
  color: #467FF7;
  background-color: #e4e4e454;
  transition: all .3s;
}


/* Single wheel page */
button.compare-related-bike-button {
  color: #FFFFFF;
  background-color: #006ADB;
  padding: 5px 10px;
  transition: all .3s;
  border-radius: 6px;
  border: none;
  width: 100%;
}

button.compare-related-bike-button:hover {
  background-color: #004ba5;
  cursor: pointer;
  transition: all .3s;
}

.product-comparison-container {
  padding: 30px 0px;
}

.product-comparison-container h3 {
  font-size: 18px;
  padding-bottom: 10px;
}

button#compare-products,
button#compare-wheels {
  min-height: 40px;
}


select#select-brand,
select#select-products {
  -webkit-box-align: center;
  align-items: center;
  cursor: default;
  min-height: 10px;
  transition: background-color 200msease -in-out, border-color 200msease -in-out;
}

/* Single frame page - Sidebar styles */

.hero {
  display: flex;
}


#custom-sidebar {
  top: 0;
  position: relative !important;
  width: 33.33333333333333% !important;
  margin-right: 0% !important;
}

.sidebar-box {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid rgb(221, 221, 221);
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px;
  flex-direction: column;
}

.section {
  flex: 1;
  margin: 5px 0;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.section1 {
  display: flex;
}

.section.section2 {
  line-height: 23px;
}

.claimed .section.section1,
.claimed .section.section2,
.claimed .section.section3 .unclaimed .section.section1,
.unclaimed .section.section2,
.unclaimed .section.section3,
.admin-company-name {
  margin-bottom: 20px;
}

.unclaimed .redirect-product a {
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1em;
  color: #FFFFFF;
  background-color: #006ADB;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #006ADB;
  border-radius: 6px;
  padding: 16px 0px;
  width: 100%;
  text-align: center;
  transition: all .3s;
}

.company-name,
.verification-status {
  flex: 1;
}

.info-fields a {
  text-decoration: underline;
}

.company-name img {
  max-height: 80px;
}

.company-name {
  text-align: left;
}

.verification-status {
  text-align: right;
}

.verified-container {
  display: flex;
  align-items: center;
  /* vertically align the text and the image in the middle */
  justify-content: flex-end;
  /* push content to the right side */
}

.verified-container p {
  margin-bottom: 0px;
}

.verification-badge {
  height: 25px;
  width: 25px;
  margin-left: 10px;
  /* add some space between the text and the image */
}

.section-two {
  display: flex;
  /* This makes its children (the image and info fields) sit side by side. */
  align-items: center;
  /* Vertically centers the children */
}

.profile-image img {
  width: auto;
  height: 100px;
  /* Set height of the image */
}

.info-fields {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.name-field,
.location-field,
.activity-field {
  height: 33.33%;
  /* Split the container's height in three */
  display: flex;
  align-items: center;
  /* Vertically center the text inside each field */
  margin: 0;
  /* Removes default margin of the <p> tag */
}

.price-container {
  display: flex;
  justify-content: space-between;
  /* This will separate the label and the value to the farthest ends. */
  align-items: center;
  padding: 5px 0;
  /* some padding for better appearance */
  width: 100%;
}

.price-label {
  font-weight: bold;
}

.price-value {
  font-size: 16px;
  /* adjust as needed */
  color: #333;
  /* adjust color as needed */
}

#box2 {
  position: fixed;
  bottom: 0;
  left: 0px;
  width: 100%;
  background-color: rgb(255, 255, 255);
  z-index: 100000;
  border-top: 1px solid #c8c8c8;
  padding: 10px;
  margin: 0 auto;
  width: 100%;
}

.floating-mobile-buttons {
  display: flex;
  justify-content: space-between;
  /* Space out buttons */
}

.floating-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0px;
}

.product-price-container,
.floating-mobile-buttons {
  width: 100%;
  /* Ensures full width within their parent */
}

.mobile-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 15px;
}


p.price-comparison {
  line-height: 1.3;
  color: rgb(113, 113, 113) !important;
}

.price-comparison strong {
  font-weight: bold;
  font-weight: 900;
  color: #000;
}

.floating-mobile-buttons {
  display: flex;
  justify-content: center;
  /* Centers buttons in the container */
}

.sticky-frame-box {
  flex: 1;
  text-align: center;
}

.sticky-frame-box {
  flex: 1;
  /* Gives equal width and space distribution */
  text-align: center;
  /* Center the text or button within each box */
  margin: 0 5px;
  /* Optional: Adds a little space between buttons */
}

.sticky-frame-box a,
.sticky-frame-box a.bpbm-pm-button.extra-class {
  font-size: 14px;
}

.claim-listing {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 0 auto;
  justify-content: center;
}

.claim-listing a {
  color: #878787;
  background: #7fffd400;
  text-decoration: underline;
}

.product-price-container {
  display: flex;
  flex-direction: column;
}

.product-price {
  display: flex;
  padding-bottom: 5px;
}

span.price {
  font-size: 18px;
}

.currency-switcher {
  padding: 10px 0px;
}

select#currency {
  border-radius: 6px;
  font-size: 12px;
  padding: 5px 20px;
}

.price-label,
.price-value {
  margin: 0;
  /* Remove default paragraph margins */
}

/* 
Section 1
Single frame page - Main frame features section  
*/

span.sidebar-key-stats-label {
  font-weight: 600;
  color: #282828;
  font-size: 16px;
  line-height: 16px;
  padding-right: 5px;
}

span.sidebar-key-stats-value {
  color: #797979;
}

.published-date-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  max-width: 1220px;
  width: 100%;
  margin: 0 auto;
  padding: 0px 10px;
}

h2.listing-h2 {
  font-size: 22px;
  max-width: 1220px;
  margin: 0 auto;
  margin-top: 30px;
  padding-bottom: 5px;
  font-weight: 600;
}

.feature-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
  /* adjust as needed */
  padding-top: 40px;
}

.feature-block {
  flex-basis: calc(50% - 10px);
  /* adjust as needed */
  margin-bottom: 20px;
  /* adjust as needed */
}

.feature-content {
  display: flex;
  align-items: center;
  /* to align the items vertically in the middle */
}

.feature-content img,
.two-col-block img {
  max-width: 30px;
  padding-right: 5px;
}

.feature-text {
  /* styles for the text container, if needed */
}

.feature-block h3,
.two-col-block {
  font-size: 16px;
}

.feature-block p {
  /* styles for your secondary paragraph text */
}

@media (max-width: 768px) {
  .feature-block {
    flex-basis: 100%;
  }

  select#select-brand,
  select#select-wheel {
    width: 100%;
    margin: 10px 0px;
  }

  .feature-content {
    flex-direction: column;
    /* stacks the image and the text vertically on smaller screens */
  }

  .two-col-block {
    min-height: 51px;
  }
}


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

.inline-content-three {
  display: flex;
  flex-direction: column;
}

.icon-container {
  width: 30px;
  display: flex;
  align-items: center;
  /* This will vertically center the image */
  justify-content: center;
  /* This will horizontally center the image */
}

.text-container {
  flex: 1;
  /* This makes it take up the remaining width */
  margin-left: 10px;
  /* Some space between the image and text */
}

#two-col-features {
  max-width: 1200px;
  margin: 0 auto;
}

.two-col-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
  /* adjust as needed */
}

.three-col-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}

.two-col-block {
  flex-basis: calc(50% - 10px);
  border: 1px solid rgb(221, 221, 221) !important;
  border-radius: 6px !important;
  height: 100% !important;
  overflow-wrap: break-word !important;
  padding: 5px 15px !important;
  margin-bottom: 15px;
}

.three-col-block {
  flex-basis: calc(33.33% - 10px);
  border: 1px solid rgb(221, 221, 221) !important;
  border-radius: 3px !important;
  height: 100% !important;
  overflow-wrap: break-word !important;
  padding: 5px 15px !important;
  margin-bottom: 15px;
  flex-direction: column;
}

.three-col-block img {
  max-width: 30px;
  margin: 5px 0px;
}

.two-col-block h3,
.three-col-block h3 {
  font-size: 16px;
  color: #222222;
  font-weight: 600;
}

.two-col-block p,
.three-col-block p {
  margin: 0px;
  font-size: 14px;
  color: rgb(113, 113, 113) !important;
  line-height: 1.3;
}

.frame-sizes span,
.in-the-box span {
  border: 1px solid rgb(221, 221, 221) !important;
  padding: 5px 10px;
  margin-right: 5px;
  border-radius: 6px;
  display: inline-block;
  margin: 5px;
}

.frame-sizes h3,
.product-description h3 {
  font-size: 16px;
  padding: 15px 0px;
}

.product-description a {
  color: #006ADB;
}

div#description-popup {
  max-width: 900px;
  padding: 30px;
}


.image-container {
  display: flex;
  flex-wrap: wrap;
  /* Allows images to wrap onto the next line as the screen gets smaller */
  gap: 15px;
  /* Provides a gap between the items */
  justify-content: flex-start;
  /* Aligns items to the left. Can be changed to 'center' if you want centered alignment */
}

.image-container a {
  position: relative;
  flex-basis: calc(15% - 0px);
}

.image-container img {
  display: block;
  height: 117px;
  object-fit: cover;
  object-position: center;
}


@media (max-width: 768px) {
  .two-col-block {
    flex-basis: calc(100% - 10px);
  }
}

@media (min-width: 768px) {

  .parent-container {
    padding-right: 20px;
  }
}





/* 
Single frame page - Comes with section 
*/
#main-frame-details {
  /* Set the width of the section as per your requirement */
  width: 100%;

}

/* Styling for What's in the box */
.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* auto-fill will create as many columns as can fit without stretching the items, and minmax(200px, 1fr) will make the items at least 200px wide but allow them to grow to fill available space. */
}

.grid-item {
  /* flex-basis: calc(33.33% - 10px); */
  border: 1px solid rgb(221, 221, 221) !important;
  border-radius: 3px !important;
  /* height: 100% !important; */
  /* overflow-wrap: break-word !important; */
  padding: 5px 16px !important;
  color: #222222;
}


.pricingTable-firstTable_table__options {
  text-align: left;
}

/* For screens smaller than 600px */
@media only screen and (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr;
    /* This will make it a single column on small screens. */
  }
}

/* For screens between 600px and 900px */
@media only screen and (min-width: 601px) and (max-width: 900px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    /* This will make it a two column layout on medium screens. */
  }
}

/* For screens larger than 900px */
@media only screen and (min-width: 901px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
    /* This will make it a two column layout on large screens. */
  }
}


/* 
Hero styling for listing pages
*/



.child-container {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  flex-direction: column;
}



.parent-container .child-container:first-child img {
  width: auto;
  height: 100%;
  width: 100%;
  object-fit: contain;
  background: #f5f5f5
}


.view-all-link {
  position: absolute;
  background: #fff;
  bottom: 15px;
  right: 25px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 15px;
  cursor: pointer;
}

.white-popup,
.fork-pop-up {
  max-width: 1220px;
  /* max-height: 800px; */
  position: relative;
  background: #FFF;
  padding: 10px;
  width: auto;
  margin: 20px auto;
  /* overflow-y: auto; */
}

.popup-images {
  overflow-y: auto;
  max-width: 1220px;
  max-height: 800px;
  position: relative;
}

.white-popup img {
  padding-bottom: 20px;
  width: 100%;
}

a.popup-link {
  text-decoration: underline;
}

.mfp-wrap {
  position: relative;
  /* Needed for the close button to position relative to the modal */
}

@media (max-width: 769px) {}





/* 
Sizes
*/
.grid-container-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.grid-item-sizes {
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  border: 1px solid rgb(221, 221, 221) !important;
  border-radius: 3px !important;
  padding: 5px 16px !important;
  color: #222222;
}

/* 
Message seller popup
*/
.bm-button {
  font-size: 18px !important;
  line-height: 14px !important;
  padding: 10px 25px !important;
  border-radius: 3px !important;
  border: none !important;
  line-height: 1em;
  color: #FFFFFF;
  background-color: #006ADB !important;
  background: #006ADB !important;
  padding: 16px 0px;
  text-align: center;
  transition: all .3s;
  display: inline-block;
}

.bm-modal-window {
  background: #ffffffd6;
}

.bm-modal-window input[type="text"] {
  font-size: 16px;
  padding: 10px;
  border-radius: 6px;
}

span.bp-better-messages-unread.bpbmuc.bpbmuc-hide-when-null.bpbmuc-preserve-space {
  background: #006ADB;
}

/* 
custom listing pages
*/

.my-listings-container {
  padding: 0px 10px;
}

.page-id-2564 .nm-row {
  max-width: 2000px;
}


div#post-2564,
div#post-2598,
.search-filter-container {
  /* add the other post types in here */
  display: flex;
  max-width: 2000px;
  margin: 0 auto;
  padding-top: 30px;
}

.sidebar-filters {
  flex: 0 0 250px;
  margin-right: 30px;
  /* Fixed width of 250px for the sidebar */
}

.main-content-filters {
  flex: 1;
  /* Takes up the remaining space */
  /* Additional main content styles */
}

.card-container,
.card-container-listing {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 20px;
  column-gap: 20px;
  width: 100%;
  margin-bottom: 20px;
}

.related-posts-container .card-container {
  justify-content: center !important;
}

.card-container-listing {
  max-width: 1220px;
  margin: 0 auto;
}

.frame-listing-card {
  box-sizing: border-box;
  text-align: center;
  background: white;
  flex: 0 0 100%;
  flex-shrink: 0;
  flex-grow: 0;
  cursor: pointer !important;
  border-radius: 15px;
  border: 1px solid rgb(221, 221, 221);
  box-shadow: rgb(0 0 0 / 8%) 0px 6px 16px;
  position: relative;

}

p.release-date {
  padding: 0px !important;
  margin: 0px !important;
  text-align: left;
  font-size: 12px;
}

.title-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1220px;
  width: 100%;
  margin: 0 auto;
  padding-top: 30px;
  padding-left: 10px;
  padding-right: 10px;
}

h2.listing-title {
  font-size: 15px;
  color: #222222 !important;
  text-align: left;
  width: 100%;
  padding-bottom: 5px;
}

.frame-listing-card img {
  margin-bottom: 12px;
  width: 100%;
  object-fit: contain;
  border-radius: 3px 3px 0px 0px;
  max-height: 280px;
  min-height: 280px;
  cursor: pointer;
}

p.listing-card-detail.price {
  font-size: 16px;
  text-decoration: underline;
}

.listing-card-detail strong {
  color: #222222;
}

.frame-listing-card:hover {
  border-color: #d7d7d7;
  transition: 0.5s;
}

.searchandfilter {
  flex: 1 0 20%;
  padding: 1em;
}

.searchandfilter ul li {
  padding: 20px 0;
  margin: 0;
  border-bottom: 1px solid #e0e0e0;
}

.result-count {
  display: none;
}

/* Only display the .sf-field-search */
.search-filter-results {
  flex: 1 0 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 2em;
}

.container {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 20px 15px 20px;
}

p.listing-card-detail {
  font-size: 12px;
  margin: 0px;
  padding: 0px;
}

.column {
  flex: 50%;
  box-sizing: border-box;
  text-align: left;
}

.sticky-button {
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 1000;
  cursor: pointer;
  font-size: 18px;
  font-weight: 400;
  line-height: 1em;
  color: #FFFFFF;
  background-color: #006ADB;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #006ADB;
  border-radius: 6px;
  padding: 12px 0px;
  text-align: center;
  transition: all .3s;
}

.sticky-button:hover {
  background-color: #555;
}

.post-info-container {
  max-width: 700px;
  margin: 0 auto;
  padding-top: 50px;
}

.page-template-my-listings,
.author {
  max-width: 2000px;
  margin: 0 auto;
}

/* My listings page */
.page-template-my-listing .card-container {
  padding: 20px;
}

h3.my-listings {
  width: 100%;
}

a.upgrade-button {
  font-size: 18px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1em;
  color: #FFFFFF;
  background-color: #006ADB;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #006ADB;
  border-radius: 6px;
  padding: 10px 0px;
  width: 150px;
  text-align: center;
  transition: all .3s;
  margin: 0 auto;
}

.edit-listing-button {
  width: 100%;
  text-align: left;
  margin-top: 10px;
}






/* Author Page */

.author {
  height: 100%;
}

#content-container-author {
  display: flex;
  max-width: 2000px;
  margin: 0 auto;
  padding: 0px 10px;
  margin-bottom: 100px;
  margin-top: 50px;
}

.author-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  min-width: 1000px;
  justify-items: center;
  margin: 30px auto;
}

#custom-sidebar-author {
  top: 0;
  position: relative !important;
  margin-left: 30px;
  margin-right: 0% !important;
  flex-shrink: 0;
  width: 350px;
}

.hero {
  display: flex;
}


span.listing-year-brand {
  display: block;
  font-size: 16px;
  color: #626262;
  font-weight: normal;
}

span.listing-model {
  font-size: 25px;
  color: #313131;
}

@media (max-width: 767px) {
  .search-filter-container .sidebar-filters {
    display: none;
  }

  .hero {
    flex-direction: column;
  }

}

@media (min-width: 550px) {
  .frame-listing-card {
    flex: 0 0 calc(50% - 10px);
    /* 2 columns */
  }
}

@media (min-width: 1100px) {
  .frame-listing-card {
    flex: 0 0 calc(33.33% - 13.33px);
  }

  /* 3 columns */
}

@media (min-width: 1400px) {
  .frame-listing-card {
    flex: 0 0 calc(25% - 15px);
    /* 4 columns */
  }
}

@media (min-width: 1640px) {
  .frame-listing-card {
    flex: 0 0 calc(20% - 16px);
    /* 5 columns */
  }
}

@media (min-width: 1640px) {

  .single-frame .frame-listing-card,
  .single-wheel .frame-listing-card {
    flex: 0 0 calc(25% - 16px) !important;
    /* 5 columns */
  }
}

@media (max-width: 769px) {
  #navbar button {
    padding: 5px 10px !important;
    margin: 3px;
    font-size: 12px;
  }

  .search-filter-container .sidebar-filters {
    display: none;
  }

  h2.listing-h1 {
    font-size: 20px;
  }

  h2.listing-h2 {
    font-size: 18px;
  }

  #custom-sidebar {
    top: 0;
    width: 100% !important;
    margin-left: 0px;
    margin-right: 0% !important;
  }

  div#box1 .section4 {
    display: none;
  }

  .sidebar-box .redirect-product {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99999;
    padding: 10px;
    background: white;
    border-top: 1px solid #ddd;
  }

  .price-value {
    font-size: 16px;
    color: #333;
    font-weight: 600;
  }

  a.pmpro_btn {
    font-size: 16px !important;
    width: 100% !important;
  }

  .title-section {
    display: flex;
    flex-direction: column;
  }

  .variation-item {
    flex: 0 0 calc(50% - 16px);
  }

}

.admin-company-name p {
  margin-bottom: 0px;
}

a.view-all-brand,
a.view-all-brand:hover {
  color: #006ADB;
  text-decoration: underline;
  margin: 0px;
  padding: 0px;
}


@media (min-width: 769px) {

  .title-section .listing-h1,
  .title-section .published-date-container {
    flex: 1;
  }

  a.popup-link.view-all-link.sticky-button,
  #box2 {
    display: none;
  }

  section#listing-section\ mobile-price {
    display: none;
  }
}



/*/////////////////////////// Display none ///////////////////////////*/

.user-registration-profile-header {
  display: none;
}

.tab-button-related {
  padding: 10px 20px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  cursor: pointer;
  font-weight: 600;
  border-radius: 4px;
  margin: 5px;
}

.tab-button-related.active {
  background: #fff;
  border-bottom: 2px solid #216adb;
}

.tab-content {
  display: none;
  border-top: 1px solid #ccc;
  background: #fff;
}

.tab-content.active {
  display: block;
}


@media (min-width: 769px) {
  .simple-tabs {
    margin-top: 20px;
  }

  .tab-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
  }

}





.product-comparison-container {
  background: #fff;
  padding: 20px 0px;
  margin-top: 20px;
  font-family: sans-serif;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  max-width: 100%;
  overflow-x: auto;
}

.product-comparison-container h3 {
  font-size: 20px;
  font-weight: 600;
}

.product-comparison-container label {
  display: block;
  margin-top: 10px;
  font-weight: 500;
}

.product-comparison-container select {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

#comparison-preview table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

#comparison-preview th,
#comparison-preview td {
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
  text-align: left;
}

#comparison-preview th {
  background: #f9f9f9;
  font-weight: 600;
  color: #333;
  font-size: 14px;
  border-top: 1px solid #ddd;
}

#comparison-preview td img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#compare-bikes {
  margin-top: 15px;
  background-color: #006ADB;
  color: #fff;
  font-weight: bold;
  border: none;
  padding: 10px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#compare-bikes:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

#compare-bikes:hover:enabled {
  background-color: #0058b5;
  ;
}

.select-comparison {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.select-comparison-column {
  flex: 1 1 50%;
}





/* Compare row at bottom of listing cards */
.frame-listing-card .card-compare-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Keep the compare UI in one line */
.frame-listing-card .card-compare-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Kill weird margins from whatever the shortcode outputs */
.frame-listing-card .card-compare-checkbox,
.frame-listing-card .card-compare-checkbox * {
  margin: 0 !important;
}

/* Prevent shortcode output from becoming full width / breaking the layout */
.frame-listing-card .card-compare-checkbox {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.frame-listing-card .card-compare-text {
  font-size: 16px;
  line-height: 1;
}




/* ------------------------------------------- Brand Pages -------------------------------------------  */
.ebike-brand-page {
  max-width: 2000px;
  margin: 0 auto;
  padding: 20px;
}

header.ebike-brand-header {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 0px;
}

.ebike-brand-page .bikkerr-tag-brand {
  display: inline-block;
  width: fit-content;
  padding: 0 8px;
  min-height: 23px;
  line-height: 21px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgb(5, 80, 92);
  border: 1px solid rgb(192 226 227 / 80%);
  background-color: rgba(213, 245, 246, 0.7);
  border-radius: 6px;
  box-sizing: border-box;
}

.bikkerr-tag {
  background-color: rgb(239 239 239 / 70%);
  border: 1px solid rgb(206 209 209 / 100%);
}

.ebike-range-title {
  display: inline;
}

.ebike-range-badge {
  text-align: left;
}

.ebike-highlight {
  text-align: left;
}

small.small-info {
  font-size: 13px;
}

.brand-view-switcher {
  margin: 15px 0 25px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.switcher-label {
  font-weight: 600;
  margin-right: 6px;
}

.switcher-link {
  display: inline-block;
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #f7f7f7;
  text-decoration: none;
  transition: all 0.2s ease;
}

.switcher-link:hover {
  background: #eaeaea;
}

.switcher-link.active {
  background: rgb(5, 80, 92);
  color: #fff;
  border-color: rgb(5, 80, 92);
}

.ebike-watts-value.bikkerr-tag-brand {
  margin-left: 10px;
}

/* ------------------------------------------- Bike picker pages -------------------------------------------  */


/* =========================
   E-Bike Picker Page Layout
   ========================= */


.bike-picker-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.bike-picker-steps {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.bike-step {
  padding: 10px 12px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
}

.bike-step.active {
  border-color: #111;
}

/* Card */
.bike-picker-card {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 18px;
}

/* =========================
   Dropdown Row (centered)
   ========================= */

.select-comparison {
  /* Center the whole dropdown block */
  max-width: 760px;
  /* tweak this to taste (700–900) */
  margin: 0 auto;

  display: flex;
  gap: 14px;
  align-items: flex-end;
  justify-content: center;

  flex-wrap: nowrap;
  /* keep side-by-side on desktop */
}

.select-comparison-column {
  flex: 1;
  /* equal width columns */
  min-width: 0;
  /* prevents overflow issues */
}

.select-comparison-column label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
}

.select-comparison-column select {
  width: 100%;
  /* ensures equal widths */
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
}

/* Remove uneven sizing rule (important) */
/* #picker-ebike { min-width: 360px; } */

/* =========================
   Actions
   ========================= */

.picker-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  /* centered buttons */
  flex-wrap: wrap;
  margin-top: 12px;
}

.picker-reset {
  padding: 10px 14px;
  border: 1px solid #ddd;
  background: #fff;
  color: #111;
  border-radius: 10px;
  text-decoration: none;
}

/* Keep your hero layout intact if it relies on site CSS */
.bike-picker-hero-wrap {
  margin-top: 16px;
}

.bikkerr-tag-variations {
  display: inline-block;
  width: fit-content;
  padding: 0 8px;
  min-height: 23px;
  line-height: 21px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgb(5, 80, 92);
  border: 1px solid rgb(192 226 227 / 80%);
  background-color: rgba(213, 245, 246, 0.7);
  border-radius: 6px;
  box-sizing: border-box;
}


/* =========================
   Responsive
   ========================= */

@media (max-width: 900px) {
  .select-comparison {
    max-width: 100%;
    flex-wrap: wrap;
    /* allow wrap when tight */
  }

  .select-comparison-column {
    flex: 1 1 320px;
    /* still 2 columns if space, else wrap */
  }
}

@media (max-width: 640px) {
  .select-comparison {
    flex-direction: column;
    /* stack on mobile */
    gap: 12px;
    align-items: stretch;
  }

  .select-comparison-column {
    width: 100%;
  }

  .picker-actions {
    justify-content: stretch;
  }

  .picker-actions button,
  .picker-actions a {
    width: 100%;
    text-align: center;
  }
}

/* ------------------------------------------- Single ebike -------------------------------------------  */

/* Delta tags (Better Value cards) */
.variation-deltas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 10px;
}

/* Base tag styling */
.delta-tag {
  display: inline-block;
  width: fit-content;
  padding: 0 8px;
  min-height: 23px;
  line-height: 21px;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  border-radius: 6px;
  box-sizing: border-box;
  font-style: normal;
  font-weight: normal;
}

/* Same (grey) */
.delta-tag--same {
  color: rgb(5, 80, 92);
  border: 1px solid rgb(234 234 234 / 80%);
  background-color: rgb(238 238 238 / 70%);
}

/* Better (green) */
.delta-tag--better {
  color: #0b6e2e;
  border: 1px solid rgb(175 230 197 / 60%);
  background-color: rgb(164 255 200 / 22%);
}

/* Worse (red) */
.delta-tag--worse {
  color: #c44747;
  border: 1px solid rgb(237 209 209 / 60%);
  background-color: rgb(255 149 149 / 12%);
}

  span.better-price {
    background-color: #ecfff3;
    padding: 5px;
    border: 1px solid #c8f0d8;
    color: #040404 !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
  }

  p.bike-variation-price-value {
    font-style: normal;
    font-weight: 600;
    padding-right: 10px;
  }




  /* ------------------------------------------- Search and filter -------------------------------------------  */

  .search-filter-field * {
    box-sizing: border-box;
    font-size: 14px !important;
}

.search-filter-input-checkbox {
    padding: 0px;
    margin-top: 8px;
}

.search-filter-label {
    font-weight: 700;
    font-size: 15px !important;
    margin: 0px 0px 0px 0px !important;
}

.search-filter-field {
    padding: 15px 0px;
    border-bottom: 1px solid #e5e5e5;
}

.search-filter-input-text.search-filter-input-text.search-filter-field__input {
    border-radius: 6px;
}

.search-filter-component-combobox-base {     
border-radius: 6px;
}

.search-filter-component-combobox .search-filter-component-combobox__actions input[type=text] {
 font-size: 14px !important 
}

.search-filter-component-combobox-base__listbox-option {
    font-size: 14px !important;
}