/* ==========================================================
   BabyChoice Nappies
   PRODUCT DETAIL PAGE CSS
========================================================== */


/* ==========================================================
   PRODUCT DETAIL LAYOUT
========================================================== */


.pd-layout {

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:start;

}



/* ==========================================================
   BREADCRUMB
========================================================== */


.breadcrumb {

display:flex;

align-items:center;

gap:8px;

flex-wrap:wrap;

font-size:14px;

color:var(--ink-soft);

margin-bottom:20px;

}



.breadcrumb a:hover {

color:var(--pink-deep);

}



.breadcrumb .current {

font-weight:700;

color:var(--ink);

}



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


.gallery-main {


height:450px;


background:#FFF3F6;


border-radius:var(--radius-lg);


display:flex;


align-items:center;


justify-content:center;


overflow:hidden;


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


}



.gallery-main img {


width:100%;


height:100%;


object-fit:contain;


}



.gallery-thumbs {


display:flex;


gap:12px;


flex-wrap:wrap;


margin-top:18px;


}



.gallery-thumb {


width:80px;


height:80px;


border-radius:var(--radius-sm);


overflow:hidden;


cursor:pointer;


border:2px solid transparent;


background:white;


opacity:.7;


transition:.25s ease;


}



.gallery-thumb:hover {


opacity:1;


}



.gallery-thumb.active {


border-color:var(--pink-deep);


opacity:1;


}



.gallery-thumb img {


width:100%;


height:100%;


object-fit:cover;


}



/* ==========================================================
   PRODUCT INFORMATION
========================================================== */


.pd-info h1 {


font-size:42px;


margin-bottom:15px;


}



.pd-description {


font-size:16px;


color:var(--ink-soft);


margin-bottom:25px;


}



/* ==========================================================
   PACK SIZE SELECTOR
========================================================== */


.pack-pills {


display:flex;


flex-wrap:wrap;


gap:12px;


}



.pack-pill {


background:white;


border:2px solid #F1E0E6;


border-radius:var(--radius-sm);


padding:12px 18px;


cursor:pointer;


min-width:100px;


text-align:center;


transition:.25s ease;


}



.pack-pill:hover {


border-color:var(--pink-deep);


}



.pack-pill.selected {


background:#FFF3F6;


border-color:var(--pink-deep);


}



.pp-count {


font-family:'Baloo 2',cursive;


font-weight:800;


font-size:17px;


}



.pp-price {


font-size:13px;


color:var(--ink-soft);


}



/* ==========================================================
   QUANTITY CONTROL
========================================================== */


.qty-stepper {


display:inline-flex;


align-items:center;


border:2px solid #F1E0E6;


border-radius:var(--radius-sm);


overflow:hidden;


}



.qty-stepper button {


width:42px;


height:42px;


border:none;


background:#FFF6F9;


font-size:20px;


font-weight:700;


color:var(--pink-deep);


}



.qty-stepper button:hover {


background:var(--pink);


}



.qty-value {


width:50px;


text-align:center;


font-weight:800;


}



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


.pd-total-row {


display:flex;


align-items:center;


gap:10px;


margin:25px 0;


}



.pd-total-amount {


font-family:'Baloo 2',cursive;


font-size:30px;


font-weight:800;


color:var(--pink-deep);


}



/* ==========================================================
   STOCK
========================================================== */


.stock-note {


font-size:14px;


font-weight:700;


margin-top:8px;


}



.stock-note.in-stock {


color:var(--success);


}



.stock-note.low-stock {


color:var(--warning);


}



/* ==========================================================
   TRUST BADGES
========================================================== */


.trust-badges {


display:flex;


flex-wrap:wrap;


gap:20px;


margin:25px 0;


}



.trust-badge {


display:flex;


align-items:center;


gap:8px;


font-size:14px;


font-weight:700;


color:var(--ink-soft);


}



.tb-icon {


font-size:20px;


}



/* ==========================================================
   RESPONSIVE
========================================================== */


@media(max-width:900px){


.pd-layout {


grid-template-columns:1fr;


gap:35px;


}



.pd-info h1 {


font-size:34px;


}



.gallery-main {


height:320px;


}


}