/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  scroll-behavior: smooth;
}

/* COLORS */
:root {
  --black: #000000;
  --charcoal: #1c1c1c;
  --pink: #f5b7d2;
  --brown: rgb(187, 125, 66);
  --white: #f1f1e9;
}

html,
body {
  font-family: 'allura';
  background: var(--black);
  width: 100%;
  cursor: pointer;
  scroll-behavior:smooth;
  color: var(--white);
}

a{
    text-decoration:none;
    color:inherit;
}
/* HERO */
.hero {
  width: 100%;
  min-height: 100vh;
  background: url("homepic.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero h2 {
  font-family: 'Roboto', sans-serif;
  color: var(--pink);
  font-size: 48px;
  background: rgba(0, 0, 0, 0.5);
  padding: 20px 30px;
  border-radius: 12px;
  margin-bottom: 15px;
}

.hero p {
  color: var(--white);
  max-width: 700px;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 18px;
}
/* Cart animation */
/* ================= CART BADGE ================= */

.cart{
    position:relative;
}

.cart-link{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.cart-count{

    position:absolute;

    top:-8px;
    right:-10px;

    width:20px;
    height:20px;

    border-radius:50%;

    background:var(--pink);
    color:var(--black);

    font-size:11px;
    font-weight:700;

    display:none;

    align-items:center;
    justify-content:center;

    line-height:1;

    z-index:100;
}
/* MENU BOXES */
.menu-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 100px auto 50px;
  padding: 0 20px;
}

.menu-card {
  background: var(--pink);
  padding: 20px;
  border-radius: 12px;                      
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* ================= HERO ================= */
.herobread {
  margin-top: 65px; /* FIXES HEADER GAP */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)),
              url("pics/homepageFB.jpeg");
  background-size: cover;
  background-position: center;
  min-height: 70vh;
}
.herobread h2 {
  font-size: 42px;
  color: var(--pink);
}

.herobread p {
  color: #ddd;
}

.herocookies{
  margin-top: 65px; /* FIXES HEADER GAP */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.2)),
              url("pics/about.png");
  background-size: cover;
  background-position: center;
  min-height: 70vh;
}
.herocookies h2 {
  font-size: 42px;
  color: var(--pink);
}

.herocookies p {
  color: #ddd;
}
.heromock {
  margin-top: 65px; /* FIXES HEADER GAP */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.4)),
              url("pics/Cocktails.png");
  background-size: cover;
  background-position: center;
  min-height: 70vh;
}
.heromock h2 {
  font-size: 42px;
  color: var(--pink);
}

.heromock p {
  color: #ddd;
}
.herocake {
  margin-top: 65px; /* FIXES HEADER GAP */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.4)),
              url("pics/cakephotoFB.jpeg");
  background-size: cover;
  background-position: center;
  min-height: 70vh;
}
.herocake h2 {
  font-size: 42px;
  color: var(--pink);
}

.herocake p {
  color: #ddd;
}
.heroplatter {
  margin-top: 65px; /* FIXES HEADER GAP */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.4)),
              url("pics/everything.png");
  background-size: cover;
  background-position: center;
  min-height: 70vh;
}
.heroplatter h2 {
  font-size: 42px;
  color: var(--pink);
}

.heroplatter p {
  color: #ddd;
}


/* ================= SPLIT SECTION ================= */

/* TEXT */
.split-text{
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
    text-align: center;
}

.split-text h2{
    font-size: 18px;
    color: var(--brown);
    font-family: 'allura';
    margin-bottom: 8px;
}

.split-text p{
    color: var(--white);
    font-size: 14px;
    line-height: 1.8;
    min-height: 75px;   /* keeps all descriptions the same height */
    margin-bottom: 20px;
}
/* WRAPPER = controls 2 cards side by side */
.split-wrapper {
    display: grid;
    gap: 30px;
    padding: 80px 40px 40px;
}

/* EACH CARD */
.split-card{
    background:#1a1a1a;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    transition:transform .3s ease;
    border:2px solid transparent;
    min-height: 460px;
    border-radius:20px;
}
.split-card:hover {
  transform: translateY(-8px);
   border: 2px solid var(--pink);
}
/* WHEN YOU HOVER THE WHOLE CARD */
.split-card:hover .btn-primary {
  background: black;
  color: var(--pink);
  border: 2px solid var(--pink);
}

.qty-controls{
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:15px;
}

.qty-controls button{
  width:35px;
  height:35px;
  border:none;
  border-radius:50%;
  cursor:pointer;
  font-size:18px;
}

.qty-controls span{
  font-weight:bold;
}
/* IMAGE */
.split-image{
    height:330px;
    overflow:hidden;
    border-radius:25px;
}

.split-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .4s ease;
}

.split-image img:hover {
  transform: scale(1.08);
}

/* BUTTON */
.btn-primary {
  display: inline-block;
  padding: 12px 22px;;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  background: var(--pink);
  color: var(--black);
  border: 2px solid transparent;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(245, 183, 210, 0.4);
}

/* ================= CARDS ================= */
.card-section {
  display: flex;
  justify-content: center;
  gap: 25px;
  padding: 60px 20px;
}

.card {
  background: linear-gradient(145deg, #1a1a1a, #111);
  padding: 25px;
  border-radius: 20px;
  width: 260px;
  text-align: center;
  transition: 0.3s;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

.card img {
  width: 100%;
  border-radius: 14px;
  margin-bottom: 15px;
}

.card h3 {
  color: var(--white);
  margin-bottom: 10px;
}

.card p {
  color: #aaa;
  font-size: 14px;
  margin-bottom: 15px;
}



/* ================= ANIMATION ================= */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= RESPONSIVE ================= */

/* Small phones */
/* ==========================================
   RESPONSIVE PRODUCT CAROUSEL
========================================== */

/* Desktop */
@media (min-width: 1201px){

    .split-wrapper{
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:30px;
        padding:80px 40px 40px;
        width:100%;
    }

    .split-card{
        width:100%;
        min-width:0;
    }
}

/* Laptop */
@media (901px <= width <= 1200px){

    .split-wrapper{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:25px;
        padding:70px 30px 30px;
    }

    .split-card{
        width:100%;
    }
}

/* Tablet */
@media (769px <= width <= 900px){

    .split-wrapper{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:20px;
        padding:60px 25px 25px;
    }

    .split-card{
        width:100%;
    }
}

/* =====================================
   PHONES (FENTY STYLE)
===================================== */

@media (max-width:768px){

    .split-wrapper{
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        overflow-y:hidden;
        gap:18px;
        padding:20px;
        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;
    }

    .split-image{
        height:260px;
    }

    .split-wrapper::-webkit-scrollbar{
        display:none;
    }

    .split-card{
    flex: 0 0 70%;
    width: 70%;
    min-width: 70%;
    max-width: 70%;
    scroll-snap-align: start;
    min-height:430px;
}

}

/* Small phones */

@media (max-width:490px){

    .split-card{

        flex: 0 0 82%;
        width: 82%;
        min-width: 82%;
        max-width: 82%;

    }

}


/* Tiny phones */
 @media (max-width:360px){

    .split-card{

        flex: 0 0 90%;
        width: 90%;
        min-width: 90%;
        max-width: 90%;

    }
}
/* ===========================================
   ORDER BUTTON HEART ANIMATION
=========================================== */

.order-container{
    margin-top:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    min-height:70px;
}

.order-btn{
    position:relative;
    overflow:hidden;
    min-width:170px;
    height:48px;
}

.btn-text{
    transition:.35s ease;
}

.heart-pop{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    transform:scale(.2);
    pointer-events:none;
}

.heart-pop i{
    color:var(--pink);
    font-size:22px;
}

.heart-pop.show{
    animation:heartPop .5s forwards;
}

@keyframes heartPop{

0%{
opacity:0;
transform:scale(.2);
}

40%{
opacity:1;
transform:scale(1.35);
}

70%{
transform:scale(.9);
}

100%{
opacity:1;
transform:scale(1);
}

}

.qty-box{

display:none;
align-items:center;
justify-content:center;
gap:18px;

opacity:0;
transform:translateY(12px);

transition:.35s;

}

.qty-box.show{

display:flex;

animation:qtyShow .35s forwards;

}

@keyframes qtyShow{

from{

opacity:0;
transform:translateY(12px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.qty-btn{

width:40px;
height:40px;

border:none;

border-radius:50%;

background:var(--pink);

color:var(--black);

font-size:22px;

font-weight:bold;

cursor:pointer;

transition:.25s;

}

.qty-btn:hover{

transform:scale(1.1);

background:var(--brown);

color:white;

}

.qty-number{

font-size:20px;

font-weight:bold;

min-width:20px;

text-align:center;

color:var(--white);

}