@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

/* ============================================================
   GLOBAL RESET & BASE STYLES
   ============================================================ */
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

html,
body {
  margin: 0px;
  min-height: 100%;
}

/* Focus states */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}

a {
  text-decoration: none;
}

/* ============================================================
   FONT FACES (Keep exactly as exported)
   ============================================================ */
@font-face {
  font-family: "ImperialScript-Regular";
  src: url("./ImperialScript-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Azonix";
  src: url("./Azonix.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: "Poiret One-Regular";
  src: local("Poiret One-Regular");
}

@font-face {
  font-family: "Azonix-Regular";
  src: local("Azonix-Regular");
}

/* ============================================================
   MAIN FRAME CONTAINER
   ============================================================ */
.frame{
    position:relative;
    width:390px;
    min-height:2408.21px;
    margin:0 auto;
    background:#fff;
    overflow:hidden;

    transform-origin:top center;
}
/* ============================================================
   HERO SECTION (Top - Croissant & Title)
   ============================================================ */
.frame .image {
  left: calc(50.00% - 232px);
  top: 265px;
  width: 279px;
  height: 278px;
  object-fit: contain;
  position: absolute;
  bottom: 0;
  z-index: 1111;
}

.frame .ellipse {
  top: 108px;
  left: -92px;
  width: 288px;
  height: 449px;
  border-radius: 143.84px / 224.72px;
  filter: blur(131.24px);
  position: absolute;
  background-color: #fde4ed;
}

.frame .french-croissants {
  position: absolute;
  right: 42px;
  bottom: 2144px;
  width: 243px;
  height: 63px;
  font-family: "ImperialScript-Regular";
  font-weight: 400;
  color: transparent;
  font-size: 44.5px;
  letter-spacing: 0;
  line-height: normal;
}

/* ============================================================
   HEADER (Logo, Hamburger, Cart)
   ============================================================ */
.frame .text-wrapper-8 {
  position: absolute;
  right: 180px;
  bottom: 2287px;
  width: 178px;
  height: 44px;
  display: flex;
  align-items: center;
    font-family: "Azonix";
  font-weight: 400;
  color: #000000;
  font-size: 38.6px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.frame .text-wrapper-9 {
  right: 185px;
  bottom: 2271px;
  width: 173px;
  height: 24px;
  font-family: "Poiret One", sans-serif;
  font-size: 20.8px;
  position: absolute;
  display: flex;
  align-items: center;
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.frame .image-6 {
  right: 90px;
  top: 76px;
  width: 39px;
  height: 44px;
  object-fit: cover;
  position: absolute;
  bottom: 0;
  z-index: 9999;
}

/* Hamburger menu lines */
.frame .rectangle {
  top: 85px;
  position: absolute;
  left: 321px;
  width: 36px;
  height: 1px;
  background-color: #ffa4d0;
}

.frame .rectangle-2 {
  top: 97px;
  position: absolute;
  left: 321px;
  width: 36px;
  height: 1px;
  background-color: #ffa4d0;
}

.frame .rectangle-3 {
  top: 108px;
  position: absolute;
  left: 321px;
  width: 36px;
  height: 1px;
  background-color: #ffa4d0;
}

/* ============================================================
   CATALOG SECTION TITLES
   ============================================================ */
.frame .croissant {
  position: absolute;
  right: 30px;
  bottom: 1870px;
  width: 180px;
  height: 28px;
  font-family: "ImperialScript-Regular";
  font-weight: 400;
  color: transparent;
  font-size: 44.5px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.frame .catalog {
  position: absolute;
  right: 43px;
  bottom: 1853px;
  width: 180px;
  height: 17px;
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  color: transparent;
  font-size: 22.2px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.frame .span {
  color: #ffa4d0;
}

.frame .text-wrapper-5 {
  font-family: "Poiret One", sans-serif;
  color: #000000;
  font-size: 22.2px;
}


.frame .text-wrapper-6 {
  color: #000000;
}

.frame .text-wrapper-7 {
  font-family: "ImperialScript-Regular";
  color: #ffa4d0;
  font-size: 44.5px;
}

/* ============================================================
   CATALOG ITEM 1: COCONUT & MANGO (Left)
   ============================================================ */
.frame .div {
  top: 641px;
  left: 39px;
  width: 110px;
  height: 120px;
  border-radius: 55.04px / 59.97px;
  filter: blur(16.31px);
  position: absolute;
  background-color: #fde4ed;
}

.frame .img {
  right: 204px;
  top: 637px;
  width: 160px;
  height: 148px;
  object-fit: cover;
  position: absolute;
  bottom: 0;
  z-index: 2222;
}

.frame .text-wrapper {
  position: absolute;
  right: 279px;
  bottom: 1546px;
  width: 76px;
  height: 30px;
  display: flex;
  align-items: center;
  -webkit-text-stroke: 1.48px #000000;
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 20.8px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .croissant-with {
  position: absolute;
  right: 194px;
  bottom: 1581px;
  width: 160px;
  height: 37px;
  display: flex;
  align-items: center;
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 14.8px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .image-11 {
  right: 60px;
  top: 826px;
  width: 29px;
  height: 34px;
  object-fit: contain;
  position: absolute;
  bottom: 0;
  z-index: 9999;
}

/* ============================================================
   CATALOG ITEM 2: CHOCOLATE (Right)
   ============================================================ */
.frame .ellipse-2 {
  top: 641px;
  left: 227px;
  position: absolute;
  width: 110px;
  height: 120px;
  background-color: #fde4ed;
  border-radius: 55.04px / 59.97px;
  filter: blur(16.31px);
}

.frame .image-2 {
  position: absolute;
  top: 643px;
  right: 40px;
  bottom: 0;
  width: 120px;
  height: 118px;
  object-fit: cover;
  z-index: 3333;
}

.frame .text-wrapper-2 {
  position: absolute;
  right: 90px;
  bottom: 1546px;
  width: 76px;
  height: 30px;
  display: flex;
  align-items: center;
  -webkit-text-stroke: 1.48px #000000;
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 20.8px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .croissant-with-2 {
  right: 5px;
  bottom: 1581px;
  position: absolute;
  width: 160px;
  height: 37px;
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 14.8px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .image-12 {
  right: 250px;
  top: 826px;
  width: 29px;
  height: 34px;
  object-fit: contain;
  position: absolute;
  bottom: 0;
  z-index: 9999;
}

/* ============================================================
   CATALOG ITEM 3: MERINGUE (Left)
   ============================================================ */
.frame .ellipse-3 {
  top: 914px;
  left: 39px;
  position: absolute;
  width: 110px;
  height: 120px;
  background-color: #fde4ed;
  border-radius: 55.04px / 59.97px;
  filter: blur(16.31px);
}

.frame .image-3 {
  right: 226px;
  top: 909px;
  width: 130px;
  height: 120px;
  object-fit: cover;
  position: absolute;
  bottom: 0;
  z-index: 2222;
}

.frame .text-wrapper-3 {
  position: absolute;
  right: 279px;
  bottom: 1274px;
  width: 76px;
  height: 30px;
  display: flex;
  align-items: center;
  -webkit-text-stroke: 1.48px #000000;
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 20.8px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .croissant-with-3 {
  right: 194px;
  bottom: 1308px;
  position: absolute;
  width: 160px;
  height: 37px;
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 14.8px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .image-13 {
  right: 60px;
  top: 1097px;
  width: 29px;
  height: 34px;
  object-fit: contain;
  position: absolute;
  bottom: 0;
  z-index: 9999;
}

/* ============================================================
   CATALOG ITEM 4: MANGO (Right)
   ============================================================ */
.frame .ellipse-4 {
  top: 914px;
  left: 227px;
  position: absolute;
  width: 110px;
  height: 120px;
  background-color: #fde4ed;
  border-radius: 55.04px / 59.97px;
  filter: blur(16.31px);
}

.frame .image-4 {
  right: 50px;
  top: 908px;
  width: 119px;
  height: 119px;
  object-fit: cover;
  position: absolute;
  bottom: 0;
  z-index: 999;
}

.frame .text-wrapper-4 {
  position: absolute;
  right: 90px;
  bottom: 1274px;
  width: 76px;
  height: 30px;
  display: flex;
  align-items: center;
  -webkit-text-stroke: 1.48px #000000;
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 20.8px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .croissant-with-mango {
  right: 5px;
  bottom: 1308px;
  position: absolute;
  width: 160px;
  height: 37px;
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 14.8px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .image-14 {
  right: 250px;
  top: 1097px;
  width: 29px;
  height: 34px;
  object-fit: contain;
  position: absolute;
  bottom: 0;
  z-index: 9999;
}

/* ============================================================
   CATALOG - SEE MORE BUTTON & DECORATIVE IMAGE
   ============================================================ */
.frame .see-more {
  position: absolute;
  left: calc(50.00% - 49px);
  bottom: 1225px;
  width: 90px;
  height: 39px;
  display: flex;
  align-items: center;
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  color: #ffa4d0;
  font-size: 19px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .image-5 {
  right: -60px;
  top: 1139px;
  width: 269px;
  height: 289px;
  position: absolute;
  bottom: 0;
  z-index: 9999;
}

/* ============================================================
   ABOUT US SECTION
   ============================================================ */
.frame .ellipse-5 {
  position: absolute;
  top: 2054px;
  left: -46px;
  width: 525px;
  height: 449px;
  background-color: #fde4ed;
  border-radius: 262.47px / 224.72px;
  filter: blur(131.24px);
}

.frame .image-8 {
  right: 180px;
  top: 1781px;
  width: 304px;
  height: 340px;
  position: absolute;
  object-fit: contain;
  bottom: 0;
  z-index: 999;
}

.frame .about-us {
  position: absolute;
  left: calc(50.00% - 90px);
  bottom: 893px;
  width: 180px;
  height: 53px;
  font-family: "ImperialScript-Regular";
  font-weight: 400;
  color: transparent;
  font-size: 44.5px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.frame .perfect-croissants {
  position: absolute;
  left: calc(50.00% - 127px);
  bottom: 718px;
  width: 254px;
  height: 171px;
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  color: #272727;
  font-size: 17.8px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

/* ============================================================
   DELIVERY SECTION
   ============================================================ */
.frame .delivery {
  position: absolute;
  left: calc(50.00% - 90px);
  bottom: 633px;
  width: 180px;
  height: 83px;
  font-family: "ImperialScript-Regular";
  font-weight: 400;
  color: transparent;
  font-size: 44.5px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .we-will-deliver-only {
  position: absolute;
  left: calc(50.00% - 127px);
  top: 1758px;
  bottom: 458px;
  width: 254px;
  height: 239px;
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  color: #272727;
  font-size: 17.8px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

/* ============================================================
   CONTACTS SECTION
   ============================================================ */
.frame .contacts {
  position: absolute;
  left: calc(50.00% - 90px);
  bottom: 305px;
  width: 180px;
  height: 83px;
  font-family: "ImperialScript-Regular";
  font-weight: 400;
  color: transparent;
  font-size: 44.5px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .element-sweet {
  position: absolute;
  left: calc(50.00% - 127px);
  bottom: 196px;
  width: 254px;
  height: 104px;
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  color: #272727;
  font-size: 16.3px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

/* ============================================================
   FOOTER
   ============================================================ */
.frame .text-wrapper-10 {
  left: calc(50.00% - 89px);
  bottom: 85px;
  width: 178px;
  height: 44px;
  justify-content: center;
    font-family: "Azonix";
  font-size: 38.6px;
  text-align: center;
  white-space: nowrap;
  position: absolute;
  display: flex;
  align-items: center;
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-wrapper-11 {
  left: calc(50.00% - 87px);
  bottom: 66px;
  width: 173px;
  height: 24px;
  justify-content: center;
  font-family: "Poiret One", sans-serif;
  font-size: 20.8px;
  text-align: center;
  position: absolute;
  display: flex;
  align-items: center;
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: normal;
}

/* ============================================================
   UNUSED / EXTRA STYLES (Kept for safety)
   ============================================================ */
.frame .image-7 {
  right: 0;
  width: 203px;
  height: 309px;
  position: absolute;
  bottom: 0;
}

/* ============================================================ */
/* ===== 🍔 SIDE DRAWER MENU FOR CROISSANT SITE ===== */
/* ============================================================ */

/* Make the 3 lines clickable */
.hamburger-wrap {
    position: absolute;
    top: 85px;
    right: 20px; /* Adjust this to match your layout */
    cursor: pointer;
    z-index: 101;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 999999;
}
.hamburger-wrap .rectangle,
.hamburger-wrap .rectangle-2,
.hamburger-wrap .rectangle-3 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 30px;
    height: 2px;
    background-color: #ffb0d6;
    transition: all 1.7s ease;
}

/* --- The Side Drawer Container --- */
.side-drawer {
    position: fixed;
    top: 0;
    right: -320px;
    width: 280px;
    height: 100vh;
    background: #ffffff;
    padding: 80px 25px 30px 25px;
    box-shadow: -10px 0 40px rgba(0,0,0,0.08);
    z-index: 999;
    transition: right 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    border-left: 1px solid #f0f0f0;
    overflow-y: auto;
        z-index: 999999;

}
.side-drawer.open { right: 0; }

/* --- Overlay --- */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.2);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s ease;
}
.drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* --- Links --- */
.side-drawer a {
    font-family: "Poiret One", sans-serif;
    font-size: 20px;
    color: #000;
    text-decoration: none;
    transition: all 0.7s ease;
    padding: 10px 0;
    width: 100%;
    border-bottom: 1px solid #f5f5f5;
}
.side-drawer a:hover {
    color: #de2271;
    transform: translateX(8px);
}

/* --- Close Button --- */
.drawer-close-btn {
    position: absolute;
    top: 30px;
    right: 25px;
    font-size: 30px;
    cursor: pointer;
    color: #000;
    transition: all 0.3s ease;
    line-height: 1;
}
.drawer-close-btn:hover {
    transform: rotate(90deg);
    color: #ffe9f2;
}

/* ============================================================ */
/* ===== 🥐 SOFT & CUTE SCROLL ANIMATIONS (CROISSANT SITE) 🥐 ===== */
/* ============================================================ */

/* --- BASE HIDDEN STATES --- */
.animate-fade-up { 
    opacity: 0; 
    transform: translateY(40px); 
    transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}
.animate-fade-left { 
    opacity: 0; 
    transform: translateX(-50px); 
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}
.animate-fade-right { 
    opacity: 0; 
    transform: translateX(50px); 
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}
.animate-pop { 
    opacity: 0; 
    transform: scale(0.85); 
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); 
}

/* --- VISIBLE STATES (When they scroll into view) --- */
.animate-fade-up.visible, 
.animate-fade-left.visible, 
.animate-fade-right.visible, 
.animate-pop.visible {
    opacity: 1 !important;
    transform: translateX(0) translateY(0) scale(1) !important; 
}

/* --- FLOATING HERO CROISSANT (Always floating like your flower site) --- */
.frame .image {
    animation: floatDreamy 3.5s ease-in-out infinite;
}
@keyframes floatDreamy {
    0% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-10px) scale(1.02); }
    100% { transform: translateY(0px) scale(1); }
}



/* --- 🛑 FIX: STOP TEXT FROM SLIDING OFF THE CARD ON HOVER 🛑 --- */
.frame .catalog-item-1:hover .text-wrapper,
.frame .catalog-item-1:hover .croissant-with,
.frame .catalog-item-1:hover .image-11,
.frame .catalog-item-2:hover .text-wrapper-2,
.frame .catalog-item-2:hover .croissant-with-2,
.frame .catalog-item-2:hover .image-12,
.frame .catalog-item-3:hover .text-wrapper-3,
.frame .catalog-item-3:hover .croissant-with-3,
.frame .catalog-item-3:hover .image-13,
.frame .catalog-item-4:hover .text-wrapper-4,
.frame .catalog-item-4:hover .croissant-with-mango,
.frame .catalog-item-4:hover .image-14 {
    transform: scale(0.97) !important; /* Keeps them centered when the card grows */
}

/* --- ADD TO CART BUTTON HOVER --- */
.frame .image-11, .frame .image-12, .frame .image-13, .frame .image-14 {
    transition: all 0.3s ease;
    cursor: pointer;
}
.frame .image-11:hover, .frame .image-12:hover, .frame .image-13:hover, .frame .image-14:hover {
    transform: scale(1.15);
}

/* --- SEE MORE HOVER --- */
.frame .see-more {
    transition: all 0.3s ease;
    cursor: pointer;
}
.frame .see-more:hover {
    transform: translateY(-5px);
    color: #ffc3e0 !important;
}

/* Tablet */
@media (min-width:768px){
    .frame{
        transform:scale(1.15);
    }
}

/* Laptop */
@media (min-width:1200px){
    .frame{
        transform:scale(1.3);
    }
}