/* ===========================================================================
   apol-load-more.css
   Styling for apolGrid's "Show more" (load-more) mode:
     - text-only button (no fill), centred
     - spinner shown while the next batch loads
     - new cards fade + rise in
     - hides the items-per-page control when load-more is active
   Loaded by template_00201.html. CSP-safe (external stylesheet, no inline).
   =========================================================================== */

/* Centre the button under the grid */
.apol-load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 26px 0 8px;
}

/* Auto-load mode (JS adds .is-auto when IntersectionObserver is available): the
   next batch loads itself when the foot scrolls into view, so the button is
   hidden. The wrap stays as a slim sentinel for the observer to watch - a
   display:none element has no box to observe, so we hide the button, not the
   wrap. Without IntersectionObserver the class is never added and the button
   shows as a normal clickable fallback. */
.apol-load-more-wrap.is-auto {
  margin: 0;
  min-height: 1px;
}
.apol-load-more-wrap.is-auto .apol-load-more {
  display: none !important;
}

/* Text-only button - overrides the filled .Button look */
.apol-load-more.Button,
.apol-load-more.Button.Button_no_background {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--apol-color-primary, #0099cc) !important;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 0;
  transition: opacity .15s ease;
}
.apol-load-more:hover { text-decoration: underline; }
.apol-load-more:focus-visible {
  outline: 2px solid var(--apol-color-primary, #0099cc);
  outline-offset: 3px;
}
.apol-load-more.is-loading { pointer-events: none; opacity: .85; }

/* The "(34 more)" counter, lighter than the label */
.apol-load-more-count {
  font-weight: 400;
  opacity: .65;
  text-transform: none;
  letter-spacing: 0;
}

/* Spinner (inherits the button's text colour via currentColor) */
.apol-lm-spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  display: inline-block;
  animation: apol-lm-spin .6s linear infinite;
}
.apol-lm-loading-text { text-transform: uppercase; }

@keyframes apol-lm-spin { to { transform: rotate(360deg); } }

/* Newly-revealed cards fade + rise in.
   .apol-lm-enter is the start state; .apol-lm-enter-active drives the
   transition. apolGrid removes both classes on transitionend. */
.apol-lm-enter {
  opacity: 0;
  transform: translateY(8px);
}
.apol-lm-enter-active {
  opacity: 1;
  transform: none;
  transition: opacity .32s ease, transform .32s ease;
}

/* Items-per-page control, hidden by apolGrid when load-more mode is on */
.apol-grid-hidden-control { display: none !important; }

/* Respect reduced-motion: no spin, no fade */
@media (prefers-reduced-motion: reduce) {
  .apol-lm-spinner { animation: none; }
  .apol-lm-enter,
  .apol-lm-enter-active {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ===========================================================================
   Skeleton placeholders (shown on a "Show more" click) + per-image fade-in.
   apolGrid injects .apol-skel-card elements that reuse the live card classes,
   so width and image aspect-ratio match the current view mode automatically.
   The inner .apol-skel-img reuses the .data_grid_card_image* holder, which
   already ships a grey (#F0F0F0) background; we just add the moving sheen.
   =========================================================================== */

.apol-skel-card { pointer-events: none; }

/* Image block: holder supplies aspect-ratio + grey fill; we clip the sheen. */
.apol-skel-img { position: relative; overflow: hidden; }

/* Text placeholder bars */
.apol-skel-line {
  position: relative;
  overflow: hidden;
  height: 12px;
  margin: 10px 0;
  border-radius: 4px;
  background: #ececec;
}
.apol-skel-line-title { width: 80%; height: 14px; margin-top: 16px; }
.apol-skel-line-sm    { width: 55%; }
.apol-skel-line-price { width: 35%; height: 16px; }

/* Sheen across the text placeholder bars (not on a card-image holder, so the
   v2.9 content:none rule doesn't touch these). */
.apol-skel-line::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
  animation: apol-skel-shimmer 1.25s ease-in-out infinite;
}

@keyframes apol-skel-shimmer { 100% { transform: translateX(100%); } }

/* ---------------------------------------------------------------------------
   The "ECOM v2.9" block in apol.base.css forces every card image holder to
   background:transparent !important, its ::after to content:none !important,
   and the card <img> to opacity:1 !important (so loaded photos show no grey
   letterbox). To show a placeholder we re-assert grey + shimmer + fade ONLY
   while loading, with higher specificity + !important, so each card reverts to
   the v2.9 transparent/visible state the instant its image is ready.
   --------------------------------------------------------------------------- */

/* Skeleton card image block: grey fill + sheen */
[data-grid] .apol-skel-img {
  position: relative;
  overflow: hidden;
  background: #ececec !important;
}
[data-grid] .apol-skel-img::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
  animation: apol-skel-shimmer 1.25s ease-in-out infinite;
}

/* Real card, while its image loads: grey holder + sheen */
[data-grid] .apol-img-loading {
  position: relative;
  background: #F0F0F0 !important;
}
[data-grid] .apol-img-loading::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
  animation: apol-skel-shimmer 1.25s ease-in-out infinite;
}

/* Fade the image in (beats opacity:1 !important). Direct <img> and <a><img>,
   normal + small cards. Reverts to the v2.9 opacity:1 once loaded. */
[data-grid] .data_grid_card_image > img.apol-img-fade,
[data-grid] .data_grid_card_image > a > img.apol-img-fade,
[data-grid] .data_grid_card_image_small > img.apol-img-fade,
[data-grid] .data_grid_card_image_small > a > img.apol-img-fade {
  opacity: 0 !important;
  transition: opacity .4s ease;
}
[data-grid] .data_grid_card_image > img.apol-img-fade.apol-img-loaded,
[data-grid] .data_grid_card_image > a > img.apol-img-fade.apol-img-loaded,
[data-grid] .data_grid_card_image_small > img.apol-img-fade.apol-img-loaded,
[data-grid] .data_grid_card_image_small > a > img.apol-img-fade.apol-img-loaded {
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-grid] .apol-skel-img::after,
  .apol-skel-line::after,
  [data-grid] .apol-img-loading::after { animation: none !important; display: none !important; }
  [data-grid] .data_grid_card_image > img.apol-img-fade,
  [data-grid] .data_grid_card_image > a > img.apol-img-fade,
  [data-grid] .data_grid_card_image_small > img.apol-img-fade,
  [data-grid] .data_grid_card_image_small > a > img.apol-img-fade {
    opacity: 1 !important;
    transition: none !important;
  }
}