@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;600;800&display=swap');




body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background-color: #F9EAF2;
      color: #222;
    }
    
    

.bg-overlay {
  position: fixed;
  background-image: url("store bg.png");
  background-repeat: repeat-y;        /* vertical repeat */
  background-position: top center;
  background-size: auto;
  opacity: 0.3;
  pointer-events: none;
  z-index: -1;
}

.site-header {
  position: relative; 
  text-align: center;
  padding: 3rem 1rem 2rem;
}

.header-content {

  align-items: center; /* vertically centers image with text */
  gap: 1rem;           /* space between logo and text */
}

.hearts {
position: absolute;          /* remove from normal flow */
  top: 20px;                   /* distance from top of header */
  left: 20px;                  /* distance from left of header */
  width: 300px;
  z-index: 1;
  pointer-events:none;
}

.smile {
position: absolute;          /* remove from normal flow */
  top: 150px;                   /* distance from top of header */
  right: 20px;                  /* distance from left of header */
  width: 150px;
  
}



.store-name {
  line-height: 1.1;
  margin: 0;
    position: relative;
  z-index: 2;   
}

.store-name .jp {
  display: block;
  font-size: clamp(3.5rem, 8vw, 5rem);
  font-weight: 900;
  color: #FFF6F9;
  font-family: "Yomogi", sans-serif;
    position: relative;
  z-index: 2;   


  -webkit-text-stroke: 0.2px #F2B8D8;
  text-shadow:
    0 4px 12px rgba(242, 184, 216, 0.45);
}

.store-name .en {
  display: block;
  margin-top: 0.4rem;
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  letter-spacing: 0.25em;
  text-transform: lowercase;

  color: #6B4A5A;
    position: relative;
  z-index: 2;   
}

.main-nav {
  position:relative;
  z-index:2;
  display: flex;
  justify-content: center;   /* centers horizontally */
  gap: 1rem;
  margin-top: 1.5rem;
  

}

.main-nav .tab {
  background: #FFF6F9;
  border: 2px solid #F2B8D8;
  border-radius: 999px;      /* pill shape */
  padding: 0.5rem 1.4rem;
  text-decoration: none;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: #6B4A5A;


  cursor: pointer;
  transition: all 0.2s ease;
    z-index:10;
}

.main-nav .tab:hover {
  background: #F9EAF2;
  box-shadow: 0 6px 16px rgba(242, 184, 216, 0.4);
      z-index:10;
}

.main-nav .tab.active {
  background: #F2B8D8;
  color: #3A2F36;
  box-shadow: 0 6px 18px rgba(242, 184, 216, 0.6);
}

main {
  text-align: center;
}

/* === COMMISSION CARDS STYLE === */

.commission-section {
  max-width: 1000px;
  margin: 40px auto;
  text-align: center;
  padding: 10px;
  font-family: "Poppins", "Helvetica", sans-serif;
}

.commission-header {
  position: relative;
  width: 100%;          /* take full width of card */
  text-align: center; 
  margin-top: 10px;
  margin-bottom: 0px;
  z-index: 1;   
}

.ribbon-img {
  display: block;           /* makes margin auto work */
  margin: 0 auto;           /* centers image horizontally */
  width: 100%;               /* shrink to fit card */
  max-width: 1000px;         /* prevent overflow */
  height: auto;
  position: relative;       /* keep in flow */
  top: -10px;               /* move slightly above header */
  z-index: 0;              /* behind text */
}
.title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #6B4A5A;
}

.subtitle {
  color: #8d7c89;
  margin-bottom: 25px;
}

/* Card Grid */
.card-wrapper {
    display: flex;
  flex-direction: column;
  gap: 25px;
  width: 100%;
  align-items: stretch;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
}

.commission-card {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;

  background: #fff;
  border-radius: 30px;
  padding: 18px;

  border: 2px solid #ffd6ec;
  box-shadow: 0 12px 30px rgba(242, 184, 216, 0.6);
  transition: transform .2s ease, box-shadow .2s ease;
}

.commission-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(242, 184, 216, 0.75);
}

/* Image box */
.img-box {
  background: #ffe9f6;
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px dashed #ffbadc;
  padding: 6px;
  width: 50%;
  max-width: 450px;
  margin: 0 auto;
}

.img-box img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}


.commission-card h3 {
  margin-top: 12px;
  color: #b46ca4;
}

.commission-card p {
  color: #7b6b74;
  font-size: 0.95rem;
}

/* Contact + Payments */
.contact-box {
  margin-top: 40px;
}

.contact-text {
  color: #7b6b74;
  margin-bottom: 10px;
}

.contact-btn {
  display: inline-block;
  background: #F2B8D8;
  color: #623d56;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 20px;
  border: 2px solid #F2B8D8;
  font-weight: 600;
}

.payment-title {
  margin-top: 18px;
  color: #b46ca4;
  font-weight: 700;
}

.payment-list {
  color: #7b6b74;
}

.floating-btn {
  position: fixed;           /* stays in viewport */
  bottom: 20px;              /* distance from bottom */
  right: 20px;               /* distance from right */
  background: #F2B8D8;
  color: #623d56;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 25px;
  font-weight: 600;
  font-family: "M PLUS Rounded 1c", sans-serif;
  box-shadow: 0 6px 16px rgba(242, 184, 216, 0.4);
  transition: all 0.2s ease;
  z-index: 1000;             /* above all content */
}

.floating-btn:hover {
  background: #ffd6e8;
color: #ffffff;                 /* light whitish pink text */
  text-shadow: 0 0 10px #ffb6d9, 
               0 0 18px #ff9ecf;  /* glowing text */
  box-shadow: 0 10px 28px rgba(255, 150, 200, 0.7);
  transform: scale(1.08);
}


/* Container so particles can appear around the button */
.floating-btn-wrapper {
  position: fixed;
  bottom: 20px;
  right: 20px;
  pointer-events: none;
}

/* Make sure your button sits above */
.floating-btn {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

/* Particle style */
.heart {
  position: fixed;
  pointer-events: none;
  color: #ff7dab;
  font-size: 18px;
  animation: floatUp 1.3s linear forwards;
}


/* floating animation */
@keyframes floatUp {
  0% {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -60px) scale(1.2);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -140px) scale(0.9);
    opacity: 0;
  }
}



.floating-ig-btn {
  position: fixed;
  right: 20px;
  bottom: 95px;   /* move it above your commission button */
  z-index: 9999;
  background: rgba(255, 182, 206, 0.45); /* transparent pink */
  padding: 0px;
  border-radius: 30px;
  box-shadow: 0 10px 25px rgba(255, 182, 206, 0.45);

}

.floating-ig-btn img {
  width: 65px;    /* adjust size here */
  height: auto;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: transform .2s ease, box-shadow .2s ease;
}

.floating-ig-btn img:hover {
  transform: scale(1.08);
  box-shadow: 0 14px 35px rgba(255, 140, 200, 0.75);
}








   body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background-color: #F9EAF2;
      color: #222;
    }
    
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("store bg.png");
    background-repeat: repeat;    
    background-position: top center;
    background-size: auto;
    opacity: 0.3;              /* ADJUST THIS */
    pointer-events: none;
    z-index: -1;
  }


    header {
      font: "yomogi";
      background: #ffd6e8;
      color: #fff;
      padding: 1.5rem 2rem;
    }

    header h1 {
      margin: 0;
      font-size: 3rem;
    }

    nav {
      display: flex;
      gap: 1.5rem;
      margin-top: 1rem;
    }

    nav button {
      background: none;
      border: none;
      color: #fff;
      font-size: 1rem;
      cursor: pointer;
      padding: 0.3rem 0;
      border-bottom: 2px solid transparent;
    }

    nav button.active {
      border-color: #fff;
    }

    main {
      padding: 2rem;
      max-width: 1000px;
      margin: 0 auto;
    }



    .card {
      background: #fff;
  border-radius: 30px;
  padding: 2rem;
  box-shadow: 0 12px 30px rgba(242, 184, 216, 0.6);
    }

    .card h2 {
      margin-top: 0;
    }

    footer {
      text-align: center;
      padding: 2rem;
      font-size: 0.9rem;
      color: #666;
    }

    ul {
      padding-left: 1.2rem;
    }

    .price {
      font-weight: bold;
    }