/**
 * Lampaffären – WooCommerce Layout Fixes
 * Lägg till via: WordPress → Utseende → Anpassa → Ytterligare CSS
 * ELLER spara som /wp-content/themes/lampaffaren-theme/assets/css/woo-fixes.css
 * och registrera i functions.php
 *
 * @package    Lampaffaren
 * @copyright  2025 Formatic AB
 */

/* =============================================================
   1. PRODUKTGRID – KATEGORISIDA
   Problem: kort för smala, bild klipps, knapp syns halvt
   ============================================================= */

/* Grid: färre kolumner så korten får mer plats */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 1.5rem !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Med sidebar: max 3 kolumner */
.shop-content ul.products,
.shop-layout ul.products {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
}

/* Produktkort: fullt höjd, flex-kolumn */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 150ms ease, border-color 150ms ease;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.09);
  border-color: #D97706;
}

/* Länk-wrapper fyller kortet */
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce-page ul.products li.product a.woocommerce-loop-product__link {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  text-decoration: none !important;
}

/* Produktbild: fast höjd, object-fit contain */
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
  width: 100% !important;
  height: 220px !important;
  object-fit: contain !important;
  background: #F3F4F6 !important;
  padding: 1rem !important;
  transition: transform 300ms ease !important;
  flex-shrink: 0 !important;
}

.woocommerce ul.products li.product:hover img,
.woocommerce-page ul.products li.product:hover img {
  transform: scale(1.04);
}

/* Produkttitel */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  font-size: .9375rem !important;
  font-weight: 600 !important;
  color: #111827 !important;
  padding: .875rem 1rem .25rem !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Pris */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  padding: .25rem 1rem .75rem !important;
  margin: 0 !important;
  font-size: .9375rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

/* Lägg i varukorg-knapp: alltid synlig längst ned */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce-page ul.products li.product .button,
.woocommerce-page ul.products li.product a.button {
  display: block !important;
  width: calc(100% - 2rem) !important;
  margin: auto 1rem 1rem !important;
  text-align: center !important;
  background: #111827 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: .625rem 1rem !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 150ms ease !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce-page ul.products li.product .button:hover,
.woocommerce-page ul.products li.product a.button:hover {
  background: #D97706 !important;
  color: #fff !important;
}

/* Rea-badge */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale {
  position: absolute !important;
  top: .75rem !important;
  left: .75rem !important;
  background: #991B1B !important;
  color: #fff !important;
  font-size: .6875rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  z-index: 2 !important;
  margin: 0 !important;
}

/* =============================================================
   2. ENSTAKA PRODUKTSIDA
   Problem: bild för liten, layout inte tvåkolumns
   ============================================================= */

/* Tvåkolumns layout */
.woocommerce div.product,
.single-product div.product {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3rem !important;
  align-items: start !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .woocommerce div.product,
  .single-product div.product {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* Galleri: vänster kolumn, tar full bredd */
.woocommerce div.product div.woocommerce-product-gallery,
.single-product div.product div.woocommerce-product-gallery {
  grid-column: 1 !important;
  width: 100% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid #E5E7EB !important;
  background: #F9FAFB !important;
}

/* Galleri-bild: stor och centrerad */
.woocommerce div.product div.woocommerce-product-gallery .woocommerce-product-gallery__image a,
.woocommerce div.product div.woocommerce-product-gallery .woocommerce-product-gallery__image {
  display: block !important;
  background: #F3F4F6 !important;
}

.woocommerce div.product div.woocommerce-product-gallery img,
.single-product div.product div.woocommerce-product-gallery img {
  width: 100% !important;
  height: auto !important;
  max-height: 520px !important;
  object-fit: contain !important;
  padding: 1.5rem !important;
  background: #F3F4F6 !important;
  display: block !important;
}

/* Thumbnails under huvudbilden */
.woocommerce div.product .woocommerce-product-gallery__wrapper {
  display: flex !important;
  flex-direction: column !important;
}

.woocommerce div.product .flex-control-thumbs {
  display: flex !important;
  gap: .5rem !important;
  padding: .75rem !important;
  flex-wrap: wrap !important;
  border-top: 1px solid #E5E7EB !important;
  margin: 0 !important;
  list-style: none !important;
}

.woocommerce div.product .flex-control-thumbs li {
  width: 72px !important;
  height: 72px !important;
  flex-shrink: 0 !important;
}

.woocommerce div.product .flex-control-thumbs img {
  width: 72px !important;
  height: 72px !important;
  max-height: 72px !important;
  object-fit: contain !important;
  padding: .35rem !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  opacity: .65 !important;
  transition: opacity 150ms, border-color 150ms !important;
}

.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover {
  opacity: 1 !important;
  border-color: #D97706 !important;
}

/* Sammanfattning: höger kolumn */
.woocommerce div.product div.summary,
.single-product div.product div.summary {
  grid-column: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

@media (max-width: 768px) {
  .woocommerce div.product div.woocommerce-product-gallery { grid-column: 1 !important; }
  .woocommerce div.product div.summary { grid-column: 1 !important; }
}

/* Produkttitel */
.woocommerce div.product .product_title {
  font-size: clamp(1.375rem, 3vw, 2rem) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  color: #111827 !important;
}

/* Pris */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 1.625rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 !important;
}

/* Kort beskrivning */
.woocommerce div.product div.woocommerce-product-details__short-description {
  font-size: .9375rem !important;
  color: #6B7280 !important;
  line-height: 1.75 !important;
  border-top: 1px solid #E5E7EB !important;
  border-bottom: 1px solid #E5E7EB !important;
  padding: 1rem 0 !important;
  margin: 0 !important;
}

/* Cart-form */
.woocommerce div.product form.cart {
  display: flex !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin: 0 !important;
}

.woocommerce div.product form.cart .qty {
  width: 72px !important;
  padding: .75rem !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  text-align: center !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

/* Lägg i varukorg-knapp på produktsidan */
.woocommerce div.product form.cart .single_add_to_cart_button,
.single-product .single_add_to_cart_button {
  flex: 1 !important;
  min-width: 160px !important;
  background: #D97706 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: .875rem 2rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 150ms ease !important;
  text-align: center !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:hover {
  background: #B45309 !important;
}

/* Flikar under produkten: full bredd i grid */
.woocommerce div.product .woocommerce-tabs {
  grid-column: 1 / -1 !important;
  margin-top: 2rem !important;
}

/* Meta (kategorier, varumärke) */
.woocommerce div.product .product_meta {
  font-size: .875rem !important;
  color: #6B7280 !important;
  margin: 0 !important;
}

.woocommerce div.product .product_meta a {
  color: #D97706 !important;
  font-weight: 500 !important;
}

/* Relaterade produkter: full bredd */
.related.products {
  grid-column: 1 / -1 !important;
  margin-top: 3rem !important;
}

.related.products > h2 {
  margin-bottom: 1.25rem !important;
}

/* =============================================================
   3. BRÖDSMULOR (kategorisida)
   ============================================================= */
.woocommerce .woocommerce-breadcrumb {
  font-size: .8125rem !important;
  color: #6B7280 !important;
  margin-bottom: 1.5rem !important;
  padding: 0 !important;
  background: transparent !important;
}

.woocommerce .woocommerce-breadcrumb a {
  color: #B45309 !important;
}

/* =============================================================
   4. KATEGORIARKIV – HUR TOOLBAR VISAS
   ============================================================= */
.woocommerce .woocommerce-result-count {
  font-size: .875rem !important;
  color: #6B7280 !important;
  margin: 0 0 1rem !important;
}

.woocommerce .woocommerce-ordering {
  float: right !important;
  margin-bottom: 1rem !important;
}

.woocommerce .woocommerce-ordering select {
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  padding: .4rem .75rem !important;
  font-size: .875rem !important;
  background: #fff !important;
  cursor: pointer !important;
}

/* Clearfix efter toolbar */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  display: inline-block !important;
}