/* === Affiliate Book Panel (Added) === */
.affiliate-panel{
    margin:18px 0;
    padding:16px;
    border:1px solid #d6dce8;
    border-radius:6px;
    background:#fff;
}

.affiliate-panel-title{
	  cursor: pointer;
    margin:0 0 14px 0;
    padding:0 0 10px 0;
    border-bottom:1px solid #d6dce8;
    font-size:18px;
    font-weight:bold;
}

/* 1. Hide the original text inside the <small> tag */
.toggle-text {
  font-size: 0; 
}

/* 2. Set the default text for when the panel is OPEN */
.toggle-text::after {
  content: "Click to hide";
  font-size: 0.8rem; /* Restore your desired font size here */
}

/* 3. Change the text when the parent <details> loses its [open] attribute (CLOSED) */
.affiliate-panel:not([open]) .toggle-text::after {
  content: "Click to show";
}

#AffiliateList{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
    gap:5px;
}

#AffiliateList .ArtistList{
    list-style:none;
    margin:0;
    padding:10px;
    border:1px solid #d6dce8;
    border-radius:6px;
    background:#fafbfd;
    text-align:center;
    transition:box-shadow .2s ease, transform .2s ease;
}


.affiliate-panel-title::-webkit-details-marker {
  display: none; /* Removes Safari arrow icon */
}

/* 3. Target the built-in browser container for the details content */
.affiliate-panel::details-content {
  opacity: 0;
  height: 0;
  overflow: hidden;
  /* transition-behavior: allow-discrete keeps the element visible during collapse */
  transition: opacity 0.3s ease, height 0.3s ease, content-visibility 0.3s allow-discrete;
}

/* 4. Smoothly transitions to full height and visible opacity when opened */
.affiliate-panel[open]::details-content {
  opacity: 1;
  height: auto;
}


#AffiliateList .ArtistList:hover{
    box-shadow:0 3px 10px rgba(0,0,0,.10);
    transform:translateY(-2px);
}

.affiliate-book-link{
    display:block;
    color:#222;
    text-decoration:none;
}

.affiliate-book-img{
    object-fit:cover;
    border:1px solid #d6dce8;
    border-radius:4px;
    background:#fff;
}

.affiliate-book-link .affiliate-book-img{
   width: 100%;
   height: 100%;
   object-fit: cover; /* Keeps aspect ratio; crops excess */
}

.affiliate-book-name{
    display:block;
    margin-top:9px;
    font-weight:bold;
    line-height:1.4;
}

.affiliate-book-source{
    display:block;
    margin-top:3px;
    font-size:12px;
    color:#666;
}

@media(max-width:520px){
    .affiliate-panel{
        padding:12px;
    }

    #AffiliateList{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .affiliate-book-img{
        max-width:115px;
        height:160px;
    }
}
/* === End Affiliate Book Panel (Added) === */