html, body, * {
    cursor: url('Images/QTPUDDING.png') 30 30, auto !important;}
a:hover, button:hover, li a:hover {
    cursor: url('Images/JUMP.png') 30 30, pointer !important;}

body {
    margin: 0;
    padding: 0;
    background-color: #fff1ca;}

ul {
    display: flex;
    list-style-type: none;
    margin: 20px auto;
    padding: 0;
    justify-content: center;}

li a {
    display: inline-block;
    width: 100px;
    background-color: #fffad8;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    color: #8b5a2b;
    font-family: sans-serif;
    border: 2px solid #e9dcc0;
    margin: 0 5px;
    transition: 0.3s;}

li a:hover {
    background-color: #fce4ec !important;
    transform: scale(1.1);
    z-index: 10;
    position: relative;}

.header-container {
    position: relative;
    width: 100%;
    text-align: center;
    overflow: hidden;
    margin-bottom: 0;}

.main-banner {
    width: 100%;
    height: auto;
    display: block;}

.pixel-mascot {
    position: absolute;
    top: 5%;
    right: 5%;
    width: 10%;
    max-width: 90px;
    z-index: 10;
    image-rendering: pixelated;
    transform: rotate(10deg);
    mix-blend-mode: multiply;}

.interactive-row-container {
  display: flex;
  justify-content: center;
  align-items: flex-end; 
  gap: 50px;
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;}

.interactive-card {
  flex: 1;
  text-align: center;
  background-color: #fffad8;
  border: 3px solid #e9dcc0;
  border-radius: 24px;
  padding: 30px 20px 20px 20px;
  box-shadow: 0 8px 0 #e9dcc0;}

.interactive-card h4 {
  font-family: 'cursive', sans-serif;
  color: #8b5a2b;
  font-size: 1.4rem;
  margin: 15px 0 5px 0;}

.interactive-card p {
  font-family: sans-serif;
  color: #6d451e;
  font-size: 0.95rem;
  margin: 0;}

.mascot-wrapper {
  position: relative;
  width: 130px;
  height: 130px;
  margin: 0 auto;
  overflow: visible !important; }

.food-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 2; 
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}

.popup-mascot {
  width: 85px;
  height: auto;
  position: absolute;
  top: 40px; 
  left: 50%;
  transform: translateX(-50%);
  z-index: 1; 
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;}


.interactive-card:hover .food-image {
  transform: translateY(10px); }

.interactive-card:hover .popup-mascot {
  opacity: 1;
  transform: translateX(-50%) translateY(-100px) rotate(-8deg); }

@media (max-width: 768px) {

  .interactive-row-container {
    flex-direction: column;
    gap: 40px;
    align-items: center;}

  .interactive-card {
    width: 260px; }
}

.ticker-container {
    width: 100%;
    background-color: #8b5a2b;
    overflow: hidden;
    padding: 12px 0;
    border-top: 3px solid #6d451e;
    border-bottom: 3px solid #6d451e;}

.ticker-wrapper {
    display: flex;
    white-space: nowrap;}

.ticker-content {
    display: inline-block;
    animation: scroll-ticker 30s linear infinite;}

.ticker-container:hover .ticker-content {
    animation-play-state: paused;}

.ticker-content span {
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    color: #fff1ca;
    font-weight: bold;
    padding-right: 50px;}

@keyframes scroll-ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


.window-display-section {
    padding: 100px 20px; 
    text-align: center;
    clear: both;
    position: relative; 
    width: 100%;
    box-sizing: border-box;
    overflow: hidden; 
    border-top: 4px solid #e9dcc0;
    border-bottom: 4px solid #e9dcc0;
    box-shadow: inset 0 20px 40px rgba(139, 90, 43, 0.04), inset 0 -20px 40px rgba(139, 90, 43, 0.04);}


.storefront-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 1;       
    pointer-events: none;}

.window-display-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 241, 202, 0.45); 
    z-index: 2; 
    pointer-events: none;}

.window-display-section h3,
.window-subtitle,
.bakery-window-frame {
    position: relative;
    z-index: 3;}

.window-display-section h3 {
    color: #ffffff;
    font-family: 'Fredoka', 'cursive', sans-serif;
    font-weight: 700; 
    font-size: 2.8rem;
    margin-bottom: 12px;
    letter-spacing: 1px;

    text-shadow: 
        -2px -2px 0px #8b5a2b,  
         2px -2px 0px #8b5a2b,
        -2px  2px 0px #8b5a2b,
         2px  2px 0px #8b5a2b,
         0px  6px 0px #e9dcc0; }

.window-subtitle {
    font-family: 'Fredoka', sans-serif;
    font-weight: 500;
    color: #8b5a2b; 
    font-size: 1.2rem;
    margin-bottom: 60px;
    letter-spacing: 0.5px;
    

    text-shadow: 
        -1px -1px 0px #ffffff,
         1px -1px 0px #ffffff,
        -1px  1px 0px #ffffff,
         1px  1px 0px #ffffff;}

.canva-side-mascot {
    position: absolute !important;
    height: auto;
    z-index: 1 !important; 
    top: 50% !important;
    pointer-events: none;
    filter: drop-shadow(0 6px 10px rgba(139, 90, 43, 0.12));
    animation: windowBob 3s ease-in-out infinite alternate;}

.canva-left {
    width: 290px !important;
    left: -180px !important;
    top: 10% !important;
    transform: translateY(-50%) rotate(-23deg) !important;}

.canva-right {
    width: 210px;
    right: -130px !important; 
    top: 80% !important;
    transform: translateY(-50%) rotate(32deg) !important;}

.pulsing-sparkle { 
    display: inline-block !important; 

    animation: gentleGlow 1.8s ease-in-out infinite alternate; } 

@keyframes gentleGlow { 
    0% { 
       
        transform: translateY(0px); 
    } 
    100% { 
       
        transform: translateY(-10px); 
    } 
}


.bakery-window-frame {
    max-width: 680px;
    height: 280px;
    margin: 0 auto;
    background-color: #fffdec;
    border: 14px solid #8b5a2b;
    border-radius: 32px;
    box-shadow: inset 0 0 40px rgba(139, 90, 43, 0.12), 0 12px 0px #e9dcc0, 0 20px 30px rgba(139, 90, 43, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px 50px 45px 50px;
    box-sizing: border-box;
    overflow: visible !important; 

    position: relative !important; }


.single-shelf {
    position: relative;
    display: flex;
    justify-content: space-around; 
    align-items: flex-end;         
    padding-bottom: 15px;
    width: 100%;

    border-bottom: 6px solid #e9dcc0 !important; 
    box-shadow: 0 5px 12px rgba(139, 90, 43, 0.08); }

.window-treat {
    position: relative;
    width: 105px; 
    display: inline-block;
    text-decoration: none;
    z-index: 5;}

.window-treat img {
    width: 100%;
    max-width: 90px;
    height: 85px;
    object-fit: cover; 
    border-radius: 16px; 
    border: 2px solid #e9dcc0; 
    box-shadow: 0 6px 12px rgba(139, 90, 43, 0.15); }

.item-float-1 img { animation: windowBob 3.2s ease-in-out infinite alternate; }
.item-float-2 img { animation: windowBob 2.8s ease-in-out infinite alternate-reverse; }
.item-float-3 img { animation: windowBob 3.6s ease-in-out infinite alternate; }

@keyframes windowBob {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}


.window-treat:hover img {
    transform: scale(1.3) translateY(-8px) rotate(4deg) !important;
    filter: drop-shadow(0 12px 16px rgba(139, 90, 43, 0.18));}

.window-treat::after {
    content: attr(data-name);
    position: absolute;
    bottom: -52px;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    background-color: #fce4ec;
    color: #8b5a2b;
    border: 2px solid #e9dcc0;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-family: sans-serif;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 0 #e9dcc0;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);}

.window-treat:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);}

.element {
    position: absolute; 
    bottom: 32px;       
    left: 11%;          
    width: 95px;        
    height: auto;
    z-index: 15;        
    animation-name: bounceAnimation; 
    animation-duration: 0.8s; 
    animation-timing-function: ease-out; 
    animation-iteration-count: infinite; 
    animation-direction: normal; 
    animation-fill-mode: both; }

@keyframes bounceAnimation { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-30px); } 
}

.spinny-pudding {
    position: absolute;
    bottom: 170px;       
    left: 16%;          
    width: 95px;        
    height: auto;
    z-index: 15;   
  
  animation-name: flipAnimation;
  animation-duration: 1.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
}

@keyframes flipAnimation {
  0% { transform: perspective(400px) rotateY(0); }
  100% { transform: perspective(400px) rotateY(360deg); }
}

@keyframes swingAnimation {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.jiggle-pudding {
    position: absolute;
    bottom: 130px;       
    left: 75%;         
    width: 95px;        
    height: auto;
    z-index: 15;  

  animation-name: swingAnimation;
  animation-duration: 1.2s;
  animation-timing-function: linear;
  animation-delay: 0.3s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;}

.review-section { 
  text-align: center; 
  padding: 60px 20px; 
  background-color: #fffad8; 
  border: 3px solid #e9dcc0; 
  border-radius: 28px; 
  max-width: 600px; 
  margin: 40px auto 80px auto; 
  box-shadow: 0 8px 0 #e9dcc0; } 

.review-section h3 { 
  color: #8b5a2b; 
  font-family: 'Fredoka', 'cursive', sans-serif; 
  font-size: 1.8rem; 
  margin-bottom: 10px; } 

.rating-instruction { 
  font-family: 'Fredoka', sans-serif; 
  color: #6d451e; 
  font-size: 1rem; 
  margin-bottom: 25px; } 

.star-rating-container { 
  display: flex; 
  flex-direction: row-reverse; 
  justify-content: center; 
  flex-wrap: wrap; 
  gap: 14px; } 

.star-rating-container input { 
  display: none !important; } 

.star-rating-container label { 
  cursor: pointer; 
  width: 55px; 
  height: 55px; 
  display: inline-block; 
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); } 

.star-rating-container svg { 
  width: 100%; 
  height: 100%; } 

.star-rating-container label:hover, 
.star-rating-container label:hover ~ label, 
.star-rating-container input:checked ~ label { 
  transform: scale(1.2); } 


.star-rating-container label:hover .pudding-body, 
.star-rating-container label:hover ~ label .pudding-body, 
.star-rating-container input:checked ~ label .pudding-body { 
  fill: #ffb6c1 !important; 
} 


.star-rating-container label:hover .caramel-top, 
.star-rating-container label:hover ~ label .caramel-top, 
.star-rating-container input:checked ~ label .caramel-top { 
  fill: #e57373 !important; 
} 

.star-rating-container label:active { 
  transform: scale(0.85, 0.65); 
  transition: transform 0.05s ease; } 


.star-rating-container .pudding-cream { 
  fill: #FFFDF4; 
  stroke: #E5DEC9; 
  stroke-width: 1.5; 
  transform-origin: 50% 30px; 
  transform: scale(0); 
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); } 

.star-rating-container .pudding-cherry { 
  fill: #FF5252; 
  stroke: #C62828; 
  stroke-width: 1; 
  transform-origin: 50% 16px; 
  transform: scale(0); 
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.35); 
  transition-delay: 0.05s; } 


.star-rating-container label:hover .pudding-cream, 
.star-rating-container label:hover ~ label .pudding-cream, 
.star-rating-container input:checked ~ label .pudding-cream, 
.star-rating-container label:hover .pudding-cherry, 
.star-rating-container label:hover ~ label .pudding-cherry, 
.star-rating-container input:checked ~ label .pudding-cherry { 
  transform: scale(1) !important; }


.rating-feedback-msg { 
  display: block !important;
  width: 100% !important;       
  min-height: 40px;             
  margin-top: 30px; 
  color: #8b5a2b; 
  font-size: 1.3rem; 
  font-family: 'Fredoka', 'cursive', sans-serif; 
  text-align: center;
  white-space: normal !important; 
  overflow: visible !important;   }

.rating-feedback-msg::before {
  content: "Move cursor over puddings...";
  display: inline-block;
  width: 100%;}

.star-rating-container label:hover ~ .rating-feedback-msg::before {
  content: attr(data-text) !important;}


#star1:checked ~ .rating-feedback-msg::before { content: "Thank you! Not quite right... 😢" !important; color: #e57373; }
#star2:checked ~ .rating-feedback-msg::before { content: "Thank you! Needs more caramel... 🍯" !important; color: #e57373; }
#star3:checked ~ .rating-feedback-msg::before { content: "Thank you! Pretty sweet! 👍" !important; color: #e57373; }
#star4:checked ~ .rating-feedback-msg::before { content: "Thank you! Incredibly sweet! ✨" !important; color: #e57373; }
#star5:checked ~ .rating-feedback-msg::before { content: "Thank you! Pudding perfection! 🍮" !important; color: #e57373; }

.star-rating-container:hover label:hover ~ .rating-feedback-msg::before {
  content: attr(data-text) !important;
  color: #8b5a2b !important;}



@keyframes floatSparkle {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--mx), var(--my)) scale(0.5); opacity: 0; }
}

.sparkle-particle {
  position: absolute;
  pointer-events: none;
  font-size: 1.2rem;
  z-index: 99;
  animation: floatSparkle 0.8s ease-out forwards;
}


.review-section {
  position: relative; 
  margin-top: 140px;  }

.review-section::before {
  content: "";
  position: absolute;
  top: -123px;        
  left: 50%;
  transform: translateX(-50%);
  width: 240px;      
  height: 150px;
  

  background-image: url('Images/awh.gif'); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  
  z-index: 2;        }

.button-isolated-row {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 25px !important;
  clear: both !important;}


.submit-bakery-btn {
  display: inline-block !important;
  visibility: visible !important;
  
  font-family: 'Fredoka', 'cursive', sans-serif;
  background-color: #8b5a2b;  
  color: #fffad8;              
  font-size: 1.1rem;
  font-weight: 600;
  
  padding: 16px 40px !important; 
  border: none !important;
  margin: 0 auto !important;
  cursor: pointer !important;

  border-radius: 30px 15px 30px 15px / 15px 30px 15px 30px !important;

  background-image: radial-gradient(#6d451e 20%, transparent 25%);
  background-size: 16px 16px;
  background-position: center;

  box-shadow: 0 6px 0 #6d451e !important; 
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.2s ease, border-radius 0.2s ease;}

.submit-bakery-btn:hover {
  background-color: #9c6b3c !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 0 #6d451e !important;
  border-radius: 15px 30px 15px 30px / 30px 15px 30px 15px !important; }

.submit-bakery-btn:active {
  transform: translateY(6px) !important;
  box-shadow: 0 0px 0 #6d451e !important;}

@keyframes mascotWobble {
  0% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(-4deg); }
  75% { transform: translateX(-50%) rotate(4deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

.review-section:hover::before {
  animation: mascotWobble 0.6s ease-in-out infinite alternate;}


.shop-footer {
    width: 100%;
    background-color: #FFFDF4;   
    border-top: 1px solid #E6D5BC; 
    padding: 20px 0;
    text-align: center;
    margin-top: 40px; }

.shop-footer p {
    color: #8C6239;              
    font-size: 0.85rem;
    font-family: sans-serif;
    margin: 0;}