/* ===================================================
   ORION – Konsoliderad Custom CSS (rensad och rättad)
=================================================== */

/* === Typsnitt === */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap');

body,
.header,
.navbar,
h1, h2, h3, h4, h5, h6,
p,
a,
.button {
  font-family:'Quicksand',sans-serif!important;
  font-size:16px!important;
}

/* Rubriker */
h1{font-size:23px!important;font-weight:700!important}
h2{font-size:25px!important;font-weight:700!important}
h3{font-size:24px!important;font-weight:500!important}
h4{font-size:20px!important;font-weight:500!important}
h5{font-size:18px!important;font-weight:500!important}
h6{font-size:16px!important;font-weight:500!important}

/* === Mobilfix generellt === */
@media (max-width:768px){
  html,body{margin:0!important;padding:0!important;overflow-x:hidden!important}

  .header,.navbar,.site-header,.header-top,.header-wrapper,.top-banner,.topbar{
    width:100%!important;max-width:100%!important;margin:0!important;padding:0!important
  }
  .header .container,.header .container-fluid,
  .site-header .container,.site-header .container-fluid,
  .header-top .container,.header-top .container-fluid,
  .top-banner .container,.top-banner .container-fluid,
  .topbar .container,.topbar .container-fluid{
    width:100%!important;max-width:100%!important;margin:0!important;padding:0!important
  }

  .header,.navbar{height:80px!important;position:relative!important;z-index:5!important}
  .header img,.navbar img,.site-logo img{height:80px!important;max-height:80px!important;width:auto!important}

  main,.main,.site-content,.content,.page-content,.main-content,#content{padding-top:30px!important}
}

/* Flytta ner ev. mörk CTA-knapp */
.btn.btn-dark{margin-top:12px!important}

/* Flikrubriker mindre */
.nav.nav-tabs .nav-link.detail-nav-link{font-size:12px!important}

/* === Sökfält desktop – bredda och positionera === */
@media (min-width:992px){
  header form[role="search"],
  header form[action*="search"],
  .site-header .header-search,
  .header .header-search,
  .search-form{
    max-width:720px!important;
    flex:0 1 520px!important;
    margin-left:-20px!important;
    margin-right:60px!important;
    z-index:1000!important;
    transform:none!important
  }
  .header .header-search input[type="search"],
  .site-header .header-search input[type="search"],
  .search-form input[type="search"]{width:100%!important}

  #sidebarCart.modal.show,
  .modal.cart-sidebar.show,
  .modal.modal-right.show{z-index:12000!important}

  .header .header-actions,
  .site-header .header-actions,
  .header .header-cart,
  .site-header .header-cart,
  .header .cart,
  .site-header .cart{position:relative!important;z-index:11900!important;flex:0 0 auto!important}
}

/* Sökförslag överst */
header form[role="search"],
header form[action*="search"],
.site-header form[role="search"],
.site-header form[action*="search"],
.header .search-form,
.navbar .search-form{position:relative!important;z-index:2000!important}
header .dropdown-menu[role="listbox"],
header .dropdown-menu.show,
header .search-suggestions,
header .autocomplete-suggestions,
header .tt-menu,
.site-header .dropdown-menu[role="listbox"],
.site-header .dropdown-menu.show,
.site-header .search-suggestions,
.site-header .autocomplete-suggestions,
.site-header .tt-menu{
  position:absolute!important;z-index:2001!important;inset:auto 0 auto 0
}

/* Placeholder bold */
header form[role="search"] input::placeholder,
header form[action*="search"] input::placeholder,
.search-form input::placeholder{font-weight:700!important}

/* === MOBIL: fullbredd + ikon-nudgar === */
@media (max-width:768px){
  .header,.site-header,.header-top,
  .header .container,.site-header .container,
  .header .container-fluid,.site-header .container-fluid{padding:0!important}

  .header .row,.site-header .row{padding:0 12px!important}

  a[href="#sidebarleft"], .menu-toggle, .navbar-toggler{position:relative!important;left:8px!important}
  a[href="#sidebarCart"], .header-cart, .cart, .cart-icon{position:relative!important;right:12px!important}

  a[href="#sidebarCart"] .badge,
  a[href="#sidebarCart"] .cart-count,
  .header-cart .badge,
  .cart .badge,
  .cart-icon .badge{right:0!important}
}

/* Dropdown: svart text */
@media (min-width:992px){
  .dropdown-menu .dropdown-item{color:#000!important;font-weight:500!important}
  .dropdown-menu .dropdown-item:hover{color:#000!important;background-color:transparent!important}
}

/* === Varukorgs-badge (antal) – flytta på desktop === */
@media (min-width:992px){
  .basket-count-items{
    position:absolute!important;
    right:-10px!important;
    top:-9px!important
  }
}

/* === Varukorg: gör stäng-krysset svart === */
#sidebarCart .svg-icon,
#sidebarCart .svg-icon-light{
  color:#000!important;
  fill:#000!important;
  stroke:#000!important
}
#sidebarCart use[xlink\:href="#close-1"],
#sidebarCart use[href="#close-1"]{
  fill:#000!important;
  stroke:#000!important
}

/* === CTA (antal + köpknapp) === */
.qty-cart-submit,
.qty-cart-submit .input-group{
  border-radius:12px!important;
  overflow:hidden!important
}
.qty-cart-submit input[type="number"],
.qty-cart-submit .form-control{border-radius:12px 0 0 12px!important}
.btn.product-btn-addcart{
  padding:10px 40px!important;
  font-size:16px!important;
  width:100%!important;
  max-width:450px!important;
  margin:0 auto!important;
  border-radius:0 12px 12px 0!important
}

/* === Pris – fetare och större === */
.product-price{font-weight:600!important;font-size:22px!important}
.product-price,
.price,
.qb-price {font-family:'Quicksand',sans-serif!important}

/* === MOBIL: luft under headern === */
@media (max-width:768px){
  .header,.site-header,.header-top,.header-wrapper,.header-sticky{margin-bottom:30px!important}
  .shadow,.shadow-small,.card,.modal,.dropdown-menu{box-shadow:none!important}
}

/* === Prestanda === */
@supports (content-visibility:auto){
  .product-grid > *{content-visibility:auto;contain-intrinsic-size:300px}
  .category-grid > *{content-visibility:auto;contain-intrinsic-size:280px}
}

/* === Desktop: öppna dropdowns på hover === */
@media (min-width:992px){
  .header .dropdown:hover > .dropdown-menu,
  .navbar .dropdown:hover > .dropdown-menu {
    display:block!important;visibility:visible!important;opacity:1!important
  }
  .dropdown-menu .dropdown:hover > .dropdown-menu,
  .dropdown-submenu:hover > .dropdown-menu {
    display:block!important;visibility:visible!important;opacity:1!important;
    top:0;left:100%;margin-left:0.1rem
  }
  .dropdown-menu{z-index:2000!important}
  .dropdown-toggle::after{pointer-events:none}
}

/* === Breadcrumbs mobil – rättad === */
@media (max-width:768px){
  .breadcrumb,
  .breadcrumb a,
  .breadcrumb li {font-size:10px!important;font-weight:400!important}
  [data-qb-area="header"][data-qb-setting="use_breadcrumbs"] nav.breadcrumb {
    position: relative !important;
    margin: 2px 0 1px !important;
    padding: 0 12px !important;
    background: transparent !important;
    z-index: 10 !important;
  }
}

/* === USP-block under köpknapp === */
#product form.qs-cart::after {
  content:"🚚 Snabb leverans 1–4 dagar\A📦 Fri frakt från 399 kr\A💳 Säker betalning med Klarna & Swish\A↩️ 30 dagar öppet köp";
  display:block;margin:30px 0 16px 0;
  white-space:pre-line;font-size:14px;font-weight:500;line-height:1.4;color:#000;pointer-events:none;
}
@media (max-width:768px){#product form.qs-cart::after{font-size:13px}}

/* Rundning på vänster sida av antal-fältet */
#product .qs-cart-qty {border-radius:12px 0 0 12px!important}

/* Byt font på "Populära kategorier" */
.hr-text,.hr-text::before,.hr-text::after {
  font-family:'Quicksand',sans-serif!important;font-weight:700!important
}
.hr-text.h2::before,.hr-text.h2::after {font-size:28px!important}
.hr-text[data-content="Populära kategorier"]::before,
.hr-text[data-content="Populära kategorier"]::after {
  font-family:'Quicksand',sans-serif!important;font-weight:700!important;font-size:28px!important
}

/* Produktbeskrivning: visa mer */
.qb-desc-collapsed {max-height:250px;overflow:hidden;position:relative}
.qb-desc-collapsed::after {
  content:"";position:absolute;left:0;right:0;bottom:0;height:4.5rem;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none
}
.qb-desc-toggle {display:table;margin:.75rem auto 0}

/* Se till att zoomade produktbilder ligger över sökrutan */
.pswp,.pswp--open,.pswp__bg,.pswp__scroll-wrap {z-index:20000!important}

/* Produktbilder horisontell rad */
#product .col-lg-7 .detail-carousel + div {
  display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;
  gap:8px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding-bottom:4px
}
#product .col-lg-7 .detail-carousel + div > * {
  flex:0 0 auto!important;width:84px!important;scroll-snap-align:start
}

/* Produktnamn i kategorilistan */
.productlist-title {font-size:13px!important;line-height:1.3!important;font-weight:400!important}
.product-price {font-size:16px!important;font-weight:700!important}

/* Neutralisera bold på hover */
.product-hover-overlay a,
.product-hover-overlay button,
.product-title a.text-dark {font-weight:400!important}

/* Luft mellan bild och titel desktop */
@media (min-width:769px){.productlist-title{margin-top:8px!important}}

/* Endast mobil: titel+pris i kortet */
@media (max-width:768px){
  .product-title {
    display:flex!important;flex-direction:column!important;justify-content:flex-start!important;
    text-align:center!important;min-height:120px!important
  }
  .productlist-title {margin-bottom:6px!important;line-height:1.2!important}
  [data-qb-element="productlist_soldout_text"] {margin-top:auto!important}
}

/* Kompaktare radavstånd */
.product-title h3,.product-title h3 a.productlist-title,.productlist-title {
  line-height:1.2!important;margin-bottom:4px!important;padding:0!important;display:block!important
}

/* Centrera CTA i kategorilistan */
.productlist-item .product-tools .qs-actions,
.product-card .product-tools .qs-actions,
.product-tools .qs-actions.d-flex {
  display:block!important;text-align:center!important;margin:8px 0 0 0!important;justify-content:center!important
}
.productlist-item .product-tools .qs-cart,
.product-card .product-tools .qs-cart {
  display:inline-block!important;margin:0 auto!important
}

/* Produktbeskrivning mobil kant-till-kant */
@media (max-width:768px){
  #product [data-qb-element="product_description"],
  #product .product-description,
  #product .tab-content > .tab-pane {
    width:100vw!important;position:relative!important;left:50%!important;margin-left:-50vw!important;
    padding-left:16px!important;padding-right:16px!important;box-sizing:border-box!important
  }
}

/* === Mobilmeny – rättad === */
@media (max-width:768px){
  /* Backdrop neutraliserad */
  .modal-backdrop.show{
    z-index:1040!important;opacity:0!important;background:transparent!important;pointer-events:none!important
  }

  /* Sidomeny default: dold */
  #sidebarleft.modal{display:none!important}

  /* När menyn öppnas */
  #sidebarleft.modal.show{
    display:block!important;position:fixed!important;inset:0!important;z-index:1055!important;pointer-events:auto!important
  }
  #sidebarleft.modal.show .modal-dialog,
  #sidebarleft.modal.show .modal-content,
  #sidebarleft.modal.show .modal-mobilemenu-content,
  #sidebarleft.modal.show .modal-header,
  #sidebarleft.modal.show .modal-body{
    position:fixed!important;top:0;left:0;height:100%!important;width:85%!important;max-width:85%!important;
    margin:0!important;border:0!important;background:#fff!important;opacity:1!important;z-index:1060!important;pointer-events:auto!important
  }

  /* När meny är öppen: blockera headern */
  body.modal-open header,
  body.modal-open .header,
  body.modal-open .navbar,
  body.modal-open .site-header,
  body.modal-open .header-inner,
  body.modal-open .header-top,
  body.modal-open .header-sticky,
  body.modal-open .header-wrapper,
  body.modal-open .top-banner,
  body.modal-open .topbar{z-index:1030!important;pointer-events:none!important}
}

/* === Scrollfix för mobilmeny === */
body.modal-open {overflow:hidden!important;width:100%!important}
.modal-content.modal-mobilemenu-content {
  height:100%!important;max-height:100vh!important;overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important
}
.modal-body.pt-0 {
  max-height:calc(100vh - 120px)!important;overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;
  -webkit-transform:translateZ(0)!important;transform:translateZ(0)!important
}
.modal.modal-left {overflow:visible!important;height:100vh!important}
@media (max-width:768px){
  .modal-content.modal-mobilemenu-content {
    -webkit-transform:translate3d(0,0,0)!important;transform:translate3d(0,0,0)!important;
    will-change:scroll-position!important
  }
}

@media (min-width:992px){
  .qs-cart-view .icon-line-height .navbar-icon-badge.basket-count-items {
    position:absolute !important;
    top:-6px !important;      /* flytta upp/ner */
    right:14px !important;    /* flytta vänster/höger */
    transform:none !important;
    z-index:20 !important;
  }
}