/* ============================================================
   SIGN BOOKS — PRODUCT PAGE
   ------------------------------------------------------------
   EDITING:
   - Global colors/fonts: assets/css/variables.css
   - Product-specific colors/sizes: this file
   - Product interactions: assets/js/product.js
   ============================================================ */

/* MAIN PRODUCT PAGE */
.product-page{
    background:#fff;
    padding:1.25rem 0 4.5rem; /* EDIT PAGE TOP/BOTTOM SPACE */
}
.product-page .site-container{
    width:min(calc(100% - 3rem),var(--content-max-width));
}

/* BREADCRUMB */
.product-breadcrumbs{
    margin-bottom:1rem;
    color:#7a7a7a; /* EDIT MUTED COLOR */
    font-size:.68rem; /* EDIT BREADCRUMB SIZE */
}
.product-breadcrumbs a{
    color:#666;
    text-decoration:none;
}
.product-breadcrumbs .woocommerce-breadcrumb{
    margin:0;
}

/* ============================================================
   MAIN PRODUCT CARD
   ============================================================ */
.product-main{
    display:grid;
    grid-template-columns:minmax(0,450px) minmax(0,1fr);
    gap:2.5rem;
    padding:1.5rem;
    border:1px solid #e2e5e7; /* EDIT CARD BORDER */
    border-radius:8px; /* EDIT CARD CORNER */
    background:#fff;
}

/* ============================================================
   GALLERY
   ============================================================ */
.product-gallery{
    min-width:0;
    width:100%;
    max-width:450px;
}

.product-gallery__main{
    position:relative;
    display:grid;
    place-items:center;
    height:600px;
    min-height:0;
    padding:1.5rem;
    overflow:hidden;
    background:#fafafa; /* EDIT IMAGE BACKGROUND */
    border:1px solid #ededed;
}

.product-gallery__image{
    width:auto;
    max-width:100%;
    height:auto;
    max-height:680px;
    object-fit:contain;
}

.product-gallery__placeholder{
    display:grid;
    place-items:center;
    width:70%;
    aspect-ratio:2/3;
    background:#eee;
    color:#888;
    font-size:1rem;
}

.product-gallery__zoom{
    position:absolute;
    top:1rem;
    right:1rem;
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border:1px solid #d9d9d9;
    border-radius:50%;
    background:#fff;
    color:#222;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.product-gallery__zoom{display:none}
.product-gallery__main.is-zoom-active{cursor:crosshair}
.product-gallery__magnifier{
    position:absolute;
    z-index:3;
    width:180px;
    height:180px;
    border:3px solid #fff;
    border-radius:50%;
    background-color:#fff;
    background-repeat:no-repeat;
    box-shadow:0 3px 16px rgba(0,0,0,.28);
    pointer-events:none;
}

.product-gallery__thumbs{
    display:flex;
    flex-wrap:wrap;
    gap:.65rem;
    margin-top:.8rem;
}

.product-gallery__thumb{
    width:72px;
    height:82px;
    padding:3px;
    border:1px solid #ddd;
    background:#fff;
    cursor:pointer;
    transition:border-color var(--transition-fast),transform var(--transition-fast);
}
.product-gallery__thumb:hover,
.product-gallery__thumb.is-active{
    border-color:var(--color-primary, #df1037); /* EDIT ACTIVE THUMBNAIL COLOR */
}
.product-gallery__thumb:hover{
    transform:translateY(-1px);
}
.product-gallery__thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ============================================================
   SUMMARY
   ============================================================ */
.product-summary{
    min-width:0;
    padding:.5rem 0;
}

.product-summary__topline{
    display:flex;
    align-items:center;
    gap:.5rem;
    min-height:25px;
    margin-bottom:.8rem;
}

.stock-badge,
.product-badge{
    display:inline-flex;
    align-items:center;
    padding:.25rem .5rem;
    font-size:.61rem; /* EDIT BADGE SIZE */
    font-weight:800;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.stock-badge{
    background:#eaf8ee;
    color:#25884a;
}
.stock-badge--out{
    background:#fbecec;
    color:#c31435;
}
.product-badge--sale{
    background:#fff2d8;
    color:#9b6500;
}

.product-summary h1{
    margin:0 0 .55rem;
    color:#151515;
    font-size:clamp(1.9rem,3.1vw,3rem); /* EDIT PRODUCT TITLE SIZE */
    line-height:1.1;
    letter-spacing:-.025em;
}

.product-author{
    margin:0 0 .75rem;
    color:#6d6d6d;
    font-size:.8rem; /* EDIT AUTHOR SIZE */
}
.product-author a{
    color:var(--color-primary, #df1037);
    font-weight:700;
    text-decoration:none;
}

.product-rating{
    display:flex;
    align-items:center;
    gap:.45rem;
    margin-bottom:.9rem;
    color:#777;
    font-size:.7rem;
}
.product-rating__stars{
    letter-spacing:.08em;
    color:#e39b13; /* EDIT RATING COLOR */
}

/* PRICE */
.product-price{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:.35rem;
    padding:1.05rem 0;
    border-top:1px solid #e8e8e8;
    border-bottom:1px solid #e8e8e8;
    color:#c31435; /* EDIT PRICE COLOR */
    font-size:1.5rem; /* EDIT PRICE SIZE */
    font-weight:800;
}
.product-price del{
    margin-right:.2rem;
    color:#999;
    font-size:.9rem;
    font-weight:400;
}
.product-price ins{
    text-decoration:none;
}

/* ============================================================
   PURCHASE
   ============================================================ */
.product-purchase{
    padding:1.15rem 0;
    border-bottom:1px solid #e8e8e8;
}

.product-purchase form.cart{
    display:flex;
    align-items:flex-end;
    gap:.8rem;
    flex-wrap:wrap;
    margin:0;
}

.quantity-wrap{
    display:flex;
    flex-direction:column;
    gap:.35rem;
}
.quantity-wrap label{
    color:#666;
    font-size:.64rem;
    font-weight:700;
}
.product-purchase .quantity{
    display:flex;
    margin:0!important;
}
.product-purchase .quantity input{
    width:72px;
    height:44px;
    padding:0 .3rem;
    border:1px solid #d8d8d8;
    text-align:center;
    color:#222;
    background:#fff;
}

.product-purchase__buttons{
    display:flex;
    align-items:center;
    gap:.55rem;
    flex:1;
}

.product-button{
    min-height:44px;
    padding:0 1.1rem;
    border:0;
    border-radius:4px;
    color:#fff;
    font-size:.72rem; /* EDIT BUTTON TEXT SIZE */
    font-weight:800;
    cursor:pointer;
}
.product-button--buy{
    background:var(--color-primary, #df1037); /* EDIT BUY BUTTON */
}
.product-button--cart{
    background:var(--color-primary-dark, #b20d2c); /* EDIT CART BUTTON */
}

.product-button:hover{
    filter:brightness(.94);
}

.product-wishlist{
    flex:0 0 44px;
    width:44px;
    height:44px;
    border:1px solid #d9d9d9;
    border-radius:50%;
    background:#fff;
    color:var(--color-primary, #df1037);
    font-size:1.3rem;
    cursor:pointer;
}

.product-variable-note,
.product-unavailable{
    margin:1rem 0;
    padding:1rem;
    border:1px solid #e4e4e4;
    background:#f8f8f8;
    color:#666;
    font-size:.76rem;
}

/* ============================================================
   META
   ============================================================ */
.product-meta-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 2rem;
    margin-top:1rem;
}

.product-meta-grid>div{
    display:grid;
    grid-template-columns:90px 1fr;
    gap:.5rem;
    padding:.75rem 0;
    border-bottom:1px solid #ededed;
    font-size:.7rem;
    line-height:1.45;
}

.product-meta-grid strong{
    color:#333;
    font-weight:800;
}
.product-meta-grid span,
.product-meta-grid a{
    color:var(--color-primary, #df1037);
    text-decoration:none;
}

/* ============================================================
   DESCRIPTION
   ============================================================ */
.product-description-box{
    display:grid;
    grid-template-columns:165px 1fr;
    margin-top:1.25rem;
    border:1px solid #e2e5e7;
    border-radius:8px;
    overflow:hidden;
}

.product-description-box__label{
    padding:1.5rem;
    border-right:1px solid #e2e5e7;
    background:#fafafa;
}
.product-description-box__label h2{
    margin:0;
    font-size:.78rem; /* EDIT DESCRIPTION LABEL SIZE */
    font-weight:800;
}

.product-description-box__content{
    padding:1.5rem 2rem;
    color:#444;
    font-size:.82rem; /* EDIT DESCRIPTION TEXT SIZE */
    line-height:1.85;
}
.product-description-box__content p:last-child{
    margin-bottom:0;
}

/* ============================================================
   RELATED PRODUCTS
   ============================================================ */
.related-products{
    margin-top:3rem;
}

.related-products__heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1.25rem;
    border-bottom:1px solid #e3e3e3;
    padding-bottom:.8rem;
}
.related-products__heading .eyebrow{
    margin-bottom:.35rem;
}
.related-products__heading h2{
    margin:0;
    font-size:1.45rem; /* EDIT RELATED TITLE SIZE */
}
.related-products__heading>a{
    color:var(--color-primary, #df1037);
    font-size:.7rem;
    font-weight:800;
    text-decoration:none;
}

.related-products__grid{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1000px){
    .product-main{
        grid-template-columns:1fr 1fr;
        gap:2rem;
        padding:1.25rem;
    }
    .product-gallery__main{
        height:520px;
        min-height:520px;
    }
    .product-gallery{max-width:none}
}

@media(max-width:800px){
    .product-main{
        grid-template-columns:1fr;
    }
    .product-gallery__main{
        min-height:520px;
    }
    .product-summary{
        padding:0;
    }
}

@media(max-width:600px){
    .product-page{
        padding:.75rem 0 3rem;
    }
    .product-main{
        padding:.8rem;
        border-radius:5px;
    }
    .product-gallery__main{
        height:auto;
        min-height:0;
        padding:.75rem;
    }
    .product-gallery__image{
        max-height:560px;
    }
    .product-gallery__thumb{
        width:58px;
        height:68px;
    }
    .product-summary h1{
        font-size:1.7rem;
    }
    .product-purchase form.cart{
        align-items:stretch;
        flex-direction:column;
    }
    .quantity-wrap .quantity input{
        width:100%;
    }
    .product-purchase__buttons{
        width:100%;
    }
    .product-button{
        flex:1;
    }
    .product-meta-grid{
        grid-template-columns:1fr;
    }
    .product-description-box{
        grid-template-columns:1fr;
    }
    .product-description-box__label{
        border-right:0;
        border-bottom:1px solid #e2e5e7;
        padding:.9rem 1rem;
    }
    .product-description-box__content{
        padding:1rem;
    }
    .related-products{
        margin-top:2rem;
    }
}