/* The Modal (background) */
body {
  font-family: Tahoma !important;
  letter-spacing: 0.5px !important;
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
  }
  .modal.show,.taw_attr_option.show{
    display: block;
  }

  .taw_attr_option{
    cursor: pointer;
  }

  .taw_attr_option.active{
    border: solid 2px #00aeef;
  }
  .taw_attr_option.txt_only.active{
    border: solid 2px #ffffff;
  }
  

  /* .taw_attr_item_hld{
    background-color: #575656;
  } */
  
  /* Modal Content */
  .modal-content {
    margin: auto;
    padding: 10px;   
    width: 80%;
  }
  
  /* The Close Button */
  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

  .woocommerce .modal-content img, .woocommerce-page .modal-content img {
    height: 100%;
    max-width: auto;
    width: auto;
  }


#taw-prod-loader {
  text-align: center;
  min-height: 200px;
  display: block;
  padding-top: 400px;
  top: 0;
  left: -30px;
  /* background-color:rgba(0,0,0,.75); */
  width: calc(100% + 60px);
  position: absolute;
  height: 100%;
  margin-left: 30px;
  z-index: 0 !important;
}

.aloader {
  /* animation: mymove 5s infinite; */
  background-image: url("../img/uTsU66pdEA.gif");
  height: 100px;
  width: 100px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: inline-block;
  background-position: center;
  
}

#blurimage.active {
  filter: brightness(0.5);;
  /* -webkit-filter: blur(2px); */
}

#blurimage {
  filter: none;
  -webkit-filter: none;
 }
 #blurimg.active {
  filter: brightness(0.5);;
  /* -webkit-filter: blur(2px); */
}

#blurimg {
  filter: none;
  -webkit-filter: none;
 }

/* .bg-image {
  
  filter: blur(1px);
  -webkit-filter: blur(1px);
  
} */
@keyframes mymove {
  50% {
      transform: rotate(180deg);
  }
}

#taw-pro-img-grid {
  background-image: url("../img/ic_grid.svg");
  background-repeat: no-repeat;
  background-position: center; 
  cursor: pointer;
}

#taw-pro-img-grid.active {
  background-image: url("../img/ic_grid_active.svg");
}

#taw-pro-img-list {
  background-image: url("../img/ic_list.svg");
  background-repeat: no-repeat;
  background-position: center; 
  cursor: pointer;
}

#taw-pro-img-list.active {
  background-image: url("../img/ic_list_active.svg");
}

.ic_search {
  background-image: url('../img/ic_search.svg');
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
  background-size: 100%;
  display: inline-block;
  cursor: pointer;
}

/* #taw_input_search_btn {
  height: 25px;
  cursor: pointer;
  line-height: 25px;
} */

#taw_input_search_btn.active i {
  background-image: url('../img/ic_search_active.svg');
}

#taw_input_search_holder {
  display: none;
}

#taw_input_search_holder.active {
  display: flex;
}

#taw_input_search {
  border: none;
  border-radius: 13px;
  height: 26px;
  width: 180px;
  color: #000000;
}

#taw_input_search:focus {
  outline: none !important;
  border: none;
}

/* Search placeholder at every breakpoint. The inherited colour was #9ca3af on
   desktop (2.54:1) and #98a2b3 on mobile (2.58:1); both fail WCAG 1.4.3, which
   needs 4.5:1 for text. #667085 measures 4.97:1 on #fff. */
#taw_input_search::placeholder {
  color: #667085;
}

/* ---------------------------------------------------------------------------
   Sort dropdown — custom options list, all breakpoints.

   A native <select> hands its option panel to the OS, so the open list cannot
   be styled at all. product.js mirrors the select into the markup below and
   writes any choice back to the real <select>, which stays in the DOM driving
   the existing change handler. Until (or unless) that JS runs, the native
   select is what's visible, so it gets the same box styling.
   --------------------------------------------------------------------------- */
.taw-sort-trigger,
.taw-sort-list {
  display: none; /* revealed once product.js adds .taw-sort-custom */
}

.taw-sort-wrap.taw-sort-custom {
  position: relative;
}

.taw-sort-wrap.taw-sort-custom .taw-sort-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* 10px box, lighter weight and a 12px chevron; 40px tall for tap targets.
   `:not(.taw-sort-native)` keeps this off the select once JS has replaced it —
   its ID would otherwise outrank the collapse rule above — while a no-JS page
   (no .taw-sort-native class) still gets the styled box. */
.taw-sort-trigger,
#taw_filter_sortby:not(.taw-sort-native) {
  width: auto;
  height: 40px;
  padding: 0 34px 0 14px;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #8a94a3; /* 3.07:1 on #fff — WCAG 1.4.11 needs 3:1 for control boundaries */
  border-radius: 10px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #344054;
  text-align: left;
  align-items: center;
  line-height: 38px;
}

.taw-sort-custom .taw-sort-trigger {
  display: block;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}

.taw-sort-custom .taw-sort-trigger:focus-visible {
  outline: 2px solid #00aeef;
  outline-offset: 2px;
}

.taw-sort-custom .taw-sort-trigger[aria-expanded="true"] {
  border-color: #00aeef;
}

/* The styled options panel, in place of the OS list. */
.taw-sort-list {
  position: absolute;
  z-index: 130;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  margin: 0;
  padding: 6px;
  list-style: none;
  background-color: #fff;
  border: 1px solid #eaecf0;
  border-radius: 10px; /* matches the trigger */
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}

.taw-sort-custom .taw-sort-list.open {
  display: block;
}

.taw-sort-option {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #344054;
  white-space: nowrap;
  cursor: pointer;
}

.taw-sort-option[aria-selected="true"] {
  background-color: #e6f7fe;
  color: #0089be;
}

.taw-sort-option:hover,
.taw-sort-option:active {
  background-color: #f2f4f7;
}

.taw-sort-option[aria-selected="true"]:hover {
  background-color: #d9f1fd;
}

/* ---------------------------------------------------------------------------
   Archive filter bar, mobile/tablet (<1024px).

   Two states in one aligned row:
     collapsed  [(search icon)  14 Produkter            Standardsortering v]
     expanded   [( Sök produkter ......................................) (x)]

   Previously all three controls shared one flex-shrunk row: the sort select was
   capped at w-28 (112px, clipping "Standardsortering") and the search field was
   pinned to 70px (~12 chars) by a Customizer "Additional CSS" rule. Expanding
   the search now takes over the whole row instead of fighting for space in it.
   `.taw-searching` is toggled on the bar by product.js.
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  #filter-list-option {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  /* The count keeps `mx-auto` from the desktop row; it would eat the free space
     the sort select needs and push it onto a second line. */
  #taw_total_prod_count {
    white-space: nowrap;
  }

  #filter-list-option > div.mx-auto {
    margin-left: 0;
    margin-right: 0;
  }

  /* Row 1 — collapsed state */

  /* Circular icon button; also meets the 40px minimum tap target. */
  #taw_input_search_btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid #8a94a3; /* 3.07:1 on #fff — WCAG 1.4.11 needs 3:1 for control boundaries */
    border-radius: 9999px;
    justify-content: center;
    background-color: #fff;
  }

  #taw_input_search_btn.active {
    margin-left: 0; /* overrides a -10px nudge in Customizer "Additional CSS" */
  }

  /* No `margin-left: auto` here — an auto margin on the last item made the row
     wrap even with 39px to spare. The bar's own `justify-between` already
     spreads icon / count / select across the row. `mx-auto` (which centred the
     control) and `md:mr-5` are dropped so it sits flush with the row's end;
     desktop keeps its original margins. */
  .taw-sort-trigger,
  #taw_filter_sortby {
    margin-left: 0;
    margin-right: 0;
  }

  /* Expanded state: the search field takes the whole first row, the product
     count moves to a centred second row, and only the sort select is hidden
     (there is no room for it beside the field). */

  #filter-list-option.taw-searching > div:first-child {
    flex: 1 1 100%;
    gap: 10px;
  }

  /* The count div — every child except the search group and the sort wrapper. */
  #filter-list-option.taw-searching > div:not(:first-child):not(#taw_sort_wrapper) {
    flex: 1 1 100%;
    text-align: center;
  }

  #filter-list-option.taw-searching > #taw_sort_wrapper {
    display: none;
  }

  /* The pill border moves onto the input itself so the clear button can sit
     outside it as its own circle, as in the approved design. */
  #taw_input_search_holder.active {
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding-right: 0;
    border: 0;
    border-radius: 0;
  }

  /* Two IDs + class, to outrank the Customizer "Additional CSS" rule
     `@media (max-width:768px) { #taw_input_search { width: 70px !important } }`. */
  #taw_input_search_holder.active #taw_input_search {
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0;
    height: 40px;
    padding: 0 16px 0 40px;
    border: 1px solid #8a94a3; /* 3.07:1 on #fff — WCAG 1.4.11 needs 3:1 for control boundaries */
    border-radius: 9999px;
    background-color: #fff;
    background-image: url('../img/ic_search.svg');
    background-repeat: no-repeat;
    background-position: left 14px center;
    background-size: 16px 16px;
    font-size: 14px;
    color: #101828;
  }

  /* Placeholder colour is set globally below — it failed 1.4.3 at every width,
     not just in this expanded state. */

  /* Circular clear/close button at the end of the row. The default icon
     (ic_search_close_new.svg) is itself a filled blue disc, which reads as a dot
     inside this ring, so the expanded state uses a plain stroked X instead. */
  #taw_input_search_holder.active #taw_input_search_clear {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: 0;
    border: 1px solid #8a94a3; /* 3.07:1 on #fff — WCAG 1.4.11 needs 3:1 for control boundaries */
    border-radius: 9999px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23344054' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
    background-size: 14px 14px;
    background-position: center;
  }

  /* The magnifier now lives inside the pill. */
  #filter-list-option.taw-searching #taw_input_search_btn {
    display: none;
  }
}

/* The row needs 313px (40 icon + 92 count + 165 select + 2 8px gaps) inside a
   bar that is viewport − 40px, so it fits every phone down to ~355px. Narrower
   than that the select drops to its own full-width line rather than being
   squeezed into clipping "Standardsortering" again. */
@media (max-width: 354px) {
  #filter-list-option:not(.taw-searching) #taw_sort_wrapper {
    flex: 1 1 100%;
  }

  #filter-list-option:not(.taw-searching) .taw-sort-trigger,
  #filter-list-option:not(.taw-searching) #taw_filter_sortby {
    width: 100%;
    max-width: 220px;
  }
}
button#taw_filter_item_load_more {
  font-size: 14px;
  padding: 4px 20px;
  margin: 50px auto;
  border-color: #00aeef;
  color: #00aeef;
}
#taw_input_search_clear {
  display: inline-block;
  width: 21px;
  height: 21px;
  background-image: url("../img/ic_search_close_new.svg");
  background-repeat: no-repeat;
  background-position: center; 
  background-size: 100%;
  cursor: pointer;
}

/* Chrome, Safari, Edge, Opera */
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.quantity input[type=number] {
  -moz-appearance: textfield;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  background: #00AEEF !important;
  width: 28px !important;
  height: 28px !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before {
  top: 5px !important;
  left: 6px !important;
  border: 2px solid #ffffff !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
  top: 16px !important;
  left: 19px !important;
  background: #ffffff !important;
}

.woocommerce div.product div.images .flex-control-thumbs {
  margin-top: 15px !important;
}

.taw_attr_option .taw_attr_badge {
  display: none;
}

.taw_attr_option.active .taw_attr_badge {
  display: block;
}

.taw_attr_option .taw_attr_title {
  background: #374151;
}

.taw_attr_option.active .taw_attr_title {
  background: #00aeef;
}

.taw_attr_option.txt_only {
  background: white;
}

.taw_attr_option.txt_only.active {
  background: #00aeef;
  border: solid 2px #00aeef;
}

.taw_attr_option.txt_only span {
  color: black;
}

.taw_attr_option.txt_only.active span {
  color: white;
}

.page-header .entry-title {
  font-size: 26px;
  color: #00AEEF;
}

.woocommerce-MyAccount-navigation ul li.active, .woocommerce-MyAccount-navigation ul li:hover {
  background: #00AEEF;
}

.woocommerce-MyAccount-navigation ul li.active a, .woocommerce-MyAccount-navigation ul li:hover a {
  color: white;
}

.woocommerce-cart table.cart img {
  width: 70px !important;
}

.taw-tab-option img {
  content: url("../img/ic_minus.svg");
}

.taw-tab-option.active img {
  content: url("../img/ic_plus.svg");
}

@media only screen and (min-width: 320px) {
  .taw_attr_option .filter-item-image {
    height: 28px !important;
  }

  .taw_attr_item_hld .slick-slide  {
    padding-bottom: 0px !important;
  }
}

@media only screen and (min-width: 480px) {
  .slider-menu-content .slick-prev {
    left: -25px !important;
  }

  .slider-menu-content .slick-next {
    right: -25px !important;
  }
  
  .taw_attr_option .filter-item-image {
    height: 36px !important;
  }

  .taw_attr_item_hld .slick-slide  {
    padding-bottom: 5px !important;
  }
}

@media only screen and (min-width: 720px) {
  .taw_attr_option .filter-item-image {
    height: 44px !important;
  }

  .taw_attr_item_hld .slick-slide  {
    padding-bottom: 5px !important;
  }
}

@media only screen and (max-width: 768px) {
  .taw_attr_item_hld.slick-slider .filter-title-arrow  {
    height: 11px !important;
    margin: 0px !important;
  }

  .slider-menu-content .slick-prev {
    left: -22px !important;
  }
  
  .slider-menu-content .slick-next {
    right: -22px !important;
  }

  .taw_attr_option .filter-item-image {
    height: 44px;
  }
}

.taw-tab-container .slider-accessories .slick-prev {
  left: -20px !important;
}

.taw-tab-container .slider-accessories .slick-next {
  right: -20px !important;
}

/* product detail page body */
#primary {
  margin-bottom: 50px;
}

.filter_clear {
  display: none;
}

.filter_clear.active {
  display: flex;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  background-image: url("../img/ic_full_screen.svg") !important;
  background-size: 12px 12px !important; 
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before {
  visibility: hidden;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
  visibility: hidden;
}


/* Document pills in the product summary: the same bold 30px look as the
   File Management buttons, with the icon disc on every pill. */
.taw-doc-pill {
  min-height: 30px;
  padding: 5px 6px 5px 5px;
}
.taw-doc-pill > div {
  width: 20px;
  height: 20px;
  padding: 0;
  flex: 0 0 auto;
}
.taw-doc-pill > div img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}
.taw-doc-pill > span {
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.5px;
  padding: 0 6px;
}