@charset "utf-8";
/* CSS Document */

/* Cart & Checkout Related below NAV on pages */

:root {
    --primary-color: #0070ba;   /* Blue */
    --2-primary-color: #197ec0; /* Blue #0070ba but one shade lighter */
    --3-primary-color: #0064a7; /* Blue #0070ba but one shade darker */
    --secondary-color: #ffc439; /* Orange */
    --text-color: #333;
    --background-color: #fff;   /* White */
    --background-color-02: #f8f8f8; /* White Smoke */
	--background-color-03: #fffceb;  /* Ivory */
    --body-color: #67a3e1;      /* Cornflower Blue */ 
    --yellow-color: #fefe00;    /* Yellow */
}  

#navMenu-cart li .cart-text-btn:hover {
	text-decoration: underline;
	}

                                                            /* Cart Related BEGIN */
															
.htop {
   background-color: #FFD6BA;
   /*background-image: url(../sunshinephotos/waterbubbleblue.jpg);*/
   color: #333;    
   z-index: 5; 
}

.htop {
   position: -webkit-sticky; /* Safari */
   position: sticky;
}
 
#checkoutdiv {
     display: none;
	 margin: 0 auto; 
	 padding: 0.33rem;
 } 
 
.htop #checkoutdiv .row {  
    /* Used flexbox for cleaner horizontal alignment of content */
    display: flex;  
	flex-direction: row;  
    /* Center the two image elements as a group */
    justify-content: center;  
    /* Center the second image vertically */
    align-items: center; 
	column-gap: 1.5rem;  
    margin: 0 auto; 
	background-color: #fff;
	/*background-image: url(../sunshinephotos/waterbubbleblue.jpg);*/
	max-width: 900px;
	border-radius: 12px;
	}
	
.flex-wrapper-cart { 
	/* Used flexbox for cleaner horizontal alignment of content */
    display: flex;  
	flex-direction: row;  
    /* Center the two image elements as a group */
    justify-content: center;  
    /* Center the second image vertically */
    align-items: center;  
    /* Set the space between the two images */
    gap: 2rem;  
	}  
.flex-wrapper-cart .text-center .btn,
.htop #checkoutdiv .row .text-center .btn {
	padding: 0.1rem 0.3rem;
	}

.row .text-center,
.row .text-center small,
.row .text-center .total {
	 color: darkblue;
	 text-shadow: 0 2px 5px rgba(0,0,0,0.2);
	 }

.row .text-center,
.row .text-center small { 
	padding-top: 0;
	} 
	
nav-cart { 
    background: var(--3-primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0; 
}

#sticky.scrolled {
  border-bottom: 2px solid #ffb887; /* var(--3-primary-color);  #d2dff2; The border to appear on scroll */ 
  transition: border-bottom 0.3s ease-in-out; /* Smooth transition */
  border-top: 7px solid var(--3-primary-color); 
}
 
.text-center,
.text-center small,
.text-center a,
.text-center .btn {
	font-weight: 700;
	} 
	
.button-spacing {
	margin: 0.25rem 0.25rem 0.25rem 0.25rem;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	} 
.t-day img/*,
.flex-wrapper-cart .btn-success*/ {
	display: none;
	}
	
                                                            /* Cart Related END */ 
 
.itemInfo  {
   margin-top: .75rem;
 }
 
.item .btn { 
	background: var(--primary-color);
    color: var(--yellow-color);
    border: none;
    padding: 0.75rem 1rem;
    margin: 1rem .15rem;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
	font-weight: normal; 
} 

.item button.btn-info {
	display: block;  
    background-color: #5cb85c;
    color: #fff;
    border: none;
    padding: 0.75rem 1.3rem;
    margin: 0.5rem auto 0;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
}

.gallery_grid .productItem,
.gallery_grid-02 .productItem,
.gallery_grid-02-02 .productItem {  /*Added for Christmas */
	margin: 1rem 0 0 0;
	}  
	
                                                        
							   
							                         /* TOAST POP-UP BEGIN */ 
#cartNotification {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 30%;
  left: 50%; /* Set to 50% for horizontal centering */
  transform: translate(-50%, -50%); /* Adjust for element's own size */
  background: #333;
  color: var(--yellow-color);
  font-weight: 700;
  padding: 10px 15px;
  border: #fefe00 3px solid;
  border-radius: 5px; 
  transition: opacity 0.3s;
  z-index: 9999;
  -moz-box-shadow: 2px 2px 5px #888;
  -webkit-box-shadow: 2px 2px 5px #888;
  box-shadow: 2px 2px 5px #888;
}
#cartNotification.show {
  visibility: visible;
  opacity: 1;
} 
							   /* TOAST POP-UP END */
							   
							   /* Back To Gallery Button Begin */
							   
/* New CSS for the Back to Gallery Button */
#galleryButton {
    /* Fixed positioning relative to the viewport */
    position: fixed;
    top: 115px; /* Adjusted this to sit just below your fixed navigation/header */
    right: 300px;  
    z-index: 999; /* Ensures it sits above other content */

    /* Styling */
    padding: 0.5rem 1rem;
    background: rgba(0, 112, 186, 0.7); /* Using primary color (Blue) with 70% opacity */
    color: var(--yellow-color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    /* Initial hidden state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px); /* Small lift effect */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

/* State when scrolled (visible) */
#galleryButton.show-gallery {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
							   
							   /* Back To Gallery Button END */
							   
							   /* Buttons Related Begin */
.item_wrapper { 
    display: grid;
    grid-template-columns: 245px 1fr 1fr; 
	justify-content: left;
    align-items: left;
}

.item_wrapper h2 {
	margin: 0;
	padding: 0;
	} 
 
.item_wrapper .btn-add-to-cart {
    background: var(--primary-color);
    color: var(--yellow-color);
    border: none;
    padding: 0.75rem 1.25rem;
    margin: 0 0 1rem 4.75rem;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
	-moz-box-shadow: 2px 2px 5px #888;
    -webkit-box-shadow: 2px 2px 5px #888;
    box-shadow: 2px 2px 5px #888;
	max-height: 3rem;
	width: 9.531rem;
} 
							   
.item_wrapper_bottom .btn-add-to-cart { 
    background: var(--primary-color);
    color: var(--yellow-color);
    border: none;
    padding: 0.75rem 1.25rem; 
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
	-moz-box-shadow: 2px 2px 5px #888;
    -webkit-box-shadow: 2px 2px 5px #888;
    box-shadow: 2px 2px 5px #888;
}

.description .item_wrapper_bottom  { 
    text-align: center;
}
 
.item_wrapper_bottom .btn-add-to-cart:visited,
.item_wrapper_bottom .btn-add-to-cart:active,
.item_wrapper_bottom .btn-add-to-cart:link,
.item_wrapper .btn-add-to-cart:visited,
.item_wrapper .btn-add-to-cart:active,
.item_wrapper .btn-add-to-cart:link {
	background: var(--primary-color);
    color: var(--yellow-color);
	}
	
.item_wrapper .btn-add-to-cart:hover,
.item_wrapper_bottom .btn-add-to-cart:hover  {
    background: #005fa3;
	color: var(--yellow-color);
} 
 
							   /* Buttons Related End */ 
							   
                               /* SS Buttons Begin */
							 
.item_wrapper-ss .btn-add-to-cart {
    background: var(--primary-color);
    color: var(--yellow-color);
    border: none;
    padding: 0.75rem 1.25rem;
    margin: .5rem 0;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
	-moz-box-shadow: 2px 2px 5px #888;
    -webkit-box-shadow: 2px 2px 5px #888;
    box-shadow: 2px 2px 5px #888;
} 
 
.description .item_wrapper-ss form {
	display: grid;
	grid-template-rows: auto auto auto;
	justify-items: center;
	align-items: center;
	justify-content: center;
	text-align: center;
	}
.ss-description .item_wrapper-ss form {
	display: grid;
	grid-template-rows: auto auto auto;
	justify-items: center;
	align-items: center;
	justify-content: center;
	text-align: center;
	}
	
.paypal_select-cart { 
  background-color: var(--primary-color);
  color: #fff; 
  font-weight: 700;  
  -moz-box-shadow: 2px 2px 5px #888;
  -webkit-box-shadow: 2px 2px 5px #888;
  box-shadow: 2px 2px 5px #888;
} 

.paypal_select-cart:focus {
  border: 2px solid var(--primary-color);
  background-color: var(--primary-color);
  color: #fff; 
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 95, 163, 0.2);
}
 
.ssPaypal-cart { 
    color: #333; 
    font-size: 1rem;
    font-weight: bold;
}

                              /* SS Buttons End */
							    
							   /* MODAL BEGIN */
							   
.modal-dialog {
	max-width: 700px;
	}

#cart .modal-dialog .modal-content {
  margin: 0 auto;
  text-align: center; 
  width: 100%;
  min-width: auto;           /* let it shrink */
  overflow-x: auto;          /* add horizontal scrolling */
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}

#cart .modal-dialog .modal-content .modal-body .table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#cart .modal-dialog .modal-content .modal-body .table-responsive .table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

#cart .modal-dialog .modal-content .modal-body .table-responsive .table .thead-inverse { 
  background-color: #333;
  color: #fff;
}

#cart .modal-dialog .modal-content .modal-body .table-responsive .table td,
#cart .modal-dialog .modal-content .modal-body .table-responsive .table th {
  white-space: nowrap;       /* keep cells on one line */ 
}

td.text-right,
td.text-center {
	background-color: var(--background-color-03);/*#ececec;*/
	}

#cart .modal-dialog .modal-content .modal-body .table-responsive .table tr {
	text-align: left;
	} 
	
#cart .modal-dialog .modal-content .modal-header button .close-cart {
	color: rgba(3, 3, 3, 0.5); 
	}
#cart .modal-dialog .modal-content .modal-header button .close-cart:hover {
	color: rgba(3, 3, 3, 0.9); 
	}

                             /* MODAL END */ 
 
@media (max-width: 1835px) { 
  #galleryButton { 
    right: 250px;
  }
} 

@media (max-width: 1735px) { 
  #galleryButton { 
    right: 200px;
  }
} 
@media (max-width: 1635px) { 
  #galleryButton { 
    right: 150px;
  }
} 
@media (max-width: 1540px) {
  #galleryButton { 
    right: 100px;
  }
}
@media (max-width: 1435px) {
  #galleryButton { 
    right: 50px;
  }
}
@media (max-width: 1345px) {
  #galleryButton { 
    right: 20px;
  }
}
 
@media (max-width: 710px) {
  .item_wrapper .btn-add-to-cart {  
    margin: 0 0 1rem 3.5rem;
	}  
}

@media (max-width: 600px) {
  .item_wrapper .btn-add-to-cart {  
    margin: 0 0 1rem 2rem;
	} 
}

@media (max-width: 675px) {
  #galleryButton { 
    right: auto;
    right: 20px;
  }
}

@media (max-width: 530px) {
  .display_bg_nav {
	  display: none;
  }
}  

@media (max-width: 500px) {
  .item_wrapper { 
	display: grid;
	grid-template-columns: 200px 1fr 1fr;
	margin-bottom: 1rem;
	}
  .main-nav-container-cart ul,
  .main-nav-container-cart ul li {
	padding: 0;
	margin: 0;
	}
}

@media (max-width: 470px) {
  .main-nav-container-cart ul li {
    font-size: 90%;
  }
}  
 	
@media (max-width: 455px) {
  #galleryButton { 
    top: 165px;
  }
  .outer_container .modal-content table.table td,
  .outer_container .modal-content table.table th {
    margin-left: 0;
	margin-right: 0;
    padding-left: 0;
	padding-right: 0;
  }
  .cart-display_bg {
	  display: none;
  } 
  .cart-display_sml {
	  display:block;
  }  
  .item_wrapper .btn-add-to-cart {
    padding: 0.75rem 1rem;
	width: 8.75rem;
  }   
}  
 
@media (max-width: 440px) {
  .item_wrapper .btn-add-to-cart {  
    margin: 0 0 1rem 1rem;
	} 
  .cart_image {
	  display: none;
	} 
}

@media (max-width: 430px) {
  .item_wrapper .btn-add-to-cart {  
    margin: 0 0 1rem .75rem;
	} 
}

@media (max-width: 412px) {
  .item_wrapper .btn-add-to-cart {  
    margin: 0 0 1rem .25rem;
	}
  .item_wrapper { 
	display: grid;
	grid-template-columns: 160px 1fr;
	height: 4.688rem; 
	margin-bottom: 0;
	padding-bottom: 0;
	}
  #navMenu-cart {
	 gap: 0.5rem;
	}  
}  

@media (max-width: 347px) { 
  #navMenu-cart {
	 gap: 0.35rem;
	}