:root{
    /* fallback only if master variables are missing */
    --theme-primary: #007bff;
    --theme-secondary: #6c757d;
    --theme-success: #28a745;
    --theme-danger: #dc3545;
    --theme-dark: #2c3e50;
    --theme-bg-light: #f8f9fa;
    --theme-border: #dee2e6;
    --theme-text-primary: #2c3e50;
    --theme-text-secondary: #6c757d;
    --theme-text-muted: #6c757d;
}

/* page base */
.main-details-page{
    background: var(--theme-bg-light);
    padding-top: 14px;
    padding-bottom: 20px;
    color: var(--theme-text-primary);
}

/* premium card */
.pdp-card{
    background:#fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
}

/* title */
.pdp-title{
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 6px;
    color: var(--theme-text-primary);
}
@media (min-width: 992px){
    .pdp-title{ font-size: 26px; }
}

/* breadcrumb */
.pdp-breadcrumb{
    font-size: 13px;
    color: var(--theme-text-muted);
}
.pdp-breadcrumb a{
    color: var(--theme-text-primary);
    text-decoration:none;
}
.pdp-breadcrumb a:hover{ text-decoration:underline; }

/* price */
.pdp-price{
    display:flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 8px;
}
.pdp-price .new{
    font-size: 24px;
    font-weight: 900;
    color: var(--theme-text-primary);
}
.pdp-price .old{
    font-size: 15px;
    color: var(--theme-text-muted);
}

/* badges */
.pdp-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    background: color-mix(in srgb, var(--theme-primary) 12%, #ffffff);
    color: var(--theme-primary);
    border: 1px solid color-mix(in srgb, var(--theme-primary) 25%, #ffffff);
}

/* rating */
.pdp-rating{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top: 8px;
    flex-wrap:wrap;
}
.pdp-rating .stars i{ color:#f59e0b; }
.pdp-rating .meta{
    color: var(--theme-text-muted);
    font-size: 13px;
}
.pdp-rating a{
    font-size: 13px;
    text-decoration:none;
    color: var(--theme-secondary);
    font-weight: 600;
}
.pdp-rating a:hover{ text-decoration:underline; }

/* gallery */
.pdp-gallery{
    overflow:hidden;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.06);
}
.pdp-gallery img{
    width:100%;
    display:block;
    border-radius: 14px;
}

/* thumbs */
.pdp-thumbs{
    display:flex;
    gap:10px;
    overflow:auto;
    padding: 10px 2px 2px;
}
.pdp-thumb{
    width:64px;
    height:64px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.10);
    overflow:hidden;
    flex: 0 0 auto;
    cursor:pointer;
    background:#fff;
}
.pdp-thumb img{
    width:100%;
    height:100%;
    object-fit: cover;
}

/* info chips */
.pdp-info-row{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top: 10px;
    color: var(--theme-text-primary);
    font-size: 13px;
}
.pdp-info-row .item{
    display:flex;
    align-items:center;
    gap:8px;
    background: #f9fafb;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    padding: 8px 10px;
}
.pdp-info-row .item i{
    color: var(--theme-secondary);
}

/* variations */
.pdp-variation{ margin-top: 12px; }
.pdp-variation .label{
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--theme-text-primary);
}
.pdp-chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.pdp-chip{ position: relative; }
.pdp-chip input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.pdp-chip label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border: 1px solid rgba(0,0,0,.12);
    padding: 9px 12px;
    border-radius: 999px;
    cursor:pointer;
    user-select:none;
    background:#fff;
    font-size: 13px;
    font-weight: 700;
}
.pdp-chip input:checked + label{
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 18%, #ffffff);
}
.pdp-color-dot{
    width:14px;
    height:14px;
    border-radius:999px;
    border: 1px solid rgba(0,0,0,.18);
}

/* qty */
.pdp-qty{
    display:flex;
    align-items:center;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 12px;
    overflow:hidden;
    width: 140px;
}
.pdp-qty button{
    width:42px;
    height:42px;
    border:0;
    background:#f9fafb;
    font-weight:900;
    color: var(--theme-text-primary);
}
.pdp-qty input{
    border:0;
    width:56px;
    text-align:center;
    height:42px;
    outline:none;
}

/* buttons */
.pdp-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top: 12px;
}
.pdp-actions .btn{
    border-radius: 12px;
    padding: 11px 14px;
    font-weight: 900;
}

/* primary button */
.btn-brand{
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color:#fff;
}
.btn-brand:hover{
    filter: brightness(.95);
    color:#fff;
}

/* outline secondary */
.btn-outline-brand{
    border-color: var(--theme-secondary);
    color: var(--theme-secondary);
    background: transparent;
}
.btn-outline-brand:hover{
    background: color-mix(in srgb, var(--theme-secondary) 10%, #ffffff);
}

/* sticky buy box */
.pdp-sticky{
    position: sticky;
    top: 12px;
}

/* section title */
.pdp-section-title{
    font-weight: 900;
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--theme-text-primary);
}

/* mobile sticky bottom CTA */
.pdp-mobile-bar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background:#fff;
    border-top: 1px solid rgba(0,0,0,.10);
    padding: 10px 12px;
    z-index: 999;
    display:flex;
    gap:10px;
}
.pdp-mobile-bar .btn{
    border-radius: 12px;
    font-weight: 900;
    padding: 12px 14px;
}
@media (min-width: 992px){
    .pdp-mobile-bar{ display:none; }
}

/* improve bootstrap accordion for premium look */
.accordion-button{
    font-weight: 800;
    color: var(--theme-text-primary);
}
.accordion-button:not(.collapsed){
    background: color-mix(in srgb, var(--theme-primary) 10%, #ffffff);
    color: var(--theme-text-primary);
}
.accordion-item{
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    overflow:hidden;
    margin-bottom: 10px;
}
.accordion-item:last-child{ margin-bottom: 0; }

/* small tweaks for images inside description content */
.accordion-body img,
.accordion-body iframe,
.accordion-body video{
    max-width: 100%;
    height: auto;
}