/* ========================================================================== */
/* ABOJABAA BIKE | Clean consolidated CSS | 2026-10-18                      */
/* Source: user-provided live CSS (including tested CLS stabilization rules). */
/* Declaration order / values preserved intentionally to keep appearance.     */
/* Paired JavaScript file skips duplicate base styling; header rules retained */
/* ========================================================================== */

/* === Variables ========================================================== */
:root {
  --abo-gold: #f5c432;
  --abo-dark: #181c1b;
  --color-primary: #e7b728;
  --color-primary-reverse: #141716;
}

body.index {
  background: var(--abo-dark);
}

.store-header .top-navbar,.store-header #mainnav {
  background: var(--abo-gold) !important;
  color: #141716;
}

.store-header .top-navbar {
  border-bottom: 1px solid #171a1920;
}

.store-header .s-search-input {
  background: #fff9 !important;
  color: #222 !important;
  border: 1px solid #171a1920;
}

.navbar-brand img {
  max-height: 76px !important;
  width: auto !important;
  max-width: 220px !important;
}

.store-header .s-cart-summary-total {
  color: #171a19;
}

.abo-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 13px 20px;
  background: #111514;
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
  overflow: auto;
  scrollbar-width: none;
}

.abo-nav a:hover {
  color: var(--abo-gold);
}


/* === Home sections ====================================================== */
#abo-home {
  color: #fff;
  width: 100%;
  overflow: hidden;
}

#abo-home * {
  box-sizing: border-box;
}

#abo-home a:focus-visible,#abo-home button:focus-visible {
  outline: 3px solid var(--abo-gold);
  outline-offset: 4px;
}

#abo-home section {
  scroll-margin-top: 130px;
}

.abo-wrap {
  max-width: 1340px;
  width: calc(100% - 80px);
  margin: 0 auto;
}

.abo-section {
  padding: 48px 0;
}

.abo-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  margin: 0 0 35px;
  line-height: 1.6;
}

.abo-title:before,.abo-title:after {
  content: "";
  height: 1px;
  background: #c4a630;
  flex: 1;
  max-width: 440px;
}

.abo-subtitle {
  text-align: center;
  color: #c5c8c6;
  margin: -18px 0 30px;
  font-size: 16px;
}


/* === Home hero slider ==================================================== */
.abo-hero {
  position: relative;
  margin: 36px auto 0;
  width: 100%;
  max-width: 1600px;
  overflow: hidden;
  background: #10251c;
}

.abo-hero-slide {
  display: none;
}

.abo-hero-slide.is-active {
  display: block;
  animation: aboFade .65s ease;
}

.abo-hero-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440/567;
  object-fit: contain;
}

.abo-hero-controls {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  padding: 0 20px;
}

.abo-hero-controls button {
  pointer-events: auto;
  border: 1px solid #fff6;
  background: #171b1980;
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 30px;
  display: grid;
  place-items: center;
}

.abo-dots {
  position: absolute;
  bottom: 13px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.abo-dot {
  width: 9px;
  height: 9px;
  background: #ffffff70;
  border-radius: 8px;
  border: 0;
}

.abo-dot.is-active {
  background: var(--abo-gold);
  width: 28px;
}

.abo-pause {
  position: absolute;
  left: 20px;
  bottom: 10px;
  background: #171b1990;
  color: #fff;
  border: 1px solid #fff6;
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 11px;
}


/* === Categories, banners, product cards and other home blocks ============ */
.abo-categories {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 34px;
  max-width: 970px;
  margin: auto;
  text-align: center;
}

.abo-categories img {
  width: 100%;
  max-width: 294px;
  transition: transform .25s;
}

.abo-categories a:hover img {
  transform: translateY(-5px);
}

.abo-categories small {
  display: block;
  color: #d3d5d3;
  margin-top: 9px;
  font-size: 12px;
}

.abo-banner {
  display: block;
  width: 100%;
  margin: 0 auto 40px;
  max-width: 1600px;
}

.abo-banner img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.abo-products {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #f5c432 #ffffff12;
  padding: 4px 2px 18px;
  direction: rtl;
  touch-action: pan-x pan-y;
}

.abo-products>custom-salla-product-card {
  flex: 0 0 calc((100% - 72px)/4);
  min-width: 0;
  scroll-snap-align: start;
  background: #fff;
  color: #171a19;
  border: 1px solid #e6e7e2;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 25px #0002;
  transition: transform .2s;
}

.abo-products>custom-salla-product-card:hover {
  transform: translateY(-3px);
}

#abo-home .s-product-card-image {
  height: auto !important;
  aspect-ratio: 1.27;
  margin: 17px 17px 0;
  border: 1px solid #b8a223;
  border-radius: 9px;
  background: #fff;
}

#abo-home .s-product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
}

#abo-home .s-product-card-content {
  padding: 19px 17px 17px;
  gap: 16px;
}

#abo-home .s-product-card-content-title {
  font-size: 16px;
  line-height: 1.75;
  min-height: 56px;
  font-weight: 700;
}

#abo-home .s-product-card-content-title a {
  color: #171a19;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#abo-home .s-product-card-price {
  font-size: 23px;
  color: #151a17;
  font-weight: 800;
}

#abo-home .s-product-card-content-sub {
  justify-content: center;
}

#abo-home .s-product-card-content-main {
  text-align: center;
}

#abo-home salla-add-product-button .s-button-element {
  background: var(--abo-gold);
  color: #171a19;
  border: 1px solid var(--abo-gold);
  border-radius: 7px;
  min-height: 42px;
  font-weight: 700;
}

#abo-home .s-product-card-wishlist-btn {
  background: #fffd;
  color: #555;
  border-color: #ddd;
  inset-inline-end: auto;
  inset-inline-start: 8px;
  top: 8px;
}

.abo-row-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
}

.abo-row-controls:before {
  content: "";
  height: 1px;
  background: #b89b3240;
  flex: 1;
}

.abo-row-controls button {
  border: 1px solid #6e6f56;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  font-size: 22px;
}

.abo-row-controls button:hover {
  background: var(--abo-gold);
  color: #171a19;
}

.abo-brands {
  max-width: 1120px;
  margin: 0 auto 45px;
  padding: 0 20px;
}

.abo-brands img {
  width: 100%;
  height: auto;
}

.abo-cta {
  background: var(--abo-gold);
  color: #171a19;
  text-align: center;
  padding: 28px;
  border-radius: 12px;
  margin-bottom: 40px;
}

.abo-cta h2 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 10px;
}

.abo-cta a {
  display: inline-block;
  background: #171a19;
  color: white;
  padding: 11px 28px;
  border-radius: 6px;
  margin-top: 15px;
}


/* === FAQ, Salla sections and footer ===================================== */
.abo-faq {
  background: #fff;
  color: #171a19;
  padding: 48px 0;
}

.abo-faq .abo-title {
  font-size: 26px;
}

.abo-faq details {
  border: 1px solid #e4e4dc;
  border-radius: 8px;
  margin: 12px auto;
  max-width: 1040px;
  padding: 15px 22px;
}

.abo-faq summary {
  cursor: pointer;
  font-weight: 700;
}

.abo-faq p {
  padding: 15px 0 2px;
  line-height: 1.9;
  color: #555;
}

.abo-faq a {
  text-decoration: underline;
}

.abo-ready [component-id="68097144"],.abo-ready [component-id="382737472"],.abo-ready [component-id="367936921"],.abo-ready [component-id="2107535739"] {
  display: none !important;
}

.abo-ready .s-block--features {
  background: #fff;
  color: #171a19;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 45px max(24px,calc((100% - 1260px)/2));
}

.abo-ready .s-block--features h2 {
  color: #171a19;
}

.store-footer {
  background: #111514 !important;
  color: #eee !important;
  border-top: 5px solid var(--abo-gold);
}

.store-footer .store-footer__inner {
  background: #111514 !important;
  color: #eee !important;
}

.store-footer h3,.store-footer a {
  color: #fff;
}

.store-footer p {
  color: #c6cbc8;
}

.store-footer .social-link {
  border-color: #f5c432;
}

.abo-ready .s-block--bundle-personalized-shoppers-who-bought:empty {
  display: none;
}

@keyframes aboFade {
  from {
    opacity: .55;
  }
  to {
    opacity: 1;
  }
}

@media (min-width:1024px) {
  .store-header .navbar-brand {
    margin-inline-end: 35px;
  }
  .store-header #mainnav .container {
    min-height: 86px;
  }
  .abo-products {
    cursor: grab;
  }
  .abo-products:active {
    cursor: grabbing;
  }
}

@media (max-width:767px) {
  .navbar-brand img {
    max-height: 48px !important;
    max-width: 155px !important;
  }
  .abo-nav {
    justify-content: flex-start;
    gap: 22px;
    padding: 11px 16px;
    font-size: 12px;
  }
  .abo-wrap {
    width: calc(100% - 28px);
  }
  .abo-section {
    padding: 28px 0;
  }
  .abo-title {
    font-size: 20px;
    gap: 12px;
    margin-bottom: 23px;
  }
  .abo-subtitle {
    font-size: 12px;
    margin: -12px 0 23px;
  }
  .abo-hero {
    margin-top: 14px;
  }
  .abo-hero-controls {
    padding: 0 8px;
  }
  .abo-hero-controls button {
    width: 28px;
    height: 28px;
    font-size: 22px;
  }
  .abo-dots {
    bottom: 7px;
    gap: 5px;
  }
  .abo-dot {
    height: 6px;
    width: 6px;
  }
  .abo-dot.is-active {
    width: 20px;
  }
  .abo-pause {
    left: 9px;
    bottom: 5px;
    font-size: 9px;
    padding: 1px 7px;
  }
  .abo-categories {
    gap: 10px;
  }
  .abo-categories small {
    font-size: 9px;
    line-height: 1.6;
  }
  .abo-banner {
    margin-bottom: 20px;
  }
  .abo-products {
    gap: 12px;
    padding-bottom: 12px;
  }
  .abo-products>custom-salla-product-card {
    flex-basis: calc((100% - 12px)/2);
  }
  #abo-home .s-product-card-image {
    margin: 9px 9px 0;
    aspect-ratio: 1.1;
  }
  #abo-home .s-product-card-content {
    padding: 12px 9px 10px;
    gap: 11px;
  }
  #abo-home .s-product-card-content-title {
    font-size: 12px;
    line-height: 1.65;
    min-height: 40px;
  }
  #abo-home .s-product-card-price {
    font-size: 18px;
  }
  #abo-home salla-add-product-button .s-button-element {
    font-size: 11px;
    min-height: 36px;
    padding: 5px;
  }
  #abo-home .s-product-card-wishlist-btn {
    width: 27px;
    height: 27px;
  }
  .abo-row-controls {
    margin-top: 6px;
  }
  .abo-row-controls button {
    width: 30px;
    height: 30px;
    font-size: 19px;
  }
  .abo-brands {
    padding: 0 15px;
    margin-bottom: 25px;
  }
  .abo-cta {
    padding: 24px 15px;
  }
  .abo-cta h2 {
    font-size: 20px;
  }
  .abo-cta p {
    font-size: 13px;
  }
  .abo-faq {
    padding: 30px 0;
  }
  .abo-faq .abo-title {
    font-size: 21px;
  }
  .abo-faq details {
    padding: 14px;
    font-size: 13px;
  }
  .abo-ready .s-block--features {
    padding: 30px 16px;
  }
}

@media (prefers-reduced-motion:reduce) {
  #abo-home * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}


/* Existing final responsive refinements. */
#abo-home .s-product-card-image {
  width: calc(100% - 34px) !important;
  flex-shrink: 0;
}

.store-header .mburger i {
  color: #171a19 !important;
}

.abo-products:not(:has(>custom-salla-product-card:nth-child(3))) {
  justify-content: center;
}

@media (max-width:767px) {
  #abo-home .s-product-card-image {
    width: calc(100% - 18px) !important;
  }
}


/* Critical header geometry preserved from the successful CLS test. */
/* Black and yellow ABOJABAA header */


/* === Published black/gold header, applied early to reduce CLS ============ */
header.store-header {
  background: #090b0a !important;
  color: #fff;
}

header.store-header .top-navbar {
  background: #101211 !important;
  color: #e9ece9 !important;
  border-bottom: 1px solid #f5c43233;
}

header.store-header #mainnav,header.store-header #mainnav>.inner {
  background-color: #090b0a !important;
  background-image: linear-gradient(132deg,transparent 0 7%,#f5c432 7% 7.35%,transparent 7.35% 9%,#b58e20 9% 9.15%,transparent 9.15% 91%,#f5c432 91% 91.35%,transparent 91.35% 93%,#816615 93% 93.2%,transparent 93.2%),radial-gradient(ellipse at 50% 100%,#252a25 0,transparent 68%) !important;
  color: #fff !important;
  border-bottom: 2px solid #f5c432;
  box-shadow: 0 6px 24px #0003;
}

header.store-header .navbar-brand {
  padding: 9px 14px;
  position: relative;
  isolation: isolate;
}

header.store-header .navbar-brand img {
  max-width: 245px !important;
  max-height: 83px !important;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px #0008);
}

header.store-header .s-search-input {
  background: #202421 !important;
  border: 1px solid #f5c43255 !important;
  color: #fff !important;
}

header.store-header .s-search-input::placeholder {
  color: #d0d4d0 !important;
}

header.store-header .s-search-icon {
  color: #f5c432 !important;
}

header.store-header .s-user-menu-login-btn,header.store-header .header-btn__icon,header.store-header .s-cart-summary-total,header.store-header .mburger i {
  color: #f5c432 !important;
  border-color: #f5c43255 !important;
}

header.store-header .s-cart-summary-count {
  background: #f5c432 !important;
  color: #101211 !important;
}

header.store-header .s-contacts-topnav-link {
  color: #dce0da !important;
}

@media (min-width:1024px) {
  header.store-header .main-menu>.root-level>a {
    color: #f4f4eb !important;
  }
  header.store-header .main-menu>.root-level>a:hover {
    color: #f5c432 !important;
  }
  header.store-header #mainnav .container {
    min-height: 100px;
  }
  header.store-header .main-menu .sub-menu {
    background: #fff;
    color: #171b19;
  }
}

header.store-header .abo-nav {
  background: #111410;
  border-top: 1px solid #f5c43233;
  border-bottom: 1px solid #f5c43255;
  color: #fff;
}

@media (max-width:767px) {
  header.store-header .navbar-brand {
    padding: 8px 3px;
  }
  header.store-header .navbar-brand img {
    max-width: 175px !important;
    max-height: 60px !important;
  }
  header.store-header #mainnav>.inner {
    background-size: 180% 100% !important;
    background-position: center !important;
  }
  header.store-header .s-cart-summary-total {
    color: #fff !important;
  }
}

@media (max-width:767px) {
  header.store-header {
    display: flex;
    flex-direction: column;
    position: relative;
  }
  header.store-header>.lg\:hidden {
    order: 0;
  }
  header.store-header #mainnav {
    order: 1;
    height: 76px !important;
    min-height: 76px !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 30;
  }
  header.store-header #mainnav>.inner {
    position: relative !important;
    transform: none !important;
    height: 76px !important;
    background: #0c100f !important;
    border-bottom: 0;
    overflow: visible !important;
  }
  header.store-header #mainnav .container {
    height: 76px;
    min-height: 76px;
  }
  header.store-header #mainnav .container>div {
    height: 76px;
    position: relative;
  }
  header.store-header .navbar-brand {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50%;
    transform: translate(-50%,-50%);
    margin: 0 !important;
    padding: 0 !important;
    width: 170px;
    display: flex;
    justify-content: center;
  }
  header.store-header .navbar-brand img {
    max-width: 170px !important;
    max-height: 60px !important;
    width: 170px !important;
  }
  header.store-header salla-user-menu {
    position: absolute;
    right: 0;
    top: 23px;
    margin: 0 !important;
  }
  header.store-header salla-cart-summary {
    position: absolute;
    left: 0;
    top: 21px;
    margin: 0 !important;
  }
  header.store-header .s-cart-summary-content {
    display: none !important;
  }
  header.store-header .s-user-menu-login-btn,header.store-header .header-btn__icon {
    border: 0 !important;
    color: #eee !important;
  }
  header.store-header .s-user-menu-login-btn svg {
    fill: #eee !important;
  }
  header.store-header .mburger {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 93px !important;
    margin: 0 !important;
    z-index: 50;
  }
  header.store-header .mburger i {
    color: #171b19 !important;
    font-size: 26px !important;
  }
  header.store-header .top-navbar {
    order: 2;
    background: #f5c432 !important;
    height: 60px;
    padding: 11px 58px 11px 14px !important;
    border: 0 !important;
  }
  header.store-header .top-navbar .container {
    padding: 0 !important;
    height: 38px;
  }
  header.store-header .s-search-input {
    height: 38px !important;
    background: #f7f6ee !important;
    color: #242925 !important;
    border: 0 !important;
    border-radius: 22px !important;
  }
  header.store-header .s-search-input::placeholder {
    color: #686d67 !important;
  }
  header.store-header .s-search-icon {
    color: #303630 !important;
  }
  header.store-header .abo-nav {
    order: 3;
  }
  header.store-header .s-contacts-header {
    display: none !important;
  }
}

@media (min-width:1024px) {
  .abo-nav {
    display: none !important;
  }
}

/* ========================================================================== */
/* V4 | CUSTOMER TESTIMONIALS — same original visual rules, available early. */
/* Replaces the two late style injections from JavaScript; no design change. */
/* ========================================================================== */

/* Owner-supplied customer testimonials — original values moved from JS */
body.index.abo-ready section[component-id="2107535739"]{display:block!important;padding:50px 20px;margin:0 auto;background:#181c1b;color:#fff;max-width:1280px} [component-id="2107535739"] .s-reviews-header{color:#f5c432;font-size:28px;font-weight:800;text-align:center;margin-bottom:28px}[component-id="2107535739"] .s-reviews-testimonial__avatar{display:none!important}[component-id="2107535739"] .s-reviews-testimonial{background:#fff;border:1px solid #f5c43255;border-radius:16px;box-shadow:0 8px 24px #0002;height:100%}[component-id="2107535739"] .s-reviews-testimonial__inner{padding:28px!important;min-height:245px}[component-id="2107535739"] .s-reviews-testimonial__text p{font-size:16px;line-height:2;color:#303633;overflow:visible;display:block;-webkit-line-clamp:unset;max-height:none}[component-id="2107535739"] .s-reviews-testimonial__info h2{color:#171b19;font-size:17px;font-weight:800}[component-id="2107535739"] .s-reviews-testimonial__icon{color:#cba320}[component-id="2107535739"] .s-slider-nav-arrow{background:#f5c432;color:#171b19;border-color:#f5c432}@media(max-width:767px){body.index.abo-ready section[component-id="2107535739"]{padding:32px 14px}[component-id="2107535739"] .s-reviews-header{font-size:23px}[component-id="2107535739"] .s-reviews-testimonial__inner{padding:22px!important;min-height:280px}[component-id="2107535739"] .s-reviews-testimonial__text p{font-size:14px;line-height:1.95}}

/* Shared testimonial styles — original values moved from JS */
body.index.abo-ready section.s-block--testimonials{padding:50px 20px;margin:0 auto;background:#181c1b;color:#fff;max-width:1280px} .s-block--testimonials .s-reviews-header{color:#f5c432;font-size:28px;font-weight:800;text-align:center;margin-bottom:28px}.s-block--testimonials .s-reviews-testimonial__avatar{display:none!important}.s-block--testimonials .s-reviews-testimonial{background:#fff;border:1px solid #f5c43255;border-radius:16px;box-shadow:0 8px 24px #0002;height:100%}.s-block--testimonials .s-reviews-testimonial__inner{padding:28px!important;min-height:245px}.s-block--testimonials .s-reviews-testimonial__text p{font-size:16px;line-height:2;color:#303633;overflow:visible;display:block;-webkit-line-clamp:unset;max-height:none}.s-block--testimonials .s-reviews-testimonial__info h2{color:#171b19;font-size:17px;font-weight:800}.s-block--testimonials .s-reviews-testimonial__icon{color:#cba320}.s-block--testimonials .s-slider-nav-arrow{background:#f5c432;color:#171b19;border-color:#f5c432}@media(max-width:767px){body.index.abo-ready section.s-block--testimonials{padding:32px 14px}.s-block--testimonials .s-reviews-header{font-size:23px}.s-block--testimonials .s-reviews-testimonial__inner{padding:22px!important;min-height:280px}.s-block--testimonials .s-reviews-testimonial__text p{font-size:14px;line-height:1.95}}
.s-block--testimonials .s-reviews-testimonial__rating{display:block!important}.s-block--testimonials .s-rating-stars-selected svg{fill:#cba320!important}header.store-header .s-user-menu-login-btn svg{fill:#f5c432!important;color:#f5c432!important}

/* V4.1 | Desktop-only early testimonial styling; do not alter final design.
   The same geometry that V4 applies after .abo-ready now applies from first paint.
   The original V4 min-height reservation below is retained, unchanged.
   Other pages and mobile are untouched. */
@media (min-width:1024px) {
  body.index section[component-id="2107535739"][data-testid="store-home-custom-testimonials"] {
    display: block !important;
    padding: 50px 20px;
    margin: 0 auto;
    background: #181c1b;
    color: #fff;
    max-width: 1280px;
  }
  body.index section.s-block--testimonials {
    padding: 50px 20px;
    margin: 0 auto;
    background: #181c1b;
    color: #fff;
    max-width: 1280px;
  }
}

/* Desktop-only layout reservation for Salla's existing testimonial slider.
   Conservative minimums: rendered content can always grow beyond them.
   Does not hide the section, resize testimonial cards, or alter mobile. */
@media (min-width:1024px) {
  body.index section[component-id="2107535739"][data-testid="store-home-custom-testimonials"] {
    min-height: 400px;
  }
  body.index section[component-id="2107535739"] salla-slider#custom-testimonials-2-slider {
    min-height: 245px;
  }
}