/*==================================================
            THE CROCHET COVERN
        Handmade Crafts by Melodie ❤
==================================================*/


/*==================================================
                COLOUR PALETTE
==================================================*/

:root{

--background:#faf7f5;

--header:#e8dcd6;

--card:#ffffff;

--text:#3b2f2f;

--subtext:#6b5b5b;

--accent:#a67c7c;

--button:#e8dcd6;

--button-hover:#ddcdc6;

--green:#d7e6d6;

--green-dark:#a8c0a5;

--sale:#d98080;

--shadow:0 8px 24px rgba(0,0,0,.08);

--shadow-hover:0 18px 40px rgba(0,0,0,.14);

--radius:18px;

}


/*==================================================
                WEBSITE RESET
==================================================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:Georgia,serif;

color:var(--text);

background:

radial-gradient(circle at 20% 20%,#f5ece8 2px,transparent 2px),

radial-gradient(circle at 80% 60%,#f5ece8 2px,transparent 2px),

var(--background);

background-size:120px 120px;

overflow-x:hidden;

animation:pageFade 1.2s ease;

}


/*==================================================
            PAGE FADE
==================================================*/

@keyframes pageFade{

from{

opacity:0;

transform:translateY(18px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*==================================================
            LOADING SCREEN
==================================================*/

#loader{

position:fixed;

inset:0;

background:var(--background);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:999999;

overflow:hidden;

animation:loaderFade 1s ease forwards;

animation-delay:2s;

}


/* floating sparkles */

#loader::before{

content:"";

position:absolute;

width:700px;

height:700px;

border-radius:50%;

background:

radial-gradient(#ffffff 2px,transparent 3px);

background-size:40px 40px;

opacity:.25;

animation:sparkleRotate 30s linear infinite;

}


/* logo */

#loaderLogo{

width:180px;

opacity:0;

filter:drop-shadow(0 10px 25px rgba(0,0,0,.12));

animation:

logoAppear 1.4s ease forwards,

logoFloat 2.2s ease-in-out infinite,

logoFlyAway 1.8s ease forwards;

animation-delay:

0s,

1.4s,

2s;

}


/* title */

#loader h1{

margin-top:18px;

font-size:42px;

letter-spacing:2px;

color:var(--text);

opacity:0;

animation:fadeUp .8s ease forwards;

animation-delay:1.2s;

}


/* subtitle */

#loader p{

margin-top:10px;

font-style:italic;

color:#7a6a6a;

opacity:0;

animation:fadeUp .8s ease forwards;

animation-delay:1.6s;

}
/*==================================================
                LOADER ANIMATIONS
==================================================*/

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes logoAppear{

0%{

opacity:0;

transform:scale(.45) rotate(-8deg);

}

100%{

opacity:1;

transform:scale(1);

}

}

@keyframes logoFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}

@keyframes logoFlyAway{

0%{

opacity:1;

transform:scale(1);

}

100%{

opacity:0;

transform:

translate(-44vw,-34vh)

scale(.08)

rotate(-25deg);

}

}

@keyframes loaderFade{

to{

opacity:0;

visibility:hidden;

}

}

@keyframes sparkleRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}


/*==================================================
                HEADER
==================================================*/

header{

background:var(--header);

padding:75px 20px;

text-align:center;

position:relative;

overflow:hidden;

box-shadow:0 4px 18px rgba(0,0,0,.04);

}


/*==================================================
          LEFT VINE
==================================================*/

header::before{

content:"";

position:absolute;

left:15%;

top:-10px;

width:1500px;

height:700px;

background:url("left-vine_transparent.png") no-repeat;

background-size:contain;

pointer-events:none;

opacity:.95;

transform-origin:top center;

animation:vineLeft 9s ease-in-out infinite;

}


/*==================================================
          RIGHT VINE
==================================================*/

header::after{

content:"";

position:absolute;

right:1%;

top:-10px;

width:1480px;

height:900px;

background:url("right-vine_transparent.png") no-repeat;

background-size:contain;

pointer-events:none;

opacity:.95;

transform-origin:top center;

animation:vineRight 10s ease-in-out infinite;

}


/*==================================================
      GENTLE VINE SWAY
==================================================*/

@keyframes vineLeft{

0%{

transform:rotate(0deg);

}

50%{

transform:rotate(1deg);

}

100%{

transform:rotate(0deg);

}

}

@keyframes vineRight{

0%{

transform:rotate(0deg);

}

50%{

transform:rotate(-1deg);

}

100%{

transform:rotate(0deg);

}

}


/*==================================================
        HEADER CONTENT
==================================================*/

header h1,

header p{

position:relative;

z-index:5;

}

header h1{

font-size:44px;

letter-spacing:2px;

margin-bottom:12px;

}

header p{

font-style:italic;

font-size:17px;

color:#5a4a4a;

}


/*==================================================
          NAVIGATION BAR
==================================================*/

nav{

position:sticky;

top:0;

z-index:999;

display:flex;

justify-content:center;

gap:14px;

padding:18px;

background:rgba(255,255,255,.72);

backdrop-filter:blur(14px);

border-bottom:1px solid #ece6e2;

box-shadow:

0 4px 20px rgba(0,0,0,.04);

}


/*==================================================
        NAV LINKS
==================================================*/

nav a{

text-decoration:none;

color:var(--text);

padding:10px 18px;

border-radius:50px;

transition:.35s;

font-size:14px;

}

nav a:hover{

background:white;

transform:translateY(-2px);

box-shadow:

0 8px 18px rgba(0,0,0,.08);

}
/*==================================================
                HERO SECTIONS
==================================================*/

.hero{
padding:90px 20px;
text-align:center;
animation:fadeHero 1.2s ease;
}

.hero h2{

font-size:34px;

margin-bottom:18px;

font-weight:normal;

}

.hero p{

max-width:760px;

margin:auto;

line-height:1.9;

color:var(--subtext);

font-size:16px;

}


/*==================================================
                FADE HERO
==================================================*/

@keyframes fadeHero{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*==================================================
            SECTION TITLES
==================================================*/

.section-title{

font-size:34px;

text-align:center;

margin-top:70px;

margin-bottom:12px;

font-weight:normal;

}

.section-note{

text-align:center;

color:var(--subtext);

font-style:italic;

margin-bottom:20px;

}


/*==================================================
            PRODUCT GRID
==================================================*/

.products{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:32px;

padding:50px;

}


/*==================================================
            PRODUCT CARDS
==================================================*/

.card{

position:relative;

background:rgba(255,255,255,.88);

backdrop-filter:blur(10px);

border-radius:26px;

padding:18px;

overflow:hidden;

box-shadow:var(--shadow);

transition:

transform .45s,

box-shadow .45s,

background .45s;

}


/*==================================================
            CARD HOVER
==================================================*/

.card:hover{

transform:

translateY(-10px)

scale(1.02);

box-shadow:

var(--shadow-hover);

background:white;

}


/*==================================================
        SHADOW STRETCH EFFECT
==================================================*/

.card::after{

content:"";

position:absolute;

left:50%;

bottom:10px;

width:70%;

height:16px;

background:

rgba(0,0,0,.08);

filter:blur(14px);

border-radius:50%;

transform:

translateX(-50%)

scale(.7);

transition:.45s;

z-index:-1;

}

.card:hover::after{

transform:

translateX(-50%)

scale(1);

opacity:.7;

}


/*==================================================
            PRODUCT IMAGES
==================================================*/

.card img{

width:100%;

border-radius:18px;

transition:

transform .6s ease,

filter .6s ease;

}


/*==================================================
            IMAGE HOVER
==================================================*/

.card:hover img{

transform:scale(1.06);

filter:brightness(1.03);

}


/*==================================================
            PRODUCT TITLES
==================================================*/

.card h3{

margin-top:18px;

font-size:24px;

font-weight:normal;

}


/*==================================================
            PRODUCT TEXT
==================================================*/

.card p{

margin-top:12px;

line-height:1.8;

color:var(--subtext);

}


/*==================================================
            PRICE
==================================================*/

.price{

margin-top:18px;

font-size:25px;

font-weight:bold;

color:var(--accent);

transition:.4s;

}

.card:hover .price{

transform:scale(1.08);

}


/*==================================================
            SALE PRICE
==================================================*/

.sale-price{

color:#cb6767;

font-size:28px;

font-weight:bold;

}


/*==================================================
            SALE RIBBON
==================================================*/

.sale-tag{

position:absolute;

top:18px;

right:-45px;

background:#cb6767;

color:white;

padding:8px 55px;

font-size:13px;

font-weight:bold;

transform:rotate(40deg);

letter-spacing:1px;

box-shadow:

0 8px 18px rgba(0,0,0,.12);

}


/*==================================================
            STOCK BADGE
==================================================*/

.stock-badge{

display:inline-block;

margin-top:12px;

padding:

6px 14px;

border-radius:50px;

background:#edf6ea;

color:#567556;

font-size:13px;

font-weight:bold;

}
/*==================================================
                BUTTONS
==================================================*/

.btn{

display:inline-block;

margin-top:18px;

padding:13px 22px;

background:var(--button);

border:none;

border-radius:50px;

cursor:pointer;

text-decoration:none;

font-family:Georgia,serif;

font-size:15px;

color:var(--text);

transition:

all .35s ease;

box-shadow:

0 6px 16px rgba(0,0,0,.05);

position:relative;

overflow:hidden;

}



/* soft shine */

.btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.65),

transparent);

transition:.7s;

}



.btn:hover::before{

left:140%;

}


.btn:hover{

background:var(--button-hover);

transform:

translateY(-3px)

scale(1.03);

box-shadow:

0 14px 28px rgba(0,0,0,.12);

}

.btn:active{

transform:scale(.93);

transition:.08s;

}


/*==================================================
            PHOTO SLIDER
==================================================*/

.photo-slider{

display:flex;

gap:14px;

overflow-x:auto;

scroll-snap-type:x mandatory;

scroll-behavior:smooth;

padding-bottom:6px;

}



.photo-slider::-webkit-scrollbar{

height:7px;

}



.photo-slider::-webkit-scrollbar-thumb{

background:#e7d8d2;

border-radius:20px;

}



.photo-slider img{

min-width:100%;

scroll-snap-align:center;

}


/*==================================================
            PRODUCT POPUP
==================================================*/

body.modal-open{

overflow:hidden;

}



.order-modal{

display:none;

position:fixed;

inset:0;

background:rgba(38,31,31,.35);

backdrop-filter:blur(7px);

z-index:999999;

justify-content:center;

align-items:center;

padding:24px;

animation:fadeModal .35s;

}



.order-box{

position:relative;

background:#fffdfc;

width:100%;

max-width:430px;

padding:28px;

border-radius:30px;

box-shadow:

0 30px 60px rgba(0,0,0,.18);

text-align:center;

animation:popupBounce .35s;

overflow:hidden;

}



/* stitched border */

.order-box::before{

content:"";

position:absolute;

inset:10px;

border:2px dashed #ead8d2;

border-radius:22px;

pointer-events:none;

}



/* handmade badge */

.handmade{

display:inline-block;

margin-top:14px;

padding:7px 18px;

background:#edf6ea;

border-radius:50px;

font-size:13px;

font-weight:bold;

color:#577257;

}



/* popup image */

.modal-product-img{

width:210px;

height:210px;

object-fit:cover;

border-radius:22px;

margin-bottom:14px;

box-shadow:

0 12px 28px rgba(0,0,0,.10);

transition:.5s;

}



.modal-product-img:hover{

transform:scale(1.04);

}



/* popup headings */

.order-box h2{

margin:12px 0;

font-size:31px;

font-weight:normal;

}



.order-detail{

margin-top:10px;

font-size:15px;

color:var(--subtext);

}



/*==================================================
        POPUP BUTTONS
==================================================*/

.order-actions{

display:grid;

gap:12px;

margin-top:25px;

}



.pay-btn{

background:#dbead9;

}



.pay-btn:hover{

background:#cfe4cc;

}



.contact-btn{

background:#efe3de;

}



.cancel-btn{

background:#f5f2f1;

}



/*==================================================
            CLOSE BUTTON
==================================================*/

.close-modal{

position:absolute;

top:14px;

right:18px;

background:none;

border:none;

font-size:28px;

cursor:pointer;

transition:.3s;

}



.close-modal:hover{

transform:rotate(90deg);

}



/*==================================================
        MODAL ANIMATIONS
==================================================*/

@keyframes popupBounce{

0%{

transform:

scale(.85)

translateY(25px);

opacity:0;

}



70%{

transform:scale(1.03);

}



100%{

transform:scale(1);

opacity:1;

}

}



@keyframes fadeModal{

from{

opacity:0;

}

to{

opacity:1;

}

}



/*==================================================
            FOOTER
==================================================*/

footer{

margin-top:70px;

padding:40px;

text-align:center;

font-size:13px;

color:#7a6a6a;

}



/*==================================================
            MOBILE
==================================================*/

@media(max-width:900px){

.products{

grid-template-columns:1fr;

padding:22px;

}

header::before{

left:-320px;

width:1200px;

}

header::after{

right:-470px;

width:1250px;

}

.hero{

padding:60px 18px;

}

.hero h2{

font-size:29px;

}

.order-box{

padding:20px;

}

.modal-product-img{

width:170px;

height:170px;

}

}
/*==================================================
            CROCHET HOOK CURSOR
==================================================*/

a,
button,
.btn,
.card,
.card img,
nav a,
.close-modal,
.order-actions button {
  cursor: url("crochet-hook-cursor.png") 4 4, pointer;
}

/*==================================================
            CHECKOUT FORM
==================================================*/

#checkoutForm {
  display: grid;
  gap: 10px;
  margin-top: 15px;
}

#checkoutForm input,
#checkoutForm textarea {
  width: 100%;
  padding: 11px;
  border: 1px solid #ead8d2;
  border-radius: 12px;
  font-family: Georgia, serif;
  background: #fffaf8;
  color: #3b2f2f;
}

#checkoutForm textarea {
  min-height: 75px;
  resize: vertical;
}
/* FLOATING CART BUTTON */

.cart-btn {
  position: fixed;
  top: 20px;
  right: 15px;
  z-index: 999;

  border-radius: 30px;
  padding: 10px 18px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}