/* ===========================
   CATALOGUE PAGEDOLL
=========================== */

.book-container {
    position: relative;
}


.catalogue-pagedoll {

    position: absolute;

    width: 250px;
    height: auto;

    right: -80px;
    bottom: -20px;

    z-index: 20;

    pointer-events: none;

    filter:
        drop-shadow(
            4px 6px 6px
            rgba(93, 53, 22, .22)
        );

}


.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;
    animation:
        paperDrop .35s ease;

}



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

.book-container{

    position:relative;

    width:min(1100px, 92vw);

    min-width:0;

    padding:40px;

    animation:
        paperDrop .35s ease;

}



/* ===========================
   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;

    height: 720px;


}



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

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

    position: relative;

    height: 720px;
    min-height: 0;

    padding: 28px;

    background: #FFFDF5;

    border: 2px solid #D8C4AA;

}


/* ===========================
   LEFT PAGE
=========================== */

.book-left-page {

    display: flex;

    flex-direction: column;

    min-height: 0;

    overflow: visible;

    border-right: none;

    border-radius:
        24px 0 0 24px;

}


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

.book-right-page {

    overflow: hidden;

    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;}



/* ===========================
   PRODUCT AREA
=========================== */

.product-grid {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    display: grid;

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

    align-content: start;

    gap: 20px;

    padding: 10px 15px 30px 5px;

}

.product-grid::-webkit-scrollbar {

    width: 9px;

}

.product-grid::-webkit-scrollbar-track {

    background:
        rgba(93,53,22,.08);

    border-radius: 999px;

}

.product-grid::-webkit-scrollbar-thumb {

    background:
        var(--brown);

    border-radius: 999px;

    border:
        2px solid
        #FFFDF5;

}

.product-grid::-webkit-scrollbar-thumb:hover {

    background:
        var(--brown-dark);

}


.product-grid {

    scrollbar-width: thin;

    scrollbar-color:
        var(--brown)
        transparent;

}



.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-detail-content img {
    width: 220px;
    height: 220px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.product-card h3{

    margin:0;

    color:#5D3516;

    text-align:center;

    font-size: 17px;

}



/* ===========================
   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;

}

/* ===========================
   PRODUCT DETAILS
=========================== */

.product-detail-content {

    display: flex;

    flex-direction: column;

    align-items: left;

    text-align: left;

    color: var(--brown-dark);

    margin-top:70px;

}


/* ===========================
   PRODUCT IMAGE
=========================== */

.product-detail-content img {

    width: 220px;
    height: 220px;

    object-fit: contain;

    display: block;

    margin-bottom: 24px;

}


/* ===========================
   PRODUCT NAME
=========================== */

.product-detail-content h2 {

    margin: 0;

    color: var(--brown-dark);

    font-family: var(--heading-font);

    font-size: 1.55rem;

    font-weight: 600;

    line-height: 1.2;

}


/* ===========================
   DESCRIPTION
=========================== */

.product-detail-content p {

    max-width: 400px;

    margin-top: 5px;

    color: var(--brown);

    font-family: var(--body-font);

    font-size: .88rem;

    line-height: 1.7;

}


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

.product-detail-content h3 {

    margin: 20px 0 0;

    color: var(--brown);

    font-family: var(--heading-font);

    font-size: 1.2rem;

    font-weight: 600;

}

/* ===========================
   ADD TO CART
=========================== */

.add-to-cart {

    width: 100%;

    margin-top: 50px;

    padding: 13px 20px;
    border-radius: 10px;

    background:
        #A05A32;

    color: var(--cream);

    font-family: var(--body-font);
    font-size: .9rem;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 4px 0 #5D3516,
        0 6px 10px rgba(93,53,22,.18);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;

}


/* Hover */

.add-to-cart:hover {

    background: #EC9336;

    transform:
        translateY(-2px);

}


/* Click */

.add-to-cart:active {

    transform:
        translateY(2px);

}