.cover-container {
  position: relative;
  z-index: 1;
  display: block;
  float: left;
  margin-right: 20px;  
}

.clear-cover-margin .cover-container {
  margin-right: 0px;
}
.catalog-cover {
  align-self: flex-start;
}

/* Remove the margin-top override so that .meta-container sits right below .pre-meta */
.meta-container {
  padding-right: 5px;

}
p.meta-title {
  font-size: .8rem;
  font-weight: bold;
}
.meta-byline {
  font-size: .8rem;
  color: var(--cover-meta-byline);
}
.meta-container span.meta-author, .meta-container span.meta-byline {
  font-size: .8rem;
  margin: 0; /* optional, to remove extra spacing */
  --bs-body-line-height: 1px !important;
  line-height: 1px !important;
}

.master-cover-container {
  display: flex;
  flex-direction: column;
  /* Optionally, set a min-height or fixed height to the container if needed */
}

.timeline .master-cover-container {
   float: left;
}

/* Increase z-index on hover */
.cover-container:hover {
  z-index: 1000;
  xtransform: scale(1.05); /* Apply scaling to the container */
  box-shadow: 0px 0px 15px var(--cover-hover-shadow);  /* subtle drop shadow */
}

/* Add shadow and other default styles to the image */
.cover-container img {
  transition: all 0.3s ease;  /* smooth transition for all changes */
}
.timeline .cover-container img {width: 200px;}
.timeline .tiny-cover img { width: 100px;}
.cover-container .cover100 {width: 100px;}
.cover-container .cover110 {width: 110px;}
.cover-container .cover120 {width: 120px;}
.cover-container .cover130 {width: 130px;}
.cover-container .cover140 {width: 140px;}
.cover-container .cover150 {width: 150px;}
.cover-container .cover160 {width: 160px;}
.cover-container .cover170 {width: 170px;}
.cover-container .cover180 {width: 180px;}
.cover-container .cover190 {width: 190px;}
.cover-container .cover200 {width: 200px;}
.cover-container .cover310 {
  width: 100%;
  max-width: 310px;
}

.cover-container:hover img {
  filter: blur(4px); /* Add this line to make the image blurry */
}
.image-clipper { /* prevents the blur effect from going outside bounds of image */
  overflow: hidden; 
  position: relative;
}
/* Creates overlay layer upon image hover */
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.4s;
  background-color: var(--cover-overlay-bg);
  border: solid;
  border-width: 5px;
  z-index: 2;
}
.tiny-cover .overlay {
  border-width: 2px;
  border-radius: 2px;
}
.overlay-read {
  border-color: var(--main-green);
}
.overlay-unread {
  border-color: var(--main-orange);
}
.cover-container:hover .overlay {
  opacity: 1;
}


/* book title/author details that appear upon hover */
.overlay-text {
  position: absolute;
  top:    50%;
  left:   50%;
  transform: translate(-50%, -50%);
  width: 100%;
  /* remove height:100% entirely */
  height: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;  /* let your .top-button-container & .button-container catch clicks */
}
.tiny-cover .overlay-text {
  padding: 5px;
}
.overlay-text .overlay-title {
    xmargin-top: 20%;
	color: var(--cover-overlay-text);
	display: block;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
  text-align: center;
}
.tiny-cover .overlay-text .overlay-title {
  font-size: 10px;
  xmargin-top: 30%;
}
.overlay-text .overlay-author {
	color: var(--cover-overlay-text);
	display: block;
	font-size: 12px;
	text-align: center;
}
.tiny-cover .overlay-text .overlay-author {
  font-size: 9px;
}
.overlay-text .overlay-byline {
	color: var(--cover-overlay-byline);
	display: block;
	font-size: 12px;
	font-style: italic;
	text-align: center;
}
.tiny-cover .overlay-text .overlay-byline {
  font-size: 9px;
}





/* buttons that appear upon hover */
.top-button-container {
  position: absolute;
  top: 0px;
  width: calc(100% - 20px);
  margin: 10px;
  border-radius: 15px;
  box-shadow: 0px 0px 3px var(--cover-btn-shadow);  /* enhanced drop shadow */
  display: flex;
  justify-content: space-between;
}

/* buttons that appear upon hover */
.button-container {
  position: absolute;
  xbottom: 0;
  xposition: relative;
  bottom: 0px;
  width: calc(100% - 20px);
  margin: 10px;
  border-radius: 15px;
  box-shadow: 0px 0px 3px var(--cover-btn-shadow);  /* enhanced drop shadow */
  display: flex;
  justify-content: space-between;
}
.tiny-cover .button-container, .tiny-cover .top-button-container {
  width: calc(100% - 10px);
  margin: 5px;
}
.button-container > * {
	flex: 1;
}
.cover-btn { /* all buttons */
	margin: 0px;
	width: 100%;
	position: relative;
	pointer-events: auto;
	font-weight: bold;
	padding: 10px 0px;  /* Padding */
	border: none;  /* Remove border */
	cursor: pointer;  /* Add a hand cursor on hover */
	transition: all 0.3s ease 0s;  /* Add a transition */
}
.w66 {
  width: 70% !important;
}
.w33 {
  width: 30% !important;
}

.linkword {
  font-size: 10px;
}

.tiny-cover .cover-btn {
  padding: 5px 0px;  /* Padding */
}
.cover-btn-read {
  background-color: var(--main-green);
  color: var(--dark-green);
  text-shadow: 0px 1px 1px var(--highlight-green); /* x, y, spread */
}
.cover-btn-unread {
  color: var(--dark-orange);
  background-color: var(--accent-orange);
  text-shadow: 0px 1px 1px var(--highlight-orange); /* x, y, spread */
}
.cover-btn-read:hover {
  color: var(--main-green); 
  background-color: var(--dark-green);  /* Darker shade for hover */
  text-shadow: 0px 1px 2px var(--darkest-green); /* x, y, spread */
}
.cover-btn-unread:hover {
  color: var(--accent-orange); 
  background-color: var(--dark-orange);  /* Darker shade for hover */
  text-shadow: 0px 1px 2px var(--darkest-orange); /* x, y, spread */
}
.cover-btn:active {
  color: var(--white);
}

.loggedout-cover-btn {
  margin: 0px;
  margin-top: 10px;
  width: 100%;
  position: relative;
  pointer-events: auto;
  padding: 5px 0px 5px 10px;  /* Padding */
  border: 1px solid var(--accent-gray);  /* Remove border */
  border-radius: 10px;
  cursor: pointer;  /* Add a hand cursor on hover */
  transition: all 0.3s ease 0s;  /* Add a transition */
  text-align: left;
  display: inline-flex;
  align-items: center;
  box-shadow: 0px 0px 3px var(--cover-btn-shadow);  /* enhanced drop shadow */
  color: var(--dark-gray);
  background-color: var(--background-gray);
  text-shadow: 0px 1px 1px var(--mid-gray); /* x, y, spread */
}
.tiny-review .loggedout-cover-btn {
  padding: 2px 0px 2px 5px;  /* Padding */
  margin-top: 4px;
}
.loggedout-cover-btn:hover {
  color: var(--background-gray);
  background-color: var(--loggedout-hover-bg);
  text-shadow: 0px 1px 1px var(--dark-gray); /* x, y, spread */
  border: 1px solid var(--dark-gray);  /* Remove border */
}
.loggedout-cover-btn .btn-text {
  font-size: 14px;
  padding-left: 10px;
}
.tiny-review .loggedout-cover-btn .btn-text {
  font-size: 10px;
  padding-left: 2px;
}



i.highlight {
  color: var(--white);
  text-shadow: 0px 0px 5px var(--cover-icon-highlight-shadow); /* x, y, spread */
}
.linkword {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
.rating-button {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-right: 1px solid;
}
.menu-button {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border-left: 1px solid;
}
.cart-button,
.list-button {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border-left: 1px solid;
}
.rating-button-read{
  border-color: var(--dull-green);
} 
.menu-button-read {
  border-color: var(--dull-green);
}
.cart-button-read,
.list-button-read {
  border-color: var(--dull-green);
}
.rating-button-unread {
  border-color: var(--highlight-orange);
} 
.menu-button-unread {
  border-color: var(--highlight-orange);
}
.cart-button-unread,
.list-button-unread {
  border-color: var(--highlight-orange);
}

/* below two required to get '...' button to have proper 1/3rd width */
.menu-wrapper {
  position: relative;
}
.menu-wrapper .cover-btn {
	width: 100%;
}


/* RATING MENU */
.rating-wrapper { position: relative; }
.rating-menu {
	display: none;
	position: absolute;
	padding: 7px;
	bottom: 100%;
	top: auto;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 15px; 
	z-index: 1001;
	font-size: 14px;
	  color: var(--white);
	  text-align: center;
	  box-shadow: 0 2px 4px var(--cover-menu-shadow); /* subtle drop shadow */
	  border-radius: 3px;
}
.tiny-cover .rating-menu {
  font-size: 11px;
  top: auto;
  bottom: 100%;
}
.rating-menu-read {
  background-color: var(--mid-green);
}
.rating-menu-unread {
  background-color: var(--highlight-orange);
}


.rating-menu .rating-container .rating-icon {
	font-size: 1.75rem;
}
.tiny-cover .rating-menu .rating-container .rating-icon {
  font-size: 1.5rem;
}

.rating-menu::before { /* This is the menu triangle */
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  top: 100%;
  left: 50%; 
  margin-left: -15px;
  margin-top: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  filter: drop-shadow(0 2px 2px var(--cover-triangle-shadow)); /* subtle drop shadow for the triangle */
  z-index: -1;
}
.tiny-cover .rating-menu::before { /* This is the menu triangle */
  top: 100%;
  left: 50%;
}
.rating-menu-read::before {
  border-top: 15px solid var(--mid-green);
}
.rating-menu-unread::before {
  border-top: 15px solid var(--highlight-orange);
}

/* context menu button and menu styles */
.context-menu {
  display: none;
  position: absolute;
  padding: 7px;
  top: -10px; /* Raise menu vertically */
  margin-left: 0px;
  left: 100%;
  min-width: 110px;
  white-space: nowrap;
  z-index: 2;
  font-size: 14px;
  color: var(--white);
  text-align: center;
  box-shadow: 0 2px 4px var(--cover-menu-shadow); /* subtle drop shadow */
  border-radius: 3px;
}
.context-menu-read {
  background-color: var(--mid-green);
}
.context-menu-unread {
  background-color: var(--highlight-orange);
}
.context-menu a {
  display: block;
  padding: 5px 0px;
  text-decoration: none;
  color: var(--white);
  width: 100%;
  border-radius: 3px;
  border: 1px solid transparent;
}
.context-menu a:hover {
  box-shadow: 0 2px 4px var(--cover-menu-hover-shadow); /* subtle drop shadow */
  
}
.context-menu-read a:hover {
  background-color: var(--menu-green);
  border: 1px solid var(--main-green);
  text-shadow: 0px 1px 2px var(--dark-green); /* x, y, spread */
}
.context-menu-unread a:hover {
  background-color: var(--menu-orange);
  border: 1px solid var(--main-orange);
  text-shadow: 0px 1px 2px var(--darkest-orange); /* x, y, spread */
}
.context-menu::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -10px; /* position of the triangle, you can adjust it */
  margin-top: -5px; /* half the height */
  border-width: 10px 10px 10px 0;
  border-style: solid;
  filter: drop-shadow(0 2px 2px var(--cover-triangle-shadow)); /* subtle drop shadow for the triangle */
  z-index: -1;
}
.context-menu-read::before {
  border-color: transparent var(--mid-green) transparent transparent; /* matching the background color of .context-menu */
}
.context-menu-unread::before {
  border-color: transparent var(--highlight-orange) transparent transparent; /* matching the background color of .context-menu */
}

i.cover-icon {
	font-size: 1.5rem;
}
.tiny-cover i.cover-icon {
  font-size: 1.0rem;
}
.context-menu i.rating-icon, i.review-icon {
	font-size: 1.5rem;
}
.context-menu .rate-label, .context-menu .or-label {
	font-size: 10px;
	text-transform: uppercase;
	opacity: .5;
}

.rating-icon, .review-icon {
	opacity: .3;
}
.rating-icon:hover, .review-icon:hover {
	opacity: 1;
}
.selected-icon, .selected-icon:hover {
  color: var(--white);
  opacity: 1;
}
.context-menu hr {
    margin: 0px;
	border: 1px;
	height: 1px;
	background-image: linear-gradient(to right, var(--cover-hr-edge), var(--cover-hr-center), var(--cover-hr-edge));
}

/* Fix carousel clipping for first/last items specifically */
.carousel-track .master-cover-container:first-child .rating-menu {
    left: 0;
    right: auto;
    transform: none;
}
.carousel-track .master-cover-container:last-child .rating-menu {
    right: 0;
    left: auto;
    transform: none;
}

/* Default Triangle position (based on avg 150px cover) */
.carousel-track .master-cover-container:first-child .rating-menu::before {
    left: 22px; 
    margin-left: 0;
}
.carousel-track .master-cover-container:last-child .rating-menu::before {
    left: auto;
    right: 22px;
    margin-left: 0;
}

/* Specific Triangle adjustments per cover size */
/* Formula: (Width - 20px padding) / 3 columns / 2 to center */
.carousel-track .master-cover-container:first-child .cover100 .rating-menu::before { left: 13px; }
.carousel-track .master-cover-container:first-child .cover110 .rating-menu::before { left: 15px; }
.carousel-track .master-cover-container:first-child .cover120 .rating-menu::before { left: 17px; }
.carousel-track .master-cover-container:first-child .cover130 .rating-menu::before { left: 18px; }
.carousel-track .master-cover-container:first-child .cover140 .rating-menu::before { left: 20px; }
.carousel-track .master-cover-container:first-child .cover150 .rating-menu::before { left: 22px; }
.carousel-track .master-cover-container:first-child .cover160 .rating-menu::before { left: 23px; }
.carousel-track .master-cover-container:first-child .cover170 .rating-menu::before { left: 25px; }
.carousel-track .master-cover-container:first-child .cover180 .rating-menu::before { left: 27px; }
.carousel-track .master-cover-container:first-child .cover190 .rating-menu::before { left: 28px; }
.carousel-track .master-cover-container:first-child .cover200 .rating-menu::before { left: 30px; }

.carousel-track .master-cover-container:last-child .cover100 .rating-menu::before { right: 13px; }
.carousel-track .master-cover-container:last-child .cover110 .rating-menu::before { right: 15px; }
.carousel-track .master-cover-container:last-child .cover120 .rating-menu::before { right: 17px; }
.carousel-track .master-cover-container:last-child .cover130 .rating-menu::before { right: 18px; }
.carousel-track .master-cover-container:last-child .cover140 .rating-menu::before { right: 20px; }
.carousel-track .master-cover-container:last-child .cover150 .rating-menu::before { right: 22px; }
.carousel-track .master-cover-container:last-child .cover160 .rating-menu::before { right: 23px; }
.carousel-track .master-cover-container:last-child .cover170 .rating-menu::before { right: 25px; }
.carousel-track .master-cover-container:last-child .cover180 .rating-menu::before { right: 27px; }
.carousel-track .master-cover-container:last-child .cover190 .rating-menu::before { right: 28px; }
.carousel-track .master-cover-container:last-child .cover200 .rating-menu::before { right: 30px; }