:root {
  --ff-pd-green: #0d4b36;
  --ff-pd-bright: #13934b;
  --ff-pd-red: #c93636;
  --ff-pd-glass: rgba(255,255,255,.84);
  --ff-pd-line: rgba(13,75,54,.11);
  --ff-pd-shadow: 0 17px 48px rgba(23,54,42,.09);
}

/* Prices entered by sellers are the storefront prices. Tax is handled outside OpenCart. */
body.ff-storefront .price-tax {
  display: none !important;
}

/* Stable gallery geometry prevents image rotation from shifting the page. */
.ff-product-gallery,
.ff-main-image {
  overflow-anchor: none;
}
.ff-main-image {
  aspect-ratio: 1 / 1;
  min-height: 0 !important;
}
.ff-main-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
}
.ff-gallery-thumbs {
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
}

.ff-stock-status {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  border-right: 0 !important;
  font-weight: 850;
}
.ff-stock-status .fa-circle { font-size: .56rem; }
.ff-stock-in { color: #168447; }
.ff-stock-out { color: var(--ff-pd-red); }

/* Sale and search recommendation flags sit on the image where shoppers see them first. */
.ff-product-card .image { position: relative; }
.ff-card-flags {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  left: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  pointer-events: none;
}
.ff-card-flags span,
.ff-sale-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 29px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 999px;
  box-shadow: 0 9px 24px rgba(13,42,30,.15);
  font-size: .63rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .02em;
}
.ff-recommended-badge {
  background: linear-gradient(145deg,#0d4b36,#187a50);
  color: #fff;
}
.ff-sale-badge,
.ff-product-kickers .ff-sale-pill {
  margin-left: auto;
  background: linear-gradient(145deg,#ffca00,#ffe16b) !important;
  color: #172019 !important;
}

.ff-review-gate {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--ff-pd-line);
  border-radius: 19px;
  background: linear-gradient(135deg,rgba(234,248,239,.9),rgba(255,255,255,.86));
  box-shadow: var(--ff-pd-shadow);
}
.ff-review-gate > i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #daf2e3;
  color: var(--ff-pd-green);
}
.ff-review-gate strong { color: #17231d; }
.ff-review-gate p { margin: 3px 0 0; color: #63776c; font-size: .78rem; }
.ff-review-gate a {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--ff-pd-green);
  color: #fff;
  font-size: .75rem;
  font-weight: 850;
  text-decoration: none;
}

.ff-search-scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4e6c5c;
  font-size: .7rem;
  font-weight: 720;
}
.ff-search-scope i { color: var(--ff-pd-bright); }

/* Liquid-glass pagination: compact, touch-scrollable, and consistent across lists. */
body.ff-storefront .ff-pagination-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 20px;
  background: var(--ff-pd-glass);
  box-shadow: var(--ff-pd-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  backdrop-filter: blur(24px) saturate(155%);
}
body.ff-storefront .ff-pagination-row > div:first-child {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
body.ff-storefront .ff-pagination-row > div:first-child::-webkit-scrollbar { display: none; }
body.ff-storefront .pagination {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  width: max-content;
  margin: 0;
}
body.ff-storefront .pagination .page-link {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--ff-pd-line);
  border-radius: 12px !important;
  background: rgba(247,251,248,.9);
  color: #496358;
  font-weight: 800;
}
body.ff-storefront .pagination .active > .page-link,
body.ff-storefront .pagination .page-link.active {
  border-color: var(--ff-pd-green);
  background: var(--ff-pd-green);
  color: #fff;
  box-shadow: 0 8px 20px rgba(13,75,54,.2);
}

/* Explicit grids loaded after all legacy Bootstrap and :has() rules. */
.ff-random-products,
.ff-home-module-content > .row,
.ff-generated-module > .row,
.ff-related-products > .row,
.ff-seller-products > .row,
.ff-product-grid {
  align-items: stretch;
}
.ff-random-products > .col,
.ff-home-module-content > .row > .col,
.ff-generated-module > .row > .col,
.ff-related-products > .row > .col,
.ff-seller-products > .row > .col,
.ff-product-grid > .col {
  display: flex;
  min-width: 0;
}
.ff-random-products .ff-product-card,
.ff-home-module-content .ff-product-card,
.ff-generated-module .ff-product-card,
.ff-related-products .ff-product-card,
.ff-product-grid .ff-product-card {
  width: 100%;
  height: 100%;
}

@media (min-width: 992px) {
  .ff-random-products {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
    margin: 0 !important;
  }
  .ff-random-products > .col { width: 100% !important; padding: 0 !important; }
}

@media (max-width: 767.98px) {
  body.ff-storefront .ff-home-module-content,
  body.ff-storefront .ff-generated-module,
  body.ff-storefront .ff-related-products,
  body.ff-storefront .ff-seller-products,
  body.ff-storefront #product-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.ff-storefront .ff-random-products,
  body.ff-storefront .ff-home-module-content > .row,
  body.ff-storefront .ff-generated-module > .row,
  body.ff-storefront .ff-related-products > .row,
  body.ff-storefront .ff-seller-products > .row,
  body.ff-storefront #product-list.ff-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  body.ff-storefront .ff-random-products > .col,
  body.ff-storefront .ff-home-module-content > .row > .col,
  body.ff-storefront .ff-generated-module > .row > .col,
  body.ff-storefront .ff-related-products > .row > .col,
  body.ff-storefront .ff-seller-products > .row > .col,
  body.ff-storefront #product-list.ff-product-grid > .col {
    grid-column: auto !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
  }

  body.ff-storefront .ff-product-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
  }
  body.ff-storefront .ff-product-card .content { min-width: 0 !important; }
  body.ff-storefront .ff-product-card h4,
  body.ff-storefront .ff-product-card h4 a { overflow-wrap: anywhere; }

  .ff-card-flags { top: 7px; right: 7px; left: 7px; }
  .ff-card-flags span { min-height: 25px; padding: 5px 7px; font-size: .52rem; }
  .ff-recommended-badge { max-width: 92px; }

  body.ff-storefront .ff-pagination-row {
    align-items: stretch;
    flex-direction: column;
    padding: 10px;
    border-radius: 17px;
  }
  body.ff-storefront .ff-pagination-row > div:last-child {
    padding-inline: 4px;
    color: #687d72;
    font-size: .7rem;
  }
  body.ff-storefront .pagination .page-link { min-width: 38px; height: 38px; }

  .ff-review-gate { grid-template-columns: 42px 1fr; padding: 14px; }
  .ff-review-gate > i { width: 42px; height: 42px; }
  .ff-review-gate a { grid-column: 1 / -1; text-align: center; }
  .ff-main-image { aspect-ratio: 1 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ff-gallery-thumbs { scroll-behavior: auto; }
}