/* ==========================================
   PETTY'S CARE
   PRODUCT DETAIL PAGE
========================================== */

body.product-detail-page{
    margin:0;
    background:#f8f6f1;
    color:#444;
    font-family:Arial, Helvetica, sans-serif;
}

/* ---------- Header ---------- */

.product-page-header{

    background:white;

    text-align:center;

    padding:35px 20px;

    border-bottom:1px solid #ece6d8;
}

.product-brand{

    text-decoration:none;

    color:#556B2F;

    font-size:2rem;

    font-weight:bold;

    letter-spacing:2px;
}

.product-brand-tagline{

    color:#888;

    margin-top:10px;

    font-style:italic;
}

.product-page-nav{

    margin-top:20px;
}

.product-page-nav a{

    text-decoration:none;

    color:#555;

    margin:0 15px;

    font-weight:bold;

    transition:.3s;
}

.product-page-nav a:hover{

    color:#556B2F;
}
/* ---------- Container ---------- */

.product-detail-container{

    width:90%;

    max-width:1300px;

    margin:60px auto;
}

/* ---------- Main Product ---------- */

.product-main{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    margin-bottom:70px;
}

.product-image-frame{

    background:white;

    border-radius:18px;

    padding:40px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.product-detail-image{

    width:100%;

    display:block;
}
.product-small-label{

    color:#8c8c8c;

    letter-spacing:2px;

    font-size:.8rem;

    margin-bottom:8px;
}

.product-detail-title{

    font-size:3rem;

    margin:0;

    color:#556B2F;
}

.product-rating{

    margin:20px 0;

    color:#c8a84b;

    font-size:1.1rem;
}

.product-rating small{

    color:#777;

    margin-left:10px;
}

.product-detail-description{

    font-size:1.1rem;

    line-height:1.8;

    color:#555;
}

.product-detail-price{

    font-size:2rem;

    font-weight:bold;

    color:#556B2F;

    margin:30px 0;
}
.product-quick-details{

    background:white;

    padding:25px;

    border-radius:15px;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

    margin-bottom:35px;
}

.product-quick-details p{

    margin:12px 0;
}
.product-actions{

    display:flex;

    gap:20px;

    flex-wrap:wrap;
}

.product-primary-button{

    background:#556B2F;

    color:white;

    padding:15px 35px;

    border-radius:30px;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;
}

.product-primary-button:hover{

    background:#6d8441;
}

.product-secondary-button{

    border:2px solid #556B2F;

    color:#556B2F;

    padding:15px 35px;

    border-radius:30px;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;
}

.product-secondary-button:hover{

    background:#556B2F;

    color:white;
}
/* ---------- Ingredients and Benefits ---------- */

.product-information-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin-bottom:70px;
}

.product-info-card{
    background:#ffffff;
    border-radius:18px;
    padding:35px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.product-card-heading{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:30px;
}

.product-card-icon{
    font-size:2rem;
}

.product-card-label{
    margin:0 0 5px;
    font-size:.75rem;
    letter-spacing:2px;
    color:#999;
}

.product-card-heading h2{
    margin:0;
    color:#556B2F;
    font-size:2rem;
}

.product-feature-list{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.product-feature-item{
    display:flex;
    gap:15px;
    align-items:flex-start;
}

.product-feature-item > span{
    font-size:1.6rem;
}

.product-feature-item h3{
    margin:0 0 6px;
    color:#4d5f2d;
}

.product-feature-item p{
    margin:0;
    line-height:1.6;
    color:#666;
}

.product-benefit-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.product-benefit-item{
    display:flex;
    gap:12px;
    align-items:flex-start;
}

.product-benefit-item span{
    width:26px;
    height:26px;
    border-radius:50%;
    background:#eef2e5;
    color:#556B2F;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    flex-shrink:0;
}

.product-benefit-item p{
    margin:3px 0 0;
    color:#555;
}

.product-perfect-for{
    margin-top:35px;
    padding-top:25px;
    border-top:1px solid #ece6d8;
}

.product-perfect-for h3{
    color:#556B2F;
    margin-bottom:15px;
}

.product-tag-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.product-tag-list span{
    background:#f2efe7;
    color:#556B2F;
    padding:9px 14px;
    border-radius:20px;
    font-size:.9rem;
    font-weight:bold;
}/* ---------- How to Use ---------- */

.product-use-section{
    background:#ffffff;
    border-radius:18px;
    padding:45px;
    margin-bottom:60px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.product-use-heading{
    text-align:center;
    margin-bottom:35px;
}

.product-use-heading p{
    margin:0 0 8px;
    color:#999;
    letter-spacing:2px;
    font-size:.75rem;
}

.product-use-heading h2{
    margin:0;
    color:#556B2F;
    font-size:2.2rem;
}

.product-use-steps{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:25px;
}

.product-use-step{
    text-align:center;
    padding:20px;
}

.product-use-step span{
    display:inline-flex;
    width:48px;
    height:48px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#556B2F;
    color:white;
    font-weight:bold;
    margin-bottom:15px;
}

.product-use-step h3{
    margin:0 0 10px;
    color:#4d5f2d;
}

.product-use-step p{
    margin:0;
    color:#666;
    line-height:1.6;
}
/* ---------- Care Message ---------- */

.product-care-message{
    text-align:center;
    background:#e9eadf;
    border-radius:18px;
    padding:55px 30px;
    margin-bottom:70px;
}

.product-care-message > p:first-child{
    letter-spacing:2px;
    font-size:.75rem;
    color:#7d8668;
    margin-bottom:12px;
}

.product-care-message h2{
    color:#556B2F;
    font-size:2rem;
    margin:0 auto 18px;
    max-width:700px;
}

.product-care-message > p:last-child{
    color:#666;
    line-height:1.7;
    max-width:700px;
    margin:0 auto;
}

.product-page-footer{
    text-align:center;
    padding:30px 20px;
    background:#ffffff;
    border-top:1px solid #ece6d8;
    color:#777;
}
/* ---------- Responsive ---------- */

@media (max-width: 900px){

    .product-main,
    .product-information-grid{
        grid-template-columns:1fr;
    }

    .product-main{
        gap:35px;
    }

    .product-use-steps{
        grid-template-columns:1fr 1fr;
    }

    .product-detail-title{
        font-size:2.4rem;
    }
}

@media (max-width: 600px){

    .product-detail-container{
        width:92%;
        margin:35px auto;
    }

    .product-page-nav a{
        display:inline-block;
        margin:6px 8px;
    }

    .product-image-frame,
    .product-info-card,
    .product-use-section{
        padding:25px;
    }

    .product-use-steps{
        grid-template-columns:1fr;
    }

    .product-actions{
        flex-direction:column;
    }

    .product-primary-button,
    .product-secondary-button{
        text-align:center;
    }

    .product-detail-title{
        font-size:2rem;
    }
}
/* ================================
   CHOOSE YOUR BAR
================================ */

.product-size-form {
    margin-top: 24px;
}

.product-size-heading {
    margin-bottom: 14px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #2f3a22;
}

.product-size-card {
    position: relative;
    display: block;
    margin-bottom: 14px;
    padding: 18px;
    border: 2px solid #d8ddcf;
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.product-size-card:hover {
    border-color: #87956d;
    box-shadow: 0 8px 20px rgba(47, 58, 34, 0.10);
    transform: translateY(-1px);
}

.product-size-card.selected {
    border-color: #556b2f;
    background: #f8faf4;
    box-shadow: 0 8px 22px rgba(85, 107, 47, 0.16);
}

.product-size-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.product-size-card-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.product-size-name {
    font-size: 1.08rem;
    font-weight: 700;
    color: #2f3a22;
}

.product-size-weight {
    font-size: 0.92rem;
    color: #6c7167;
}

.product-size-regular-price {
    font-size: 0.92rem;
    color: #8a8a8a;
    text-decoration: line-through;
}

.product-size-price {
    font-size: 1.35rem;
    font-weight: 800;
    color: #556b2f;
}

.product-size-description {
    margin-top: 3px;
    font-size: 0.9rem;
    color: #5f6559;
}

.product-size-badge {
    align-self: flex-start;
    margin-bottom: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #556b2f;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.product-size-card.selected::after {
    content: "✓";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #556b2f;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
}

@media (max-width: 600px) {
    .product-size-card {
        padding: 16px;
    }

    .product-size-name {
        padding-right: 32px;
    }
}