.store-modal{

    position:fixed;

    inset:0;

    display:flex;

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

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .25s ease,
        visibility 0s linear .25s;

    z-index:9999;

}

.store-modal.open{

    opacity:1;
    visibility:visible;

    pointer-events:auto;

    transition:
        opacity .25s ease;

}

.store-backdrop{

    position:absolute;

    inset:0;

    background:rgba(90, 50, 27, 0.55);

}

.store-window{

    position:relative;

    z-index:2;

}


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

.store-close{

    position:absolute;

    top:30px;
    right:30px;

    width:52px;
    height:52px;

    border:none;

    border-radius:999px;

    background:#5D3516;

    color:#FFF8E6;

    font-size:1.2rem;

    cursor:pointer;

    z-index:100;

}



/* ===========================
   STORE PAGE
=========================== */

.store-page{

    display:flex;

    justify-content:center;

    align-items:flex-start;

}



/* ===========================
   BOOK CONTAINER
=========================== */

.book-container{

    position:relative;

    width:min(1100px, 92vw);

    min-width:0;

    padding:40px;

}



/* ===========================
   WOOD BACKGROUND
=========================== */

.book-wood{

    position:absolute;

    top:24px;
    left:48.4%;

    width:100%;
    height:750px;

    transform:translateX(-46.5%);

    background:
        linear-gradient(
            135deg,
            #A96B43,
            #8A5333
        );

    border:3px solid #6D4027;

    border-radius:30px;

    z-index:-5;

}


.book-wood::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 25px,
            rgba(255,255,255,.15) 26px,
            transparent 30px
        );

    opacity:.25;

}



/* ===========================
   BOOK
=========================== */

.shop-book{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:680px 380px;

}



/* ===========================
   PAGES
=========================== */

.book-left-page,
.book-right-page{

    position:relative;

    min-height:720px;

    padding:28px;

    background:#FFFDF5;

    border:2px solid #D8C4AA;

}


.book-left-page{

    border-right:none;

    border-radius:24px 0 0 24px;

}


.book-right-page{

    border-radius:0 24px 24px 0;

}


.book-left-page::before,
.book-right-page::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:
        url("https://i.pinimg.com/1200x/c2/fb/81/c2fb81c049515871eab58d84075fc1f4.jpg")
        center/cover;

    opacity:.15;

    mix-blend-mode:multiply;

    pointer-events:none;

}


.book-left-page>*,
.book-right-page>*{

    position:relative;

    z-index:5;

}



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

.catalogue-tape{

    display:inline-block;

    position:relative;

    top:-55px;
    left:20px;

    padding:18px 28px;

    background:#FFDFBA;

    border:2px solid #D8C4AA;

    border-radius:8px;

    transform:rotate(-2deg);

    box-shadow:
        0 6px 12px rgba(93,53,22,.15);

}


.catalogue-tape::before{

    content:"";

    position:absolute;

    top:-10px;
    left:50%;

    transform:
        translateX(-50%)
        rotate(2deg);

    width:70px;
    height:18px;

    background:#F5B967;

    border-radius:4px;

    opacity:.8;

}



/* ===========================
   BOOKMARKS
=========================== */

.bookmarks{

    position:absolute;

    top:200px;
    right:-475px;

    display:flex;

    flex-direction:column;

    gap:12px;

    z-index: 0;

}

/* ===========================
   CLOSE BOOKMARK
=========================== */

.store-close-bookmark{

    position:absolute;

    top:80px;
    right:-70px;

    width:90px;
    height:140px;

    border:none;

    border-radius:
        0 18px 18px 0;

    background:#b45d5d;

    color:#FFF8E6;

    font-size:1.4rem;

    font-weight:700;

    cursor:pointer;

    display:flex;

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

    writing-mode:vertical-rl;

    box-shadow:
        4px 6px 12px rgba(93,53,22,.2);

    transition:.2s ease;

}


.store-close-bookmark:hover{

    transform:translateX(8px);

}

.bookmark{

    width:120px;

    padding:12px;

    border:none;

    border-radius:0 12px 12px 0;

    font:inherit;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

    color:#FFF8E6;


}


.bookmark:hover{

    transform:translateX(8px);

}


.bookmark.active{

    transform:translateX(10px);

    color:#FFF8E6;

}


.bookmark:nth-child(1){background:#B96A59;color:#FFF8E6;}
.bookmark:nth-child(2){background:#6B7FA3;}
.bookmark:nth-child(3){background:#C98B55;}
.bookmark:nth-child(4){background:#8A6B9B;}



/* ===========================
   PRODUCTS
=========================== */

.product-grid{

    display:grid;

    grid-template-columns:
        repeat(3,160px);

    gap:20px;

}


.product-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    padding:16px;

    border-radius:18px;

    cursor:pointer;

    transition:.2s;

}


.product-card:hover{

    transform:translateY(-4px);

}


.product-image{

    position:relative;

}


.product-image img{

    width:120px;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:16px;

}


.product-price{

    position:absolute;

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

    padding:6px 12px;

    border-radius:999px;

    background:#B96A59;

    color:#FFF8E6;

    font-size:.8rem;

    font-weight:700;

    transform:rotate(10deg);

}


.product-card h3{

    margin:0;

    color:#5D3516;

    text-align:center;

}



/* ===========================
   RIGHT PAGE
=========================== */

.book-right-placeholder{

    height:100%;

    display:flex;

    flex-direction:column;

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

    gap:18px;

    text-align:center;

}


.book-right-placeholder img{

    width:180px;

    border-radius:18px;

}


.book-right-placeholder p{

    max-width:260px;

    line-height:1.6;

    color:#A07A5A;

}