/* Mobile-first CSS for DS Recommendation */
.ds-recommendation-grid { margin: 20px 0; }

/* Tag page block wrapper styling: add chrome distinct from ds-products_wrapper
   - Background: whitesmoke
   - Margin: inherit from .ds-recommendation-grid (20px 0)
   - Padding: responsive — larger on desktop, smaller on mobile */
.ds-tag-best-seller { background: whitesmoke; padding: 12px 14px; }
@media only screen and (min-width: 480px) {
  .ds-tag-best-seller { padding: 16px 18px; }
}
@media only screen and (min-width: 768px) {
  .ds-tag-best-seller { padding: 20px 24px; }
}
@media only screen and (min-width: 1101px) {
  .ds-tag-best-seller { padding: 26px 32px; }
}

/* Category page block wrapper styling: mirror tag wrapper chrome
   - Background: whitesmoke
   - Margin: follow .ds-recommendation-grid (20px 0)
   - Padding: responsive — larger on desktop, smaller on mobile */
.recommendation_cat_products_wrap { background: whitesmoke; margin: 20px 0; padding: 12px 14px; }
@media only screen and (min-width: 480px) {
  .recommendation_cat_products_wrap { padding: 16px 18px; }
}
@media only screen and (min-width: 768px) {
  .recommendation_cat_products_wrap { padding: 20px 24px; }
}
@media only screen and (min-width: 1101px) {
  .recommendation_cat_products_wrap { padding: 26px 32px; }
}

/* Generic DS Rec lists: use CSS Grid everywhere for consistent tiles */
.ds-recommendation-grid ul.products.ds-rec-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* mobile: 2-up */
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds-recommendation-grid ul.products.ds-rec-list > li.product {
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  display: block !important;
  position: relative;
}
@media (min-width: 768px) {
  /* tablet: 3-up grid, matching #ds-products_loop */
  .ds-recommendation-grid ul.products.ds-rec-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  /* desktop: 4-up grid */
  .ds-recommendation-grid ul.products.ds-rec-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* =====================
   Tag Best Seller & Archive Rec Grid: use CSS Grid like #ds-products_loop
   ===================== */

.ds-tag-best-seller ul.products,
.ds-recommendation-grid.ds-context-archive ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* mobile: 2-up */
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds-tag-best-seller ul.products > li.product,
.ds-recommendation-grid.ds-context-archive ul.products > li.product {
  display: block;
  width: auto;
  margin: 0;
  position: relative;
}
.ds-tag-best-seller ul.products li.product img,
.ds-recommendation-grid.ds-context-archive ul.products li.product img { margin: 0 !important; }

@media (min-width: 768px) {
  /* tablet: 3-up */
  .ds-tag-best-seller ul.products,
  .ds-recommendation-grid.ds-context-archive ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  /* desktop: 4-up */
  .ds-tag-best-seller ul.products,
  .ds-recommendation-grid.ds-context-archive ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* =====================
   Category Layouts (5-up)
   ===================== */

/* Base safety for all category recommendation items: prevent accidental oversized widths */
.recommendation_cat_products ul.products > li.product {
  min-width: 0 !important;
  max-width: 100% !important;
}
.recommendation_cat_products ul.products > li.product img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Layout 2 (balanced 1-2-2) */
/* Mobile-first base: use the tablet layout by default (2 columns; hero spans full width) */
.recommendation_cat_products.layout-2 ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 16px;
}
.recommendation_cat_products.layout-2 ul.products > li.product {
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  display: block !important;
  min-width: 0 !important;  /* guard against huge intrinsic width */
  max-width: 100% !important;
}
/* Hero spans full width on mobile/tablet too (same as tablet behavior) */
.recommendation_cat_products.layout-2 ul.products > li.product:first-child {
  grid-column: 1 / -1;
}
@media only screen and (min-width: 1101px) {
  .recommendation_cat_products.layout-2 ul.products {
    display: grid !important;
    /* Three columns, but visually 50% left and 50% right (split into 2x25%) */
    /* Use percentage tracks and create gutters with item padding so the left stays exactly 50% */
    grid-template-columns: 50% 25% 25%;
    grid-auto-rows: auto;
    /* Create vertical spacing via row-gap; handle horizontal gutters via item padding */
    row-gap: 16px;
    column-gap: 0;
    /* Balance out item horizontal padding so outer edges align with container */
    margin-left: -8px;
    margin-right: -8px;
  }
  .recommendation_cat_products.layout-2 ul.products > li.product:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  /* Explicit placement to form a balanced 1–2–2 mosaic */
  .recommendation_cat_products.layout-2 ul.products > li.product:nth-child(2) { grid-column: 2; grid-row: 1; }
  .recommendation_cat_products.layout-2 ul.products > li.product:nth-child(3) { grid-column: 3; grid-row: 1; }
  .recommendation_cat_products.layout-2 ul.products > li.product:nth-child(4) { grid-column: 2; grid-row: 2; }
  .recommendation_cat_products.layout-2 ul.products > li.product:nth-child(5) { grid-column: 3; grid-row: 2; }
  /* Reset floats/margins that some themes apply */
  .recommendation_cat_products.layout-2 ul.products > li.product {
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    display: block !important;
    /* Horizontal gutters for columns without affecting the 50%/25%/25% tracks */
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
  }
  /* Tighten typography spacing on right-side items (2–5) so the combined height matches or is slightly shorter than the hero */
  .recommendation_cat_products.layout-2 ul.products > li.product:nth-child(n+2) .woocommerce-loop-product__title {
    margin-top: 6px;
    margin-bottom: 4px;
    line-height: 1.2;
  }
  .recommendation_cat_products.layout-2 ul.products > li.product:nth-child(n+2) .price {
    margin-top: 0;
  }
}

/* Tablet media kept implicitly by base; no extra rules required */

/* Layout 1 (asym 1-1-3) — use CSS Grid instead of floats */
/* Base (mobile-first): use the tablet layout by default
   - Grid has 3 columns
   - Item 1 and 2 each span full width (all 3 columns)
   - Items 3, 4, 5 fill one row across the 3 columns */
.recommendation_cat_products.layout-1 ul.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.recommendation_cat_products.layout-1 ul.products > li.product {
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  display: block !important;
}
/* Make first two items span full width on mobile/tablet */
.recommendation_cat_products.layout-1 ul.products > li.product:nth-child(1),
.recommendation_cat_products.layout-1 ul.products > li.product:nth-child(2) {
  grid-column: 1 / -1;
}

/* Desktop: 50% / 50% split
   - Left: Item 1 spans two rows at exactly 50% width (hero)
   - Right: Item 2 (double-image when available) on top across the entire right 50%
            Items 3,4,5 on the bottom as three equal columns inside the right 50% */
@media only screen and (min-width: 1101px) {
  .recommendation_cat_products.layout-1 ul.products {
    /* Exact 50% left; right half split into three equal columns */
    grid-template-columns: 50% 16.6667% 16.6667% 16.6667%;
    /* Use row gap only; create inner horizontal gutters with LI padding to keep 50% exact */
    row-gap: 16px;
    column-gap: 0;
    /* Balance outer edges when using per-item horizontal padding */
    margin-left: -8px;
    margin-right: -8px;
  }
  /* Hero (Item 1) spans two rows on the left */
  .recommendation_cat_products.layout-1 ul.products > li.product:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  /* Item 2 occupies the full top-right across three columns */
  .recommendation_cat_products.layout-1 ul.products > li.product:nth-child(2) {
    grid-column: 2 / 5; /* cols 2-4 */
    grid-row: 1;
  }
  /* Items 3,4,5 fill the second row in the three right columns */
  .recommendation_cat_products.layout-1 ul.products > li.product:nth-child(3) { grid-column: 2; grid-row: 2; }
  .recommendation_cat_products.layout-1 ul.products > li.product:nth-child(4) { grid-column: 3; grid-row: 2; }
  .recommendation_cat_products.layout-1 ul.products > li.product:nth-child(5) { grid-column: 4; grid-row: 2; }
  /* Reset floats/margins; add horizontal gutters without affecting track percentages */
  .recommendation_cat_products.layout-1 ul.products > li.product {
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    display: block !important;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
  }
}

/* --- Normalize Quick Add (+) and Swiper scrollbar across recommendation blocks --- */
/* Shared variables: baseline for scrollbar and the gap to the + button. */
.ds-recommendation-grid,
.recommendation_cat_products {
  --ds-scrollbar-bottom: 10px; /* default baseline */
  --ds-plus-gap: 6px;          /* space between scrollbar and + */
}
/* Category layout needs a slightly higher baseline to clear inner paddings */
.recommendation_cat_products { --ds-scrollbar-bottom: 15px; }
/* Tag best-seller block (ds-recommendation-grid ds-context-tag):
   use a slightly lower baseline and tighter gap so the Swiper scrollbar
   and Quick Add (+) align cleanly within the flatter 4-up grid visuals. */
.ds-tag-best-seller {
  --ds-scrollbar-bottom: 3px;
  --ds-plus-gap: 4px;
}
/* Archive groups placed before main loop: override on the grid element inside the wrapper */
.ds-rec-group.ds-rec-before_loop .ds-recommendation-grid { --ds-scrollbar-bottom: 15px; }

/* Ensure correct positioning context for both generic and category blocks */
.ds-recommendation-grid .product-image-slider,
.recommendation_cat_products .product-image-slider { position: relative; }

/* Place/align the Swiper scrollbar using the shared baseline */
.ds-recommendation-grid .swiper-horizontal > .swiper-scrollbar,
.ds-recommendation-grid .product-image-slider > .swiper-scrollbar,
.recommendation_cat_products .swiper-horizontal > .swiper-scrollbar,
.recommendation_cat_products .product-image-slider > .swiper-scrollbar {
  /* Use shared custom property so all DS recommendation scrollbars share a baseline */
  bottom: var(--ds-scrollbar-bottom, 3px);
  left: 8px;
  right: 8px;
  width: auto;
}

/* In recommendation grids, explicitly anchor the Quick Add wrapper to the
   product-image-slider (not the full <li> tile) so tall layouts do not push
   the + button away from the image, and ensure it sits above slide content. */
.ds-recommendation-grid .product-image-slider .ds-qap-wrap,
.recommendation_cat_products .product-image-slider .ds-qap-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 5;
  pointer-events: none; /* children (button/overlay) re-enable as needed */
}

/* Align DS Quick Add (+) button to the image area in recommendation blocks
   and force it to render above slides/overlays. */
.ds-recommendation-grid .product-image-slider .ds-aov-plus-btn,
.recommendation_cat_products .product-image-slider .ds-aov-plus-btn {
  position: absolute;
  right: 8px; /* match scrollbar horizontal padding */
  /* place the + just above the scrollbar using the shared variables */
  bottom: calc(var(--ds-scrollbar-bottom, 3px) + var(--ds-plus-gap, 6px));
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 6; /* above wrapper & slides */
}

/* Ensure second image is visible across mobile/tablet/desktop inside recommendations,
   overriding legacy rules from DS-shop-page.css that hide .second-image at <=1405px */
.recommendation_cat_products ul.products > li.product.double-images .product-image-slider img.second-image {
  display: inline-block !important;
}

/* Pre-init double-image layout guard (mobile-first): ensure item #2 shows two
   half-width images immediately, before any Swiper CSS/JS applies. Scoped narrowly
   to category Layout 1 and only when the LI has .double-images. */
/* Case A: slider uses Swiper markup but is not initialized yet */
.recommendation_cat_products.layout-1 ul.products > li.product.double-images .product-image-slider.swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
}
.recommendation_cat_products.layout-1 ul.products > li.product.double-images .product-image-slider.swiper:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 50%;
  max-width: 50%;
}
.recommendation_cat_products.layout-1 ul.products > li.product.double-images .product-image-slider.swiper:not(.swiper-initialized) .swiper-slide:nth-child(n+3) {
  display: none;
}
.recommendation_cat_products.layout-1 ul.products > li.product.double-images .product-image-slider.swiper:not(.swiper-initialized) .swiper-slide img {
  display: block;
  width: 100% !important; /* fill its half-width slide */
  height: auto;
}

/* Case B: no Swiper classes present — render first two anchors/images side-by-side */
.recommendation_cat_products.layout-1 ul.products > li.product.double-images .product-image-slider:not(.swiper) {
  font-size: 0; /* remove inline-block gaps if anchors/images are inline */
}
.recommendation_cat_products.layout-1 ul.products > li.product.double-images .product-image-slider:not(.swiper) a,
.recommendation_cat_products.layout-1 ul.products > li.product.double-images .product-image-slider:not(.swiper) img {
  display: inline-block;
  width: 50% !important; /* override Woo img { width:100% } */
  vertical-align: top;
}
.recommendation_cat_products.layout-1 ul.products > li.product.double-images .product-image-slider:not(.swiper) img {
  height: auto;
}
.recommendation_cat_products.layout-1 ul.products > li.product.double-images .product-image-slider:not(.swiper) a:nth-child(n+3),
.recommendation_cat_products.layout-1 ul.products > li.product.double-images .product-image-slider:not(.swiper) img:nth-child(n+3) {
  display: none !important;
}

.swiper-pagination {
    position: relative !important; /* Stops it from floating over content */
    bottom: auto !important;       /* Resets the default bottom alignment */
    margin-top: 15px !important;   /* ADJUST THIS: Increases the gap */
    width: 100% !important;        /* Ensures it stays centered */
}

.swiper-pagination-bullet {
    width: auto !important;   /* Let it grow to fit the text */
    height: auto !important;  /* Let it grow to fit the text */
    background: transparent !important; /* Remove the blue/grey dot color */
    opacity: 0.4;             /* Dim inactive numbers */

    /* Typography settings */
    font-family: 'Quicksand';
    font-size: 9px;
    font-weight: 300;
    color: #000;              /* Text color */

    /* Spacing */
    margin: 0 12px !important; /* Space between numbers */
    border-radius: 0;          /* Remove roundness */
    position: relative;        /* For custom underlines if needed */
    padding-bottom: 5px;       /* Space for the active underline */
    transition: all 0.3s ease;
}

/* 2. Remove the old border logic */
.swiper-pagination-bullet-active {
    opacity: 1;
    font-weight: 500;
    border-bottom: none !important; /* Remove the glitchy border */
}

/* 3. The New "Stable" Underline */
.swiper-pagination-bullet-active::after {
    content: ""; /* Creates an empty box */
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%; /* Spans the full width of the number */
    height: 1px; /* Thickness of the line */
    background-color: #000; /* Color of the line */

    /* Optional: Make it slide in smoothly */
    animation: slideLine 0.3s ease forwards;
}

/* Optional: Animation keyframes */
@keyframes slideLine {
    from { width: 0; opacity: 0; }
    to { width: 100%; opacity: 1; }
}