.dream-header .avatar {
    border-radius: 50%; /* This makes it a perfect circle */
    object-fit: cover;
}

.product-slider::-webkit-scrollbar {
    display: none;
}
.product-slider {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Masonry Grid Layout */
.dream-grid {
    display: block;
    position: relative;
    opacity: 0;
    width: 100%;
    max-width: 100%;
}

.dream-grid {
    opacity: 1;
}

/* Grid column item styling */
.dream-column {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    padding: 1rem; /* p-4 = 1rem spacing like original theme */
}

.dream-column > * {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.dream-column a.card {
    text-decoration: none;
    color: inherit;
}

/* Wishlist button styling */
.wishlist-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    z-index: 10;
    font-size: 1.5rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

.wishlist-btn:hover {
    transform: scale(1.2);
}

.wishlist-btn ion-icon {
    display: block;
}

/* Responsive masonry column widths - account for padding */
@media (max-width: 640px) {
    .dream-column {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .dream-column {
        width: 50%;
    }
}

@media (min-width: 1024px) {
    .dream-column {
        width: 33.333%;
    }
}

@media (min-width: 1280px) {
    .dream-column {
        width: 25%;
    }
}

/* Wide Dropdown Menus */
.wide-dropdown {
    width: 280px !important;
}

@media (min-width: 768px) {
    .wide-dropdown {
        width: 320px !important;
    }
}

@media (min-width: 1024px) {
    .wide-dropdown {
        width: 380px !important;
    }
}

/* Carousel Items Styling (container only) */
.carousel-item {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    background: transparent; /* keep container transparent so the card's own bg shows */
    border-radius: 0; /* let the card element define rounded corners */
    box-shadow: none; /* card has its own shadow via the theme's .card */
}

/* Do not override the theme's card background or shadow — remove forced background so theme controls appearance */
.related-products-container .carousel-item > a.card,
.related-products-container .carousel-item > a {
    background: unset !important; /* let theme provide the card background */
    border-radius: 0.5rem !important; /* preserve corner radius */
    /* keep theme box-shadow intact (do not set box-shadow here) */
}

/* TOC visual hierarchy - make nested entries look like H2/H3 */
#TableOfContents { font-size: 0.95rem; }
#TableOfContents ul { list-style: none; margin: 0; padding: 0; }
#TableOfContents > ul > li > a {
    display: block;
    font-weight: 700;
    padding: .4rem .75rem;
    border-radius: .375rem;
}
#TableOfContents ul ul > li > a {
    display: block;
    font-weight: 500;
    padding: .25rem .75rem;
    padding-left: 1.25rem;
    font-size: .93rem;
    opacity: .95;
}
#TableOfContents ul ul ul > li > a {
    padding-left: 1.9rem;
    font-size: .9rem;
    opacity: .85;
}

/* Optional subtle separator for nested lists */
#TableOfContents ul ul { border-left: 2px solid rgba(0,0,0,0.04); margin-left: .5rem; padding-left: .5rem; }

/* Narrow article layout for boxed appearance */
#dream-single-post-main {
  max-width: 56rem; /* 4xl */
  margin: 0 auto;
}

/* Accessibility helpers */
.sr-only-focusable { /* visually hidden but visible on focus */
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.sr-only-focusable:focus, .sr-only-focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0.5rem 0 !important;
  padding: 0.5rem 1rem !important;
  background: color-mix(in oklch, var(--b1) 100%, oklch(var(--p) / 0%)) !important;
  border-radius: .375rem !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
  outline: 3px solid oklch(var(--p) / 0.18) !important;
  z-index: 11000 !important;
}

/* Visible focus styles for keyboard users */
:focus {
  outline-offset: 3px;
}
:focus-visible {
  outline: 3px solid oklch(var(--p) / 0.18);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--p) 10%, transparent);
}

/* Make carousel controls reachable by screen readers */
.carousel-prev, .carousel-next { }

/* Ensure TOC links are keyboard-friendly */
#TableOfContents a { scroll-margin-top: 120px; }

/* Related products section z-index above floating TOC */
section.mt-16 {
  position: relative;
  z-index: 10000;
}

/* Related products container - match article width and enable carousel scrolling */
.related-products-container {
  box-sizing: border-box;
  width: calc(100% - 2rem); /* respect page gutters */
  padding: 0 1rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 56rem; /* Same as article max-width (4xl) */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: oklch(var(--p) / 0.3) transparent;
  scroll-snap-type: x proximity;
}

/* Make the inner carousel behave like a horizontal swipeable rail. Use min-content so
   the rail doesn't stretch to the container width (this preserves original card sizing). */
.related-products-container .carousel-container {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  padding-bottom: 1rem; /* allow space for shadows */
  min-width: min-content; /* IMPORTANT: prevents cards from expanding to fill the container */
  /* Ensure last card can snap fully into view on all platforms */
  padding-inline-end: 1rem; /* keep consistent with container gutter */
  scroll-padding-inline: 1rem;
}

/* Flex-end spacer so the last card has breathing room to fully scroll into view */
.related-products-container .carousel-container::after {
  content: '';
  flex: 0 0 1rem;
  width: 1rem;
  height: 1px; /* invisible spacer */
  display: block;
}

/* Keep original card sizing (same as inline style in the partial). Use !important to
   override the inline width when necessary and preserve the original look. */
.related-products-container .carousel-item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: calc(25% - 1.5rem) !important; /* same as original partial inline width */
  min-width: 250px !important;                  /* same as original partial */
  max-width: 280px;                             /* guard against accidental stretching */
}

/* Small-screen fallback: keep cards comfortably sized and tappable */
@media (max-width: 640px) {
  .related-products-container .carousel-item {
    width: calc(60% - 1rem) !important;
    min-width: 200px !important;
  }
}

/* Match article max-width at larger breakpoints so both stay visually aligned */
@media (min-width: 1280px) {
  .related-products-container {
    max-width: 56rem; /* keep parity with article */
  }
}

@media (min-width: 1536px) {
  .related-products-container {
    max-width: 56rem; /* unchanged to remain consistent with article */
  }
}