:root {
        --primary:       #b0121f; 
        --primary-light: #e81616;
        --primary-dark:  #000000;
        --secondary:     #6c757d;
        --success:       #28a745;
        --info:          #17a2b8;
        --warning:       #ffc107;
        --danger:        #dc3545;
        --bg-light:      #f8f9fa;
        --bg-white:      #ffffff;
        --bg-dark:       #1e1e2f;
        --text:          #1e1e2f;
        --text-soft:     #6c757d;
        --text-muted:    #8f8fa1;
        --border:        #e9ecef;
        --border-dark:   #dee2e6;
        --shadow-sm:     0 2px 8px rgba(0,0,0,0.05);
        --shadow-lg:     0 5px 20px rgba(0,0,0,0.1);
        --font-family:   'Inter', sans-serif;
        --r:             16px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    body { 
        background: var(--bg-light); 
        font-family: var(--font-family); 
        color: var(--text); 
        line-height: 1.5;
    }

    /* ── Page ── */
    .pd-page { padding: 0 48px 88px; }

    /* ── Breadcrumb ── */
    .pd-breadcrumb {
        display: flex; align-items: center; gap: 8px;
        font-size: 12px; color: var(--text-soft);
        padding: 24px 0 32px;
    }
    .pd-breadcrumb a { color: var(--text-soft); text-decoration: none; transition: color .2s; }
    .pd-breadcrumb a:hover { color: var(--primary); }
    .pd-breadcrumb-sep { color: var(--border-dark); font-size: 14px; }
    .pd-breadcrumb-current { color: var(--text); font-weight: 600; }

    /* ── Main layout ── */
    .pd-main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 64px;
        align-items: start;
    }

    /* ══════════════════════════
       LEFT — Image Panel
    ══════════════════════════ */
    .pd-gallery { position: sticky; top: 90px; }

    .pd-img-stage {
        position: relative;
        background: var(--bg-white);
        border-radius: 12px;
        border: 1px solid var(--border);
        overflow: hidden;
        box-shadow: var(--shadow-lg);
        aspect-ratio: 1/1;
        display: flex; align-items: center; justify-content: center;
    }
    /* Primary color brackets */
    .pd-img-stage::before,
    .pd-img-stage::after {
        content: '';
        position: absolute;
        width: 40px; height: 40px;
        border-color: var(--primary);
        border-style: solid;
        z-index: 2;
        pointer-events: none;
        opacity: 0.3;
        transition: opacity .3s;
    }
    .pd-img-stage::before { top: 14px; left: 14px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
    .pd-img-stage::after  { bottom: 14px; right: 14px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }
    .pd-img-stage:hover::before,
    .pd-img-stage:hover::after { opacity: 1; }

    .pd-img {
        width: 82%; height: 82%;
        object-fit: contain;
        display: block;
        transition: transform .6s cubic-bezier(.4,0,.2,1);
    }
    .pd-img-stage:hover .pd-img { transform: scale(1.04); }

    /* Badges on image - Admin style */
    .pd-img-badges {
        position: absolute; top: 16px; left: 16px;
        display: flex; flex-direction: column; gap: 6px; z-index: 3;
    }
    .pd-badge-sale {
        background: var(--primary); color: #fff;
        font-size: 10px; font-weight: 700;
        letter-spacing: .06em; padding: 4px 11px;
        border-radius: 100px; text-transform: uppercase;
        box-shadow: 0 2px 8px rgba(75,73,172,.35);
    }
    .pd-badge-hot {
        background: var(--warning); color: #1e1e2f;
        font-size: 10px; font-weight: 700;
        padding: 4px 11px; border-radius: 100px;
    }

    /* Zoom hint */
    .pd-zoom-hint {
        position: absolute; bottom: 16px; right: 16px;
        display: flex; align-items: center; gap: 5px;
        font-size: 10px; font-weight: 500; letter-spacing: .07em;
        text-transform: uppercase; color: var(--text-soft);
        opacity: 0; transition: opacity .25s;
        pointer-events: none;
    }
    .pd-zoom-hint svg { width: 13px; height: 13px; }
    .pd-img-stage:hover .pd-zoom-hint { opacity: 1; }

    /* ══════════════════════════
       RIGHT — Product Info
    ══════════════════════════ */
    .pd-info { display: flex; flex-direction: column; gap: 0; }

    /* Eyebrow */
    .pd-eyebrow {
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 11px; font-weight: 600;
        letter-spacing: .16em; text-transform: uppercase;
        color: var(--primary); margin-bottom: 12px;
    }
    .pd-eyebrow::before {
        content: ''; display: block;
        width: 24px; height: 1px; background: var(--primary);
    }

    /* Title */
    .pd-title {
        font-family: var(--font-family);
        font-size: clamp(26px, 3.5vw, 42px);
        font-weight: 700; line-height: 1.18;
        letter-spacing: -.02em; color: var(--text);
        margin: 0 0 20px;
    }

    /* Divider */
    .pd-rule {
        height: 1px;
        background: linear-gradient(90deg, var(--primary) 0%, rgba(75,73,172,.15) 50%, transparent 100%);
        margin: 0 0 24px;
    }

    /* Price block */
    .pd-price-block { margin-bottom: 24px; }
    .pd-price-now {
        font-family: var(--font-family);
        font-size: 36px; font-weight: 700;
        color: var(--primary-dark); display: block; line-height: 1;
    }
    .pd-price-original {
        display: flex; align-items: center; gap: 10px; margin-top: 6px;
    }
    .pd-price-was { font-size: 15px; color: var(--text-soft); }
    .pd-save-badge {
        display: inline-flex; align-items: center;
        background: #e8f5e9; color: var(--success);
        font-size: 11px; font-weight: 600;
        padding: 3px 10px; border-radius: 100px;
        border: 1px solid rgba(40,167,69,.15);
    }

    /* Stock - Admin style badges */
    .pd-stock { margin-bottom: 28px; }
    .pd-stock-pill {
        display: inline-flex; align-items: center; gap: 7px;
        font-size: 12.5px; font-weight: 500;
        padding: 7px 16px; border-radius: 100px;
        border: 1px solid var(--border);
        background: var(--bg-white);
    }
    .pd-stock-dot {
        width: 7px; height: 7px; border-radius: 50%;
    }
    .pd-stock-dot--in  { background: var(--success); box-shadow: 0 0 0 3px rgba(40,167,69,.15); }
    .pd-stock-dot--low { background: var(--warning); box-shadow: 0 0 0 3px rgba(255,193,7,.15); }
    .pd-stock-dot--out { background: var(--danger); box-shadow: 0 0 0 3px rgba(220,53,69,.15); }

    /* Description */
    .pd-desc-block { margin-bottom: 28px; }
    .pd-desc-label {
        font-family: var(--font-family);
        font-size: 14px; font-weight: 600;
        color: var(--text); margin-bottom: 10px;
        display: flex; align-items: center; gap: 8px;
    }
    .pd-desc-label::after {
        content: ''; flex: 1; height: 1px; background: var(--border);
    }
    .pd-desc-text {
        font-size: 14px; font-weight: 400; line-height: 1.75;
        color: var(--text-soft); margin: 0;
    }

    /* ===== Specifications Section - Admin Style ===== */
    .pd-specs-block { 
        margin-bottom: 28px; 
        background: var(--bg-white);
        border-radius: 12px;
        border: 1px solid var(--border);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }
    .pd-specs-header {
        background: linear-gradient(90deg, rgba(75,73,172,.05) 0%, transparent 100%);
        padding: 16px 20px;
        border-bottom: 1px solid var(--border);
    }
    .pd-specs-title {
        font-family: var(--font-family);
        font-size: 16px;
        font-weight: 600;
        color: var(--primary);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .pd-specs-title svg {
        width: 18px;
        height: 18px;
        color: var(--primary);
    }
    .pd-specs-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
        background: var(--border);
    }
    .pd-spec-item {
        display: contents;
    }
    .pd-spec-key, .pd-spec-value {
        padding: 14px 20px;
        background: var(--bg-white);
        font-size: 14px;
        line-height: 1.5;
    }
    .pd-spec-key {
        font-weight: 600;
        color: var(--text);
        background: #faf9ff; /* Light purple tint */
    }
    .pd-spec-value {
        color: var(--text-soft);
        background: var(--bg-white);
    }
    /* Style for single column when only one spec */
    .pd-specs-single {
        display: flex;
        flex-direction: column;
    }
    .pd-specs-single .pd-spec-item {
        display: flex;
        border-bottom: 1px solid var(--border);
    }
    .pd-specs-single .pd-spec-item:last-child {
        border-bottom: none;
    }
    .pd-specs-single .pd-spec-key {
        width: 40%;
        background: #faf9ff;
        font-weight: 600;
    }
    .pd-specs-single .pd-spec-value {
        width: 60%;
    }

    /* Meta chips - Admin style */
    .pd-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
    .pd-meta-chip {
        display: inline-flex; align-items: center; gap: 6px;
        background: var(--bg-white);
        border: 1px solid var(--border);
        border-radius: 6px; padding: 7px 14px;
        font-size: 12px; font-weight: 400; color: var(--text-soft);
        transition: all .2s;
    }
    .pd-meta-chip svg { width: 13px; height: 13px; color: var(--primary); }
    .pd-meta-chip strong { color: var(--primary); font-weight: 600; }
    .pd-meta-chip:hover {
        border-color: var(--primary);
        background: rgba(75,73,172,.02);
    }

    /* CTA - Admin style buttons */
    .pd-cta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

    .pd-btn-primary {
        display: inline-flex; align-items: center; justify-content: center; gap: 9px;
        flex: 1; min-width: 180px;
        padding: 15px 28px;
        background: var(--primary); color: #fff;
        text-decoration: none; border: none; border-radius: 8px;
        font-family: var(--font-family); font-size: 14px; font-weight: 500;
        cursor: pointer; letter-spacing: .03em;
        transition: background .25s, gap .2s, transform .2s, box-shadow .2s;
        box-shadow: 0 2px 5px rgba(75,73,172,.3);
    }
    .pd-btn-primary svg { width: 16px; height: 16px; transition: transform .2s; }
    .pd-btn-primary:hover { 
        background: var(--primary-dark); 
        gap: 13px; 
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(75,73,172,.4);
    }
    .pd-btn-primary:hover svg { transform: translateX(2px); }
    .pd-btn-primary:disabled,
    .pd-btn-primary[disabled] {
        background: var(--secondary); 
        cursor: not-allowed; 
        transform: none;
        box-shadow: none;
        pointer-events: none;
    }

    .pd-btn-wish {
        width: 52px; height: 52px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        background: var(--bg-white);
        border: 1.5px solid var(--border);
        border-radius: 8px; cursor: pointer; color: var(--text-soft);
        transition: background .2s, border-color .2s, color .2s, transform .2s;
    }
    .pd-btn-wish svg { width: 19px; height: 19px; }
    .pd-btn-wish:hover { 
        background: rgba(75,73,172,.05); 
        border-color: var(--primary); 
        color: var(--primary); 
        transform: scale(1.05); 
    }

    /* Trust row - Admin style */
    .pd-trust {
        display: flex; flex-wrap: wrap; gap: 16px;
        margin-top: 28px; padding-top: 24px;
        border-top: 1px solid var(--border);
    }
    .pd-trust-item {
        display: flex; align-items: center; gap: 7px;
        font-size: 11.5px; color: var(--text-muted);
    }
    .pd-trust-item svg { width: 15px; height: 15px; color: var(--primary); }

    /* Admin style table for extra details */
    .pd-details-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 24px;
    }
    .pd-details-table td {
        padding: 10px 16px;
        border: 1px solid var(--border);
        font-size: 14px;
    }
    .pd-details-table td:first-child {
        background: #faf9ff;
        font-weight: 600;
        color: var(--primary);
        width: 35%;
    }
    .pd-details-table td:last-child {
        color: var(--text-soft);
    }

    /* ── Responsive ── */
    @media (max-width: 960px) {
        .pd-page { padding: 0 24px 64px; }
        .pd-main { grid-template-columns: 1fr; gap: 36px; }
        .pd-gallery { position: static; }
        .pd-img-stage { max-width: 480px; margin: 0 auto; }
        .pd-title { font-size: 28px; }
    }
    @media (max-width: 768px) {
        .pd-specs-grid {
            grid-template-columns: 1fr;
        }
        .pd-spec-key, .pd-spec-value {
            padding: 12px 16px;
        }
        .pd-details-table td {
            display: block;
            width: 100%;
        }
        .pd-details-table td:first-child {
            width: 100%;
            border-bottom: none;
        }
    }
    @media (max-width: 540px) {
        .pd-page { padding: 0 16px 48px; }
        .pd-price-now { font-size: 28px; }
        .pd-btn-primary { min-width: 140px; }
        .pd-trust { gap: 12px; }
        .pd-spec-key, .pd-spec-value {
            padding: 10px 14px;
            font-size: 13px;
        }
    }

    /* Additional Admin-style elements */
    .badge-admin {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
    }
    .badge-primary { background: var(--primary); color: white; }
    .badge-success { background: var(--success); color: white; }
    .badge-warning { background: var(--warning); color: #1e1e2f; }
    .badge-danger { background: var(--danger); color: white; }