/* ==========================================================
   A BEAUTY LIGHT — CLEAN SHOP LAYOUT (Hello Elementor)
   ========================================================== */

/* === Grundläggande layout för butikssidor === */
body.woocommerce-page #primary,
body.woocommerce-page .site-main,
body.woocommerce-page .elementor-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  float: none !important;
}

body.woocommerce .woocommerce-breadcrumb {
  text-align: center;
  font-size: 13px;
  color: #000;
  margin-bottom: 12px;
}

body.woocommerce h1,
body.woocommerce h2 {
  text-align: center;
  font-weight: 600;
  color: #000;
  margin-bottom: 20px;
}

/* === Hero-bild över kategoriraden === */
body.post-type-archive-product .shop-hero {
  text-align: center;
  margin: 0 auto 25px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

body.post-type-archive-product .shop-hero img {
  display: block;
  margin: 0 auto;
  max-width: 640px;
  width: 100%;
  aspect-ratio: 640 / 237;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  touch-action: pan-y; /* förhindra horisontell pan på mobil */
}

/* ==========================================================
   KATEGORI-RAD (runda bilder, scrollbar)
   ========================================================== */

body.woocommerce ul.wc-product-categories-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 25px !important;
  list-style: none !important;
  margin: 0 auto 30px !important;
  padding: 0 15px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  scroll-snap-type: x proximity !important;
  max-width: 100% !important;
  touch-action: pan-x !important;
}

body.woocommerce ul.wc-product-categories-list li {
  flex: 0 0 auto !important;
  text-align: center !important;
  scroll-snap-align: center !important;
}

body.woocommerce ul.wc-product-categories-list li img {
  width: 110px !important;
  height: 110px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin-bottom: 8px !important;
  background: #fff !important;
  display: block !important;
  border: none !important;
  box-shadow: none !important;
}

body.woocommerce ul.wc-product-categories-list li span {
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  color: #000 !important;
  white-space: nowrap !important;
}

/* === Kategorilänk === */
body.woocommerce ul.wc-product-categories-list li a {
  text-decoration: none !important;
  color: #000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  transition: opacity 0.2s ease;
}

body.woocommerce ul.wc-product-categories-list li a:hover {
  opacity: 0.8;
}

/* === Dölj "All Categories" och "Uncategorized" === */
body.woocommerce ul.wc-product-categories-list li.cat-item-all-categories,
body.woocommerce ul.wc-product-categories-list li.cat-item-uncategorized {
  display: none !important;
}

/* === Responsiv mobiljustering === */
@media (max-width: 768px) {
  body.woocommerce ul.wc-product-categories-list {
    justify-content: flex-start !important;
    padding: 0 15px !important;
  }

  body.woocommerce ul.wc-product-categories-list li img {
    width: 90px !important;
    height: 90px !important;
  }

  body.post-type-archive-product .shop-hero img {
    max-width: 95%;
    border-radius: 3px;
  }
}

/* --- Produktgrid: exakt 3 kolumner, centrerade --- */
ul.products {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  padding: 0;
  margin: 0 auto;
  max-width: 1200px;
}

/* --- Varje produkt ska ta upp 1/3 av raden minus mellanrum --- */
ul.products li.product {
  flex: 1 1 calc(33.333% - 40px);
  max-width: 360px;
  text-align: left;
  box-sizing: border-box;
}

/* --- Pris och knapp --- */
ul.products li.product .price {
  font-size: 16px;
  font-weight: 500;
  color: #000;
  margin-top: 4px;
}

ul.products li.product .button {
  display: block;
  margin: 10px auto 0;
  text-align: center;
}

/* --- Responsiv layout --- */
@media (max-width: 1024px) {
  ul.products li.product {
    flex: 1 1 calc(50% - 40px);
    max-width: 420px;
  }
}

@media (max-width: 767px) {
  ul.products li.product {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* --- Fix: ta bort WooCommerce clear som bryter raden --- */
ul.products::before,
ul.products::after {
  content: none !important;
  display: none !important;
}

ul.products li.product {
  clear: none !important;
  float: none !important;
}


/* ==========================================================
   KATEGORIKNAPPAR (som på /magazine)
   ========================================================== */
.tax-product_cat .magazine-categories a {
  background: #f1f1f1 !important;
  border-radius: 8px;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  text-decoration: none;
  color: #000;
  display: inline-flex;
  align-items: center;
  transition: background 0.2s ease;
}
.tax-product_cat .magazine-categories a:hover {
  background: #ddd !important;
}
.tax-product_cat .magazine-categories a.active {
  background: #000 !important;
  color: #fff !important;
}

/* === MOBIL: horisontell layout för sök + sortering (finjusterad) === */
@media (max-width: 768px) {

  /* Wrapper för båda fälten */
  .abl-sorting-wrapper .sorting-wrapper {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto 18px auto !important;
  }

  /* Fälten delar bredden lika */
  .abl-sorting-wrapper .search-form-near-select,
  .abl-sorting-wrapper .woocommerce-ordering {
    flex: 1 1 50% !important;
    max-width: 50% !important;
  }

  /* === Sökfält === */
  .abl-sorting-wrapper .search-form-near-select form {
    position: relative !important;
    width: 100% !important;
  }

  .abl-sorting-wrapper .search-form-near-select input[type="search"] {
    width: 100% !important;
    height: 42px !important;
    padding: 0 30px 0 10px !important; /* mindre padding för textutrymme */
    font-size: 15px !important;
    border-radius: 6px !important;
    border: 1px solid #ccc !important;
    background-color: #fff !important;
    box-shadow: none !important;
  }

  /* Dölj gamla Sök-knappen */
  .abl-sorting-wrapper .search-form-near-select input[type="submit"] {
    display: none !important;
  }

  /* === Förstoringsglas justerat === */
  .abl-sorting-wrapper .search-form-near-select form::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333333' viewBox='0 0 24 24'%3E%3Cpath d='M21.53 20.47l-3.75-3.75A8 8 0 1018 16.72l3.75 3.75a.75.75 0 001.06-1.06zM10 16a6 6 0 110-12 6 6 0 010 12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    opacity: 0.9;
  }

  /* === Sorteringsmeny === */
  .abl-sorting-wrapper .woocommerce-ordering select {
    width: 100% !important;
    height: 42px !important;
    font-size: 15px !important;
    border-radius: 6px !important;
    border: 1px solid #ccc !important;
    background-color: #fff !important;
    padding: 0 8px !important; /* mindre padding för texten */
  }

  /* === Resultatrad === */
  .woocommerce-result-count {
    text-align: center !important;
    margin-bottom: 8px !important;
    display: block !important;
  }
}

.woocommerce .woocommerce-ordering select {
    border: 1px solid #000!important;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    height: 42px;
}

/* --- Fix: Jämna ut marginaler på produktsidor (mobil) --- */
.single-product .product {
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

@media (min-width: 769px) {
  .single-product .product {
    padding-left: 0;
    padding-right: 0;
  }
}

.product-brand {
  font-size: 14px;
  color: #444;
  margin-bottom: 6px;
}
.single-product .posted_in {
  display: block;
  margin-top: 10px;
  font-size: 14px;
}
.single-product .posted_in strong {
  color: #000;
}

.brands-list-wrapper {
  display: grid;
  gap: 30px;
}
.brand-letter {
  font-size: 22px;
  font-weight: 600;
  color: #6b6475;
  margin-bottom: 10px;
}
.brand-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.brand-list li {
  margin: 4px 0;
}
.brand-link {
  color: #000;
  text-decoration: none;
}
.brand-link:hover {
  text-decoration: underline;
  color: #6b6475;
}

.single-product .woocommerce-tabs #tab-description {
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

.product-info-section {
  display: flex;
  justify-content: center;
  margin: 60px 0 40px;
}

.product-info-inner {
  background-color: #f7f7f7;
  padding: 20px;
  border-radius: 4px;
  max-width: 700px;
  width: 100%;
  font-family: "Libre Franklin", sans-serif;
}

.product-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid #e2e2e2;
  font-size: 15px;
  font-weight: 600;
}

.product-info-row:first-child {
  border-top: none;
}

.product-info-row.alt {
  background-color: #f0f0f0;
  padding: 14px 0;
}

.product-info-label {
  color: #444;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.product-info-value {
  color: #000;
  font-weight: 500;
}

.extra-product-data {
	display: none;
	
	}

/* --- Produktgrid: 3 per rad --- */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  justify-items: center;
  padding: 0;
}

/* --- Produktkortens bredd och layout --- */
ul.products li.product {
  max-width: 320px;
  text-align: left;
}

/* --- Pris och knapp --- */
ul.products li.product .price {
  font-size: 16px;
  font-weight: 500;
  color: #000;
  margin-top: 4px;
}

ul.products li.product .button {
  display: block;
  margin: 10px auto 0;
  text-align: center;
}

/* --- Responsivt --- */
@media (max-width: 1024px) {
  ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  ul.products {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* --- Dölj WooCommerce kategori-rutor ("All Categories" etc.) i mobil --- */
@media (max-width: 768px) {
  /* Dölj rutorna med textrubriker och tomma bilder */
  ul.products li.product-category {
    display: none !important;
  }

  /* Visa bara dina runda kategori-bilder (om de ligger separat) */
  .custom-category-round {
    display: block !important;
  }
}

.abl-shop-footer-links {
  text-align: left;
  margin: 60px 0 30px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;  /* öka för att linjera med produktgriden */
  padding-right: 15px;
}

@media (max-width: 1024px) {
  .abl-shop-footer-links {
    padding-left: 30px; /* lite mindre marginal på surfplattor */
  }
}

@media (max-width: 768px) {
  .abl-shop-footer-links {
    padding-left: 20px; /* mindre på mobil */
  }
}

.abl-shop-footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.abl-shop-footer-links li {
  margin: 10px 0;
}

.abl-shop-footer-links a {
  color: #000;
  font-weight: 600;
  text-decoration: none;
  font-size: 16px;
}

.abl-shop-footer-links a:hover {
  color: #dcc791;
}

/* Mobil: lägg mer luft ovanför kategori-rubriken */
@media (max-width: 768px) {
  .woocommerce-products-header,
  .woocommerce-products-header__title.page-title,
  .category-header,
  h1.category-title {
    margin-top: 60px !important; /* justera vid behov (60–100px) */
  }
}


.woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3 {
    padding: .1em 0;
    margin: 0;
    font-size: 1.1em;
}

/* Centrera varumärket ovanför produktnamnet och minska avståndet */
.card-brand-name {
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: 1px !important; /* minskat mellanrum */
  font-size: 13px;
  font-weight: 600;
  color: #000;
  letter-spacing: 0.2px;
}

/* --- Safari fix: svart streck under runda kategori-bilder vid horisontell scroll --- */
ul.wc-product-categories-list {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  overflow: hidden;
}

ul.wc-product-categories-list li {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  border: none !important;
  box-shadow: none !important;
}

ul.wc-product-categories-list li img {
  display: block !important; /* tar bort underlig baseline-yta som Safari tolkar som streck */
  border: none !important;
  outline: none !important;
  background: #fff !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Dölj breadcrumbs endast på huvudshoppen (/butik) */
body.post-type-archive-product.woocommerce-page nav.woocommerce-breadcrumb {
  display: none !important;
}

/* Återställ avstånd ovanför hero-bilden i mobilen (efter att breadcrumbs tagits bort) */
@media (max-width: 768px) {
  body.post-type-archive-product .shop-hero {
    margin-top: 20px !important; /* justera värdet efter smak, t.ex. 50–80px */
  }
}

/* -----------------------------
   Mobil: bredare sorteringsmeny
   ----------------------------- */
@media (max-width: 768px) {
    .woocommerce-ordering select {
        width: 100% !important;
        min-width: 260px !important;
        padding-left: 14px !important;
        padding-right: 36px !important; /* utrymme för pilen */
        font-size: 16px !important;
    }

    /* Centrera dropdownen om du kör centrering */
    .woocommerce-ordering {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}