/* -----------------------------------------------------------
   Product Catalog
   Responsive, Divi-safe, AF-prefixed
   ----------------------------------------------------------- */

/* =========================================================
   Design tokens
   ========================================================= */

:root{
  --af-gap: 1.25rem;
  --af-radius: 14px;
  --af-border: 1px solid rgba(0,0,0,.06);
  --af-shadow: 0 1px 3px rgba(0,0,0,.04);
  --af-pad: 1rem;
  --af-title-size: clamp(1.05rem, 1vw + 0.9rem, 1.2rem);
}

/* =========================================================
   Grid (default catalog behavior)
   ========================================================= */

.af-catalog{
  /* Desktop default; overridden by modifiers and media queries */
  --af-cols: 3;

  display: grid;
  gap: var(--af-gap);
  grid-template-columns: repeat(var(--af-cols), minmax(0, 1fr)) !important;
}

/* Column modifiers (set vars only, never layout directly) */
.af-catalog.af-cols-1 { --af-cols: 1; }
.af-catalog.af-cols-2 { --af-cols: 2; }
.af-catalog.af-cols-3 { --af-cols: 3; }
.af-catalog.af-cols-4 { --af-cols: 4; }
.af-catalog.af-cols-5 { --af-cols: 5; }
.af-catalog.af-cols-6 { --af-cols: 6; }

/* Extra safety for Divi Code modules */
.et_pb_code_inner .af-catalog{
  grid-template-columns: repeat(var(--af-cols), minmax(0, 1fr)) !important;
}

/* Responsive overrides */
@media (max-width: 980px){
  .af-catalog{ --af-cols: 2 !important; }
}
@media (max-width: 640px){
  .af-catalog{ --af-cols: 1 !important; }
}

/* =========================================================
   Featured Products Slider
   (overrides grid → horizontal track)
   ========================================================= */

.af-featured-slider .af-catalog{
  display: flex;
  gap: var(--af-gap);

  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;

  padding-bottom: .5rem;
}

/* Individual slide cards */
.af-featured-slider .af-card{
  flex: 0 0 clamp(260px, 30vw, 340px);
  scroll-snap-align: start;
}

/* Hide scrollbar (modern browsers) */
.af-featured-slider .af-catalog::-webkit-scrollbar{
  display: none;
}
.af-featured-slider .af-catalog{
  scrollbar-width: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .af-featured-slider .af-catalog{
    scroll-snap-type: none;
  }
}

/* =========================================================
   Card
   ========================================================= */

.af-card{
  background: #fff;
  border: var(--af-border);
  border-radius: var(--af-radius);
  box-shadow: var(--af-shadow);
  overflow: clip;

  display: flex;
  flex-direction: column;

  /* Divi safety */
  width: auto !important;
  min-width: 0;
}

/* =========================================================
   Media
   ========================================================= */

.af-image-wrap{
  display: block;
  aspect-ratio: 4 / 3;
  background: rgba(0,0,0,.03);
}

.af-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.af-image--placeholder{
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.05),
    rgba(0,0,0,.08),
    rgba(0,0,0,.05)
  );
  background-size: 200% 100%;
  animation: af-shimmer 1.25s linear infinite;
}

@media (prefers-reduced-motion: reduce){
  .af-image--placeholder{ animation: none; }
}

@keyframes af-shimmer{
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* =========================================================
   Body / Text
   ========================================================= */

.af-body{
  padding: var(--af-pad) var(--af-pad) calc(var(--af-pad) * 1.25);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.af-title{
  font-size: var(--af-title-size);
  margin: 0;
  line-height: 1.35;
}

.af-title a{
  text-decoration: none;
}

.af-desc p{
  margin: .4rem 0 0;
}

/* =========================================================
   Button
   ========================================================= */

.af-btn{
  display: inline-block;
  padding: .6rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.1);
  text-decoration: none;
}

/* =========================================================
   Misc / States
   ========================================================= */

.af-empty{
  opacity: .8;
}

.af-pagination{
  margin-top: 1rem;
  text-align: center;
}

/* =========================================================
   Slider Navigation (button-style)
   ========================================================= */

.af-slider-nav{
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.af-slider-btn{
  appearance: none;
  border: none;
  cursor: pointer;

  /* Match primary button feel */
  padding: .75rem 1.75rem;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 600;

  background: #e31e24; /* match your red */
  color: #fff;

  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.af-slider-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
}

.af-slider-btn:active{
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0,0,0,.15);
}

.af-slider-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 2px;
}
/* =========================================================
   Product Image Gallery (Divi Lightbox)
   ========================================================= */

.af-product-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: .75rem;
}

.af-product-gallery-thumb{
  display: block;
  border-radius: 8px;
  overflow: hidden;
}

.af-product-gallery-thumb img{
  width: 100%;
  height: auto;
  display: block;
  transition: transform .2s ease;
}

.af-product-gallery-thumb:hover img{
  transform: scale(1.04);
}