/** Shopify CDN: Minification failed

Line 100:34 Expected identifier but found "!"
Line 100:37 Expected identifier but found "!"
Line 101:37 Expected identifier but found "!"
Line 101:40 Expected identifier but found "!"
Line 102:33 Expected identifier but found "!"
Line 102:36 Expected identifier but found "!"
Line 195:29 Expected identifier but found "!"
Line 195:32 Expected identifier but found "!"
Line 372:1 Unexpected "}"
Line 570:0 Unexpected "}"

**/
/** Shopify CDN: Minification failed

Line 85:34 Expected identifier but found "!"
Line 85:37 Expected identifier but found "!"
Line 86:37 Expected identifier but found "!"
Line 86:40 Expected identifier but found "!"
Line 87:33 Expected identifier but found "!"
Line 87:36 Expected identifier but found "!"
Line 179:29 Expected identifier but found "!"
Line 179:32 Expected identifier but found "!"
Line 356:1 Unexpected "}"
Line 554:0 Unexpected "}"

**/
/*
.header__icons {
    display: flex;
    grid-area: icons;
    justify-self: end;
}
*/
.header__search {
    display: inline-flex;
    line-height: 0;
}
.header__icon {
    text-decoration: none;
    width: 44px;
    color: #000000;
    height: 44px;
    padding: 0;
}
.header__icon span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.header__icon .icon {
    height: 20px;
    width: 20px;
    vertical-align: middle;
}

.modal__toggle-open {
    display: flex;
}
.modal__toggle-close {
    display: none;
}

.header__search-bar-wrapper.is-visible {
    display: block !important;
}
.gradient {
    background: rgb(var(--color-background));
    background: #fafafa;
    background-attachment: fixed;
}
.search-modal {
    opacity: 0;
    border-bottom: .1rem solid #75757514;
    min-height: 300px;
    height: 100%;
}
button.header__desktop-nav-toggle {
    border: unset;
    padding: 0;
    border-radius: 100%;
    box-shadow: 0 2px 10px #0000001a;
    height: 32px;
    width: 32px;
    text-align: center;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 15px;
}

.header__desktop-nav-toggle>span {
    display: block !important;
}

button.header__desktop-nav-toggle svg.icon.icon--hamburger {
    /* height: 14px !important; */!i;!;
    /* margin-right: 0 !important; */!i;!;
    /* width: 14px !important; */!i;!;
    /* font-size: 12px; */
    /* padding-left: 40px; */
}
.modal__content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 998;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999999999999;
    width: 100%;
}
details[open]>.search-modal {
    opacity: 0;
    animation: animateMenuOpen var(--duration-default)ease;
}
details[open] .modal-overlay {
    display: block;
}
.search-modal__content {
    display: flex
;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 5rem 0 1rem;
    line-height: calc(1 + .8 / var(--font-body-scale));
    position: relative;
}
.search-modal__form {
    width: 100%;
}
.modal__close-button.link {
    display: flex
;
    justify-content: center;
    align-items: center;
    padding: 0rem;
    height: 4.4rem;
    width: 4.4rem;
    background-color: transparent;
}
.search-modal__close-button {
    position: absolute;
    right: .3rem;
}
details[open] .modal-overlay:after {
    position: absolute;
    content: "";
    background-color: #75757580;
    top: 100%;
    left: 0;
    right: 0;
    height: 100vh;
}
details[open] .modal-overlay:after {
    background: #000c;
    z-index: 99 !important;
}
.header__icon:not(.header__icon--summary) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
/*
.header__icons {
    display: flex;
    justify-content: center;
    align-items: center;
}
*/
.header__action-item-content {
       display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
span.header__cart-count {
    top: 0;
    right: -4px;
}
span.icon-state__primary {
    width: 42px;
    border-radius: 21px;
   
    display: flex !important;!i;!;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 42px;
    margin-right: 0;
}

.header__cart-icon.icon-state {
    height: 32px;
    margin-right: 10px;
}
.icon-state__primary svg.icon.icon-cart-empty {
    width: 19px;
    height: 19px;
    margin-top: 3px;
}

.header__action-item.header__action-item--cart {
    margin-left: 15px;
    padding-left: 0;
}
.shopify-section__header {
    box-shadow: 0 6px 16px rgba(25,25,25,.06);
}
.header__search-bar-wrapper.is-visible+ .header__action-list .icon-search{display:none}
.header__search-bar-wrapper.is-visible+ .header__action-list .modal__toggle-close{display:block;color: #000;fill: #000;}
@media screen and (min-width: 990px ) and (max-width: 1199px ) {
nav.nav-bar .container ,header.header.header--inline .container {
  
    font-size: 9px;
}

a.nav-bar__link.link {
    padding-left: 0!important;
    background-image: none;
}
}
@media screen and (min-width: 1200px ) and (max-width: 1479px ) {
nav.nav-bar .container ,header.header.header--inline .container {
 
   font-size: 11px;
}
      .nav-bar__link .icon--arrow-bottom {
        width: 12px;
        height: 8px;
        margin-left: 3px;
    }
li.nav-bar__item.nav-bar__item--static  a.nav-bar__link.link{
    padding-left: 25px !important;
   
}

}
@media screen and (max-width: 768px) {
  header.header.header--inline {
    min-height: 48px;
            padding: 0;
}


header.header.header--inline .container {
    padding: 0 12px;
}


nav.header__mobile-nav.hidden-lap-and-up span.icon-state__primary {
    margin-right: 0px;
}

.header__logo .header__logo-image {
    max-width: 28px !important;
}
      .header__icon .header-icon-shadow, span.icon-state__primary {
        width: 32px;
        border-radius: 30%;
        box-shadow: 0 6px 16px rgba(25,25,25,.06);
        display: flex;
        height: 32px;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        margin-right: 4px;
        /* padding: 20px; */
    }
.header__icon{
      margin-left: 2px;
}
    .header__icon .icon {
        height: 17px;
        width: 17px;
        vertical-align: middle;
    }

    .search-bar__submit {
       background:#e2e2e2;
        color: #000;
        border-radius: 25px;
    }
span.icon-state__primary svg {
    width: 20px;
    height: 20px;
}

.header__action-item.header__action-item--cart {
    margin-left: 0;
 padding: 0;
}

nav.header__mobile-nav.hidden-lap-and-up {
    margin-right: 0;
}
}
.search-bar__submit {
    border-radius:25px
}
@media screen and (min-width: 990px) {
  li.nav-bar__item a {
    font-size: 13px;
}
      .header__logo {
        margin-right: 25px;
    }
  img.header__logo-image {
    max-width: 40px !important;
}
 
}

        .search-modal__content {
        padding: 0 6rem;
    }

.header__icon span {
        display: flex
;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: max-content;
        font-size: 12px;
    }
     .header__icon {
        text-decoration: none;
        width: 100%;
        margin-left: 15px;
        color: #000;
        height: 44px;
        padding: 0;
    }
       .header__icon .header-icon-shadow ,span.icon-state__primary{
        width: 32px;
        /* border-radius: 30%; */
        /* box-shadow: 0 2px 10px #0000001a; */
        display: flex;
          height: 32px;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        /* margin-right: 10px; */
    }
         .header__icon .icon {
        height: 37px;
        width: 17px;
        vertical-align: middle;
    }
    .search-modal__form {
        max-width: 47.8rem;
        position: relative;
    }
    .header predictive-search {
        position: relative;
    }
    .search-modal__close-button {
        position: initial;
        margin-left: .5rem;
    }
 }
/* ===============================
   Yeelight Black Template CSS
   =============================== */

body.template-yeelight-black {
  background: #181818 !important;
  color: #fff !important;
  --heading-color: #ffffff !important;
  --text-color: #ffffff !important;
  --header-light-text-color: #ffffff !important;
}

/* Header och announcement-bar */
body.template-yeelight-black header,
body.template-yeelight-black .announcement-bar {
  background: #181818 !important;
}
body.template-yeelight-black header a,
body.template-yeelight-black .announcement-bar a {
  color: #fafafa !important;
}

/* Sök, konto, varukorg ikoner */
body.template-yeelight-black .header__icon,
body.template-yeelight-black .header__icon svg,
body.template-yeelight-black .header__icon path {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* Toolbar & filter = svart bakgrund, vit text */
body.template-yeelight-black .collection__toolbar,
body.template-yeelight-black .facet-filter,
body.template-yeelight-black .filter-menu {
  background: #111217 !important;
  color: #fff !important;
}
body.template-yeelight-black .collection__toolbar *,
body.template-yeelight-black .facet-filter *,
body.template-yeelight-black .filter-menu * {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* Headingar */
body.template-yeelight-black .facet-filter h1,
body.template-yeelight-black .facet-filter h2,
body.template-yeelight-black .facet-filter h3,
body.template-yeelight-black .facet-filter h4,
body.template-yeelight-black .facet-filter h5,
body.template-yeelight-black .facet-filter h6,
body.template-yeelight-black .filter-menu h1,
body.template-yeelight-black .filter-menu h2,
body.template-yeelight-black .filter-menu h3,
body.template-yeelight-black .filter-menu h4,
body.template-yeelight-black .filter-menu h5,
body.template-yeelight-black .filter-menu h6,
body.template-yeelight-black .collection__toolbar h1,
body.template-yeelight-black .collection__toolbar h2,
body.template-yeelight-black .collection__toolbar h3,
body.template-yeelight-black .collection__toolbar h4,
body.template-yeelight-black .collection__toolbar h5,
body.template-yeelight-black .collection__toolbar h6 {
  color: #fff !important;
}

/* Produktkort */
body.template-yeelight-black .product-item,
body.template-yeelight-black .collection-grid-item,
body.template-yeelight-black .card,
body.template-yeelight-black .product-card,
body.template-yeelight-black .recently-viewed-product,
body.template-yeelight-black .recently-viewed-item,
body.template-yeelight-black .recently-viewed-card {
  background-color: #181818 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  overflow: hidden;
}

body.template-yeelight-black .collection-grid-item a,
body.template-yeelight-black .card a,
body.template-yeelight-black .product-card a {
  color: #fff !important;
}

/* Subinfo */
body.template-yeelight-black .product-card__price,
body.template-yeelight-black .product-card__badge {
  color: #fff !important;
  background: transparent !important;
}

/* Footer */
body.template-yeelight-black footer,
body.template-yeelight-black .site-footer {
  background: #000 !important;
  color: #fff !important;
}
body.template-yeelight-black footer *,
body.template-yeelight-black .site-footer * {
  color: #fff !important;
}

/* Inputs */
body.template-yeelight-black input,
body.template-yeelight-black select {
  background: #1b1f23 !important;
  color: #fff !important;
  border-color: #333 !important;
}

/* Collection title */
body.template-yeelight-black .collection__title.heading.h1 {
  color: #fff !important;
}

/* Nav-bar */
body.template-yeelight-black .nav-bar__inner,
body.template-yeelight-black .nav-bar__linklist {
  background: #111217 !important;
}
body.template-yeelight-black .nav-bar__link,
body.template-yeelight-black .nav-bar__link * {
  color: #fff !important;
  fill: #fff !important;
}

/* Gradientknapp */
body.template-yeelight-black .buy-now-button,
body.template-yeelight-black .product-card__buy-now,
body.template-yeelight-black .product-item__action-button--buy-now {
  background: linear-gradient(90deg, #8e2de2 0%, #4a00e0 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 12px 0 rgba(142,45,226,0.18);
  transition: opacity .18s;
}
body.template-yeelight-black .buy-now-button:hover,
body.template-yeelight-black .product-card__buy-now:hover,
body.template-yeelight-black .product-item__action-button--buy-now:hover {
  opacity: 0.88;
}

/* Primärknapp */
body.template-yeelight-black .button--primary,
body.template-yeelight-black .product-item__action-button.button--primary {
  background: linear-gradient(92deg, #A259FF 0%, #4F47FF 100%);
  box-shadow: 0px 8px 32px 0px rgba(162, 89, 255, 0.24);
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  transition: filter 0.15s;
}
body.template-yeelight-black .button--primary:hover,
body.template-yeelight-black .product-item__action-button.button--primary:hover {
  filter: brightness(1.12) saturate(1.1);
  box-shadow: 0 4px 20px 0 #ae3cff99;
}

/* Megameny */
body.template-yeelight-black .mega-menu,
body.template-yeelight-black .mega-menu__inner {
  background: #181818 !important;
}
body.template-yeelight-black .mega-menu__title,
body.template-yeelight-black .mega-menu__link,
body.template-yeelight-black .mega-menu__linklist,
body.template-yeelight-black .mega-menu__item,
body.template-yeelight-black .mega-menu svg {
  color: #fff !important;
  fill: #fff !important;
}
body.template-yeelight-black .mega-menu__linklist {
  background: transparent !important;
}
body.template-yeelight-black .mega-menu__item {
  border-color: #222 !important;
  background: transparent !important;
}

/* Logo-fix */
body.template-yeelight-black .header__logo {
  display: flex;
  align-items: center;
  gap: 18px;
}
body.template-yeelight-black .header__yeelight-logo img {
  height: 32px;
  width: auto;
  display: block;
}

}
/* Override vit bakgrund från temats variabler */
body.template-yeelight-black .product-list,
body.template-yeelight-black .recently-viewed,
body.template-yeelight-black .collection__products {
  background-color: #181818 !important;
}

/* Förhindra vit overlay från pseudo-element */
body.template-yeelight-black .product-list::before {
  display: none !important;
}
/* Meny: svart bakgrund + vit text */
body.template-yeelight-black .site-nav,
body.template-yeelight-black .site-nav__wrapper,
body.template-yeelight-black .header__inline-nav,
body.template-yeelight-black .site-nav__link,
body.template-yeelight-black .site-nav__link * {
  background: #181818 !important;
  color: #fff !important;
  fill: #fff !important;
}
/* Mobilmeny: svart bakgrund + vit text */
body.template-yeelight-black .header__mobile-nav,
body.template-yeelight-black .header__mobile-nav *,
body.template-yeelight-black .mobile-nav,
body.template-yeelight-black .mobile-nav *,
body.template-yeelight-black .drawer__inner,
body.template-yeelight-black .drawer__close-button {
  background-color: #181818 !important;
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}
/*
.search-bar__results-inner {
    display: none ! IMPORTANT;
}*/

/* 1) Visa Lipscore igen (ersätter din "dölj lipscore") */
body.template-yeelight-black .lipscore-rating-small {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: transparent !important;
  padding: 0 !important;
  margin: 8px 0 0 !important;
}

/* 2) Tvinga ALLT i Lipscore-widgeten att vara transparent (viktigt mot white background) */
body.template-yeelight-black .lipscore-rating-small,
body.template-yeelight-black .lipscore-rating-small * {
  background-color: transparent !important;
}

/* 3) Stjärnornas storlek/linje och votes-färg så det blir snyggt i dark mode */
body.template-yeelight-black .lipscore-svg-rating-star {
  width: 16px !important;
  height: 16px !important;
}
body.template-yeelight-black .lipscore-rating-small-votes {
  color: rgba(255,255,255,.70) !important;
}

/* 4) Säkra att "tom yta" i grid/list ALDRIG kan bli vit */
body.template-yeelight-black .collection,
body.template-yeelight-black .collection__dynamic-part,
body.template-yeelight-black .layout__section,
body.template-yeelight-black .card__section,
body.template-yeelight-black .product-list {
  background-color: #181818 !important;
}
/* ===============================
   Xiaomi 17 Launch – Black Template CSS (Mistore Orange)
   Scope: body.template-xiaomi-17-launch
   =============================== */

body.template-xiaomi-17-launch {
  background: #181818 !important;
  color: #fff !important;
  --heading-color: #ffffff !important;
  --text-color: #ffffff !important;
  --header-light-text-color: #ffffff !important;
}

/* Header och announcement-bar */
body.template-xiaomi-17-launch header,
body.template-xiaomi-17-launch .announcement-bar {
  background: #181818 !important;
}
body.template-xiaomi-17-launch header a,
body.template-xiaomi-17-launch .announcement-bar a {
  color: #fafafa !important;
}

/* Sök, konto, varukorg ikoner */
body.template-xiaomi-17-launch .header__icon,
body.template-xiaomi-17-launch .header__icon svg,
body.template-xiaomi-17-launch .header__icon path {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* Toolbar & filter = svart bakgrund, vit text */
body.template-xiaomi-17-launch .collection__toolbar,
body.template-xiaomi-17-launch .facet-filter,
body.template-xiaomi-17-launch .filter-menu {
  background: #111217 !important;
  color: #fff !important;
}
body.template-xiaomi-17-launch .collection__toolbar *,
body.template-xiaomi-17-launch .facet-filter *,
body.template-xiaomi-17-launch .filter-menu * {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* Headingar */
body.template-xiaomi-17-launch .facet-filter h1,
body.template-xiaomi-17-launch .facet-filter h2,
body.template-xiaomi-17-launch .facet-filter h3,
body.template-xiaomi-17-launch .facet-filter h4,
body.template-xiaomi-17-launch .facet-filter h5,
body.template-xiaomi-17-launch .facet-filter h6,
body.template-xiaomi-17-launch .filter-menu h1,
body.template-xiaomi-17-launch .filter-menu h2,
body.template-xiaomi-17-launch .filter-menu h3,
body.template-xiaomi-17-launch .filter-menu h4,
body.template-xiaomi-17-launch .filter-menu h5,
body.template-xiaomi-17-launch .filter-menu h6,
body.template-xiaomi-17-launch .collection__toolbar h1,
body.template-xiaomi-17-launch .collection__toolbar h2,
body.template-xiaomi-17-launch .collection__toolbar h3,
body.template-xiaomi-17-launch .collection__toolbar h4,
body.template-xiaomi-17-launch .collection__toolbar h5,
body.template-xiaomi-17-launch .collection__toolbar h6 {
  color: #fff !important;
}

/* Produktkort */
body.template-xiaomi-17-launch .product-item,
body.template-xiaomi-17-launch .collection-grid-item,
body.template-xiaomi-17-launch .card,
body.template-xiaomi-17-launch .product-card,
body.template-xiaomi-17-launch .recently-viewed-product,
body.template-xiaomi-17-launch .recently-viewed-item,
body.template-xiaomi-17-launch .recently-viewed-card {
  background-color: #181818 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  overflow: hidden;
}

body.template-xiaomi-17-launch .collection-grid-item a,
body.template-xiaomi-17-launch .card a,
body.template-xiaomi-17-launch .product-card a {
  color: #fff !important;
}

/* Subinfo */
body.template-xiaomi-17-launch .product-card__price,
body.template-xiaomi-17-launch .product-card__badge {
  color: #fff !important;
  background: transparent !important;
}

/* Footer */
body.template-xiaomi-17-launch footer,
body.template-xiaomi-17-launch .site-footer {
  background: #000 !important;
  color: #fff !important;
}
body.template-xiaomi-17-launch footer *,
body.template-xiaomi-17-launch .site-footer * {
  color: #fff !important;
}

/* Inputs */
body.template-xiaomi-17-launch input,
body.template-xiaomi-17-launch select {
  background: #1b1f23 !important;
  color: #fff !important;
  border-color: #333 !important;
}

/* Collection title */
body.template-xiaomi-17-launch .collection__title.heading.h1 {
  color: #fff !important;
}

/* Nav-bar */
body.template-xiaomi-17-launch .nav-bar__inner,
body.template-xiaomi-17-launch .nav-bar__linklist {
  background: #111217 !important;
}
body.template-xiaomi-17-launch .nav-bar__link,
body.template-xiaomi-17-launch .nav-bar__link * {
  color: #fff !important;
  fill: #fff !important;
}

/* Megameny */
body.template-xiaomi-17-launch .mega-menu,
body.template-xiaomi-17-launch .mega-menu__inner {
  background: #181818 !important;
}
body.template-xiaomi-17-launch .mega-menu__title,
body.template-xiaomi-17-launch .mega-menu__link,
body.template-xiaomi-17-launch .mega-menu__linklist,
body.template-xiaomi-17-launch .mega-menu__item,
body.template-xiaomi-17-launch .mega-menu svg {
  color: #fff !important;
  fill: #fff !important;
}
body.template-xiaomi-17-launch .mega-menu__linklist {
  background: transparent !important;
}
body.template-xiaomi-17-launch .mega-menu__item {
  border-color: #222 !important;
  background: transparent !important;
}

/* Override vit bakgrund från temats variabler */
body.template-xiaomi-17-launch .product-list,
body.template-xiaomi-17-launch .recently-viewed,
body.template-xiaomi-17-launch .collection__products {
  background-color: #181818 !important;
}

/* Förhindra vit overlay från pseudo-element */
body.template-xiaomi-17-launch .product-list::before {
  display: none !important;
}

/* Meny: svart bakgrund + vit text */
body.template-xiaomi-17-launch .site-nav,
body.template-xiaomi-17-launch .site-nav__wrapper,
body.template-xiaomi-17-launch .header__inline-nav,
body.template-xiaomi-17-launch .site-nav__link,
body.template-xiaomi-17-launch .site-nav__link * {
  background: #181818 !important;
  color: #fff !important;
  fill: #fff !important;
}

/* Mobilmeny: svart bakgrund + vit text */
body.template-xiaomi-17-launch .header__mobile-nav,
body.template-xiaomi-17-launch .header__mobile-nav *,
body.template-xiaomi-17-launch .mobile-nav,
body.template-xiaomi-17-launch .mobile-nav *,
body.template-xiaomi-17-launch .drawer__inner,
body.template-xiaomi-17-launch .drawer__close-button {
  background-color: #181818 !important;
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* Dölj sökresultat-inner (som i din originalkod)
body.template-xiaomi-17-launch .search-bar__results-inner {
  display: none !important;
} */

/* Visa Lipscore + gör den transparent i dark mode */
body.template-xiaomi-17-launch .lipscore-rating-small {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: transparent !important;
  padding: 0 !important;
  margin: 8px 0 0 !important;
}
body.template-xiaomi-17-launch .lipscore-rating-small,
body.template-xiaomi-17-launch .lipscore-rating-small * {
  background-color: transparent !important;
}
body.template-xiaomi-17-launch .lipscore-svg-rating-star {
  width: 16px !important;
  height: 16px !important;
}
body.template-xiaomi-17-launch .lipscore-rating-small-votes {
  color: rgba(255,255,255,.70) !important;
}

/* Säkra att tom yta i grid/list aldrig blir vit */
body.template-xiaomi-17-launch .collection,
body.template-xiaomi-17-launch .collection__dynamic-part,
body.template-xiaomi-17-launch .layout__section,
body.template-xiaomi-17-launch .card__section,
body.template-xiaomi-17-launch .product-list {
  background-color: #181818 !important;
}

/* ===============================
   Mistore Orange accents + buttons
   =============================== */

/* Länkar/accenter */
body.template-xiaomi-17-launch a:not(.button):not(.nav-bar__link):not(.site-nav__link) {
  color: #FF6900 !important;
}
body.template-xiaomi-17-launch a:not(.button):not(.nav-bar__link):not(.site-nav__link):hover {
  color: #ff7a1a !important;
}

/* Badges/labels (om de finns i temat) */
body.template-xiaomi-17-launch .badge,
body.template-xiaomi-17-launch .product-card__badge,
body.template-xiaomi-17-launch .product-badge,
body.template-xiaomi-17-launch .tag {
  background: rgba(255,105,0,0.12) !important;
  border: 1px solid rgba(255,105,0,0.35) !important;
  color: #FF6900 !important;
}

/* Primärknappar + buy now */
body.template-xiaomi-17-launch .button--primary,
body.template-xiaomi-17-launch .product-item__action-button.button--primary,
body.template-xiaomi-17-launch .buy-now-button,
body.template-xiaomi-17-launch .product-card__buy-now,
body.template-xiaomi-17-launch .product-item__action-button--buy-now {
  background: #FF6900 !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(255,105,0,0.28);
  transition: all 0.18s ease;
}

/* Hover */
body.template-xiaomi-17-launch .button--primary:hover,
body.template-xiaomi-17-launch .product-item__action-button.button--primary:hover,
body.template-xiaomi-17-launch .buy-now-button:hover,
body.template-xiaomi-17-launch .product-card__buy-now:hover,
body.template-xiaomi-17-launch .product-item__action-button--buy-now:hover {
  background: #ff7a1a !important;
  box-shadow: 0 8px 26px rgba(255,105,0,0.35);
  transform: translateY(-1px);
}

/* Fokus/outline (tangentbord) */
body.template-xiaomi-17-launch .button--primary:focus,
body.template-xiaomi-17-launch .buy-now-button:focus,
body.template-xiaomi-17-launch .product-card__buy-now:focus,
body.template-xiaomi-17-launch .product-item__action-button--buy-now:focus {
  outline: 2px solid rgba(255,105,0,0.65) !important;
  outline-offset: 2px !important;
}

/* ===============================
   Ta bort linjen mellan meny & collection
   =============================== */

body.template-xiaomi-17-launch header,
body.template-xiaomi-17-launch .header,
body.template-xiaomi-17-launch .site-header,
body.template-xiaomi-17-launch .nav-bar,
body.template-xiaomi-17-launch .header-wrapper {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Om linjen kommer från första sectionen */
body.template-xiaomi-17-launch .main,
body.template-xiaomi-17-launch .shopify-section:first-child,
body.template-xiaomi-17-launch .collection {
  border-top: none !important;
}

/* Extra safety – tar bort pseudo-separator */
body.template-xiaomi-17-launch header::after,
body.template-xiaomi-17-launch header::before,
body.template-xiaomi-17-launch .nav-bar::after,
body.template-xiaomi-17-launch .nav-bar::before {
  display: none !important;
}

/* ===============================
   Ta bort ALLA vita linjer / separators
   Scope: template-xiaomi-17-launch
   =============================== */

/* Globala borders i collectionområdet */
body.template-xiaomi-17-launch .collection *,
body.template-xiaomi-17-launch .collection__toolbar *,
body.template-xiaomi-17-launch .facet-filter *,
body.template-xiaomi-17-launch .filter-menu *,
body.template-xiaomi-17-launch .product-list *,
body.template-xiaomi-17-launch .layout__section * {
  border-color: #222 !important;
}

/* Ta bort specifika separators */
body.template-xiaomi-17-launch hr,
body.template-xiaomi-17-launch .divider,
body.template-xiaomi-17-launch .collection__toolbar,
body.template-xiaomi-17-launch .facet-filter,
body.template-xiaomi-17-launch .filter-menu,
body.template-xiaomi-17-launch .collection__header {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Pseudo-element som ofta skapar linjer */
body.template-xiaomi-17-launch .collection__toolbar::before,
body.template-xiaomi-17-launch .collection__toolbar::after,
body.template-xiaomi-17-launch .facet-filter::before,
body.template-xiaomi-17-launch .facet-filter::after,
body.template-xiaomi-17-launch .collection::before,
body.template-xiaomi-17-launch .collection::after,
body.template-xiaomi-17-launch .shopify-section::before,
body.template-xiaomi-17-launch .shopify-section::after {
  display: none !important;
}

/* Specifikt för filter-separatorer */
body.template-xiaomi-17-launch .facet__separator,
body.template-xiaomi-17-launch .facet__header,
body.template-xiaomi-17-launch .facet-group,
body.template-xiaomi-17-launch .facet-filter__item {
  border: none !important;
}

/* Om temat använder CSS-variabler för borders */
body.template-xiaomi-17-launch {
  --border-color: #222 !important;
  --header-border-color: transparent !important;
  --input-border-color: #333 !important;
}
.home-brick-box.home-brick-row-2-box.xm-plain-box.container {
    margin-top: 60px;
}

@media screen and (min-width: 769px) {
  .home-brick-box .box-bd .row {
    align-items: stretch;
  }

  .home-brick-box .span4 {
    display: flex;
  }

  .home-brick-box .brick-promo-list {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  /* ä¸¤å¼  banner 的情况（featured-collection-tabs-2） */
  .home-brick-box .brick-promo-list.banner-image {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .home-brick-box .brick-promo-list li.brick-item.desktop-banner {
    flex: 1;
    height: 100%;
  }
}
span.product-label.product-label--custom1,.lh_custom-product-badge {
   
    font-size: 18px;
}
.product-item__action-button:hover {
    color:#fff
}
ul.list-none.text-mini li {
    list-style: disc;
    line-height: normal;
    font-size: 14px;
    font-weight: 400;
    /* list-style: none; */
}

ul.list-none.text-mini li {
    list-style: disc;
    line-height: normal;
    font-size: 14px;
    font-weight: 400;
    /* list-style: none; */
    /* padding-left: 10px; */
    margin-left: 15px;
}

ul.list-none.text-mini li:empty {display:none}

ul.list-none.text-mini li::marker {
    /* display: none; */
    font-size: 10px;
}
.product-item__info {
    display: flex
}

.flex.flex-col {
    flex: 1;
    flex-direction: column;
    display: flex
}

.flex.flex-row.items-center.gap-2.text-mini {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px
}

.fill-success {
    fill: #308234
}

.w-5 {
    width: 20px
}

.h-5 {
    height: 20px
}

.item-infos {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.value-picker__choice-item--country {
    display: flex;
    align-items: center;
    gap: .45em;
    text-align: left
}

.country-flag-emoji {
    flex-shrink: 0;
    font-size: 1.15em;
    line-height: 1
}

.select-button--with-country-flag {
    display: inline-flex;
    align-items: center;
    gap: .35em
}

.select-button--with-country-flag .select-button__country-label {
    flex: 1 1 auto;
    min-width: 0
}

span.price.price--compare,span.num.compare-price {
   
    color: #aeaaaa
}
span.price.price--compare.lh_price-style {
    text-decoration: line-through;
}
span.product-item__inventory.inventory.inventory--low {
    color: #d2161c;
    opacity: 1
}

.c-price {
    display: grid
}

.item-infos {
    gap: 10px
}



.product-card,.view-more {
    background: #fff;
    padding: 20px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px #0000001a
}

.product-info h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 400
}

.price {
    color: #ff6b22;
    font-size: 20px;
    margin: 0
}

.product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block
}

.view-more {
    cursor: pointer
}

.more-info h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 400
}

.more-info p {
    margin: 5px 0 0;
    color: #666;
    font-size: 14px
}

.arrow-icon {
    display: flex;
    align-items: center
}

.product-container {
    display: grid
}

.view-more.brick-item {
    height: auto;
    margin-bottom: 0
}

.product-info {
    line-height: normal
}

.product-card.brick-item-m {
    height: auto
}

.view-more.brick-item-m {
    height: auto;
    margin-bottom: 0
}

.box-hd {
    position: relative;
    height: 58px;
    margin: 0
}

.box-hd .title {
    font-size: 18px;
    font-weight: 600;
    line-height: 58px;
    color: #333;
    float: left
}

.box-hd .more {
    float: right
}

.tab-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 58px;
    gap: 30px
}

.tab-list li {
    cursor: pointer;
    transition: color .3s
}

.tab-list .tab-active {
    color: var(--tab-active)
}

.box-bd .row {
    display: flex;
    gap: 14px
}

.span4 {
    width: 234px;
    flex-shrink: 0
}

.span16 {
    flex: 1
}

.brick-promo-list {
    margin: 0;
    padding: 0;
    list-style: none
}

.brick-item-l img {
    width: 100%;
    height: auto;
    display: block
}

.brick-list {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0;
}

.brick-list>* {
    height: 100%
}



.brick-item-m:hover,.brick-item-l:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px #0000001a;
    background-image: linear-gradient(55deg,#fff 20% 100%)
}

.brick-item-m .figure-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* overflow: hidden; */
    margin-bottom: 15px
}

.brick-item-m .figure-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block
}

.brick-item-m .title,.product-item .product-title,.product-card .product-title {
    -webkit-line-clamp: unset;
    min-height: 0;
    overflow: visible
}

.brick-item-m .card__content,.product-item .card__content,.product-card .card__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto
}

.brick-item-m .card__content:before,.product-item .card__content:before,.product-card .card__content:before {
    content: "";
    display: block;
    min-height: 22px;
    margin-bottom: 6px
}

.brick-item-m .card__content:has(.lipscore-rating-small):before,.product-item .card__content:has(.lipscore-rating-small):before,.product-card .card__content:has(.lipscore-rating-small):before {
    display: none
}



.lipscore-rating-small {
    order: 10;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    min-height: 22px;
    margin-bottom: 6px
}

.lipscore-rating-small .lipscore-rating-star {
    width: 18px;
    height: 18px;
    flex: 0 0 auto
}

.product-item__inventory,.inventory {
    order: 20;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    white-space: nowrap;
    min-height: 20px;
    margin: 0 0 10px
}

.brick-item-m .actions,.product-card .actions,.product-item .actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.tab-content {
    display: none
}

.tab-content.active {
    display: block
}

@media screen and (min-width: 1200px) {
    .product-item:hover {
        transform:translateY(-2px);
        box-shadow: 0 15px 30px #0000001a;
        background-image: linear-gradient(55deg,#fff 20% 100%)
    }
}

@media screen and (min-width: 769px) {
    li.brick-item.brick-item-m.desktop-banner {
        padding:0
    }

    .banner-image {
        display: grid;
        gap: 14px;
        height: auto
    }

    ul.brick-promo-list {
        gap: 14px;
        height: auto
    }

    li.brick-item.brick-item-m.brick-item-m-2,li.brick-item.brick-item-m.desktop-banner,li.brick-item.brick-item-l.desktop-banner {
        height: auto
    }

    li.brick-item.brick-item-m.desktop-banner img,.brick-item-l img {
        object-fit: cover;
        width: 100%;
        height: 100%!important
    }

    .span4 {
        width: 20.7%;
        flex-shrink: 0
    }

    .box-bd .row {
        display: flex;
        gap: 14px;
        width: 100%;
        justify-content: space-between;
        align-items: normal
    }

    .mobile-banner {
        display: none
    }
 
}

p.price del {
    text-decoration: line-through;
    font-size: 12px;
    color: #484543
}

.brick-item-m .title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    line-height: normal;
    height: 40px;
    font-size: 14px;
    margin-bottom: 10px
}
a.product-item__title.text--strong.link {
      overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 20px;
  min-height: 40px;
  margin-bottom: 4px;
}
.product-item__title {
 
    font-size: 14px;
}
button.rebuy-button {
    border-radius: 8px!important
}
.c-price del {
    /* height: 18px; */
    line-height: normal;
    margin-top: -4px;
    text-decoration: none;
}

.item-infos {
    height: 40px;
    margin-bottom: 10px;
}



.product-item .item-infos {
    height: 25px;
    margin-bottom: 10px;
}

.product-item--vertical .product-item__action-list, .product-item--horizontal .product-item__action-list {
    margin: 0;
}
.card__header .collection__meta {
    display: none;
}
@media screen and (max-width: 768px) {
    .desktop-banner {
        display:none
    }

    .mobile-banner {
        display: block
    }

    .mobile-banner img {
        width: 100%;
        height: auto
    }

    .box-hd {
        display: flex;
        justify-content: space-between
    }

    .box-hd {
        height: auto
    }

    .box-hd .title {
        float: none;
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 15px
    }

    .box-hd .more {
        float: none
    }

    .tab-list {
        font-size: 14px;
        line-height: 1.5
    }

    .box-bd .row {
        flex-direction: column
    }

    .span4 {
        width: 100%;
        margin-bottom: 14px
    }

    .brick-list {
        grid-template-columns: repeat(1,1fr);
        gap: 10px
    }

    .brick-item-m {
        padding: 10px
    }

    .brick-item-m .title {
        font-size: 16px
    }

    .brick-item-m .desc {
        font-size: 11px
    }

   

    .brick-item-m .price del {
        font-size: 12px
    }
    .product-item.product-item--vertical {
    width: 100%;
    /* padding: 0 10px; */
}
}

@media(min-width: 769px)and (max-width:1199px) {
    .brick-list {
        grid-template-columns:repeat(3,1fr);
        gap: 14px
    }
}

.product-item__info {
    display: flex
}

.flex.flex-col {
    flex: 1;
    flex-direction: column;
    display: flex
}

.flex.flex-row.items-center.gap-2.text-mini {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px
}

.fill-success {
    fill: #308234
}

.w-5 {
    width: 20px
}

.h-5 {
    height: 20px
}

.item-infos {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.value-picker__choice-item--country {
    display: flex;
    align-items: center;
    gap: .45em;
    text-align: left
}

.country-flag-emoji {
    flex-shrink: 0;
    font-size: 1.15em;
    line-height: 1
}

.select-button--with-country-flag {
    display: inline-flex;
    align-items: center;
    gap: .35em
}

.select-button--with-country-flag .select-button__country-label {
    flex: 1 1 auto;
    min-width: 0
}



span.product-item__inventory.inventory.inventory--low {
    color: #d2161c;
    opacity: 1
}

.c-price {
    display: grid
}

.item-infos {
    gap: 10px
}

.item-infos p:empty {display:none}

li.flex.items-start.gap-2 {
    list-style: none;
    line-height: normal;
    font-size: 14px;
    font-weight: 400
}

.text-text-light.pt-1 {
    margin-bottom: 23px
}
.brick-item-m-2 .text-text-light.pt-1 {
    margin-bottom: 10px;
}
.product-item--vertical .product-item__action-button {
    border-radius: 10px;
    margin-bottom: 10px;
    width: 78%
}

button.product-item__action-button.button.button--small.button--disabled {
    background: var(--product-sold-out-color);
    box-shadow: 0 0 0 1px var(--product-sold-out-color) inset;
    color: var(--secondary-background)
}

.product-item--horizontal,.product-item--list {
    display: flex
}

.product-item--horizontal .product-item__info,.product-item--list .product-item__info {
    flex: 1 0 0;
    padding: 4px 0
}

.product-item--horizontal .product-item__image-wrapper,.product-item--list .product-item__image-wrapper {
    flex: none;
    width: 120px;
    margin: 0 20px 0 0
}

.product-item--horizontal .product-item__action-list,.product-item--list .product-item__action-list {
    align-self: center
}

.product-item--horizontal .spr-starrating.spr-starrating {
    height: 11px
}

.product-item--horizontal .spr-starrating .spr-icon.spr-icon {
    width: 11px;
    height: 11px
}
button.product-item__action-button ,a.product-item__action-button {
    background: #fff;
    color: #000;
    border: 1px solid;
}

.product-item__image-wrapper {
    margin-bottom: 20px;
    display: block
}

.product-item__image-wrapper .placeholder-svg {
    height: auto
}

.product-item__secondary-image {
    display: none
}

.product-item__label-list {
    z-index: 2;
    font-size: 0;
    position: absolute;
    top: 14px;
    left: 6px;

}

.product-item__label-list>.product-label {
    border-radius: 3px;
    margin-bottom: 7px;
    display: block;
    font-weight:700;
    padding:3px 6px;
}

.product-item__info {
    min-width: 0
}
span.country-flag-emoji img {
    width: 15px;
}
span.country-flag-emoji {
    display: flex;
}
ul.list-none.text-mini.text-text-light.pt-1.wordBreak {
    display: none;
}

.start_tag:hover .figure.figure-img.pl-parent {
    display: flex;
    aspect-ratio: auto;
}

li.brick-item.brick-item-m.brick-item-m-2 a {
  
    display: grid;
}

.start_tag:hover a {
    grid-template-rows: 9rem auto auto auto;
    display: grid;
}

.start_tag:hover ul.list-none.text-mini {
    display: block !important;
    /* font-size: 10px; */
}

@media screen and (min-width: 769px) {
.product-item.product-item--vertical.start_tag:hover a {
    display: block;
}

.product-item.product-item--vertical.start_tag:hover {
    display: grid;
   
}

.product-item.product-item--vertical.start_tag:hover  .aspect-ratio.aspect-ratio--square {
  
    padding-bottom: 65% !important;
}
.lh_not-meate.product-item.product-item--vertical.start_tag:hover  .aspect-ratio.aspect-ratio--square {
    padding-bottom: 100% !important;
}
}
ul.list-none.text-mini.text-text-light.pt-1.wordBreak strong, ul.list-none.text-mini.text-text-light.pt-1.wordBreak b,ul.list-none.text-mini.text-text-light.pt-1.wordBreak * {
    font-weight: normal;
}
@media screen and (max-width: 999px) {
    .product-list--collection {
        border: none;
        display: block;
        padding: 0 15px
    }
    ul.list-none.text-mini.text-text-light.pt-1.wordBreak {
    display: block !important;
}

    .product-list--collection .product-item__label-list {
        left: 10px !important;
    }
}

@media screen and (min-width: 769px) {
    .product-item {
    background-image: linear-gradient(55deg,#fff0 20%,#0000000f);
    white-space: normal;
    flex-shrink: 0;
    min-width: 0;
    padding: 20px;
    position: relative
  }
 .brick-item-m {
    background-image: linear-gradient(55deg,#fff0 20%,#0000000f);
    padding: 20px;
    transition: all .3s;
    position: relative;
    display: flex;
    flex-direction: column
 }
 .slideshow .flickity-page-dots .dot.is-selected {
  background: #ff6801 ; border:1px solid #ff6801
  
    }
    span.lipscore-rating-small {
    margin-bottom: 20px;
    }
    .slideshow .flickity-page-dots .dot {
    background: #fff;
    border: 1px solid #fff;
    width: 60px;
    height: 0.1px;
    margin: 0 8px;
    transition: background .25s ease-in-out;
    transform: none !important;
    border-radius:unset
    }
    .product-item:after {
    content: "";
    box-shadow: 1px 0 var(--border-color),0 1px var(--border-color);
    z-index: 2;
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
    }

    .product-item--vertical .product-item__action-button {
    border-radius: 10px;
    margin-bottom: 10px;
    width: fit-content;
    padding: 0 10%;
    }

    .product-item__title {
    margin-bottom: 0px;
    }
    .start_tag:hover ul.list-none.text-mini {
    /* grid-template-rows: auto 2rem; */
    display: grid !important;
    }

    li.brick-item.brick-item-m.brick-item-m-2.start_tag:hover a {
    grid-template-rows: 11rem auto auto auto;
    }
    .brick-item-m:hover .figure.figure-img {
    display: block;
    height: 90%;
  }
    .start_tag:hover span.lipscore-rating-small {
    margin: 10px 0;
    }
    ul.list-none.text-mini.text-text-light.pt-1.wordBreak li {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    line-height: normal;
    overflow: hidden;
    list-style-type: disc;
    margin-left: 0;
    }
    ul.list-none.text-mini li:before {
        content: "•";
        color: #000;
        font-size: 16px;
    }
   del.cf-top {
    display: none;
}
 }
 /*add css 260414 */


@media screen and (max-width: 767px) {
  [preorder-product-element="form"].product-item--vertical {
    display: grid;
    grid-template-columns: 44% 56%;
    column-gap: 12px;
    align-items: center;
    padding: 12px;
    background: #f3f3f3;
    margin-bottom: 10px;
  }
  .c-price del,span.lh_price_compare {
    display: none;
}

a.product-item__title.text--strong.link {
    height: auto;
}
.spf-has-filter #gf-products {
    margin-right: 0 !important;
    padding: 0 10px !important;
}
ul.list-none.text-mini.text-text-light.pt-1.wordBreak li {
   display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    line-height: normal;
    overflow: hidden; /* 确保溢出的文本被隐藏 */
  
    list-style-type: disc;
    margin-left: 0;
}
li.brick-item.brick-item-m.brick-item-m-2 .product-card.brick-item-m {
    display: none;
}
ul.list-none.text-mini li:before {
    content: "•"; /* 设置自定义符号 */
    color: #000;   /* è®¾ç½®æ ‡è®°é¢œè‰² */
    font-size: 16px; /* è®¾ç½®æ ‡è®°çš„å¤§å° */
    }

 ul.list-none.text-mini li:empty{
    display:none
}
  [preorder-product-element="form"].product-item--vertical .product-item__image-wrapper {
    margin-bottom: 0;
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  [preorder-product-element="form"].product-item--vertical .product-item__info {
    grid-column: 2;
    display: block;
    min-width: 0;
    padding-right: 10px;
  }

  [preorder-product-element="form"].product-item--vertical .product-item__title {
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  [preorder-product-element="form"].product-item--vertical ul.list-none.text-mini.text-text-light.pt-1.wordBreak {
    display: block !important;
    margin: 0 0 10px 0;
    padding-left: 0px;
  }

  [preorder-product-element="form"].product-item--vertical ul.list-none.text-mini.text-text-light.pt-1.wordBreak li {
    font-size: 13px;
  
    color: #666;
    margin-bottom: 2px;
  }

  [preorder-product-element="form"].product-item--vertical .item-infos {
    display: block;
    gap: 0;
    height: 50px;
  }

  [preorder-product-element="form"].product-item--vertical .item-infos .price {
    margin: 0;
  }

  [preorder-product-element="form"].product-item--vertical .item-infos .num {
    font-size: 26px;
    line-height: 1;
    color: #ff6a00;
    font-weight: 700;
  }

  [preorder-product-element="form"].product-item--vertical .item-infos .c-price {
    margin-top: 4px;
  }

  [preorder-product-element="form"].product-item--vertical .item-infos .compare-price {
    font-size: 14px;
    color: #8b8b8b;
  }

  [preorder-product-element="form"].product-item--vertical .item-infos .product-label--on-sale {
    display: inline-block;
    margin-bottom: 4px;
    padding: 2px 8px;
    border-radius: 8px;
    background: #ff6a00;
    color: #fff;
    font-size: 14px !important;
    line-height: 1.4;
  }

  [preorder-product-element="form"].product-item--vertical .product-item__action-list {
    margin-top: 10px;
   
  }

  [preorder-product-element="form"].product-item--vertical .product-item__action-button {
  
    border-radius: 10px;
    border: 1px solid #bdbdbd;
    background: #f3f3f3;
    color: #2d2d2d;
    padding: 8px 14px;
    font-size: 12px;
    line-height: normal;
    max-height: 35px;
  }

  [preorder-product-element="form"].product-item--vertical .product-item__label-list {
    left: 12px !important;
    top: 12px;
  }

  [preorder-product-element="form"].product-item--vertical .product-item__label-list > .product-label {
    border-radius: 0;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.1;
      background: radial-gradient(
  circle,
  rgba(255, 255, 255, 1) 0%,
  rgba(236, 248, 224, 1) 100%
);
    color:#78AC64;
  }
  [preorder-product-element="form"].product-item--vertical ul.list-none.text-mini.text-text-light.pt-1.wordBreak {
    margin-left: 0;
    padding-left: 0;
}

 [preorder-product-element="form"].product-item--vertical .c-price {
    display: flex;
    gap: 10px;
    margin: 0px 0 10px 0;
}

 [preorder-product-element="form"].product-item--vertical .c-price del {
    /* position: absolute; */
    /* right: 0; */
    margin-top: -10px;
}



.item-infos {
    height: 100px;
}

a.product-item__image-wrapper.product-item__image-wrapper--with-secondary {
    align-items: center;
    justify-content: center;
}
a.product-item__title.text--strong.link {
    height: auto;
}
}

@media screen and (max-width: 767px) {
 
  /* featured-collection-tabs / brick-item-m-2：与 Globo å•†å“å¡åŒæ¬¾æ‰‹æœºç«¯å·¦å³åˆ†æ  */
  li.brick-item.brick-item-m.brick-item-m-2 {
    padding: 12px;
    background: #f3f3f3;
    position: relative;
  }

  li.brick-item.brick-item-m.brick-item-m-2 > a {
    display: grid;
    grid-template-columns: 44% 56%;
    column-gap: 12px;
    align-items: center;
    grid-template-rows: none;
  }

  li.brick-item.brick-item-m.brick-item-m-2.start_tag:hover > a {
    grid-template-columns: 44% 56%;
    grid-template-rows: auto auto auto;
  }

  li.brick-item.brick-item-m.brick-item-m-2 .figure.figure-img {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin-bottom: 0;
    align-self: center;
  }

  li.brick-item.brick-item-m.brick-item-m-2 h3.title {
    grid-column: 2;
    grid-row: 1;
    /* font-size: 18px; */
    line-height: 1.25;
    font-weight: 700;
    margin-bottom: 8px;
    height: auto;
    min-height: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  li.brick-item.brick-item-m.brick-item-m-2 ul.list-none.text-mini.text-text-light.pt-1.wordBreak {
    grid-column: 2;
    grid-row: 2;
    display: block !important;
    margin: 0 0 10px 0;
    /* padding-left: 16px; */
  }

  li.brick-item.brick-item-m.brick-item-m-2 ul.list-none.text-mini.text-text-light.pt-1.wordBreak li {
    font-size: 13px;
    line-height: 1.4;
    color: #666;
    margin-bottom: 2px;
  }

  li.brick-item.brick-item-m.brick-item-m-2 .item-infos {
    grid-column: 2;
    grid-row: 3;
    display: block;
    height: auto;
    margin-bottom: 0;
    gap: 0;
  }

  li.brick-item.brick-item-m.brick-item-m-2 .item-infos .price {
    margin: 0;
  }

  li.brick-item.brick-item-m.brick-item-m-2 .item-infos .num {
    font-size: 26px;
    line-height: 1;
    color: #ff6a00;
    font-weight: 700;
  }

  li.brick-item.brick-item-m.brick-item-m-2 .item-infos .c-price {
    margin-top: 4px;
    display: flex;
    gap: 20px;
  }

  li.brick-item.brick-item-m.brick-item-m-2 .item-infos .compare-price {
    font-size: 14px;
    color: #8b8b8b;
  }

  li.brick-item.brick-item-m.brick-item-m-2 .item-infos .product-label--on-sale {
    display: inline-block;
    margin-bottom: 4px;
    padding: 2px 8px;
    border-radius: 8px;
    background: #ff6a00;
    color: #fff;
    font-size: 14px !important;
    line-height: 1.4;
  }

  li.brick-item.brick-item-m.brick-item-m-2 .product-item__label-list {
    left: 12px !important;
    top: 12px;
  }

  li.brick-item.brick-item-m.brick-item-m-2 .product-item__label-list > .product-label {
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1;
    background: radial-gradient(
  circle,
  rgba(255, 255, 255, 1) 0%,
  rgba(236, 248, 224, 1) 100%
);
  color:#78AC64;
  }
   li.brick-item.brick-item-m.brick-item-m-2 .item-infos .c-price del {
    margin-top: -20px;
  }
}

/* ==========================================================================
   JX Predictive Search Customization - Start
   Owner: JX
   Purpose: Responsive header predictive search layout, mobile inline search row,
   portal dropdown, category chips, product rows and quick add button.
   ========================================================================== */

/* --------------------------------------------------------------------------
   JX base reset
   -------------------------------------------------------------------------- */

.jx-predictive-search-header,
.jx-predictive-search-header *,
.jx-predictive-search-portal,
.jx-predictive-search-portal * {
  box-sizing: border-box;
}

.header,
.header__inner,
.shopify-section__header,
#shopify-section-header {
  overflow: visible;
}

/* --------------------------------------------------------------------------
   Header search base
   -------------------------------------------------------------------------- */

.jx-predictive-search-header {
  display: block !important;
  position: relative;
  flex: 1 1 auto;
  max-width: 820px;
  min-width: 320px;
  margin: 0 18px;
  z-index: 30;
}

.jx-predictive-search-header .search-bar {
  display: block;
  width: 100%;
  position: relative;
  border-radius: 24px !important;
  background: #e9e9e8;
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08);
}

.jx-predictive-search-header .search-bar__top-wrapper,
.jx-predictive-search-header .search-bar__top {
  width: 100%;
  border-radius: 24px !important;
}

.jx-predictive-search-header .search-bar__top {
  display: flex;
  align-items: center;
  min-height: 44px;
  background: transparent;
  overflow: hidden !important;
}

.jx-predictive-search-header .search-bar__input-wrapper {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.jx-predictive-search-header .search-bar__input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 12px 0 18px;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: #111;
  -webkit-text-fill-color: #111;
  font-size: 14px;
  line-height: 44px;
}

.jx-predictive-search-header .search-bar__input::placeholder {
  color: #111;
  -webkit-text-fill-color: #111;
  opacity: 1;
}

.jx-predictive-search-header .search-bar__submit,
.jx-predictive-search-header .jx-predictive-search-clear {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 46px;
  min-width: 46px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #111;
  cursor: pointer;
}

.jx-predictive-search-header .search-bar__submit svg,
.jx-predictive-search-header .jx-predictive-search-clear svg {
  display: block;
  width: 20px;
  height: 20px;
}

.jx-predictive-search-header.is-loading .search-bar__submit .icon-search {
  display: none;
}

.jx-predictive-search-header:not(.is-loading) .search-bar__submit .icon-search-loader {
  display: none;
}

/* Theme close button creates the visible "Stäng" text on mobile. Keep it hidden. */
.jx-predictive-search-header .search-bar__close-button {
  display: none !important;
}

/* JX clear button only appears when JS adds .is-visible */
.jx-predictive-search-header .jx-predictive-search-clear {
  display: none !important;
}

.jx-predictive-search-header .jx-predictive-search-clear.is-visible {
  display: inline-flex !important;
}

/* Legacy theme dropdown is not used because JX portal renders results */
.jx-predictive-search-header .search-bar__inner,
.jx-predictive-search-header .search-bar__results,
.jx-predictive-search-header .skeleton-container,
.jx-predictive-search-header .search-bar__menu-wrapper {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Desktop header position
   -------------------------------------------------------------------------- */

@media screen and (min-width: 1000px) {
  .header__inner {
    position: relative;
  }

  .jx-predictive-search-header {
    position: absolute;
    left: 50%;
    top: calc(50% - 8px) !important;
    width: min(760px, calc(100vw - 560px));
    max-width: 760px;
    min-width: 420px;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    z-index: 40;
  }

  .header__action-list {
    margin-left: auto;
  }

  /* Hide the standalone desktop search icon. Keep the center JX search bar. */
  body header.header .header__action-list details-modal.header__search,
  body header.header .header__action-list .header__search,
  body header.header .header__action-list summary.header__icon--search,
  body header.header .header__action-list a.header__icon[href*="/search"],
  body header.header .header__action-list button.header__icon--search,
  body header.header .header__action-list .header__icon--search,
  body header.header .header__action-list [data-action="toggle-search"],
  body header.header .header__action-list .header__icons > details-modal.header__search,
  body header.header .header__action-list .header__icons > .header__search,
  body header.header .header__action-list .header__icons > summary.header__icon--search,
  body header.header .header__action-list .header__icons > a.header__icon[href*="/search"],
  body header.header .header__action-list .header__icons > button.header__icon--search {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile header layout
   Search bar is a real second row, not a popup.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 999px) {
  html body #shopify-section-header,
  html body .shopify-section-group-header-group,
  html body section[data-section-type="header"] {
    overflow: visible !important;
  }

  html body #shopify-section-header .header,
  html body .shopify-section-group-header-group .header,
  html body section[data-section-type="header"] .header,
  html body .header.header--inline {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
  }

  html body #shopify-section-header .header .container,
  html body .shopify-section-group-header-group .header .container,
  html body section[data-section-type="header"] .header .container,
  html body header.header .container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    overflow: visible !important;
  }

  html body #shopify-section-header .header__inner,
  html body .shopify-section-group-header-group .header__inner,
  html body section[data-section-type="header"] .header__inner,
  html body .header__inner {
    display: grid !important;
    grid-template-columns: auto auto 1fr auto !important;
    grid-template-areas:
      "logo search search actions" !important;
    row-gap: 0 !important;
    align-items: center !important;
    column-gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px 0 10px !important;
    overflow: visible !important;
  }

  html body #shopify-section-header .header__logo,
  html body .shopify-section-group-header-group .header__logo,
  html body section[data-section-type="header"] .header__logo,
  html body .header__logo {
    grid-area: logo !important;
    margin: 0 !important;
  }

  html body #shopify-section-header #lh-menu-toggle,
  html body #shopify-section-header .lh_menu-toggle,
  html body .shopify-section-group-header-group #lh-menu-toggle,
  html body .shopify-section-group-header-group .lh_menu-toggle,
  html body section[data-section-type="header"] #lh-menu-toggle,
  html body section[data-section-type="header"] .lh_menu-toggle {
    grid-area: menu !important;
    margin: 0 !important;
  }

  html body #shopify-section-header .header__action-list,
  html body .shopify-section-group-header-group .header__action-list,
  html body section[data-section-type="header"] .header__action-list,
  html body .header__action-list {
    grid-area: actions !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    margin-left: 0 !important;
  }



  /* Search wrapper row */
  html body #shopify-section-header .header__inner > .header__search-bar-wrapper.jx-predictive-search-header,
  html body .shopify-section-group-header-group .header__inner > .header__search-bar-wrapper.jx-predictive-search-header,
  html body section[data-section-type="header"] .header__inner > .header__search-bar-wrapper.jx-predictive-search-header,
  html body .header__inner > .header__search-bar-wrapper.jx-predictive-search-header,
  html body .header__search-bar-wrapper.jx-predictive-search-header {
    grid-area: search !important;
    display: block !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: clamp(150px, 44vw, 230px) !important;
    justify-self: center !important;
    margin: 0 8px !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    pointer-events: auto !important;
    z-index: 120 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: -20px !important;
    margin-bottom: 2px !important;
  }

  html body .jx-predictive-search-header .search-bar,
  html body .jx-predictive-search-header .search-bar__top-wrapper,
  html body .jx-predictive-search-header .search-bar__top {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
    background: #e9e9e8 !important;
    border-radius: 22px !important;
    box-shadow: none !important;
  }

  html body .jx-predictive-search-header .search-bar__input-wrapper {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #e9e9e8 !important;
    border-radius: 22px 0 0 22px !important;
  }

  html body .jx-predictive-search-header input.search-bar__input,
  html body .jx-predictive-search-header .search-bar__input {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 10px 0 16px !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: #e9e9e8 !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    font-size: 14px !important;
    line-height: 40px !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-radius: 22px 0 0 22px !important;
  }

  html body .jx-predictive-search-header input.search-bar__input::placeholder,
  html body .jx-predictive-search-header .search-bar__input::placeholder {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    opacity: 1 !important;
  }

  html body .jx-predictive-search-header .jx-predictive-search-clear,
  html body .jx-predictive-search-header .search-bar__submit {
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #e9e9e8 !important;
    color: #111 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: none !important;
  }

  html body .jx-predictive-search-header .jx-predictive-search-clear {
    display: none !important;
    border-radius: 0 !important;
  }

  html body .jx-predictive-search-header .jx-predictive-search-clear.is-visible {
    display: inline-flex !important;
  }

  html body .jx-predictive-search-header .search-bar__submit {
    display: inline-flex !important;
    border-radius: 0 22px 22px 0 !important;
  }

  html body .jx-predictive-search-header .search-bar__submit svg,
  html body .jx-predictive-search-header .jx-predictive-search-clear svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body .jx-predictive-search-header .search-bar__close-button {
    display: none !important;
  }

  html body .jx-mobile-search-overlay,
  html body .jx-mobile-search-panel {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* --------------------------------------------------------------------------
   Portal dropdown
   -------------------------------------------------------------------------- */

.jx-predictive-search-portal {
  display: none;
  position: fixed;
  z-index: 2147483647;
  background: #fff;
  color: #1f1f1f;
  max-height: 520px;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-radius: 14px 4px 4px 14px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.jx-predictive-search-portal.is-visible {
  display: block;
}

.jx-predictive-search-portal::-webkit-scrollbar {
  width: 10px;
}

.jx-predictive-search-portal::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.jx-predictive-search-portal::-webkit-scrollbar-thumb {
  background: #aeb3bb;
  border: 2px solid #f1f1f1;
  border-radius: 999px;
}

.jx-predictive-search-portal::-webkit-scrollbar-thumb:hover {
  background: #8f959d;
}

@media screen and (max-width: 640px) {
  .jx-predictive-search-portal {
    max-height: calc(100vh - 150px) !important;
    border-radius: 12px 4px 4px 12px !important;
  }
}

/* --------------------------------------------------------------------------
   Predictive search content
   -------------------------------------------------------------------------- */

.jx-predictive-search {
  background: #fff;
  color: #1f1f1f;
}

.jx-predictive-search__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  font-size: 14px;
  font-weight: 700;
}

.jx-predictive-search__view-all {
  color: #1a73e8;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.jx-predictive-search__view-all:hover {
  text-decoration: underline;
}

.jx-predictive-search__empty {
  padding: 20px;
  color: #777;
  font-size: 14px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Suggested categories
   -------------------------------------------------------------------------- */

.jx-predictive-search__category-block {
  padding: 14px 18px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}

.jx-predictive-search__category-title {
  margin: 0 0 12px;
  color: #2c2f36;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.jx-predictive-search__category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.jx-predictive-search__category-chip {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid #d5d9df;
  border-radius: 8px;
  background: linear-gradient(180deg, #eef1f4 0%, #e2e6ea 100%);
  color: #454b54;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.jx-predictive-search__category-chip:hover {
  border-color: #c5cbd3;
  background: linear-gradient(180deg, #e5e9ed 0%, #d8dde3 100%);
  transform: translateY(-1px);
}

.jx-predictive-search__category-chip span {
  display: block;
  width: 100%;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Product result rows
   -------------------------------------------------------------------------- */

.jx-predictive-search__list {
  display: flex;
  flex-direction: column;
  background: #fff;
}

.jx-predictive-search__item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 84px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
}

.jx-predictive-search__item:last-child {
  border-bottom: 0;
}

.jx-predictive-search__item:hover {
  background: #f7f7f7;
}

.jx-predictive-search__image {
  display: block;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #f4f4f4;
}

.jx-predictive-search__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.jx-predictive-search__image-placeholder,
.jx-predictive-search__image-placeholder svg {
  width: 100%;
  height: 100%;
}

.jx-predictive-search__info {
  min-width: 0;
}

.jx-predictive-search__title {
  display: block;
  margin-bottom: 4px;
  color: #222;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

.jx-predictive-search__title:hover {
  text-decoration: underline;
}

.jx-predictive-search__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 5px;
  color: #777;
  font-size: 12px;
  line-height: 1.25;
}

.jx-predictive-search__meta span + span::before {
  content: "|";
  margin-right: 6px;
  color: #c9c9c9;
}

.jx-predictive-search__stock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  line-height: 1;
}

.jx-predictive-search__stock-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
}

.jx-predictive-search__stock.is-in-stock {
  color: #3a9b35;
}

.jx-predictive-search__stock.is-in-stock .jx-predictive-search__stock-dot {
  background: #3a9b35;
}

.jx-predictive-search__stock.is-out-of-stock {
  color: #999;
}

.jx-predictive-search__stock.is-out-of-stock .jx-predictive-search__stock-dot {
  background: #bbb;
}

.jx-predictive-search__side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  white-space: nowrap;
}

.jx-predictive-search__price {
  color: #222;
  font-size: 15px;
  font-weight: 800;
  text-align: right;
}

.jx-predictive-search__add-form {
  margin: 0;
}

.jx-predictive-search__add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 4px;
  background: #42b72a;
  color: #fff;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.jx-predictive-search__add-button:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.jx-predictive-search__add-button svg {
  width: 19px;
  height: 19px;
}

.jx-predictive-search__add-button.is-disabled,
.jx-predictive-search__add-button:disabled {
  background: #cfcfcf;
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
}

.jx-predictive-search__add-button.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Mobile dropdown content
   -------------------------------------------------------------------------- */

@media screen and (max-width: 640px) {
  .jx-predictive-search__header {
    padding: 11px 14px !important;
    font-size: 13px !important;
  }

  .jx-predictive-search__category-block {
    padding: 12px 14px 14px !important;
  }

  .jx-predictive-search__category-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .jx-predictive-search__category-chip {
    min-height: 38px;
    padding: 9px 11px;
    font-size: 12px;
  }

  .jx-predictive-search__item {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    min-height: auto !important;
    padding: 11px 14px !important;
  }

  .jx-predictive-search__image {
    width: 52px !important;
    height: 52px !important;
  }

  .jx-predictive-search__title {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .jx-predictive-search__meta,
  .jx-predictive-search__stock {
    font-size: 11px !important;
  }

  .jx-predictive-search__side {
    grid-column: 2 !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 6px !important;
  }

  .jx-predictive-search__price {
    font-size: 14px !important;
  }

  .jx-predictive-search__add-button {
    width: 36px !important;
    height: 36px !important;
  }
}

/* --------------------------------------------------------------------------
   JX Safe Visual Polish v4
   Owner: JX
   Purpose:
   1. Only polish search bar UI.
   2. Do NOT change mobile layout / grid / order / display.
   3. Keep mobile search bar visible.
   4. Make search / loading / clear X share one right-side slot.
   -------------------------------------------------------------------------- */

/* Search field premium depth: no white border, darker inset shadow */
.jx-predictive-search-header .search-bar {
  border: 0 !important;
  background:
    linear-gradient(180deg, #d8d8d5 0%, #e2e1df 48%, #eeeeeb 100%) !important;
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, 0.22),
    inset 0 -1px 1px rgba(255, 255, 255, 0.55),
    0 2px 5px rgba(0, 0, 0, 0.10),
    0 8px 22px rgba(0, 0, 0, 0.16) !important;
  overflow: hidden !important;
}

/* Prevent inner elements from painting a separate pale block */
.jx-predictive-search-header .search-bar__top-wrapper,
.jx-predictive-search-header .search-bar__top,
.jx-predictive-search-header .search-bar__input-wrapper,
.jx-predictive-search-header .search-bar__input,
.jx-predictive-search-header .search-bar__submit,
.jx-predictive-search-header .jx-predictive-search-clear {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Keep input clean and leave room for one right-side icon slot */
.jx-predictive-search-header .search-bar__top {
  position: relative !important;
}

.jx-predictive-search-header .search-bar__input {
  padding-right: 52px !important;
}

/* One unified right-side slot: search / loading / clear X */
.jx-predictive-search-header .search-bar__submit,
.jx-predictive-search-header .jx-predictive-search-clear {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #111 !important;
  box-shadow: none !important;
  border-radius: 0 24px 24px 0 !important;
}

/* Default: show search icon */
.jx-predictive-search-header .search-bar__submit {
  z-index: 3 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* X hidden by default */
.jx-predictive-search-header .jx-predictive-search-clear {
  z-index: 5 !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* X visible after typing/searching */
.jx-predictive-search-header .jx-predictive-search-clear.is-visible {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* When X is visible, hide search icon in the same slot */
.jx-predictive-search-header .jx-predictive-search-clear.is-visible ~ .search-bar__submit,
.jx-predictive-search-header .search-bar__top:has(.jx-predictive-search-clear.is-visible) .search-bar__submit {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Not loading: hide all loader/spinner variants */
.jx-predictive-search-header:not(.is-loading) .search-bar__submit .icon-search-loader,
.jx-predictive-search-header:not(.is-loading) .search-bar__submit .icon--search-loader,
.jx-predictive-search-header:not(.is-loading) .search-bar__submit .icon-loader,
.jx-predictive-search-header:not(.is-loading) .search-bar__submit .icon--loader,
.jx-predictive-search-header:not(.is-loading) .search-bar__submit .loader,
.jx-predictive-search-header:not(.is-loading) .search-bar__submit .spinner,
.jx-predictive-search-header:not(.is-loading) .search-bar__submit [class*="loader"],
.jx-predictive-search-header:not(.is-loading) .search-bar__submit [class*="spinner"] {
  display: none !important;
}

/* Loading: hide X and search icon, show loader only */
.jx-predictive-search-header.is-loading .jx-predictive-search-clear {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.jx-predictive-search-header.is-loading .search-bar__submit {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.jx-predictive-search-header.is-loading .search-bar__submit .icon-search,
.jx-predictive-search-header.is-loading .search-bar__submit .icon--search {
  display: none !important;
}

.jx-predictive-search-header.is-loading .search-bar__submit .icon-search-loader,
.jx-predictive-search-header.is-loading .search-bar__submit .icon--search-loader,
.jx-predictive-search-header.is-loading .search-bar__submit .icon-loader,
.jx-predictive-search-header.is-loading .search-bar__submit .icon--loader,
.jx-predictive-search-header.is-loading .search-bar__submit .loader,
.jx-predictive-search-header.is-loading .search-bar__submit .spinner {
  display: block !important;
}

/* Icon size */
.jx-predictive-search-header .search-bar__submit svg,
.jx-predictive-search-header .jx-predictive-search-clear svg {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
}

/* Mobile: keep existing layout, only polish the visual size and depth */
@media screen and (max-width: 999px) {
  html body .jx-predictive-search-header .search-bar {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 22px !important;
    background:
      linear-gradient(180deg, #d8d8d5 0%, #e2e1df 48%, #eeeeeb 100%) !important;
    box-shadow:
      inset 0 2px 7px rgba(0, 0, 0, 0.22),
      inset 0 -1px 1px rgba(255, 255, 255, 0.55),
      0 2px 5px rgba(0, 0, 0, 0.10),
      0 7px 18px rgba(0, 0, 0, 0.15) !important;
  }

  html body .jx-predictive-search-header .search-bar__top,
  html body .jx-predictive-search-header .search-bar__top-wrapper,
  html body .jx-predictive-search-header .search-bar__input-wrapper {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 22px !important;
  }

  html body .jx-predictive-search-header input.search-bar__input,
  html body .jx-predictive-search-header .search-bar__input {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 48px 0 16px !important;
    font-size: 14px !important;
    line-height: 40px !important;
  }

  html body .jx-predictive-search-header .search-bar__submit,
  html body .jx-predictive-search-header .jx-predictive-search-clear {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 0 22px 22px 0 !important;
  }

  html body .jx-predictive-search-header .search-bar__submit svg,
  html body .jx-predictive-search-header .jx-predictive-search-clear svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* PC: hide only the duplicate standalone search action, not the center JX search bar */
@media screen and (min-width: 1000px) {
  #shopify-section-header .header__action-list > .header__action-item--search,
  #shopify-section-header .header__action-list > .header__search,
  #shopify-section-header .header__action-list > details-modal.header__search,
  #shopify-section-header .header__action-list > summary.header__icon--search,
  #shopify-section-header .header__action-list > a.header__icon--search,
  #shopify-section-header .header__action-list > button.header__icon--search,
  #shopify-section-header .header__action-list > *:has(.header__icon--search),
  #shopify-section-header .header__action-list > *:has([data-action="toggle-search"]) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}
/* --------------------------------------------------------------------------
   JX Mobile Search Visual Correction v5
   Owner: JX
   Purpose:
   1. Move mobile inline search row upward.
   2. Make mobile search field closer to PC premium inset-shadow style.
   3. Reduce button-like outer shadow.
   4. Do NOT change mobile layout / grid / order / display.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 999px) {
  /* Move the whole mobile search row upward 
  html body #shopify-section-header .header__search-bar-wrapper.jx-predictive-search-header,
  html body .shopify-section-group-header-group .header__search-bar-wrapper.jx-predictive-search-header,
  html body section[data-section-type="header"] .header__search-bar-wrapper.jx-predictive-search-header,
  html body .header__search-bar-wrapper.jx-predictive-search-header {
    margin-top: -10px !important;
    margin-bottom: -2px !important;
    transform: translateY(-7px) !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  */
  /* Premium field base: darker, flatter outer layer */
  html body #shopify-section-header .jx-predictive-search-header .search-bar,
  html body .jx-predictive-search-header .search-bar {
    position: relative !important;
    isolation: isolate !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background:
      linear-gradient(180deg, #d3d3d0 0%, #dfdedb 48%, #ecebe8 100%) !important;
    box-shadow:
      0 1px 2px rgba(255, 255, 255, 0.55),
      0 2px 7px rgba(0, 0, 0, 0.10) !important;
    overflow: hidden !important;
  }

  /* Real inner depth overlay. This creates the PC-like inset shadow. */
  html body #shopify-section-header .jx-predictive-search-header .search-bar::after,
  html body .jx-predictive-search-header .search-bar::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 6 !important;
    display: block !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    box-shadow:
      inset 0 2px 7px rgba(0, 0, 0, 0.30),
      inset 0 -1px 1px rgba(255, 255, 255, 0.62),
      inset 1px 0 2px rgba(0, 0, 0, 0.08),
      inset -1px 0 2px rgba(0, 0, 0, 0.08) !important;
  }

  /* Remove inner white / flat blocks so the search bar feels like one piece */
  html body #shopify-section-header .jx-predictive-search-header .search-bar__top-wrapper,
  html body #shopify-section-header .jx-predictive-search-header .search-bar__top,
  html body #shopify-section-header .jx-predictive-search-header .search-bar__input-wrapper,
  html body #shopify-section-header .jx-predictive-search-header .search-bar__input,
  html body .jx-predictive-search-header .search-bar__top-wrapper,
  html body .jx-predictive-search-header .search-bar__top,
  html body .jx-predictive-search-header .search-bar__input-wrapper,
  html body .jx-predictive-search-header .search-bar__input {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body #shopify-section-header .jx-predictive-search-header .search-bar__top,
  html body .jx-predictive-search-header .search-bar__top {
    position: relative !important;
    z-index: 2 !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 22px !important;
  }

  html body #shopify-section-header .jx-predictive-search-header .search-bar__input-wrapper,
  html body .jx-predictive-search-header .search-bar__input-wrapper {
    position: relative !important;
    z-index: 2 !important;
  }

  html body #shopify-section-header .jx-predictive-search-header input.search-bar__input,
  html body .jx-predictive-search-header input.search-bar__input,
  html body .jx-predictive-search-header .search-bar__input {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 48px 0 17px !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    font-size: 14px !important;
    line-height: 40px !important;
  }

  html body #shopify-section-header .jx-predictive-search-header input.search-bar__input::placeholder,
  html body .jx-predictive-search-header input.search-bar__input::placeholder,
  html body .jx-predictive-search-header .search-bar__input::placeholder {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    opacity: 0.95 !important;
  }

  /* Keep right icon above the inset-shadow overlay */
  html body #shopify-section-header .jx-predictive-search-header .search-bar__submit,
  html body #shopify-section-header .jx-predictive-search-header .jx-predictive-search-clear,
  html body .jx-predictive-search-header .search-bar__submit,
  html body .jx-predictive-search-header .jx-predictive-search-clear {
    z-index: 8 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #111 !important;
  }
}

/* ==========================================================================
   JX Search Bar - Elgiganten Style Visual Override
   Purpose: Only change search bar color, shadow, radius and icon color
   ========================================================================== */

.jx-predictive-search-header .search-bar {
  background: #f4f5f2 !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Remove old inset-shadow overlay from previous JX polish */
.jx-predictive-search-header .search-bar::after {
  display: none !important;
  content: none !important;
  box-shadow: none !important;
}

/* Make inner parts one clean search field */
.jx-predictive-search-header .search-bar__top-wrapper,
.jx-predictive-search-header .search-bar__top,
.jx-predictive-search-header .search-bar__input-wrapper,
.jx-predictive-search-header .search-bar__input,
.jx-predictive-search-header .search-bar__submit,
.jx-predictive-search-header .jx-predictive-search-clear {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Input text and placeholder */
.jx-predictive-search-header .search-bar__input {
  color: #1f1f1f !important;
  -webkit-text-fill-color: #1f1f1f !important;
}

.jx-predictive-search-header .search-bar__input::placeholder {
  color: #8a8f8a !important;
  -webkit-text-fill-color: #8a8f8a !important;
  opacity: 1 !important;
}



/* Desktop size */
@media screen and (min-width: 1000px) {
  .jx-predictive-search-header .search-bar,
  .jx-predictive-search-header .search-bar__top-wrapper,
  .jx-predictive-search-header .search-bar__top {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 999px !important;
  }

  .jx-predictive-search-header .search-bar__input {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    line-height: 44px !important;
    padding-left: 22px !important;
    padding-right: 54px !important;
    font-size: 15px !important;
  }

  .jx-predictive-search-header .search-bar__submit,
  .jx-predictive-search-header .jx-predictive-search-clear {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 0 999px 999px 0 !important;
  }
}

/* Mobile: keep your current layout, only match the visual style */
@media screen and (max-width: 999px) {
  html body .jx-predictive-search-header .search-bar,
  html body .jx-predictive-search-header .search-bar__top-wrapper,
  html body .jx-predictive-search-header .search-bar__top,
  html body .jx-predictive-search-header .search-bar__input-wrapper {
    background: #f4f5f2 !important;
    box-shadow: none !important;
    border-radius: 999px !important;
  }

  html body .jx-predictive-search-header .search-bar::after {
    display: none !important;
    content: none !important;
  }

  html body .jx-predictive-search-header input.search-bar__input,
  html body .jx-predictive-search-header .search-bar__input {
    background: transparent !important;
    color: #1f1f1f !important;
    -webkit-text-fill-color: #1f1f1f !important;
  }

  html body .jx-predictive-search-header input.search-bar__input::placeholder,
  html body .jx-predictive-search-header .search-bar__input::placeholder {
    color: #8a8f8a !important;
    -webkit-text-fill-color: #8a8f8a !important;
    opacity: 1 !important;
  }

  html body .jx-predictive-search-header .search-bar__submit,
  html body .jx-predictive-search-header .jx-predictive-search-clear {
    background: transparent !important;
    color: #000000 !important;
    box-shadow: none !important;
  }

  html body .jx-predictive-search-header .search-bar__submit svg,
  html body .jx-predictive-search-header .jx-predictive-search-clear svg,
  html body .jx-predictive-search-header .search-bar__submit svg *,
  html body .jx-predictive-search-header .jx-predictive-search-clear svg * {
    color: #000000 !important;
    fill: none !important;
    stroke: #000000 !important;
  }
}



/* ==========================================================================
   Header icons - remove unwanted icon shadow/background box
   ========================================================================== */

  /* Hide old mobile search icon / popup trigger. Real search field is visible below. */
  html body #shopify-section-header .jx-mobile-search-trigger,
  html body .shopify-section-group-header-group .jx-mobile-search-trigger,
  html body section[data-section-type="header"] .jx-mobile-search-trigger,
  html body #shopify-section-header .header__action-list details-modal.header__search,
  html body #shopify-section-header .header__action-list .header__search,
  html body #shopify-section-header .header__action-list summary.header__icon--search,
  html body #shopify-section-header .header__action-list .header__icon--search,
  html body #shopify-section-header .header__action-list [data-action="toggle-search"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  /* ==========================================================================
   Fix mobile search icon - this SVG uses fill, not stroke
   ========================================================================== */

@media screen and (max-width: 999px) {
  html body #shopify-section-header .jx-predictive-search-header button.search-bar__submit,
  html body .jx-predictive-search-header button.search-bar__submit {
    background: transparent !important;
    color: #111 !important;
    opacity: 1 !important;
  }

  html body #shopify-section-header .jx-predictive-search-header button.search-bar__submit svg.icon-search,
  html body .jx-predictive-search-header button.search-bar__submit svg.icon-search {
    color: #111 !important;
    fill: #111 !important;
    stroke: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body #shopify-section-header .jx-predictive-search-header button.search-bar__submit svg.icon-search path,
  html body .jx-predictive-search-header button.search-bar__submit svg.icon-search path {
    fill: #111 !important;
    stroke: none !important;
    opacity: 1 !important;
  }
  .start_tag:hover a {
    display: block;
}
}

/* ==========================================================================
   JX Predictive Search Customization - End
   ========================================================================== */