/* ================================================================
   Product Slider – [ser_product_slider] shortcode
   Horizontal scrolling product grid with arrow navigation,
   matching the Elementor product widgets on serefni.is
   ================================================================ */

.ser-product-slider {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header with title + "view all" link */
.ser-product-slider__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 20px;
}

.ser-product-slider__title {
  font-family: granville, serif;
  font-size: 42px;
  font-weight: 400;
  color: #545b5c;
  margin: 0;
  letter-spacing: 1px;
}

.ser-product-slider__more {
  font-family: granville, serif;
  font-size: 16px;
  color: #545b5c;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.ser-product-slider__more:hover {
  text-decoration: underline;
}

/* Viewport clips overflow */
.ser-product-slider__viewport {
  overflow: hidden;
  position: relative;
}

/* Track: Override the default grid layout from WooCommerce products
   and make it a single horizontal row that slides */
.ser-product-slider__track .woocommerce ul.products,
.ser-product-slider__track ul.products {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 15px;
  transition: transform 0.4s ease;
  grid-template-columns: none !important;
}

.ser-product-slider__track ul.products .product {
  flex: 0 0 calc((100% - 60px) / 5); /* 5 columns with 4 x 15px gaps */
  max-width: calc((100% - 60px) / 5);
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}

/* Arrow buttons */
.ser-product-slider__prev,
.ser-product-slider__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(84, 91, 92, 0.85);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease, background-color 0.2s ease;
  padding: 0;
}

.ser-product-slider:hover .ser-product-slider__prev,
.ser-product-slider:hover .ser-product-slider__next {
  opacity: 1;
}

.ser-product-slider__prev:hover,
.ser-product-slider__next:hover {
  background: rgba(43, 43, 43, 0.95);
}

.ser-product-slider__prev {
  left: -6px;
}

.ser-product-slider__next {
  right: -6px;
}

.ser-product-slider__prev[disabled],
.ser-product-slider__next[disabled] {
  opacity: 0 !important;
  cursor: default;
  pointer-events: none;
}

.ser-product-slider__prev svg,
.ser-product-slider__next svg {
  width: 20px;
  height: 20px;
}

/* ---- Veggfodur page context ---- */
/* The slider sits inside a Gutenberg wp:html block within .ser-veggfodur-products.
   Keep the slider's own max-width/padding for centering, since the parent
   group is full-width (alignfull). The heading (h2) in the parent section
   is already styled by veggfodur.css. */
.ser-veggfodur-products .ser-product-slider {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---- Responsive breakpoints ---- */

/* 4 columns on tablet */
@media (max-width: 1100px) {
  .ser-product-slider__track ul.products .product {
    flex: 0 0 calc((100% - 45px) / 4); /* 4 cols, 3 gaps */
    max-width: calc((100% - 45px) / 4);
  }
}

/* 3 columns on smaller tablet */
@media (max-width: 768px) {
  .ser-product-slider__track ul.products .product {
    flex: 0 0 calc((100% - 30px) / 3); /* 3 cols, 2 gaps */
    max-width: calc((100% - 30px) / 3);
  }

  .ser-product-slider__title {
    font-size: 32px;
  }

  .ser-product-slider__prev,
  .ser-product-slider__next {
    width: 36px;
    height: 36px;
  }

  .ser-product-slider__prev svg,
  .ser-product-slider__next svg {
    width: 16px;
    height: 16px;
  }
}

/* 2 columns on mobile */
@media (max-width: 480px) {
  .ser-product-slider {
    padding: 0 12px;
  }

  .ser-product-slider__track ul.products .product {
    flex: 0 0 calc((100% - 10px) / 2); /* 2 cols, 1 gap */
    max-width: calc((100% - 10px) / 2);
  }

  .ser-product-slider__track ul.products {
    gap: 10px;
  }

  .ser-product-slider__title {
    font-size: 26px;
  }

  .ser-product-slider__head {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
  }

  .ser-product-slider__prev {
    left: -2px;
  }

  .ser-product-slider__next {
    right: -2px;
  }
}





/* =========================================================================
   PRODUCT SLIDER — TITLE + PRICE (match live) — NUKE RULE
   Targets every possible wrapping depth and state. Beats Woostify defaults.
   ========================================================================= */

/* Title */
body .ser-product-slider ul.products li.product h2.woocommerce-loop-product__title,
body .woocommerce .ser-product-slider ul.products li.product h2.woocommerce-loop-product__title,
body.woocommerce .ser-product-slider ul.products li.product .product-loop-content h2,
body .ser-product-slider ul.products li.product .product-loop-content h2 {
  font-family: granville, serif !important;
  font-size: 14px !important;
  line-height: 21px !important;
  font-weight: 400 !important;
  color: #545b5c !important;
  text-align: center !important;
  margin: 8px 0 4px !important;
}

/* Meta wrapper — center everything inside */
body .ser-product-slider ul.products li.product .product-loop-content,
body .ser-product-slider ul.products li.product .product-loop-meta,
body .ser-product-slider ul.products li.product .product-loop-meta.no-transform,
body .ser-product-slider ul.products li.product .animated-meta {
  text-align: center !important;
}

/* Price container */
body .ser-product-slider ul.products li.product .product-loop-meta .price,
body .woocommerce .ser-product-slider ul.products li.product .product-loop-meta .price {
  font-family: granville, serif !important;
  font-size: 16px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  color: #545b5c !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

/* Amount and currency */
body .ser-product-slider ul.products li.product .price .woocommerce-Price-amount,
body .ser-product-slider ul.products li.product .price .woocommerce-Price-amount .woocommerce-Price-currencySymbol,
body .ser-product-slider ul.products li.product .price .amount,
body .ser-product-slider ul.products li.product .price del,
body .ser-product-slider ul.products li.product .price ins,
body .ser-product-slider ul.products li.product .price bdi,
body .woocommerce .ser-product-slider ul.products li.product .price .woocommerce-Price-amount,
body .woocommerce .ser-product-slider ul.products li.product .price .woocommerce-Price-amount bdi {
  font-family: granville, serif !important;
  font-size: 16px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  color: #545b5c !important;
}