/* Fourthwall Store Plugin Styles */

/* Container for all products in a grid */
.fourthwall-products-grid {
  /* The products grid is no longer used for layout; slider will override */
  display: block;
  margin-bottom: 2rem;
}

/* Individual product card */
/* Card container uses CSS variables so colours can be customised via WordPress settings. */
.fourthwall-product {
  background: var(--fourthwall-card-bg);
  border: 1px solid var(--fourthwall-border-color);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  width: 100%;
  max-width: 220px;
}

.fourthwall-product a {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 0.5rem;
}

.fourthwall-product img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Product title styles
 * Provide sensible defaults for light mode. We override in a media query for dark mode
 * so the text remains visible on dark backgrounds. */
/* Product title uses dynamic colour */
.fourthwall-title {
  font-size: 1rem;
  margin: 0.5rem 0;
  line-height: 1.2;
  color: var(--fourthwall-title-color);
}

/* Product price styles */
/* Product price uses dynamic colour */
.fourthwall-price {
  font-weight: 700;
  color: var(--fourthwall-price-color);
  margin: 0.25rem 0;
}

/* Description styling */
.fourthwall-description {
  font-size: 0.875rem;
  margin: 0.25rem 0;
  color: var(--fourthwall-price-color);
  opacity: 0.8;
}

/* Colour variables for dark mode are set via CSS variables; no additional override here. */

/* Collection headings */
.fourthwall-collection-title {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  border-bottom: 2px solid var(--fourthwall-border-color);
  padding-bottom: 0.25rem;
}

/* Slider styles */
/* Slider container and scrolling behaviour */
.fourthwall-slider-wrapper {
  position: relative;
  overflow: hidden;
}
.fourthwall-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Use a CSS variable for the gap so we can compute widths properly */
  gap: var(--fourthwall-gap, 1rem);
  padding-bottom: 0.5rem;
}
.fourthwall-slider::-webkit-scrollbar {
  display: none;
}
/* Each product occupies an equal fraction of the slider width based on the number of columns */
.fourthwall-slider .fourthwall-product {
  flex: 0 0 calc((100% - (var(--fourthwall-columns, 3) - 1) * var(--fourthwall-gap, 1rem)) / var(--fourthwall-columns, 3));
  max-width: none;
  scroll-snap-align: start;
}

/* Overlay slider controls */
/* Overlay slider controls use dynamic colours */
.fourthwall-prev,
.fourthwall-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--fourthwall-arrow-bg);
  color: var(--fourthwall-arrow-color);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 2;
}
.fourthwall-prev:hover,
.fourthwall-next:hover {
  /* Darken or lighten the background on hover by adjusting opacity */
  filter: brightness(0.85);
}
.fourthwall-prev {
  left: 5px;
}
.fourthwall-next {
  right: 5px;
}