/* =========================================================
   Vimal Pets World — Product Detail Page
   Reuses existing design tokens from style.css:
   --navy:#071A3D  --blue:#00B4D8  --gold:#d4af37
   Card style: #fff, radius 18px, soft shadow (matches .product-card)
   Primary button: #0f3d91 (matches .product-card button)
   ========================================================= */

/* ---------- Page sheet ----------
   Your site's body background is a dark navy gradient (see style.css).
   Everything below sits on a white "sheet", the same way .product-card
   is a white card floating on that dark background elsewhere on the site. */
.pd-page{
    max-width:1400px;
    margin:20px auto 60px;
    background:#fff;
    border-radius:24px;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
    padding-bottom:30px;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb-bar{
    padding:24px 30px 0;
    font-size:14px;
    color:#64748b;
}
.breadcrumb-bar a{
    color:#0f3d91;
    text-decoration:none;
}
.breadcrumb-bar a:hover{ text-decoration:underline; }
.breadcrumb-bar .sep{ margin:0 6px; color:#94a3b8; }
.breadcrumb-bar .current{ color:#0f172a; font-weight:600; }

/* ---------- Not found ---------- */
.pd-not-found{
    max-width:600px;
    margin:0 auto;
    text-align:center;
    padding:80px 20px;
}
.pd-not-found h1{ font-size:32px; color:#0f172a; margin-bottom:12px; }
.pd-not-found p{ color:#64748b; margin-bottom:24px; }

/* ---------- Layout ---------- */
.pd-wrap{
    margin:20px 0 0;
    padding:0 30px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:start;
}

/* ---------- Gallery ---------- */
.pd-gallery{ position:relative; }
.pd-main-image-wrap{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    background:#f1f5f9;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    aspect-ratio:1/1;
}
.pd-main-image-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    cursor:zoom-in;
    display:block;
}
.pd-nav-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(15,23,42,.55);
    color:#fff;
    border:none;
    width:38px;
    height:38px;
    border-radius:50%;
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s;
}
.pd-nav-btn:hover{ background:rgba(15,23,42,.85); }
.pd-nav-btn.prev{ left:12px; }
.pd-nav-btn.next{ right:12px; }
.pd-zoom-hint{
    position:absolute;
    bottom:12px;
    right:12px;
    background:rgba(15,23,42,.55);
    color:#fff;
    font-size:12px;
    padding:5px 10px;
    border-radius:20px;
    pointer-events:none;
}
.pd-thumbs{
    display:flex;
    gap:10px;
    margin-top:14px;
    flex-wrap:wrap;
}
.pd-thumb{
    width:70px;
    height:70px;
    border-radius:10px;
    overflow:hidden;
    cursor:pointer;
    border:2px solid transparent;
    flex-shrink:0;
    background:#f1f5f9;
}
.pd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-thumb.active{ border-color:#0f3d91; }
.pd-gallery-missing-note{
    margin-top:12px;
    font-size:13px;
    color:#b45309;
    background:#fffbeb;
    border:1px solid #fde68a;
    padding:10px 14px;
    border-radius:10px;
}

/* ---------- Info panel ---------- */
.pd-info{ padding-top:4px; }
.pd-category-tag{
    display:inline-block;
    background:#e0f2fe;
    color:#0369a1;
    font-size:13px;
    font-weight:600;
    padding:4px 12px;
    border-radius:20px;
    margin-bottom:12px;
}
.pd-title{
    font-size:34px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:8px;
    line-height:1.2;
}
.pd-subline{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:center;
    color:#64748b;
    font-size:14px;
    margin-bottom:16px;
}
.pd-rating{ display:flex; align-items:center; gap:6px; }
.pd-rating .stars{ color:#d4af37; letter-spacing:1px; }
.pd-sku{ color:#94a3b8; }

.pd-price-row{
    display:flex;
    align-items:baseline;
    gap:12px;
    margin-bottom:6px;
}
.pd-price{
    font-size:32px;
    font-weight:700;
    color:#0f3d91;
}
.pd-price-note{ font-size:14px; color:#64748b; }
.pd-availability{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}
.pd-availability.available{ color:#15803d; }
.pd-availability.unavailable{ color:#b91c1c; }
.pd-availability.contact{ color:#b45309; }
.pd-availability .dot{
    width:8px; height:8px; border-radius:50%; background:currentColor;
}

.pd-seller-box{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:14px 18px;
    margin-bottom:20px;
    font-size:14px;
    color:#334155;
    display:flex;
    flex-wrap:wrap;
    gap:6px 24px;
}
.pd-seller-box strong{ color:#0f172a; }

.pd-short-desc{
    color:#334155;
    line-height:1.7;
    margin-bottom:22px;
}

/* Quantity selector */
.pd-qty-row{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:20px;
}
.pd-qty-box{
    display:flex;
    align-items:center;
    gap:0;
    border:1px solid #e2e8f0;
    border-radius:10px;
    overflow:hidden;
}
.pd-qty-box button{
    width:38px;
    height:38px;
    border:none;
    background:#f1f5f9;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    color:#0f172a;
}
.pd-qty-box button:hover{ background:#e2e8f0; }
.pd-qty-box span{
    width:44px;
    text-align:center;
    font-weight:600;
    font-size:15px;
}
.pd-qty-note{ font-size:13px; color:#94a3b8; }

/* Action buttons */
.pd-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:22px;
}
.pd-btn{
    flex:1 1 160px;
    padding:16px 20px;
    border-radius:12px;
    border:none;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
    text-align:center;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.pd-btn-cart{ background:#0f3d91; color:#fff; }
.pd-btn-cart:hover{ background:#1d4ed8; }
.pd-btn-buy{ background:#00b4d8; color:#fff; }
.pd-btn-buy:hover{ background:#0096c7; }
.pd-btn-cart:disabled,
.pd-btn-buy:disabled{
    background:#cbd5e1;
    color:#64748b;
    cursor:not-allowed;
}
.pd-btn-icon{
    flex:0 0 auto;
    width:52px;
    height:52px;
    padding:0;
    border-radius:12px;
    border:1px solid #e2e8f0;
    background:#fff;
    font-size:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.2s;
}
.pd-btn-icon:hover{ background:#f1f5f9; }
.pd-btn-icon.active{ color:#e63950; border-color:#fde8ea; background:#fde8ea; }
.pd-toast{
    position:fixed;
    bottom:30px;
    left:50%;
    transform:translateX(-50%) translateY(20px);
    background:#0f172a;
    color:#fff;
    padding:14px 22px;
    border-radius:10px;
    font-size:14px;
    opacity:0;
    pointer-events:none;
    transition:.3s;
    z-index:10000;
}
.pd-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* Delivery / pickup box */
.pd-delivery-box{
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:18px 20px;
    margin-bottom:10px;
}
.pd-delivery-box h4{
    font-size:15px;
    color:#0f172a;
    margin-bottom:10px;
    display:flex;
    align-items:center;
    gap:8px;
}
.pd-delivery-row{
    display:flex;
    gap:10px;
    font-size:14px;
    color:#334155;
    margin-bottom:6px;
    align-items:flex-start;
}
.pd-delivery-row .ico{ flex-shrink:0; }
.pd-delivery-row .muted{ color:#94a3b8; font-style:italic; }

/* ---------- Tabs / details ---------- */
.pd-details{
    margin:50px 0 0;
    padding:0 30px;
}
.pd-tabs{
    display:flex;
    gap:6px;
    border-bottom:1px solid #e2e8f0;
    margin-bottom:26px;
    flex-wrap:wrap;
}
.pd-tab-btn{
    padding:12px 20px;
    border:none;
    background:none;
    font-size:15px;
    font-weight:600;
    color:#64748b;
    cursor:pointer;
    border-bottom:3px solid transparent;
    margin-bottom:-1px;
}
.pd-tab-btn.active{ color:#0f3d91; border-bottom-color:#0f3d91; }
.pd-tab-panel{ display:none; }
.pd-tab-panel.active{ display:block; }

.pd-desc-block{ max-width:820px; color:#334155; line-height:1.8; }
.pd-desc-block h4{ color:#0f172a; margin:22px 0 10px; font-size:17px; }
.pd-desc-block ul{ padding-left:20px; margin-bottom:10px; }
.pd-desc-block li{ margin-bottom:6px; }

.pd-spec-table{
    width:100%;
    max-width:820px;
    border-collapse:collapse;
}
.pd-spec-table tr{ border-bottom:1px solid #f1f5f9; }
.pd-spec-table td{ padding:12px 10px; font-size:14.5px; vertical-align:top; }
.pd-spec-table td:first-child{
    width:220px;
    color:#64748b;
    font-weight:600;
}
.pd-spec-table td.not-provided{ color:#94a3b8; font-style:italic; }

/* ---------- Reviews ---------- */
.pd-reviews{
    margin:50px 0 0;
    padding:0 30px;
}
.pd-section-title{
    font-size:26px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:20px;
}
.pd-rating-summary{
    display:flex;
    gap:30px;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:24px;
    padding:20px;
    background:#f8fafc;
    border-radius:14px;
}
.pd-rating-big{ font-size:44px; font-weight:700; color:#0f172a; }
.pd-rating-stars{ color:#d4af37; font-size:18px; }
.pd-bar-row{ display:flex; align-items:center; gap:8px; font-size:13px; color:#64748b; margin-bottom:4px; }
.pd-bar-track{ width:160px; height:8px; background:#e2e8f0; border-radius:6px; overflow:hidden; }
.pd-bar-fill{ height:100%; background:#d4af37; }
.pd-no-reviews{
    text-align:center;
    padding:40px 20px;
    color:#64748b;
    background:#f8fafc;
    border-radius:14px;
}
.pd-review-card{
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:18px 20px;
    margin-bottom:14px;
}
.pd-review-head{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:8px;
}
.pd-review-name{ font-weight:700; color:#0f172a; }
.pd-verified-badge{
    font-size:12px;
    background:#dcfce7;
    color:#15803d;
    padding:2px 8px;
    border-radius:10px;
    margin-left:8px;
}
.pd-review-date{ color:#94a3b8; font-size:13px; }
.pd-review-stars{ color:#d4af37; }

/* ---------- Related ---------- */
/* Note: the reused .products grid (site-wide class) already sets its own
   max-width/margin/padding, so this wrapper only styles the heading above it. */
.pd-related{
    margin-bottom:40px;
}
.pd-related .pd-section-title{
    max-width:1400px;
    margin:60px auto 0;
    padding:0 30px;
}
.pd-related .products{
    margin-top:20px;
}

@media (max-width: 900px){
    .pd-page{ margin:10px 10px 40px; border-radius:16px; }
    .pd-wrap{
        grid-template-columns:1fr;
        gap:24px;
        padding:0 18px;
    }
    .breadcrumb-bar{ padding:18px 18px 0; }
    .pd-title{ font-size:26px; }
    .pd-price{ font-size:26px; }
    .pd-details, .pd-reviews{ padding:0 18px; }
    .pd-related .pd-section-title, .pd-related .products{ padding:0 18px; }
    .pd-actions{ position:sticky; bottom:0; background:#fff; padding:12px 0 6px; margin-bottom:6px; z-index:50; }
    .pd-btn{ flex:1 1 45%; padding:14px 12px; font-size:14.5px; }
}

@media (max-width: 480px){
    .pd-main-image-wrap{ border-radius:14px; }
    .pd-thumb{ width:56px; height:56px; }
    .pd-spec-table td:first-child{ width:140px; }
}