/* =========================================================
   OHH SO CRAFTEE - CLEAN STYLE.CSS
   Cleaned version for homepage, category pages, product pages,
   Need Something Else page, FAQ, and reusable product cards.
========================================================= */

/* ==========================
   GLOBAL RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#f7d9e3;
    font-family:Arial, sans-serif;
    color:#2b2b2b;
    line-height:1.6;
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    max-width:100%;
    display:block;
}

button,
input,
select,
textarea{
    font-family:inherit;
}

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

#main-header{
    position:absolute;
    top:25px;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    max-width:1200px;
    z-index:9999;

    display:flex;
    justify-content:space-between;
    align-items:center;

    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.logo-container{
    display:flex;
    align-items:center;
}

.logo-container img{
    width:260px;
    max-width:100%;
}

#main-header nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;

    background:rgba(255,248,241,.9);
    backdrop-filter:blur(8px);

    padding:18px 38px;
    border-radius:50px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

#main-header nav a{
    color:#2b2b2b;
    font-weight:800;
    font-size:1.05rem;
}

/* ==========================
   STANDARD PAGE HEADER
========================== */

.page-header{
    padding:35px 60px;
    background:rgba(255,248,241,.92);
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.page-header nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;
    flex-wrap:wrap;
}

.page-header nav a{
    color:#2b2b2b;
    font-weight:800;
    font-size:1.05rem;
}

/* ==========================
   HOMEPAGE HERO
========================== */

.hero-image-section{
    background:#f7d9e3;
    padding:40px 0 0;
}

.hero-wrapper{
    max-width:1400px;
    margin:0 auto;
    text-align:center;
}

.hero-image{
    width:100%;
    max-height:650px;
    object-fit:contain;
}

.scroll-cue{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;

    margin-top:20px;
    padding-bottom:20px;

    color:#2b2b2b;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:4px;
}

.scroll-cue .arrow{
    font-size:2rem;
    animation:bounce 1.5s infinite;
}

@keyframes bounce{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(8px);}
}

/* ==========================
   PAGE TRANSITION
========================== */

.page-transition{
    height:100px;
    background:#f7d9e3;
    position:relative;
    overflow:hidden;
}

.torn-paper{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:65px;
    background:#fff8f1;
    clip-path:polygon(
        0 35%, 5% 42%, 10% 30%, 15% 48%, 20% 34%,
        25% 45%, 30% 32%, 35% 46%, 40% 31%, 45% 44%,
        50% 34%, 55% 48%, 60% 30%, 65% 42%, 70% 33%,
        75% 47%, 80% 31%, 85% 43%, 90% 35%, 95% 46%,
        100% 32%, 100% 100%, 0 100%
    );
    box-shadow:0 -10px 25px rgba(0,0,0,.08);
    transition:transform .8s ease;
}

.torn-paper.lift{
    transform:scaleY(1.08);
}

/* ==========================
   REVEAL EFFECT
========================== */

.reveal-section{
    opacity:0;
    transform:translateY(60px);
    transition:opacity .8s ease, transform .8s ease;
}

.reveal-section.show{
    opacity:1;
    transform:translateY(0);
}

/* ==========================
   HOMEPAGE COLLECTIONS
========================== */

.collections{
    padding:90px 60px 70px;
    background:#fff8f1;
}

.collections h2{
    display:block;
    width:100%;
    text-align:center;
    font-family:'Caveat', cursive;
    font-size:3.5rem;
    color:#444;
    margin:0 auto 45px;
    transform:rotate(-1deg);
}

.collections h2::before{
    content:"";
    display:block;
    width:120px;
    height:30px;
    background:rgba(244,199,217,.85);
    margin:0 auto 15px;
    transform:rotate(-4deg);
}

.collection-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
    max-width:1200px;
    margin:0 auto;
}

.collection-card{
    display:block;
    background:white;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s ease;
}

.collection-card:hover{
    transform:translateY(-8px) scale(1.02);
}

.collection-card img{
    width:100%;
    height:360px;
    object-fit:cover;
}

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

.best-sellers-title,
.shop-section-title{
    text-align:center;
    margin-bottom:60px;
}

.best-sellers-title .section-tag,
.section-tag{
    display:inline-block;
    background:#fff8f1;
    color:#d46d8c;
    padding:9px 20px;
    border-radius:50px;
    font-weight:900;
    margin-bottom:18px;
}

.best-sellers-title h2,
.shop-section-title h2{
    font-family:'Caveat', cursive;
    font-size:4.5rem;
    line-height:1;
    color:#444;
    margin-bottom:20px;
}

.best-sellers-title p,
.shop-section-title p{
    max-width:720px;
    margin:0 auto;
    color:#666;
    line-height:1.8;
    font-size:1.05rem;
}

/* ==========================
   BEST SELLERS
========================== */

.best-sellers-section{
    padding:120px 60px 100px;
    background:
        linear-gradient(rgba(255,248,241,.78), rgba(255,248,241,.78)),
        url("../assets/best-sellers/best-sellers-background.png");
    background-size:cover;
    background-position:center;
}

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

.shop-product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:30px;
    margin-top:40px;
}

.shop-product-card{
    width:320px;
    max-width:100%;
    background:white;
    padding:15px 15px 25px;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    position:relative;
    transition:.3s ease;
    color:inherit;
    text-decoration:none;
}

.shop-product-card:nth-child(odd){
    transform:rotate(-2deg);
}

.shop-product-card:nth-child(even){
    transform:rotate(2deg);
}

.shop-product-card:hover{
    transform:translateY(-8px) scale(1.02);
}

.shop-product-card img,
.placeholder-img{
    width:100%;
    height:400px;
    object-fit:cover;
    border-radius:8px;
}

.placeholder-img{
    background:#fff1f6;
    border:2px dashed #d46d8c;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Caveat', cursive;
    font-size:2rem;
    color:#d46d8c;
}

.shop-product-card h3{
    font-family:'Caveat', cursive;
    font-size:2rem;
    text-align:center;
    margin-top:15px;
    color:#444;
}

.shop-product-card .price{
    text-align:center;
    font-weight:900;
    color:#d46d8c;
}

.shop-badge{
    position:absolute;
    top:10px;
    right:15px;
    background:#ffd54f;
    color:#444;
    padding:8px 14px;
    border-radius:50px;
    font-size:.85rem;
    font-weight:900;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
    z-index:20;
}

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

.related-products-section{
    width:100%;
    max-width:1250px;
    margin:80px auto;
    padding:60px;
    text-align:center;
}

.related-products-section h2,
.you-may-like h2{
    font-family:'Caveat', cursive;
    font-size:3.5rem;
    color:#444;
    margin-bottom:40px;
}

.related-products-grid{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:30px;
    width:100%;
    flex-wrap:wrap;
}

.related-products-grid .shop-product-card{
    flex:0 0 31%;
    width:31%;
    max-width:360px;
    min-width:260px;
    margin:0;
    transform:none;
}

.related-products-grid .shop-product-card img,
.related-products-grid .placeholder-img{
    height:280px;
    object-fit:cover;
}

/* ==========================
   SOCIAL SECTION
========================== */

.social-section{
    margin:80px 60px;
    padding:80px 60px;
    background:white;
    border-radius:35px;
    text-align:center;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.social-note h2{
    font-family:'Caveat', cursive;
    font-size:4rem;
    color:#444;
    margin-bottom:20px;
}

.social-note p{
    max-width:700px;
    margin:0 auto 50px;
    line-height:1.8;
    color:#555;
}

.social-icons{
    display:flex;
    justify-content:center;
    gap:60px;
    flex-wrap:wrap;
}

.social-icons a{
    color:#444;
    width:170px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
    text-decoration:none;
}

.social-circle{
    width:90px;
    height:90px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2.2rem;
    margin:0 auto 15px;
    transition:.3s ease;
}

.social-circle:hover{
    transform:translateY(-8px) scale(1.05);
}

.instagram{background:#f7a7c0;}
.facebook{background:#7ca6f8;}
.tiktok{background:#444;color:white;}

.social-icons span{
    display:block;
    width:100%;
    font-weight:800;
    text-align:center;
}

/* ==========================
   CUSTOM / NEED SOMETHING CTA PREVIEW
========================== */

.custom-creations-preview{
    margin:80px 60px;
    padding:90px 60px;
    border-radius:35px;
    text-align:center;
    background:
        linear-gradient(rgba(255,248,241,.82), rgba(255,248,241,.82)),
        url("../assets/best-sellers/best-sellers-background.png");
    background-size:cover;
    background-position:center;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    overflow:hidden;
}

.custom-preview-text h2{
    font-family:'Caveat', cursive;
    font-size:4rem;
    color:#444;
    margin-bottom:20px;
}

.custom-preview-text p{
    max-width:780px;
    margin:0 auto 55px;
    line-height:1.8;
    color:#444;
}

.custom-preview-gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    max-width:1100px;
    margin:0 auto 60px;
}

.custom-photo{
    background:white;
    padding:16px;
    border-radius:8px;
    box-shadow:0 15px 30px rgba(0,0,0,.13);
    position:relative;
}

.custom-photo img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
}

.tilt-left{transform:rotate(-3deg);}
.tilt-right{transform:rotate(3deg);}

.custom-photo::before{
    content:"";
    position:absolute;
    top:-18px;
    left:50%;
    transform:translateX(-50%) rotate(-4deg);
    width:110px;
    height:32px;
    background:rgba(244,199,217,.85);
}

.custom-order-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#d46d8c;
    color:white;
    padding:18px 40px;
    border-radius:14px;
    font-weight:900;
    font-size:1.1rem;
    box-shadow:0 8px 18px rgba(0,0,0,.15);
    transition:.3s ease;
    overflow:hidden;
}

.custom-order-btn:hover{
    background:#bf5f7d;
    transform:translateY(-4px);
}

/* ==========================
   REVIEWS
========================== */

.reviews-section{
    margin:80px 60px;
    padding:100px 60px;
    background:
        linear-gradient(rgba(255,248,241,.85), rgba(255,248,241,.85)),
        url("../assets/best-sellers/best-sellers-background.png");
    background-size:cover;
    border-radius:35px;
    overflow:hidden;
}

.reviews-title{
    text-align:center;
    margin-bottom:60px;
}

.reviews-title h2{
    font-family:'Caveat', cursive;
    font-size:4rem;
    color:#444;
}

.reviews-title p{
    max-width:700px;
    margin:0 auto;
    color:#555;
}

.reviews-slider{
    overflow:hidden;
}

.reviews-track{
    display:flex;
    width:200%;
    transition:1s ease;
}

.review-page{
    width:100%;
    display:flex;
    justify-content:center;
    gap:30px;
    padding:20px;
}

.review-note{
    background:#fffdf6;
    width:300px;
    min-height:260px;
    padding:30px;
    border-radius:8px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    position:relative;
    transform:rotate(-2deg);
}

.review-note.pink{
    background:#ffe8f0;
    transform:rotate(2deg);
}

.review-note::before{
    content:"";
    position:absolute;
    width:90px;
    height:28px;
    background:rgba(244,199,217,.85);
    top:-12px;
    left:50%;
    transform:translateX(-50%) rotate(-4deg);
}

.review-note p{
    margin-top:20px;
    font-size:1.1rem;
    line-height:1.7;
}

.review-note span{
    display:block;
    margin-top:20px;
    font-weight:800;
    color:#d46d8c;
}

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

.footer{
    margin-top:80px;
    padding:70px 60px 20px;
    background:#d46d8c;
    color:white;
}

.footer-content{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:40px;
}

.footer-logo h3{
    font-family:'Caveat', cursive;
    font-size:2.5rem;
    margin-bottom:15px;
}

.footer-logo p{
    line-height:1.8;
}

.footer-links,
.footer-social{
    display:flex;
    flex-direction:column;
}

.footer-links h4,
.footer-social h4{
    margin-bottom:15px;
}

.footer-links a,
.footer-social a{
    color:white;
    margin-bottom:10px;
}

.footer-credit{
    text-align:center;
    margin-top:50px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.2);
    font-size:.9rem;
}

.footer-brand-logo{
    width:120px;
    margin:0 auto 15px;
}

/* ==========================
   SHOP / COLLECTIONS PAGE
========================== */

.shop-hero{
    padding:100px 40px 70px;
    text-align:center;
}

.shop-hero h1{
    font-family:'Caveat', cursive;
    font-size:5rem;
    color:#444;
    margin-bottom:20px;
}

.shop-hero p,
.shop-hero-description{
    max-width:800px;
    margin:20px auto 0;
    font-size:1.15rem;
    line-height:1.8;
    color:#555;
}

.shop-hero-banner{
    width:100%;
    max-width:900px;
    margin:0 auto;
}

.quick-selects{
    margin:40px 60px;
    padding:60px;
    background:
        linear-gradient(rgba(255,248,241,.82), rgba(255,248,241,.82)),
        url("../assets/best-sellers/best-sellers-background.png");
    background-size:cover;
    background-position:center;
    border-radius:35px;
    text-align:center;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.quick-selects h2{
    font-family:'Caveat', cursive;
    font-size:3.5rem;
    margin-bottom:35px;
    color:#444;
}

.quick-select-grid{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;
}

.quick-select-grid a{
    background:#d46d8c;
    color:white;
    padding:15px 28px;
    border-radius:50px;
    font-weight:900;
    transition:.3s ease;
}

.quick-select-grid a:hover{
    background:#bf5f7d;
    transform:translateY(-4px);
}

.all-items-section{
    margin:80px 60px;
    padding:90px 60px;
    border-radius:35px;
    background:
        linear-gradient(rgba(255,248,241,.78), rgba(255,248,241,.78)),
        url("../assets/best-sellers/best-sellers-background.png");
    background-size:cover;
    background-position:center;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.all-items-section .shop-product-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(320px, 420px));
    justify-content:center;
    gap:40px;
}

.all-items-section .shop-product-card{
    width:100%;
    max-width:420px;
}

/* ==========================
   CATEGORY / QUICK LINK PAGES
========================== */

.jewelry-hero,
.category-hero{
    margin:40px 60px;
    padding:55px 60px;
    border-radius:35px;
    text-align:center;
    background:
        linear-gradient(rgba(255,248,241,.75), rgba(255,248,241,.75)),
        url("../assets/best-sellers/best-sellers-background.png");
    background-size:cover;
    background-position:center;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.jewelry-hero h1,
.category-hero h1{
    font-family:'Caveat', cursive;
    font-size:4.5rem;
    color:#444;
}

.jewelry-description,
.category-hero p{
    max-width:750px;
    margin:15px auto 0;
    color:#555;
    line-height:1.8;
}

.jewelry-page-section,
.category-feature-section{
    margin:80px 60px;
    padding:90px 60px;
    border-radius:35px;
    background:
        linear-gradient(rgba(255,248,241,.78), rgba(255,248,241,.78)),
        url("../assets/best-sellers/best-sellers-background.png");
    background-size:cover;
    background-position:center;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

/* Category featured product / slider */

.featured-category-product{
    max-width:1050px;
    margin:0 auto 70px;
}

.featured-jewelry-card,
.featured-category-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
    background:white;
    padding:28px;
    border-radius:30px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.featured-jewelry-card img,
.featured-category-card img{
    width:100%;
    height:380px;
    object-fit:cover;
    border-radius:20px;
}

.featured-jewelry-info h2,
.featured-category-info h2{
    font-family:'Caveat', cursive;
    font-size:3.5rem;
    color:#444;
}

.featured-jewelry-info p,
.featured-category-info p{
    color:#555;
    line-height:1.8;
    margin:15px 0 25px;
}

.featured-jewelry-info span,
.featured-category-info span{
    display:inline-block;
    background:#d46d8c;
    color:white;
    padding:15px 28px;
    border-radius:50px;
    font-weight:900;
}

.category-items-slider{
    max-width:1100px;
    margin:0 auto;
    position:relative;
}

.category-items-window{
    overflow:hidden;
}

.category-items-track{
    display:flex;
    gap:30px;
    transition:.4s ease;
}

.category-slider-card{
    flex:0 0 calc(50% - 15px);
    background:white;
    padding:15px 15px 25px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.10);
    position:relative;
    color:inherit;
}

.category-slider-card img,
.category-slider-card .placeholder-img{
    width:100%;
    height:420px;
    object-fit:contain;
    background:#fff8f1;
    border-radius:14px;
}

.category-slider-card h3{
    font-family:'Caveat', cursive;
    font-size:2.8rem;
    text-align:center;
    color:#444;
    margin-top:18px;
}

.category-slider-card .price{
    text-align:center;
    color:#d46d8c;
    font-weight:900;
}

.category-slide-btn{
    position:absolute;
    top:45%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    border-radius:50%;
    border:none;
    background:#d46d8c;
    color:white;
    font-size:2rem;
    cursor:pointer;
    z-index:5;
}

.category-prev-btn{
    left:-70px;
}

.category-next-btn{
    right:-70px;
}

/* ==========================
   SHOP CUSTOM CTA
========================== */

.shop-custom-cta{
    margin:80px 60px;
    padding:80px 60px;
    background:#fff8f1;
    border-radius:35px;
    text-align:center;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.shop-custom-cta h2{
    font-family:'Caveat', cursive;
    font-size:3.5rem;
    color:#444;
    margin-bottom:15px;
}

.shop-custom-cta p{
    max-width:650px;
    margin:0 auto 35px;
    color:#555;
    line-height:1.8;
}

.shop-custom-cta a{
    display:inline-block;
    background:#d46d8c;
    color:white;
    padding:18px 42px;
    border-radius:14px;
    font-weight:900;
    box-shadow:0 8px 18px rgba(0,0,0,.15);
    transition:.3s ease;
}

.shop-custom-cta a:hover{
    background:#bf5f7d;
    transform:translateY(-4px);
}

/* ==========================
   OLD PRODUCT PAGE TEMPLATE
========================== */

.product-page{
    max-width:1200px;
    margin:70px auto;
    padding:0 40px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:start;
}

.main-product-image{
    position:relative;
    background:white;
    padding:18px;
    border-radius:20px;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.main-product-image img{
    width:100%;
    height:430px;
    object-fit:cover;
    border-radius:14px;
}

.product-category{
    font-family:'Caveat', cursive;
    font-size:2rem;
    color:#d46d8c;
}

.product-info h1{
    font-size:3rem;
    margin:10px 0;
}

.product-price{
    font-size:1.7rem;
    font-weight:900;
    color:#d46d8c;
    margin-bottom:20px;
}

.product-description{
    line-height:1.8;
    color:#555;
    margin-bottom:30px;
}

.product-highlights{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.product-highlights div{
    background:#fff8f1;
    padding:18px;
    border-radius:14px;
    text-align:center;
    box-shadow:0 6px 15px rgba(0,0,0,.07);
}

.preview-order-section{
    max-width:1200px;
    margin:70px auto;
    padding:0 40px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:start;
}

.live-preview-box,
.product-form{
    background:#fff8f1;
    padding:40px;
    border-radius:25px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.live-preview-box h2,
.product-form h2{
    font-family:'Caveat', cursive;
    font-size:3rem;
    color:#444;
    margin-bottom:20px;
}

.live-preview-box input,
.product-form input,
.product-form select,
.product-form textarea{
    width:100%;
    padding:15px;
    margin:10px 0 18px;
    border:1px solid #ddd;
    border-radius:10px;
}

.name-preview{
    margin-top:25px;
    padding:40px;
    background:transparent;
    border-radius:18px;
    font-family:'Caveat', cursive;
    font-size:4rem;
    text-align:center;
    color:#d46d8c;
    text-shadow:0 3px 8px rgba(0,0,0,.15);
}

.product-form label{
    font-weight:900;
    color:#444;
}

.product-form textarea{
    min-height:120px;
}

.product-form button{
    width:100%;
    padding:18px;
    background:#d46d8c;
    color:white;
    border:none;
    border-radius:12px;
    font-weight:900;
    cursor:pointer;
}

.product-form button:hover{
    background:#bf5f7d;
}

.chain-line{
    width:70%;
    height:4px;
    margin:0 auto 25px;
    background:#d4af37;
    border-radius:50px;
}

.font-options,
.color-options,
.chain-options{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.font-choice,
.chain-choice{
    border:none;
    background:white;
    padding:12px 18px;
    border-radius:14px;
    cursor:pointer;
    font-weight:900;
    box-shadow:0 5px 14px rgba(0,0,0,.08);
}

.color-choice{
    width:42px;
    height:42px;
    border-radius:50%;
    border:3px solid transparent;
    cursor:pointer;
    box-shadow:0 5px 14px rgba(0,0,0,.12);
}

.white-swatch{
    border:2px solid #ddd;
}

.font-choice.active,
.chain-choice.active,
.color-choice.active{
    outline:3px solid #d46d8c;
    outline-offset:3px;
}

/* ==========================
   CLEAN PRODUCT PAGE TEMPLATE
========================== */

.clean-product-page{
    max-width:1200px;
    margin:0 auto;
    padding:35px 30px 80px;
    background:white;
}

.product-breadcrumb{
    margin:25px 0 35px;
    font-size:.95rem;
    color:#555;
}

.product-breadcrumb a{
    color:#444;
}

.product-breadcrumb span{
    color:#d46d8c;
    font-weight:900;
}

.clean-product-layout{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:60px;
    align-items:start;
}

.clean-main-image{
    width:100%;
    height:560px;
    object-fit:cover;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.clean-thumbnail-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin-top:18px;
}

.clean-thumbnail-row img{
    width:100%;
    height:100px;
    object-fit:cover;
    border-radius:12px;
}

.clean-product-info h1{
    font-size:3rem;
    color:#222;
    margin-bottom:12px;
}

.clean-rating{
    color:#d46d8c;
    font-weight:900;
    margin-bottom:20px;
}

.clean-rating span{
    color:#333;
    font-weight:500;
    margin-left:8px;
}

.clean-price{
    color:#d46d8c;
    font-size:2rem;
    margin-bottom:25px;
}

.clean-description{
    font-size:1.1rem;
    line-height:1.8;
    color:#444;
    margin-bottom:30px;
    padding-bottom:25px;
    border-bottom:1px solid #eee;
}

.clean-product-form label,
.simple-product-options label{
    display:block;
    font-weight:900;
    color:#333;
    margin:22px 0 10px;
}

.clean-product-form select,
.clean-product-form input,
.simple-product-options select,
.simple-product-options input{
    width:100%;
    padding:17px;
    border-radius:14px;
    border:1px solid #ddd;
    font-size:1rem;
}

.custom-note{
    color:#777;
    font-size:.95rem;
    margin-top:10px;
}

.book-upload-box{
    display:none;
}

.clean-upload-box,
.upload-box{
    border:2px dashed #d46d8c;
    border-radius:18px;
    min-height:170px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:#fff8f1;
    cursor:pointer;
    padding:25px;
}

.clean-upload-box input,
.upload-box input{
    display:none;
}

.clean-upload-box span,
.upload-box span{
    font-size:2rem;
    color:#d46d8c;
}

.clean-upload-box strong{
    margin-top:8px;
    color:#333;
}

.clean-upload-box small,
.upload-box small{
    margin-top:8px;
    color:#777;
}

.clean-quantity{
    display:flex;
    max-width:190px;
    border:1px solid #ddd;
    border-radius:12px;
    overflow:hidden;
}

.clean-quantity button{
    width:55px;
    border:none;
    background:white;
    font-size:1.4rem;
    cursor:pointer;
}

.clean-quantity input{
    border:none;
    border-left:1px solid #ddd;
    border-right:1px solid #ddd;
    text-align:center;
    border-radius:0;
}

.clean-cart-btn,
.main-cart-button{
    width:100%;
    margin-top:28px;
    padding:20px;
    border:none;
    border-radius:14px;
    background:#d46d8c;
    color:white;
    font-size:1.2rem;
    font-weight:900;
    cursor:pointer;
}

.clean-custom-cta{
    margin:70px 0;
    padding:30px 40px;
    border-radius:18px;
    background:#ffe8ef;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
}

.clean-custom-cta h2{
    color:#333;
    margin-bottom:8px;
}

.clean-custom-cta p{
    color:#555;
}

.clean-custom-cta a,
.custom-request-link{
    background:#d46d8c;
    color:white;
    padding:16px 28px;
    border-radius:12px;
    font-weight:900;
    white-space:nowrap;
}

/* ==========================
   CUSTOM REQUEST PAGE
========================== */

.custom-hero{
    margin:40px 60px;
    padding:120px 60px;
    border-radius:40px;
    text-align:center;
    background:
        linear-gradient(rgba(255,248,241,.75), rgba(255,248,241,.75)),
        url("../assets/textures/scrapbook-paper.png");
    background-size:cover;
    background-position:center;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.custom-hero h1{
    font-family:'Caveat', cursive;
    font-size:5rem;
    color:#444;
    margin:20px auto;
    line-height:1;
}

.custom-hero p{
    max-width:750px;
    margin:0 auto 35px;
    line-height:1.9;
    color:#555;
    font-size:1.1rem;
}

.custom-hero-btn{
    display:inline-block;
    padding:18px 35px;
    border-radius:50px;
    background:#d46d8c;
    color:white;
    font-weight:900;
}

.how-it-works-section,
.custom-gallery-section,
.custom-form-preview,
.custom-journey-section{
    margin:60px;
    padding:80px 60px;
    border-radius:35px;
    background:
        linear-gradient(rgba(255,248,241,.82), rgba(255,248,241,.82)),
        url("../assets/best-sellers/best-sellers-background.png");
    background-size:cover;
    background-position:center;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:50px;
}

.process-card{
    background:white;
    padding:35px 25px;
    border-radius:25px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.process-card span{
    font-size:3rem;
}

.process-card h3{
    margin:20px 0 10px;
    color:#444;
}

.process-card p{
    color:#666;
    line-height:1.7;
}

/* Simple request form */

.journey-form-card{
    max-width:850px;
    margin:50px auto 0;
    background:white;
    padding:45px;
    border-radius:30px;
    box-shadow:0 12px 30px rgba(0,0,0,.10);
}

.simple-request-form label{
    display:block;
    font-weight:900;
    color:#444;
    margin:20px 0 10px;
}

.simple-request-form input,
.simple-request-form textarea{
    width:100%;
    padding:16px;
    border-radius:14px;
    border:1px solid #ddd;
    font-size:1rem;
}

.simple-request-form textarea{
    min-height:180px;
    line-height:1.7;
}

.contact-field{
    display:none;
}

.choice-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.choice-grid label{
    background:#fff8f1;
    padding:18px;
    border-radius:18px;
    cursor:pointer;
    font-weight:900;
    box-shadow:0 8px 18px rgba(0,0,0,.06);
}

.simple-submit-btn{
    width:100%;
    margin-top:30px;
    padding:18px;
    border:none;
    border-radius:50px;
    background:#d46d8c;
    color:white;
    font-weight:900;
    cursor:pointer;
}

.journey-success{
    display:none;
    text-align:center;
    padding:40px;
}

.journey-success h3{
    font-family:'Caveat', cursive;
    font-size:3rem;
    color:#444;
}

/* ==========================
   FAQ
========================== */

.faq-section{
    margin:60px;
    padding:80px 60px;
    border-radius:35px;
    background:
        linear-gradient(rgba(255,248,241,.82), rgba(255,248,241,.82)),
        url("../assets/best-sellers/best-sellers-background.png");
    background-size:cover;
    background-position:center;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.faq-list{
    max-width:900px;
    margin:50px auto 0;
}

.faq-item{
    background:white;
    border-radius:20px;
    margin-bottom:18px;
    box-shadow:0 8px 20px rgba(0,0,0,.07);
    overflow:hidden;
}

.faq-question{
    width:100%;
    border:none;
    background:white;
    padding:24px 28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:900;
    font-size:1.05rem;
    color:#444;
    cursor:pointer;
}

.faq-question span{
    font-size:1.8rem;
    color:#d46d8c;
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}

.faq-answer p{
    padding:0 28px 25px;
    color:#666;
    line-height:1.8;
}

.faq-item.active .faq-answer{
    max-height:260px;
}

.faq-item.active .faq-question span{
    transform:rotate(45deg);
}

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

@media(max-width:900px){
    #main-header{
        position:absolute;
        top:20px;
        flex-direction:column;
        gap:15px;
    }

    .logo-container img{
        width:210px;
    }

    #main-header nav,
    .page-header nav{
        gap:20px;
        padding:15px 22px;
        flex-wrap:wrap;
    }

    .hero-image-section{
        padding-top:170px;
    }

    .collection-grid,
    .custom-preview-gallery,
    .process-grid,
    .clean-product-layout,
    .product-page,
    .preview-order-section,
    .featured-jewelry-card,
    .featured-category-card{
        grid-template-columns:1fr;
    }

    .collections,
    .best-sellers-section,
    .social-section,
    .custom-creations-preview,
    .reviews-section,
    .all-items-section,
    .jewelry-page-section,
    .category-feature-section,
    .custom-hero,
    .how-it-works-section,
    .custom-gallery-section,
    .custom-form-preview,
    .custom-journey-section,
    .faq-section{
        margin:35px 20px;
        padding:55px 25px;
    }

    .collections{
        margin:0;
        padding:70px 25px;
    }

    .collection-card img{
        height:auto;
    }

    .best-sellers-title h2,
    .shop-section-title h2,
    .custom-preview-text h2,
    .reviews-title h2,
    .custom-hero h1{
        font-size:3.3rem;
    }

    .related-products-grid .shop-product-card{
        flex:0 0 100%;
        width:100%;
    }

    .all-items-section .shop-product-grid{
        grid-template-columns:1fr;
    }

    .category-slider-card{
        flex:0 0 100%;
    }

    .category-slide-btn{
        display:none;
    }

    .clean-custom-cta{
        flex-direction:column;
        text-align:center;
    }

    .review-page{
        flex-direction:column;
        align-items:center;
    }
}

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

.transition-header{
    position:fixed;
    top:25px;
    left:50%;
    z-index:9999;

    width:90%;
    max-width:1200px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translate(-50%, -20px);
    transition:opacity .45s ease,
               visibility .45s ease,
               transform .45s ease;

    margin-bottom:0;
}

.transition-header.show-header{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%, 0);
}

.transition-logo{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:20px;
}

.transition-logo img{
    width:240px;
    height:auto;
    display:block;
}

.transition-nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;

    background:rgba(255,248,241,.95);
    padding:18px 40px;
    border-radius:50px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.transition-nav a{
    text-decoration:none;
    color:#2b2b2b;
    font-weight:800;
    font-size:1.05rem;
}

.product-tagline{
    text-align:center;
    color:#666;
    font-size:.95rem;
    line-height:1.5;
    margin:10px 0 0;
}

.view-product-btn{
    display:block;
    width:100%;
    margin-top:18px;
    padding:14px;
    background:#d46d8c;
    color:white;
    text-align:center;
    font-weight:900;
    border-radius:12px;
    transition:.3s ease;
}

.shop-product-card:hover .view-product-btn{
    background:#bf5f7d;
}

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

.footer-credit{
    text-align:center;
    margin-top:45px;
    padding-top:25px;
    border-top:1px solid rgba(255,255,255,.20);
}

.footer-credit p{
    color:white;
    font-size:.95rem;
    letter-spacing:.4px;
}

.footer-credit strong{
    color:#f4c86a;
    font-weight:900;
}

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

.product-details{
    margin-top:35px;
    padding-top:25px;
    border-top:1px solid #ececec;
}

.product-details h3{
    margin-bottom:18px;
    font-size:1.3rem;
    color:#2b2b2b;
}

.product-details ul{
    list-style:none;
    padding:0;
    margin:0;
}

.product-details li{
    margin-bottom:14px;
    line-height:1.7;
    color:#555;
}

.product-details strong{
    color:#222;
}

/* ==========================
   PRODUCT PREVIEW SPACING FIX
========================== */

.live-preview-box{
    padding:55px 50px !important;
}

.live-preview-box h2{
    margin-bottom:25px !important;
}

.live-preview-box p{
    margin-bottom:25px !important;
}

.live-preview-box input{
    margin-bottom:35px !important;
}

.preview-controls h3{
    margin-top:26px !important;
    margin-bottom:14px !important;
}

.font-options,
.color-options,
.chain-options{
    margin-bottom:28px !important;
}

.chain-line{
    margin-top:45px !important;
    margin-bottom:35px !important;
}

.name-preview{
    padding-top:25px !important;
}

.main-product-image img{
    height:560px;
    object-fit:cover;
}

.thumbnail-gallery{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:14px;
    margin-top:18px;
}

.product-thumbnail{
    width:100%;
    height:95px;
    object-fit:cover;
    border-radius:12px;
    cursor:pointer;
    border:3px solid transparent;
    opacity:.75;
    transition:.25s ease;
}

.product-thumbnail:hover,
.product-thumbnail.active{
    opacity:1;
    border-color:#d46d8c;
    transform:translateY(-3px);
}

/* PRODUCT GALLERY SLIDER */

.product-page{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:start;
}

.product-gallery{
    width:100%;
}

.main-product-image img{
    width:100%;
    height:560px;
    object-fit:cover;
    border-radius:14px;
}

.thumbnail-slider{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:18px;
}

.thumbnail-window{
    overflow:hidden;
    width:100%;
}

.thumbnail-track{
    display:flex;
    gap:14px;
    transition:.35s ease;
}

.product-thumbnail{
    flex:0 0 calc((100% - 56px) / 5);
    height:95px;
    object-fit:cover;
    border-radius:12px;
    cursor:pointer;
    border:3px solid transparent;
    opacity:.75;
    transition:.25s ease;
}

.product-thumbnail:hover,
.product-thumbnail.active{
    opacity:1;
    border-color:#d46d8c;
    transform:translateY(-3px);
}

.gallery-arrow{
    width:42px;
    height:42px;
    border-radius:50%;
    border:none;
    background:white;
    color:#d46d8c;
    font-size:2rem;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 8px 18px rgba(0,0,0,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.25s ease;
    flex-shrink:0;
}

.gallery-arrow:hover{
    background:#d46d8c;
    color:white;
}

.earring-preview-pair{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:50px;
}

.earring-preview{
    width:45%;
    text-align:center;
}

.earring-hook{
    width:42px;
    height:42px;
    border:5px solid #d4af37;
    border-radius:50%;
    margin:0 auto 18px;
    background:white;
    position:relative;
}

.earring-hook::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-35px;
    transform:translateX(-50%);
    width:5px;
    height:35px;
    background:#d4af37;
    border-radius:20px;
}

.earring-preview .name-preview{
    margin-top:40px;
    min-height:120px;
    border:3px solid currentColor;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2.2rem;
}

.main-product-image img{
    transition:opacity .25s ease;
}

.main-product-image img.image-changing{
    opacity:.25;
}

.gallery-arrow.disabled{
    opacity:.35;
    cursor:not-allowed;
    pointer-events:none;
}

/* Personalized necklace name field */

.osc-custom-name-field{
    margin:25px 0 20px;
}

.osc-custom-name-field label{
    display:block;
    margin-bottom:8px;
    font-weight:800;
    color:#2b2b2b;
}

.osc-custom-name-field abbr{
    color:#d46d8c;
    text-decoration:none;
}

.osc-custom-name-field input{
    width:100%;
    max-width:520px;
    padding:15px 16px;
    border:1px solid #d8c8cf;
    border-radius:10px;
    background:#fff;
    font-size:1rem;
}

.osc-custom-name-field input:focus{
    border-color:#d46d8c;
    outline:none;
    box-shadow:0 0 0 3px rgba(212,109,140,.15);
}

/* =====================================
   WOOCOMMERCE NECKLACE LIVE PREVIEW
===================================== */

.osc-necklace-preview{
    width:100%;
    margin:30px 0 25px;
}

.osc-necklace-preview .live-preview-box{
    width:100%;
    padding:35px;
    background:#fff8f1;
    border-radius:24px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.osc-necklace-preview .live-preview-box h2{
    margin:0 0 10px;
    font-family:'Caveat', cursive;
    font-size:2.7rem;
    line-height:1.1;
    color:#444;
}

.osc-necklace-preview .live-preview-box > p{
    margin-bottom:25px;
    color:#555;
}

.osc-necklace-preview .necklace-preview-card{
    padding:35px 20px;
    border-radius:18px;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.9),
            rgba(247,217,227,.75)
        );
    overflow:hidden;
}

.osc-necklace-preview .chain-line{
    width:70%;
    height:4px;
    margin:0 auto 24px;
    border-radius:50px;
    background:#d4af37;
}

.osc-necklace-preview .name-preview{
    margin:0;
    padding:20px 10px;
    font-family:'Caveat', cursive;
    font-size:4rem;
    line-height:1;
    text-align:center;
    color:#d4af37;
    overflow-wrap:anywhere;
    text-shadow:0 3px 8px rgba(0,0,0,.15);
}

.osc-preview-note{
    margin:18px 0 0 !important;
    font-size:.85rem;
    font-style:italic;
    color:#777 !important;
}

@media(max-width:700px){
    .osc-necklace-preview .live-preview-box{
        padding:25px 20px;
    }

    .osc-necklace-preview .name-preview{
        font-size:3rem;
    }
}

/* Necklace font selector */

.osc-font-controls{
    margin:28px 0 24px;
}

.osc-font-controls h3{
    margin-bottom:14px;
    color:#444;
}

.osc-font-controls .font-options{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.osc-font-controls .font-choice{
    border:none;
    background:white;
    padding:12px 18px;
    border-radius:14px;
    cursor:pointer;
    font-weight:900;
    box-shadow:0 5px 14px rgba(0,0,0,.08);
}

.osc-font-controls .font-choice.active{
    outline:3px solid #d46d8c;
    outline-offset:3px;
}

/* Necklace chain color selector */

.osc-chain-controls{
    margin:28px 0 24px;
}

.osc-chain-controls h3{
    margin-bottom:14px;
    color:#444;
}

.osc-chain-controls .chain-options{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.osc-chain-controls .chain-choice{
    border:none;
    background:white;
    padding:12px 22px;
    border-radius:14px;
    cursor:pointer;
    font-weight:900;
    box-shadow:0 5px 14px rgba(0,0,0,.08);
}

.osc-chain-controls .chain-choice.active{
    outline:3px solid #d46d8c;
    outline-offset:3px;
}

/* =====================================
   REALISTIC NECKLACE PREVIEW
===================================== */

.osc-necklace-preview .necklace-preview-card{
    position:relative;
    min-height:330px;
    padding:35px 30px 45px;
    border-radius:22px;
    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.96) 0%,
            rgba(255,244,248,.93) 55%,
            rgba(247,217,227,.9) 100%
        );
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    overflow:hidden;
}

.osc-necklace-preview .necklace-preview-card::before{
    content:"";
    position:absolute;
    inset:16px;
    border:1px solid rgba(212,109,140,.15);
    border-radius:16px;
    pointer-events:none;
}

/* Curved necklace chain */

.necklace-chain-wrap{
    position:relative;
    width:82%;
    height:125px;
    display:flex;
    justify-content:center;
}

.osc-necklace-preview .chain-line{
    width:100%;
    height:115px;
    margin:0;
    background:transparent !important;
    border:4px solid #d4af37;
    border-top:0;
    border-radius:0 0 50% 50%;
    transition:border-color .3s ease;
}

/* Small connector between chain and name piece */

.necklace-connector{
    position:absolute;
    left:50%;
    bottom:-8px;
    width:16px;
    height:16px;
    transform:translateX(-50%);
    border:4px solid #d4af37;
    border-radius:50%;
    background:#fff8f1;
    transition:border-color .3s ease;
}

/* Name-piece layout */

.name-piece-wrap{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    max-width:100%;
    margin-top:10px;
}

.osc-necklace-preview .name-preview{
    margin:0;
    padding:15px 18px;
    max-width:100%;
    min-width:180px;

    font-family:'Caveat', cursive;
    font-size:4.2rem;
    font-weight:700;
    line-height:1;
    text-align:center;
    color:#d4af37;

    overflow-wrap:anywhere;
    word-break:break-word;

    text-shadow:
        0 2px 0 rgba(255,255,255,.75),
        0 4px 8px rgba(0,0,0,.18);

    filter:drop-shadow(0 4px 4px rgba(0,0,0,.12));
    transition:
        color .3s ease,
        font-family .3s ease,
        transform .3s ease;
}

.name-piece-ring{
    width:16px;
    height:16px;
    flex:0 0 16px;
    border:4px solid #d4af37;
    border-radius:50%;
    background:#fff8f1;
    transition:border-color .3s ease;
}

.left-ring{
    margin-right:-7px;
}

.right-ring{
    margin-left:-7px;
}

@media(max-width:700px){
    .osc-necklace-preview .necklace-preview-card{
        min-height:280px;
        padding:28px 15px 35px;
    }

    .necklace-chain-wrap{
        width:92%;
        height:105px;
    }

    .osc-necklace-preview .chain-line{
        height:95px;
    }

    .osc-necklace-preview .name-preview{
        min-width:130px;
        padding:12px 10px;
        font-size:3rem;
    }
}