/* ===============================



   PRODUKTRUBRIK DIREKT UNDER BILD



   =============================== */



.product-title {



  margin-top: 5px;



  margin-bottom: 2px;



  font-size: 1rem;



  font-weight: 600;



  text-align: center;



}







/* ===============================



   PRODUKTPRIS



   =============================== */



.product-price-container .product-price {



  font-size: 1.25rem;



  font-weight: 500;



  color: #000;



  display: inline-block;



}







/* ===============================



   KÖP-KNAPP MED KUNDVAGN, AVLÅNG, GRÖN OCH RESPONSIV



   =============================== */



.buy-btn,



.product-btn-addcart {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  background-color: #4db947; /* Grön bakgrund */



  color: #fff; /* Vit text */



  border: none;



  padding: 8px 60px; /* Avlång på desktop */



  min-width: 140px;



  border-radius: 6px;



  font-weight: 700;



  text-transform: uppercase;



  cursor: pointer;



  transition: all 0.2s ease-in-out;



  text-decoration: none;



  letter-spacing: 0.5px;



  box-shadow: 0 3px 6px rgba(0,0,0,0.1);



  font-size: 1rem;



}







.buy-btn i,



.product-btn-addcart i {



  margin-right: 10px;



}







.buy-btn:hover,



.product-btn-addcart:hover {



  background-color: #4db947;



  transform: translateY(-2px);



  box-shadow: 0 5px 10px rgba(0,0,0,0.15);



}







.buy-btn:active,



.product-btn-addcart:active {



  transform: translateY(0);



  box-shadow: 0 2px 5px rgba(0,0,0,0.1);



}







.buy-btn.disabled,



.product-btn-addcart.disabled {



  background-color: #cccccc;



  color: #666;



  cursor: not-allowed;



  box-shadow: none;



}







/* ===============================



   PRODUKTRUBRIK PÅ PRODUKTSIDA



   =============================== */



#product h1[itemprop="name"] {



  font-size: 1.5rem;



  font-weight: 600;



  margin-top: 0.5rem;



  margin-bottom: 0.5rem;



  text-align: left;



}







/* ===============================



   HEADER / LOGGA



   =============================== */







/* Grön bakgrund bakom loggan */



.navbar--variation-1 {



    padding-top: 8px;    



    padding-bottom: 8px;



    background-color: #d9eed8; /* Grön bakgrund */



}







/* Logga större och proportionerlig */



.img-logo {



    max-height: 65px; /* Större logga */



    width: auto;



    padding-top: 0 !important;



    padding-bottom: 0 !important;



    display: block;



    margin: 0 auto; /* Centrerar loggan */



}







/* Justering av länkelementet kring loggan */



.navbar-brand {



    padding-top: 0 !important;



    padding-bottom: 0 !important;



    display: flex;



    align-items: center;



}







/* ===============================



   RESPONSIV - HEADER OCH LOGGA



   =============================== */



@media (max-width: 768px) {



    .navbar--variation-1 {



        padding-top: 6px;



        padding-bottom: 6px;



    }



    .img-logo {



        max-height: 50px; /* Mindre logga på mobil */



    }



    .navbar-brand {



        padding-top: 0 !important;



        padding-bottom: 0 !important;



    }



}







/* ===============================



   RESPONSIV - PRODUKTER



   =============================== */



@media (max-width: 576px) {



  .buy-btn,



  .product-btn-addcart {



    width: 100% !important; /* Full bredd på mobil */



    font-size: 0.9rem !important;



    padding: 8px 0 !important; 



  }







  .buy-btn i,



  .product-btn-addcart i {



    margin-right: 5px;



  }







  .product-title {



    font-size: 0.95rem;



  }







  .product-price-container .product-price {



    font-size: 1.1rem;



  }







  #product h1[itemprop="name"] {



    font-size: 1.2rem;



  }







  /* Ytterst kompakt utrymme under köpknappen */



  .product-buy {



    margin-top: 0.25rem;



    margin-bottom: 0.1rem;



  }







  /* Kompakt över produktbild på produktsida */



  #product .col-lg-7.order-1 {



    margin-top: 0.5rem;



    padding-top: 0.5rem;



  }







  #product .detail-carousel {



    margin-top: 0;



  }



}







/* ===============================



   MAXIMALT LYFT AV PRODUKTBILD OCH RUBRIK



   =============================== */



#product,



#product .row,



#product .col-lg-7.order-1,



#product .detail-carousel {



    margin-top: 0 !important;



    padding-top: 0 !important;



}







/* Brödsmulor komprimeras */



.breadcrumb,



.breadcrumb ol,



.breadcrumb li {



    margin: 0 !important;



    padding: 0 !important;



    line-height: 1.2 !important;



}







/* Rubrik direkt under bilden */



#product h1[itemprop="name"] {



    margin-top: 0 !important;



    margin-bottom: 0.2rem !important;



    font-size: 1.5rem; 



    text-align: left;



}







/* Om det finns kategori- eller sidtitel ovanför brödsmulor */



.page-header,



.page-header .container {



    margin: 0 !important;



    padding: 0 !important;



}







/* Tar bort extra luft mellan header och produktsektion */



header,



.navbar--variation-1 {



    margin-bottom: 0 !important;



    padding-bottom: 0 !important;



}







/* ===============================



   THUMBNAILS UNDER HUVUDBILD - MOBIL



   =============================== */



@media (max-width: 576px) {



  .swiper-thumbs {



      display: flex !important;



      flex-wrap: nowrap !important; /* Ingen radbrytning */



      overflow-x: auto;             /* Scrollbar om fler */



      -webkit-overflow-scrolling: touch;



      padding: 0.25rem 0 !important;



      margin-top: 0.25rem !important;



  }







  .swiper-thumbs button.swiper-thumb-item {



      flex: 0 0 auto !important;



      margin-right: 0.25rem !important;



  }







  .swiper-thumbs img {



      height: 50px !important;  /* Mindre än tidigare */



      width: 50px !important;   /* Fyrkantiga */



      object-fit: cover;



      border-radius: 4px;



  }



}







/* Extra kompakt på mobil */



@media (max-width: 768px) {



    #product .col-lg-7.order-1,



    #product .detail-carousel,



    .breadcrumb,



    #product h1[itemprop="name"],



    .page-header,



    .page-header .container {



        margin-top: 0 !important;



        padding-top: 0 !important;



    }



    #product h1[itemprop="name"] {



        font-size: 1.25rem;



    }



}







/* ===============================



   H1-RUBRIKER PÅ KATEGORISIDOR - DESKTOP OCH MOBIL



   =============================== */



body.archive h1,



body.category h1,



body.taxonomy h1,



h1.page-title,



h1 {



    font-size: 28px !important;       /* Desktop-storlek */



    line-height: 1.3 !important;      /* För bättre läsbarhet */



    font-weight: 600 !important;      /* Tydlig rubrik */



    margin-top: 0.5rem !important;    /* Utrymme ovanför */



    margin-bottom: 0.5rem !important; /* Utrymme under */



    text-align: left !important;      /* Justera efter behov */



}







/* ===============================



   MOBILANPASSNING FÖR KATEGORISIDOR



   =============================== */



@media (max-width: 768px) {



    body.archive h1,



    body.category h1,



    body.taxonomy h1,



    h1.page-title,



    h1 {



        font-size: 22px !important;    /* Mindre rubrik på tablet/mobil */



        line-height: 1.2 !important;



        margin-top: 0.4rem !important;



        margin-bottom: 0.4rem !important;



    }



}







@media (max-width: 576px) {



    body.archive h1,



    body.category h1,



    body.taxonomy h1,



    h1.page-title,



    h1 {



        font-size: 20px !important;    /* Extra kompakt på små skärmar */



        line-height: 1.2 !important;



        margin-top: 0.3rem !important;



        margin-bottom: 0.3rem !important;



    }



}