/**

 * Dream PC Builder - Premium Gaming UI Styles

 * Clean ecommerce layout + futuristic RGB gaming details

 */



/* Orbitron — futuristic heading type (matches the reference) */
@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/orbitron.woff2) format('woff2');
}

/* ============================================

   ROOT VARIABLES

   ============================================ */

/* Design tokens are declared on :root AND on the builder/hub wrappers
   themselves so theme-level overrides (e.g. body.page-id-* { --dpb-*: ...
   !important }) can never re-tint the builder via inheritance. Modals are
   also included because the hub modals render OUTSIDE the #dpb-builder-hub
   wrapper and would otherwise inherit the page's light tokens. */
:root,
#dream-pc-builder,
.dream-pc-modal,
#dpb-builder-hub {

    /* --- Dark RGB page theme (mirrors the Dream PC reference design) --- */

    --dpb-bg-primary: #16063A;

    --dpb-bg-secondary: #1E0B4A;

    --dpb-bg-card: rgba(255, 255, 255, 0.05);

    --dpb-bg-card-solid: #1C0436;

    --dpb-bg-modal: #1C0436;

    --dpb-bg-overlay: rgba(5, 2, 16, 0.72);

    --dpb-rgb-1: #ff1744;

    --dpb-rgb-2: #ff8a00;

    --dpb-rgb-3: #ffe600;

    --dpb-rgb-4: #c084fc;

    --dpb-rgb-5: #6947ff;

    --dpb-rgb-6: #d629ff;

    --dpb-rgb-text: linear-gradient(90deg, #00d9ff, #6947ff, #d629ff, #ff1744, #ff8a00, #00d9ff);

    --dpb-color-primary: #C084FC;

    --dpb-color-secondary: #D629FF;

    --dpb-color-primary-hover: #22E2FF;

    --dpb-color-primary-light: #7C9CFF;

    --dpb-color-primary-gradient: linear-gradient(100deg, #8b3dff 0%, #f02b9b 82%);

    --dpb-color-heading-text: #F8FAFC;

    --dpb-color-body-text: #CBD5E1;

    --dpb-color-muted-text: #8B93AD;

    --dpb-color-button-text: #FFFFFF;

    --dpb-color-link-text: #C084FC;

    --dpb-color-border: rgba(192, 132, 252, 0.22);

    --dpb-color-border-light: rgba(255, 255, 255, 0.09);

    --dpb-color-border-solid: #3A2D6B;

    --dpb-color-input-border: rgba(196, 181, 253, 0.35);

    --dpb-color-error: #FF4D6D;

    --dpb-color-success: #49E698;

    --dpb-color-warning: #F59E0B;

    --dpb-radius-sm: 8px;

    --dpb-radius-md: 12px;

    --dpb-radius-lg: 16px;

    --dpb-radius-xl: 24px;

    --dpb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);

    --dpb-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.3);

    --dpb-shadow-lg: 0 12px 32px rgba(192, 132, 252, 0.08), 0 4px 12px rgba(0, 0, 0, 0.35);

    --dpb-shadow-xl: 0 24px 48px rgba(192, 132, 252, 0.12), 0 8px 24px rgba(0, 0, 0, 0.45);

    --dpb-glow: 0 0 20px rgba(192, 132, 252, 0.18);

    --dpb-glow-strong: 0 0 30px rgba(212, 41, 255, 0.25);

    --dpb-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --dpb-font-headings: 'Orbitron', 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --dpb-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    --dpb-rgb-border: linear-gradient(135deg, #c084fc, #6947ff, #d629ff, #f02b9b);

    --dpb-rgb-size: 300%;

}



/* ============================================

   CSS RESET FOR BUILDER TO PREVENT THEME CONFLICTS

   ============================================ */

.dream-pc-builder-wrapper input,

.dream-pc-builder-wrapper button,

.dream-pc-builder-wrapper select,

.dream-pc-builder-wrapper textarea {

    font-family: var(--dpb-font-family) !important;

    box-sizing: border-box !important;

    line-height: normal !important;

}

.dream-pc-builder-wrapper input[type="number"] {

    appearance: none !important;

    -moz-appearance: textfield !important;

}

.dream-pc-builder-wrapper input[type="number"]::-webkit-outer-spin-button,

.dream-pc-builder-wrapper input[type="number"]::-webkit-inner-spin-button {

    -webkit-appearance: none !important;

    margin: 0 !important;

}



/* ============================================

   RGB NEON BORDER SYSTEM

   Animated gradient border using a CSS mask.

   White (light) card interior kept intact.

   ============================================ */

.dpb-rgb-border {

    position: relative;

    z-index: 0;

    border: 1px solid rgba(184, 77, 255, 0.25);

}



/* Animated RGB gradient ring via :before pseudo-element */

.dpb-rgb-border::before {

    content: '';

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    bottom: -2px;

    border-radius: inherit;

    padding: 1px;

    background: var(--dpb-rgb-border);

    background-size: var(--dpb-rgb-size) var(--dpb-rgb-size);

    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    mask-composite: exclude;

    pointer-events: none;

    z-index: -1;

    opacity: 0.5;

    animation: dpbRGBFlow 8s linear infinite;

    transition: opacity 0.25s ease;

}



.dpb-rgb-border:hover::before {

    opacity: 1;

}



@keyframes dpbRGBFlow {

    0% { background-position: 0% 0%; }

    100% { background-position: 300% 300%; }

}



/* ============================================

   MAIN WRAPPER

   ============================================ */

.dream-pc-builder-wrapper {

    font-family: var(--dpb-font-family);

    color: var(--dpb-color-body-text);

    line-height: 1.6;

    background: linear-gradient(180deg, #10012A 0%, #10012A 40%, #160335 55%, #1C0436 70%, #1C0436 100%);

    min-height: 100vh;

    padding: 0 0 140px;

    margin: 0 auto;

    position: relative;

    overflow: hidden;

}



/* ============================================

   AMBIENT GLOW

   ============================================ */

.dpb-ambient-glow {

    position: absolute;

    top: 320px;

    left: -120px;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(122, 44, 255, 0.08) 0%, rgba(155, 92, 255, 0.03) 40%, transparent 70%);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

}



.dpb-ambient-glow--right {

    left: auto;

    right: -180px;

    top: 360px;

    width: 600px;

    height: 600px;

    background: radial-gradient(circle, rgba(155, 92, 255, 0.06) 0%, rgba(122, 44, 255, 0.02) 40%, transparent 70%);

}



/* Subtle futuristic gradient spots beneath the content areas */

.dream-pc-builder-wrapper::after {

    content: '';

    position: absolute;

    bottom: -160px;

    left: 30%;

    width: 520px;

    height: 520px;

    background: radial-gradient(circle, rgba(192, 132, 252, 0.05) 0%, rgba(184, 77, 255, 0.03) 35%, transparent 70%);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

}



/* ============================================

   PREMIUM PAGE HEADER

   ============================================ */

.dpb-builder-header {

    text-align: center;

    padding: 64px 24px 76px;

    position: relative;

    z-index: 1;

    margin-bottom: 0;

    background: transparent;

    overflow: hidden;

}



/* Neon circuit lighting inside the hero.
   Continuous motherboard traces built from SVG paths layering a soft
   bloom, an inner glow and a bright core. The whole layer breathes and
   light pulses travel along the traces. Fades out before the light
   area of the banner so there is never a hard separation line. */
.dpb-hero-neon {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    animation: dpb-neon-breathe 9s ease-in-out infinite;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.45) 76%, rgba(0, 0, 0, 0) 94%);
    mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.45) 76%, rgba(0, 0, 0, 0) 94%);
}

.dpb-neon-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.dpb-neon-pass {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Secondary traces render behind the main system, dimmer */
.dpb-neon-secondary {
    stroke: url(#dpbNeonFade);
    stroke-width: 1.2;
    opacity: 0.3;
    filter: blur(0.6px);
}

/* Soft bloom: wide blurred pass diffuses light into the background */
.dpb-neon-bloom {
    stroke: url(#dpbNeonFade);
    stroke-width: 11;
    opacity: 0.6;
    filter: blur(7px);
}

/* Mid glow: the neon halo around the core */
.dpb-neon-glow {
    stroke: url(#dpbNeonFade);
    stroke-width: 3.8;
    opacity: 0.65;
    filter: blur(1.4px);
}

/* Bright core line */
.dpb-neon-core {
    stroke: url(#dpbNeonGrad);
    stroke-width: 1.5;
    opacity: 0.5;
}

/* Junction pads at trace terminations */
.dpb-neon-nodes {
    opacity: 0.55;
}

/* Light travelling along the traces */
.dpb-neon-travel {
    stroke: url(#dpbNeonGrad);
    stroke-width: 2.2;
    opacity: 0.9;
    stroke-dasharray: 7 290;
    animation: dpb-neon-flow 9s linear infinite;
}

@keyframes dpb-neon-flow {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -300; }
}

@keyframes dpb-neon-breathe {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* DREAM PC HERO — animated background layer (mirrors the dph-hero
   design language: grid, drifting glows, sheen, dashed orbits, side
   lines and floating particles). Sits behind the badge/title and fades
   out before the light section of the banner. */
.dpb-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, 0.4) 80%, transparent 96%);
    mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, 0.4) 80%, transparent 96%);
}

.dpb-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(196, 181, 253, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(196, 181, 253, .06) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 78%);
    mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 78%);
}

.dpb-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}

.dpb-hero-glow-1 {
    width: 560px;
    height: 560px;
    left: -200px;
    top: 6%;
    background: rgba(139, 61, 255, .2);
    animation: dpbHeroDriftA 14s ease-in-out infinite alternate;
}

.dpb-hero-glow-2 {
    width: 620px;
    height: 620px;
    right: -220px;
    bottom: -40px;
    background: rgba(240, 43, 155, .16);
    animation: dpbHeroDriftB 18s ease-in-out infinite alternate;
}

@keyframes dpbHeroDriftA {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(50px, 36px) scale(1.12); }
}

@keyframes dpbHeroDriftB {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-46px, -34px) scale(1.08); }
}

.dpb-hero-sheen {
    position: absolute;
    top: -60%;
    left: -30%;
    width: 60%;
    height: 220%;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .03) 50%, transparent 60%);
    transform: rotate(18deg);
    animation: dpbHeroSheen 16s ease-in-out infinite;
}

@keyframes dpbHeroSheen {
    0%, 55% { transform: translateX(-140%) rotate(18deg); }
    85%, 100% { transform: translateX(320%) rotate(18deg); }
}

.dpb-hero-orbit {
    position: absolute;
    border: 1px dashed rgba(192, 132, 252, .16);
    border-radius: 50%;
}

.dpb-hero-orbit-a {
    width: 640px;
    height: 640px;
    left: -260px;
    top: -260px;
    animation: dpbHeroSpin 80s linear infinite;
}

.dpb-hero-orbit-b {
    width: 520px;
    height: 520px;
    right: -220px;
    top: 30%;
    animation: dpbHeroSpin 100s linear infinite reverse;
}

@keyframes dpbHeroSpin {
    to { transform: rotate(360deg); }
}

.dpb-hero-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(192, 132, 252, .5), transparent);
    opacity: .5;
}

.dpb-hero-line-left {
    width: 300px;
    left: 0;
    top: 18%;
    background: linear-gradient(90deg, transparent, rgba(255, 23, 68, .5), transparent);
}

.dpb-hero-line-right {
    width: 360px;
    right: 0;
    bottom: 22%;
    background: linear-gradient(90deg, transparent, rgba(212, 41, 255, .5), transparent);
}

.dpb-hero-particles i {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(190, 140, 255, .55);
    animation: dpbHeroFloat ease-in-out infinite;
}

@keyframes dpbHeroFloat {
    0%, 100% { transform: translateY(0); opacity: .15; }
    50% { transform: translateY(-20px); opacity: .75; }
}

@media (prefers-reduced-motion: reduce) {
    .dpb-hero-neon,
    .dpb-neon-travel {
        animation: none;
    }
    .dpb-hero-glow,
    .dpb-hero-sheen,
    .dpb-hero-orbit,
    .dpb-hero-line,
    .dpb-hero-particles i {
        animation: none !important;
    }
    .btn-add-component,
    .btn-primary,
    .btn-view-product,
    .btn-select-component,
    .btn-overlay {
        animation: none !important;
        background-size: 100% 100% !important;
        background-position: 0 0 !important;
    }
}

/* Ambient aurora inside the dark banner */

.dpb-builder-header::after {

    content: '';

    position: absolute;

    top: -100px;

    left: -120px;

    width: 340px;

    height: 340px;

    background: radial-gradient(circle, rgba(192, 132, 252, 0.28) 0%, rgba(212, 41, 255, 0.1) 45%, transparent 70%);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

}



/* Back-to-Hub link (top-left of the builder banner). Its href resolves
   dynamically from the admin-configured Builder Hub page
   (dpb_resolve_hub_url), with shortcode auto-detection fallback. */

.dpb-builder-hub-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 26px;
    padding: 7px 16px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(232, 226, 255, 0.25);
    color: rgba(232, 226, 255, 0.9);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    z-index: 2;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.dpb-builder-hub-link:hover {
    border-color: rgba(192, 132, 252, 0.6);
    color: #fff;
    box-shadow: 0 0 16px rgba(192, 132, 252, 0.35);
}

@media (max-width: 768px) {
    .dpb-builder-hub-link {
        margin-bottom: 18px;
        padding: 6px 12px;
    }
}

.dpb-header-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 18px;

    background: linear-gradient(90deg, rgba(139, 61, 255, 0.22), rgba(240, 43, 155, 0.16));

    border: 1px solid rgba(255, 255, 255, 0.3);

    border-radius: 100px;

    font-size: 12px;

    font-weight: 600;

    color: #E9E4FF;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin-bottom: 22px;

    box-shadow: 0 0 18px rgba(192, 132, 252, 0.22);

    position: relative;

    z-index: 1;

}



.dpb-header-badge svg {

    opacity: 0.9;

}



.dpb-builder-title {

    margin: 0 0 16px;

    font-family: var(--dpb-font-headings);

    font-size: 52px;

    font-weight: 900;

    color: #FFFFFF;

    letter-spacing: -0.03em;

    line-height: 1.15;

    position: relative;

    z-index: 1;

    text-shadow: 0 0 24px rgba(192, 132, 252, 0.35);

}



.dpb-gradient-text {

    background: var(--dpb-rgb-text);

    background-size: 200% auto;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    text-shadow: none;

    animation: dpb-gradient-flow 5s linear infinite;

    will-change: background-position;

    filter: none;

    transition: filter 0.3s ease;

}



.dpb-builder-subtitle {

    margin: 0;

    font-size: 18px;

    font-weight: 500;

    color: #CBD5E1;

    opacity: 0.92;

    letter-spacing: -0.01em;

    position: relative;

    z-index: 1;

    text-shadow: 0 0 16px rgba(192, 132, 252, 0.25);

}



@keyframes dpb-gradient-flow {

    0% {

        background-position: 0% center;

    }

    100% {

        background-position: 200% center;

    }

}



@keyframes rgbText {

    0% {

        background-position: 0% 50%;

    }

    100% {

        background-position: 200% 50%;

    }

}



@keyframes dpb-gradient-flow {

    0% {

        background-position: 0% center;

    }

    100% {

        background-position: 200% center;

    }

}

@media (prefers-reduced-motion: reduce) {

    .dpb-gradient-text {

        animation: none !important;

    }

}



/* ============================================

   MAIN CONTAINER

   ============================================ */

.dream-pc-builder-container {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 360px;

    gap: 28px;

    align-items: start;

    position: relative;

    z-index: auto;

    max-width: 1400px;

    margin: 0 auto;

    padding: 36px 24px 0;

}



@media (max-width: 1024px) {

    .dream-pc-builder-container {

        grid-template-columns: 1fr;

        gap: 20px;

    }

}



@media (max-width: 768px) {

    .dream-pc-builder-container {

        padding: 0 16px;

    }

}



/* ============================================

   COMPONENTS SECTION

   ============================================ */

.dream-pc-builder-components {

    background: transparent;

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

    border: none;

    box-shadow: none;

    overflow: visible;

}



.components-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px 0 14px;

    margin-bottom: 8px;

}



.components-header h2 {

    margin: 0;

    font-size: 20px;

    font-weight: 800;

    color: var(--dpb-color-heading-text);

    letter-spacing: -0.02em;

}



.btn-add-component {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 20px;

    background: linear-gradient(105deg, #8b3dff 0%, #f02b9b 100%);

    color: var(--dpb-color-button-text);

    border: none;

    border-radius: 100px;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition: var(--dpb-transition);

    box-shadow: 0 4px 16px rgba(122, 44, 255, 0.3), 0 0 10px rgba(184, 77, 255, 0.25);

    letter-spacing: -0.01em;

}



.btn-add-component:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 24px rgba(122, 44, 255, 0.42), 0 0 18px rgba(184, 77, 255, 0.35);

}



.btn-add-component:active {

    transform: translateY(0);

}



.icon-plus {

    color: currentColor;

}



.search-icon {

    position: absolute;

    right: 14px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 16px;

    color: var(--dpb-color-muted-text);

}



.components-list {

    padding: 0;

}



/* ============================================

   COMPONENT ROW - PREMIUM CARDS

   ============================================ */

.component-row {

    padding: 18px 20px;

    border-bottom: none;

    cursor: pointer;

    transition: var(--dpb-transition);

    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    background: rgba(255, 255, 255, 0.95);

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

    margin-bottom: 10px;

    border: 1px solid rgba(184, 77, 255, 0.25);

    box-shadow: 0 0 0 1px rgba(122, 44, 255, 0.05), 0 2px 8px rgba(21, 18, 38, 0.04);

    overflow: hidden;

}



.component-row:last-child {

    border-bottom: none;

    margin-bottom: 0;

}



.component-row::before {

    content: '';

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    bottom: -2px;

    border-radius: inherit;

    padding: 1px;

    background: linear-gradient(135deg, #c084fc, #6947ff, #d629ff, #f02b9b);

    background-size: 300% 300%;

    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    mask-composite: exclude;

    pointer-events: none;

    z-index: 0;

    opacity: 0.5;

    animation: dpbRGBFlow 8s linear infinite;

    transition: opacity 0.25s ease;

}



.component-row:hover {

    border-color: rgba(184, 77, 255, 0.4);

    box-shadow: var(--dpb-shadow-md), 0 0 16px rgba(122, 44, 255, 0.12);

    transform: translateY(-1px);

}



.component-row:hover::before {

    opacity: 1;

}



/* ============================================

   STACKED LAYOUT FOR MULTIPLE COMPONENTS

   ============================================ */

.component-stacked-container {

    display: flex;

    flex-direction: column;

    gap: 8px;

    padding: 18px;

    background: var(--dpb-bg-card);

    border: 1px solid rgba(184, 77, 255, 0.25);

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

    box-shadow: 0 0 0 1px rgba(122, 44, 255, 0.05), 0 2px 8px rgba(21, 18, 38, 0.04);

    position: relative;

    overflow: hidden;

}



.component-stacked-container::before {

    content: '';

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    bottom: -2px;

    border-radius: inherit;

    padding: 1px;

    background: linear-gradient(135deg, #c084fc, #6947ff, #d629ff, #f02b9b);

    background-size: 300% 300%;

    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    mask-composite: exclude;

    pointer-events: none;

    z-index: 0;

    opacity: 0.5;

    animation: dpbRGBFlow 8s linear infinite;

    transition: opacity 0.25s ease;

}



.component-stacked-container:hover::before {

    opacity: 1;

}



.component-label {

    font-size: 10px;

    font-weight: 700;

    color: var(--dpb-color-muted-text);

    text-transform: uppercase;

    letter-spacing: 0.06em;

    margin-bottom: 4px;

    padding-left: 4px;

}



.component-row.stacked-row {

    margin-bottom: 0;

    animation: dpbSlideIn 0.3s ease-out;

    background: var(--dpb-bg-primary);

    border-radius: var(--dpb-radius-md);

    border: 1px solid var(--dpb-color-border-light);

}



.component-row.stacked-row:last-of-type {

    margin-bottom: 0;

}



@keyframes dpbSlideIn {

    from { opacity: 0; transform: translateY(-10px); }

    to { opacity: 1; transform: translateY(0); }

}



@keyframes dpbSlideOut {

    from { opacity: 1; transform: translateY(0); }

    to { opacity: 0; transform: translateY(-10px); }

}



.btn-add-component-stacked {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    width: 100%;

    padding: 16px 18px;

    margin-top: 10px;

    background: rgba(255, 255, 255, 0.95);

    border: 2px dashed rgba(122, 44, 255, 0.25);

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

    box-shadow: 0 0 0 1px rgba(122, 44, 255, 0.05), 0 2px 8px rgba(21, 18, 38, 0.04);

    cursor: pointer;

    transition: var(--dpb-transition);

}



.btn-add-component-stacked:hover {

    border-color: var(--dpb-color-primary);

    border-style: solid;

    background: rgba(122, 44, 255, 0.04);

    box-shadow: var(--dpb-shadow-md), 0 0 24px rgba(122, 44, 255, 0.1);

    transform: translateY(-1px);

}



.btn-add-component-stacked .add-icon {

    width: 32px;

    height: 32px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    color: var(--dpb-color-primary);

    font-weight: 700;

    background: rgba(122, 44, 255, 0.08);

    border-radius: 10px;

}



.btn-add-component-stacked .add-text {

    font-size: 12px;

    font-weight: 700;

    color: var(--dpb-color-body-text);

    letter-spacing: 0.04em;

}



.btn-add-component-list {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    width: 100%;

    margin-top: 12px;

    padding: 16px 18px;

    background: rgba(255, 255, 255, 0.95);

    border: 2px dashed rgba(122, 44, 255, 0.25);

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

    box-shadow: 0 0 0 1px rgba(122, 44, 255, 0.05), 0 2px 8px rgba(21, 18, 38, 0.04);

    cursor: pointer;

    transition: var(--dpb-transition);

}



.btn-add-component-list:hover {

    border-color: var(--dpb-color-primary);

    border-style: solid;

    background: rgba(122, 44, 255, 0.04);

    box-shadow: var(--dpb-shadow-md), 0 0 24px rgba(122, 44, 255, 0.1);

    transform: translateY(-1px);

}



.btn-add-component-list .add-icon {

    width: 28px;

    height: 28px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    color: var(--dpb-color-primary);

    font-weight: 700;

    background: rgba(122, 44, 255, 0.08);

    border-radius: 9px;

}



.btn-add-component-list .add-text {

    font-size: 12px;

    font-weight: 700;

    color: var(--dpb-color-body-text);

    letter-spacing: 0.04em;

}



/* ============================================

   COMPONENT ICON WRAPPER

   ============================================ */

.component-icon-wrapper {

    width: 56px;

    height: 56px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 16px;

}

.component-icon-wrapper svg {

    width: 48px;

    height: 48px;

    color: var(--dpb-color-primary);

}

/* ============================================

   COMPONENT IMAGE

   ============================================ */

.component-image {

    width: 64px;

    height: 64px;

    flex-shrink: 0;

    background: linear-gradient(135deg, rgba(122, 44, 255, 0.04) 0%, rgba(155, 92, 255, 0.04) 100%);

    border-radius: var(--dpb-radius-md);

    border: 1px solid var(--dpb-color-border-light);

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    box-shadow: var(--dpb-shadow-sm);

}



.component-image img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

}



.component-image.out-of-stock img {

    filter: grayscale(100%);

    opacity: 0.5;

}

/* Fallback icon (matches the quotation document placeholder) when a product has no image */
.dpb-img-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, rgba(122, 44, 255, 0.05) 0%, rgba(155, 92, 255, 0.05) 100%);

    color: var(--dpb-color-primary);

    border: 1px dashed rgba(122, 44, 255, 0.3);

    border-radius: var(--dpb-radius-md);

    box-sizing: border-box;

}

.component-image .dpb-img-placeholder {

    border: none;

    background: transparent;

    border-radius: 0;

    color: var(--dpb-color-primary);

}

.component-image.out-of-stock .dpb-img-placeholder {

    filter: grayscale(100%);

    opacity: 0.5;

}



/* ============================================

   COMPONENT CONTENT

   ============================================ */

.component-content {

    flex: 1;

    min-width: 0;

    padding-right: 40px;

}



.component-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 4px;

}



.component-title {

    margin: 0;

    font-size: 12px;

    font-weight: 800;

    color: var(--dpb-color-primary);

    text-transform: uppercase;

    letter-spacing: 0.08em;

}



.component-arrow {

    color: var(--dpb-color-muted-text);

    font-size: 14px;

    transition: var(--dpb-transition);

    margin-left: 12px;

    opacity: 0.5;

}



.component-row:hover .component-arrow {

    color: var(--dpb-color-primary);

    transform: translateX(4px);

    opacity: 1;

}



.component-status {

    display: inline-flex;

    align-items: center;

    padding: 3px 10px;

    border-radius: 100px;

    font-size: 10px;

    font-weight: 600;

    margin-bottom: 4px;

    letter-spacing: 0.03em;

    text-transform: uppercase;

}



.component-status.not-selected {

    background: rgba(122, 44, 255, 0.06);

    color: var(--dpb-color-muted-text);

    border: 1px solid rgba(122, 44, 255, 0.1);

}



.component-info {

    margin-bottom: 2px;

}



.component-name {

    margin: 0 0 2px 0;

    font-size: 13px;

    font-weight: 600;

    color: var(--dpb-color-heading-text);

    line-height: 1.3;

    display: -webkit-box;

    -webkit-line-clamp: 1;

    line-clamp: 1;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.component-price {

    margin: 0;

    font-size: 15px;

    font-weight: 800;

    color: var(--dpb-color-primary);

    letter-spacing: -0.01em;

}



.component-action {

    margin: 0;

    font-size: 12px;

    color: var(--dpb-color-muted-text);

    font-weight: 500;

}



.component-content.out-of-stock {

    opacity: 0.55;

}



.component-content.out-of-stock .component-name,

.component-content.out-of-stock .component-price {

    color: var(--dpb-color-muted-text);

}



/* ============================================

   COMPONENT BUTTONS (Remove / Select)

   ============================================ */

.btn-remove-component {

    position: absolute;

    top: 50%;

    right: 14px;

    transform: translateY(-50%);

    padding: 8px 14px;

    background: rgba(239, 68, 68, 0.06);

    color: var(--dpb-color-error);

    border: 1px solid rgba(239, 68, 68, 0.12);

    border-radius: 100px;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: var(--dpb-transition);

    display: flex;

    align-items: center;

    gap: 6px;

    z-index: 10;

}



.btn-remove-component:hover {

    background: rgba(239, 68, 68, 0.1);

    border-color: rgba(239, 68, 68, 0.25);

    transform: translateY(-50%) scale(1.03);

}



.btn-remove-component:active {

    transform: translateY(-50%) scale(0.97);

}



.btn-remove-component .remove-icon {

    font-size: 16px;

    line-height: 1;

}



.btn-remove-component .remove-text {

    display: inline;

}



.btn-select-component {

    position: absolute;

    top: 50%;

    right: 14px;

    transform: translateY(-50%);

    padding: 8px 14px;

    background: rgba(122, 44, 255, 0.06);

    color: var(--dpb-color-primary);

    border: 1px solid rgba(122, 44, 255, 0.15);

    border-radius: 100px;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: var(--dpb-transition);

    display: flex;

    align-items: center;

    gap: 6px;

    z-index: 10;

}



.btn-select-component:hover {

    background: linear-gradient(100deg, #8b3dff, #f02b9b 82%);

    background-size: 250% 100%;

    background-position: 0% center;

    animation: dpb-btn-gradient-flow 9s ease-in-out infinite;

    color: var(--dpb-color-button-text);

    border-color: var(--dpb-color-primary);

    transform: translateY(-50%) scale(1.03);

}



.btn-select-component:active {

    transform: translateY(-50%) scale(0.97);

}



.btn-select-component .select-icon {

    font-size: 16px;

    line-height: 1;

    font-weight: bold;

}



.btn-select-component .select-text {

    display: inline;

}



/* ============================================

   QUANTITY PICKER

   ============================================ */

.component-quantity {

    display: flex;

    align-items: center;

    gap: 2px;

    padding: 6px 10px;

    border-radius: var(--dpb-radius-md);

    margin-right: 90px;

}



.qty-btn {

    width: 30px;

    height: 30px;

    border: 1px solid var(--dpb-color-border);

    background: var(--dpb-bg-card);

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

    font-size: 15px;

    font-weight: 700;

    color: var(--dpb-color-body-text);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: var(--dpb-transition);

    line-height: 1;

}



.qty-btn:hover {

    background: var(--dpb-color-primary);

    color: var(--dpb-color-button-text);

    border-color: var(--dpb-color-primary);

}



.qty-btn:active {

    transform: scale(0.92);

}



.dream-pc-builder-wrapper .qty-input {

    width: 42px !important;

    height: 30px !important;

    border: 1px solid var(--dpb-color-border) !important;

    border-radius: var(--dpb-radius-sm) !important;

    text-align: center !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    color: var(--dpb-color-heading-text) !important;

    background: var(--dpb-bg-card) !important;

    padding: 0 !important;

    appearance: none !important;

    -moz-appearance: textfield !important;

    outline: none !important;

}



.dream-pc-builder-wrapper .qty-input::-webkit-outer-spin-button,

.dream-pc-builder-wrapper .qty-input::-webkit-inner-spin-button {

    -webkit-appearance: none !important;

    margin: 0 !important;

}



.dream-pc-builder-wrapper .qty-input:focus {

    outline: none !important;

    border-color: var(--dpb-color-primary) !important;

    box-shadow: 0 0 0 3px rgba(122, 44, 255, 0.1) !important;

}



/* ============================================

   ADDITIONAL COMPONENTS

   ============================================ */

.additional-components-list {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-top: 8px;

    padding-left: 20px;

    border-left: 2px solid var(--dpb-color-border);

}



.additional-row {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 14px;

    background: var(--dpb-bg-primary);

    border-radius: var(--dpb-radius-md);

    position: relative;

    border: 1px solid var(--dpb-color-border-light);

}



.additional-image {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

}



.additional-image img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

}



.additional-info {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.additional-name {

    font-size: 12px;

    font-weight: 600;

    color: var(--dpb-color-heading-text);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.additional-price {

    font-size: 13px;

    font-weight: 700;

    color: var(--dpb-color-primary);

}



.additional-qty {

    display: flex;

    align-items: center;

    gap: 4px;

    margin-right: 32px;

}



.additional-qty .qty-btn {

    width: 24px;

    height: 24px;

    font-size: 14px;

}



.additional-qty .qty-input {

    width: 32px;

    height: 24px;

    font-size: 12px;

}



.btn-remove-additional {

    position: absolute;

    right: 10px;

    top: 50%;

    transform: translateY(-50%);

    width: 26px;

    height: 26px;

    background: rgba(239, 68, 68, 0.08);

    color: var(--dpb-color-error);

    border: 1px solid rgba(239, 68, 68, 0.12);

    border-radius: 50%;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: var(--dpb-transition);

    line-height: 1;

}



.btn-remove-additional:hover {

    background: var(--dpb-color-error);

    color: white;

    transform: translateY(-50%) scale(1.1);

}



.btn-remove-additional:active {

    transform: translateY(-50%) scale(0.95);

}



/* Stock Status */

.stock-status-warning {

    margin: 4px 0 0 0;

    font-size: 10px;

    font-weight: 600;

    color: var(--dpb-color-error);

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.additional-components-section {

    margin-top: 24px;

    padding-top: 18px;

    border-top: 2px solid var(--dpb-color-border);

}



.additional-components-title {

    font-size: 14px;

    font-weight: 700;

    color: var(--dpb-color-heading-text);

    margin-bottom: 12px;

    letter-spacing: -0.01em;

}



/* ============================================

   SIDEBAR

   ============================================ */

.dream-pc-builder-sidebar {

    display: flex;

    flex-direction: column;

    gap: 16px;

    position: sticky;

    top: 20px;

}



#dream-pc-builder .sidebar-section {

    background: var(--dpb-bg-card);

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

    border: 1px solid rgba(184, 77, 255, 0.25);

    box-shadow: 0 0 0 1px rgba(122, 44, 255, 0.05), 0 4px 16px rgba(21, 18, 38, 0.05), 0 0 18px rgba(184, 77, 255, 0.28), 0 0 36px rgba(122, 44, 255, 0.13);

    padding: 20px;

    position: relative;

    overflow: hidden;

}



#dream-pc-builder .sidebar-section::before {

    content: '';

    position: absolute;

    top: -3px;

    left: -3px;

    right: -3px;

    bottom: -3px;

    border-radius: inherit;

    padding: 2px;

    background: linear-gradient(135deg, #c084fc, #6947ff, #d629ff, #f02b9b);

    background-size: 300% 300%;

    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    mask-composite: exclude;

    pointer-events: none;

    z-index: 0;

    opacity: 0.85;

    filter: drop-shadow(0 0 7px rgba(184, 77, 255, 0.6));

    animation: dpbRGBFlow 8s linear infinite;

}



#dream-pc-builder .sidebar-section h3 {

    margin: 0 0 16px 0;

    font-size: 13px;

    font-weight: 700;

    color: var(--dpb-color-heading-text);

    letter-spacing: 0.02em;

    text-transform: uppercase;

}



/* ============================================

   BUILD SUMMARY

   ============================================ */

.summary-divider {

    height: 1px;

    background: linear-gradient(90deg, transparent 0%, var(--dpb-color-border) 50%, transparent 100%);

    margin: 14px 0;

}



#dream-pc-builder .summary-items {

    display: flex;

    flex-direction: column;

    gap: 8px;

    max-height: 280px;

    overflow-y: auto;

}



#dream-pc-builder .summary-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 12px;

    padding: 6px 0;

}



#dream-pc-builder .item-category {

    color: var(--dpb-color-muted-text);

    font-weight: 500;

}



#dream-pc-builder .item-price {

    font-weight: 700;

    color: var(--dpb-color-heading-text);

}



#dream-pc-builder .summary-total {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 16px;

    font-weight: 800;

    padding-top: 10px;

}



#dream-pc-builder .total-label {

    color: var(--dpb-color-heading-text);

    letter-spacing: -0.01em;

}



#dream-pc-builder .total-amount {

    background: linear-gradient(100deg, #8b3dff, #f02b9b 82%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    font-size: 26px;

    letter-spacing: -0.02em;

    font-weight: 900;

}



/* Stock Warning */

#dream-pc-builder .stock-warning {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 12px 14px;

    background: rgba(245, 158, 11, 0.06);

    border: 1px solid rgba(245, 158, 11, 0.15);

    border-radius: var(--dpb-radius-md);

    margin: 12px 0;

}



#dream-pc-builder .warning-icon {

    font-size: 16px;

}



#dream-pc-builder .warning-text {

    font-size: 12px;

    font-weight: 600;

    color: #92400E;

}



#dream-pc-builder .item-stock-warning {

    font-size: 10px;

    font-weight: 600;

    color: var(--dpb-color-error);

    margin-left: 4px;

}



#dream-pc-builder .summary-item.out-of-stock {

    opacity: 0.55;

}



#dream-pc-builder .summary-item.out-of-stock .item-category {

    color: var(--dpb-color-muted-text);

}



/* ============================================

   BUTTONS

   ============================================ */

.btn-primary {

    width: 100%;

    padding: 13px 20px;

    background: linear-gradient(105deg, #8b3dff 0%, #f02b9b 100%);

    color: var(--dpb-color-button-text);

    border: none;

    border-radius: var(--dpb-radius-md);

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition: var(--dpb-transition);

    margin-bottom: 10px;

    box-shadow: 0 4px 16px rgba(122, 44, 255, 0.3), 0 0 12px rgba(184, 77, 255, 0.25);

    letter-spacing: -0.01em;

}



.btn-primary:hover:not(:disabled) {

    transform: translateY(-2px);

    box-shadow: 0 6px 24px rgba(122, 44, 255, 0.4), 0 0 20px rgba(184, 77, 255, 0.35);

}



.btn-primary:active:not(:disabled) {

    transform: translateY(0);

}



.btn-primary:disabled {

    background: linear-gradient(135deg, #D1D5DB 0%, #9CA3AF 100%);

    box-shadow: none;

    cursor: not-allowed;

    opacity: 0.6;

}



/* Soft flowing purple shimmer across every purple CTA button */
.btn-add-component,
.btn-primary:not(:disabled),
.btn-view-product {

    background: linear-gradient(100deg, #8b3dff, #f02b9b 82%);

    background-size: 250% 100%;

    background-position: 0% center;

    animation: dpb-btn-gradient-flow 9s ease-in-out infinite;

    box-shadow: 0 4px 16px rgba(184, 77, 255, 0.3), 0 0 16px rgba(168, 85, 247, 0.18);

}



@keyframes dpb-btn-gradient-flow {

    0%, 100% { background-position: 0% center; }

    50% { background-position: 100% center; }

}



.btn-secondary {

    width: 100%;

    padding: 13px 20px;

    background: var(--dpb-bg-card);

    color: var(--dpb-color-primary);

    border: 1.5px solid rgba(184, 77, 255, 0.5);

    border-radius: var(--dpb-radius-md);

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition: var(--dpb-transition);

    margin-bottom: 10px;

    letter-spacing: -0.01em;

    position: relative;

    box-shadow: 0 0 0 1px rgba(122, 44, 255, 0.06);

}



.btn-secondary::before {

    content: '';

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    bottom: -2px;

    border-radius: inherit;

    padding: 1px;

    background: linear-gradient(135deg, #c084fc, #6947ff, #d629ff, #f02b9b);

    background-size: 300% 300%;

    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    mask-composite: exclude;

    pointer-events: none;

    opacity: 0.5;

    animation: dpbRGBFlow 8s linear infinite;

}



.btn-secondary:hover {

    background: rgba(122, 44, 255, 0.03);

    box-shadow: 0 4px 20px rgba(122, 44, 255, 0.2), 0 0 16px rgba(184, 77, 255, 0.25);

}



.btn-secondary:hover::before {

    opacity: 1;

}



.btn-outline {

    width: 100%;

    padding: 11px 18px;

    background: var(--dpb-bg-card);

    color: var(--dpb-color-body-text);

    border: 1px solid rgba(184, 77, 255, 0.35);

    border-radius: var(--dpb-radius-md);

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition: var(--dpb-transition);

    margin-bottom: 8px;

    letter-spacing: -0.01em;

    box-shadow: 0 0 0 1px rgba(122, 44, 255, 0.04);

}



.btn-outline:hover {

    border-color: rgba(184, 77, 255, 0.6);

    color: var(--dpb-color-primary);

    background: rgba(122, 44, 255, 0.03);

    box-shadow: 0 0 16px rgba(184, 77, 255, 0.18);

}



.btn-danger {

    width: 100%;

    padding: 13px 20px;

    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);

    color: white;

    border: none;

    border-radius: var(--dpb-radius-md);

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition: var(--dpb-transition);

    margin-bottom: 10px;

    letter-spacing: -0.01em;

    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.22), 0 0 12px rgba(239, 68, 68, 0.18);

}



.btn-danger:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 24px rgba(239, 68, 68, 0.32), 0 0 20px rgba(239, 68, 68, 0.28);

}



.btn-danger:active {

    transform: translateY(0);

}



/* Keep button text/icons vertically centered even when theme resets change
   line-height / letter-spacing (Tailwind preflight, theme form button rules). */
#dream-pc-builder .btn-primary,
#dream-pc-builder .btn-secondary,
#dream-pc-builder .btn-outline,
#dream-pc-builder .btn-danger,
#dream-pc-builder .btn-view-product,
#dpb-builder-hub .btn-primary,
#dpb-builder-hub .btn-secondary,
#dpb-builder-hub .btn-outline,
#dpb-builder-hub .btn-danger,
#dpb-builder-hub .btn-view-product,
.dream-pc-modal .btn-primary,
.dream-pc-modal .btn-secondary,
.dream-pc-modal .btn-outline,
.dream-pc-modal .btn-danger,
.dream-pc-modal .btn-view-product {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    appearance: none;

    -webkit-appearance: none;

}

#dream-pc-builder .btn-primary svg,
#dream-pc-builder .btn-secondary svg,
#dream-pc-builder .btn-outline svg,
#dream-pc-builder .btn-danger svg,
#dream-pc-builder .btn-view-product svg,
#dpb-builder-hub .btn-primary svg,
#dpb-builder-hub .btn-secondary svg,
#dpb-builder-hub .btn-outline svg,
#dpb-builder-hub .btn-danger svg,
#dpb-builder-hub .btn-view-product svg,
.dream-pc-modal .btn-primary svg,
.dream-pc-modal .btn-secondary svg,
.dream-pc-modal .btn-outline svg,
.dream-pc-modal .btn-danger svg,
.dream-pc-modal .btn-view-product svg {

    flex: 0 0 auto;

}

.action-buttons {

    display: flex;

    flex-direction: column;

}



/* ============================================

   COMPATIBILITY NOTICE

   ============================================ */

#dream-pc-builder .compatibility-notice {

    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);

    border: 1px solid rgba(245, 158, 11, 0.3);

    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.08), 0 0 24px rgba(245, 158, 11, 0.08);

}



#dream-pc-builder .compatibility-notice::before {

    opacity: 0.35;

    animation-duration: 12s;

}



#dream-pc-builder .compatibility-notice h3 {

    color: #92400E;

    font-size: 14px;

}



#dream-pc-builder .notice-text,

#dream-pc-builder .notice-disclaimer {

    margin: 0 0 8px 0;

    font-size: 13.5px;

    color: #7C4A03;

    line-height: 1.6;

}



#dream-pc-builder .notice-text strong {

    color: #B45309;

}



#dream-pc-builder .notice-disclaimer {

    font-style: italic;

    font-size: 12.5px;

    opacity: 0.9;

}



/* ============================================

   COMPATIBILITY NOTICE - ADD TO CART MODAL

   ============================================ */

#dream-pc-builder .compatibility-notice-modal,
.dream-pc-modal .compatibility-notice-modal {

    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);

    border: 1px solid rgba(245, 158, 11, 0.3);

    border-radius: var(--dpb-radius-md);

    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.08), 0 0 20px rgba(245, 158, 11, 0.08);

    padding: 16px 18px;

    margin-bottom: 20px;

    position: relative;

}



#dream-pc-builder .compatibility-notice-modal h3,
.dream-pc-modal .compatibility-notice-modal h3 {

    margin: 0 0 8px 0;

    color: #92400E;

    font-size: 14px;

    font-weight: 700;

}



#dream-pc-builder .compatibility-notice-modal p,
.dream-pc-modal .compatibility-notice-modal p {

    margin: 0 0 6px 0;

    font-size: 13px;

    color: #7C4A03;

    line-height: 1.5;

}



#dream-pc-builder .compatibility-notice-modal p.notice-disclaimer,
.dream-pc-modal .compatibility-notice-modal p.notice-disclaimer {

    font-style: italic;

    font-size: 12px;

    opacity: 0.9;

}



/* ============================================

   MODAL - PREMIUM WHITE

   ============================================ */

.dream-pc-modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 2147483647;

}



.dream-pc-modal.active {

    display: flex;

    align-items: center;

    justify-content: center;

}



.dream-pc-modal.active .modal-content {

    display: flex;

    flex-direction: column;

}



.modal-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: var(--dpb-bg-overlay);

    backdrop-filter: blur(12px);

}



.modal-content {

    position: relative;

    max-width: 960px;

    max-height: 90vh;

    width: 95%;

    margin: 0;

    background: var(--dpb-bg-modal);

    border-radius: var(--dpb-radius-xl);

    box-shadow: var(--dpb-shadow-xl), 0 0 0 1px rgba(122, 44, 255, 0.05), 0 0 30px rgba(184, 77, 255, 0.35), 0 0 60px rgba(122, 44, 255, 0.15);

    overflow: hidden;

    display: flex;

    flex-direction: column;

    animation: dpbModalIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    border: 1px solid rgba(184, 77, 255, 0.2);

}



.modal-content::before {

    content: '';

    position: absolute;

    top: -3px;

    left: -3px;

    right: -3px;

    bottom: -3px;

    border-radius: inherit;

    padding: 2px;

    background: linear-gradient(135deg, #c084fc, #6947ff, #d629ff, #f02b9b);

    background-size: 300% 300%;

    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    mask-composite: exclude;

    pointer-events: none;

    opacity: 0.7;

    filter: drop-shadow(0 0 8px rgba(184, 77, 255, 0.5));

    animation: dpbRGBFlow 10s linear infinite;

}



@keyframes dpbModalIn {

    from { opacity: 0; transform: translateY(-24px) scale(0.96); }

    to { opacity: 1; transform: translateY(0) scale(1); }

}



.modal-small {

    max-width: 480px;

}



.modal-large {

    max-width: 640px;

    /* NOTE: no max-height / overflow here - the base .modal-content already
       caps height at 90vh with overflow:hidden and .modal-body handles the
       scrolling, so the modal only ever shows ONE scrollbar. */

}

.modal-extra-large {

    max-width: 1100px;

    border-radius: 14px;

}

/* Document preview (builder + hub share modal).
   Desktop: plain scrollable document centered at 800px, no zoom/drag.
   Mobile/small screens (<= 768px): a zoom + drag-to-pan viewer stage. */

.modal-body.dpb-preview-body {

    padding: 22px;

    overflow-y: auto;

    overflow-x: hidden;

}



.dpb-preview-toolbar {

    display: none;

}



.dpb-preview-hint {

    margin-right: auto;

    font-size: 12px;

    color: var(--dpb-color-muted-text);

}



.dpb-preview-zoom-label {

    min-width: 46px;

    text-align: center;

    font-size: 13px;

    font-weight: 700;

    color: var(--dpb-color-heading-text);

}



.dpb-preview-zoom-btn {

    width: 34px;

    height: 34px;

    border-radius: 8px;

    border: 1px solid rgba(122, 44, 255, 0.2);

    background: var(--dpb-bg-card);

    color: var(--dpb-color-primary);

    font-size: 16px;

    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: var(--dpb-transition);

}



.dpb-preview-zoom-btn:hover {

    background: var(--dpb-color-primary-gradient);

    color: var(--dpb-color-button-text);

}



.dpb-preview-zoom-btn--fitted {

    min-width: 46px;

    width: auto;

    padding: 0 10px;

    font-size: 12px;

}



.dpb-preview-stage {

    position: relative;

    overflow: hidden;

}



.dpb-preview-stage.is-dragging {

    cursor: grabbing;

}



.dpb-preview-canvas {

    position: static;

    width: auto;

    transform: none !important;

}



.dpb-preview-canvas .dpb-doc {

    width: 100%;

    max-width: 800px;

    margin: 0 auto;

    /* The generated document is transparent; give it a solid page
       background in the preview so it reads as a real page (and no
       backdrop/modal color bleeds through on any screen size). */

    background: #ffffff;

    box-shadow: 0 2px 16px rgba(21, 18, 38, 0.14);

}



/* Mobile preview: same simple, width-fitting scrollable document as
   desktop (no zoom/drag viewer — it was unreliable on touch). The zoom
   toolbar stays hidden. */
@media (max-width: 768px) {

    .modal-body.dpb-preview-body {

        padding: 14px;

    }

}



#dream-pc-builder .modal-header,
.dream-pc-modal .modal-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    padding: 24px 28px 18px;

    border-bottom: 1px solid var(--dpb-color-border-light);

    background: linear-gradient(180deg, #FFFFFF 0%, rgba(244, 242, 247, 0.5) 100%);

}



/* Floating "Print / Download" actions over the preview canvas */
#dream-pc-builder .dpb-preview-floating-actions,
.dream-pc-modal .dpb-preview-floating-actions {

    position: absolute;

    top: 12px;

    right: 12px;

    display: flex;

    align-items: center;

    gap: 8px;

    z-index: 5;

}

#dream-pc-builder .dpb-preview-floating-actions .btn-icon-only,
.dream-pc-modal .dpb-preview-floating-actions .btn-icon-only {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow: 0 2px 12px rgba(21, 18, 38, 0.18);

    border: 1px solid rgba(122, 44, 255, 0.18);

}

#dream-pc-builder .dpb-preview-floating-actions .btn-icon-only:hover,
.dream-pc-modal .dpb-preview-floating-actions .btn-icon-only:hover {

    background: var(--dpb-color-primary);

    border-color: transparent;

    color: var(--dpb-color-button-text);

}

/* The floating buttons sit on a white document, so their loading spinner
   must be purple (the default white spinner would be invisible). */
#dream-pc-builder .dpb-preview-floating-actions .btn-icon-only .dpb-btn-spinner,
.dream-pc-modal .dpb-preview-floating-actions .btn-icon-only .dpb-btn-spinner {

    width: 20px;

    height: 20px;

    border-width: 2px;

    border-color: rgba(192, 132, 252, 0.25);

    border-top-color: #C084FC;

}

@media (max-width: 480px) {

    #dream-pc-builder .dpb-preview-floating-actions,
    .dream-pc-modal .dpb-preview-floating-actions {

        top: 8px;

        right: 8px;

        gap: 6px;

    }

    #dream-pc-builder .dpb-preview-floating-actions .btn-icon-only,
    .dream-pc-modal .dpb-preview-floating-actions .btn-icon-only {

        width: 36px;

        height: 36px;

    }

    #dream-pc-builder .dpb-preview-hint,
    .dream-pc-modal .dpb-preview-hint {

        display: none;

    }

    #dream-pc-builder .dpb-preview-zoom-btn,
    .dream-pc-modal .dpb-preview-zoom-btn {

        width: 30px;

        height: 30px;

        min-width: 30px;

    }

}



#dream-pc-builder .modal-title,
.dream-pc-modal .modal-title {

    margin: 0 0 4px 0;

    font-size: 20px;

    font-weight: 800;

    color: var(--dpb-color-heading-text);

    letter-spacing: -0.02em;

}



#dream-pc-builder .modal-subtitle,
.dream-pc-modal .modal-subtitle {

    margin: 0;

    font-size: 13px;

    color: var(--dpb-color-muted-text);

    font-weight: 500;

}



#dream-pc-builder .modal-close,
.dream-pc-modal .modal-close {

    width: 38px;

    height: 38px;

    background: rgba(122, 44, 255, 0.05);

    border: 1px solid rgba(122, 44, 255, 0.1);

    border-radius: 10px;

    font-size: 22px;

    color: var(--dpb-color-muted-text);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: var(--dpb-transition);

    flex-shrink: 0;

}



#dream-pc-builder .modal-close:hover,
.dream-pc-modal .modal-close:hover {

    background: var(--dpb-color-primary);

    color: var(--dpb-color-button-text);

    border-color: var(--dpb-color-primary);

    transform: rotate(90deg);

}



#dream-pc-builder .modal-body,
.dream-pc-modal .modal-body {

    padding: 24px 28px;

    overflow-y: auto;

    flex: 1;

    overflow-x: hidden;

}



#dream-pc-builder .modal-input,
.dream-pc-modal .modal-input {

    width: 100%;

    max-width: 100%;

    padding: 13px 18px;

    border: 2px solid var(--dpb-color-border-solid);

    border-radius: var(--dpb-radius-md);

    font-size: 14px;

    font-weight: 500;

    color: var(--dpb-color-heading-text);

    background: var(--dpb-bg-card);

    margin-bottom: 16px;

    transition: var(--dpb-transition);

    box-sizing: border-box;

    font-family: var(--dpb-font-family);

    letter-spacing: normal;

    line-height: normal;

    box-shadow: none;

    appearance: none;

    -webkit-appearance: none;

}



#dream-pc-builder .modal-input:focus,
.dream-pc-modal .modal-input:focus {

    outline: none;

    border-color: var(--dpb-color-primary);

    box-shadow: 0 0 0 4px rgba(122, 44, 255, 0.08);

}

#dream-pc-builder .modal-input::placeholder,
.dream-pc-modal .modal-input::placeholder {

    color: var(--dpb-color-muted-text);

}



/* ============================================

   QUICK VIEW MODAL

   ============================================ */

.quick-view-product {

    display: flex;

    gap: 28px;

}



.quick-view-image {

    width: 50%;

    flex-shrink: 0;

    background: linear-gradient(135deg, rgba(122, 44, 255, 0.03) 0%, rgba(155, 92, 255, 0.03) 100%);

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

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 28px;

    min-height: 300px;

    border: 1px solid var(--dpb-color-border-light);

}



.quick-view-image img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

}



.quick-view-details {

    flex: 1;

    display: flex;

    flex-direction: column;

}



.quick-view-title {

    margin: 0 0 8px 0;

    font-size: 20px;

    font-weight: 700;

    color: var(--dpb-color-heading-text);

    line-height: 1.4;

}



.quick-view-sku {

    margin: 0 0 12px 0;

    font-size: 11px;

    color: var(--dpb-color-muted-text);

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.06em;

}



.quick-view-price {

    margin: 0 0 12px 0;

    font-size: 26px;

    font-weight: 900;

    color: var(--dpb-color-primary);

    letter-spacing: -0.02em;

}



.quick-view-stock {

    margin: 0 0 16px 0;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.quick-view-stock.in-stock {

    color: #059669;

}



.quick-view-stock.out-of-stock {

    color: var(--dpb-color-error);

}



.quick-view-description {

    margin: 0 0 20px 0;

    font-size: 14px;

    color: var(--dpb-color-body-text);

    line-height: 1.6;

    flex: 1;

    overflow-y: auto;

}



.btn-view-product {

    display: inline-block;

    padding: 13px 28px;

    background: var(--dpb-color-primary-gradient);

    color: var(--dpb-color-button-text);

    border: none;

    border-radius: var(--dpb-radius-md);

    font-size: 13px;

    font-weight: 700;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    transition: var(--dpb-transition);

    letter-spacing: 0.02em;

    text-transform: uppercase;

}



.btn-view-product:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 24px rgba(122, 44, 255, 0.35);

}



.btn-view-product:active {

    transform: translateY(0);

}



/* ============================================

   MODAL SEARCH

   ============================================ */

.modal-search {

    position: relative;

    margin-bottom: 20px;

}



.dream-pc-builder-wrapper .search-input {

    width: 100% !important;

    box-sizing: border-box !important;

    padding: 13px 48px 13px 18px !important;

    border: 2px solid var(--dpb-color-border-solid) !important;

    border-radius: var(--dpb-radius-lg) !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    color: var(--dpb-color-heading-text) !important;

    background-color: var(--dpb-bg-card) !important;

    transition: var(--dpb-transition) !important;

    font-family: var(--dpb-font-family) !important;

    outline: none !important;

    appearance: none !important;

}



.search-input:focus {

    outline: none;

    border-color: var(--dpb-color-primary);

    box-shadow: 0 0 0 4px rgba(122, 44, 255, 0.08);

}



.search-icon {

    position: absolute;

    right: 16px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 16px;

    color: var(--dpb-color-muted-text);

    pointer-events: none;

}



/* ============================================

   CATEGORY SELECTION

   ============================================ */

.category-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

    gap: 10px;

}



.category-group-title {

    grid-column: 1 / -1;

    font-size: 11px;

    font-weight: 700;

    color: var(--dpb-color-muted-text);

    text-transform: uppercase;

    letter-spacing: 0.06em;

    margin: 18px 0 8px 0;

}



.category-card {

    padding: 16px 18px;

    background: var(--dpb-bg-card);

    border: 1px solid rgba(184, 77, 255, 0.3);

    border-radius: var(--dpb-radius-md);

    font-size: 13px;

    font-weight: 600;

    color: var(--dpb-color-body-text);

    cursor: pointer;

    transition: var(--dpb-transition);

    text-align: left;

    position: relative;

    overflow: hidden;

    display: flex;

    justify-content: space-between;

    align-items: center;

    box-shadow: 0 0 0 1px rgba(122, 44, 255, 0.04);

}



.category-name {

    flex: 1;

}



.category-count {

    background: var(--dpb-color-primary);

    color: var(--dpb-color-button-text);

    padding: 2px 10px;

    border-radius: 100px;

    font-size: 11px;

    font-weight: 700;

    min-width: 28px;

    text-align: center;

}



.category-card:hover {

    border-color: rgba(184, 77, 255, 0.5);

    transform: translateY(-2px);

    box-shadow: var(--dpb-shadow-md), 0 0 18px rgba(122, 44, 255, 0.14);

}



.category-card.selected {

    border-color: rgba(184, 77, 255, 0.6);

    background: rgba(122, 44, 255, 0.05);

    color: var(--dpb-color-primary);

    box-shadow: 0 0 16px rgba(122, 44, 255, 0.16);

}



.category-check {

    float: right;

    font-weight: 800;

    font-size: 16px;

}



/* ============================================

   PRODUCT RESULTS - WOOCOMMERCE GRID

   ============================================ */

.product-results {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    gap: 18px;

}

/* ============================================

   PAGINATION CONTROLS

   ============================================ */

.pagination-controls {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px 0;

    border-top: 1px solid var(--dpb-color-border);

    margin-top: 16px;

}

.page-info {

    font-size: 14px;

    color: var(--dpb-color-muted-text);

    font-weight: 500;

}

.pagination-buttons {

    display: flex;

    gap: 8px;

}

.btn-prev-page,

.btn-next-page {

    padding: 8px 16px;

    font-size: 14px;

    font-weight: 500;

    border: 1px solid var(--dpb-color-border);

    background: var(--dpb-bg-card);

    color: var(--dpb-color-body-text);

    border-radius: 6px;

    cursor: pointer;

    transition: all 0.2s ease;

}

.btn-prev-page:hover:not(:disabled),

.btn-next-page:hover:not(:disabled) {

    background: var(--dpb-bg-secondary);

    border-color: var(--dpb-color-primary);

    color: var(--dpb-color-primary);

}

.btn-prev-page:disabled,

.btn-next-page:disabled {

    opacity: 0.5;

    cursor: not-allowed;

    background: var(--dpb-bg-secondary);

}

@media (max-width: 768px) {

    .pagination-controls {

        flex-direction: column;

        gap: 12px;

        text-align: center;

    }

    .pagination-buttons {

        width: 100%;

        justify-content: center;

    }

    .btn-prev-page,

    .btn-next-page {

        flex: 1;

    }

}



.product-card {

    background: var(--dpb-bg-card);

    border: 1px solid rgba(184, 77, 255, 0.25);

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

    overflow: hidden;

    transition: var(--dpb-transition);

    position: relative;

    display: flex;

    flex-direction: column;

    height: 100%;

    box-shadow: 0 0 0 1px rgba(122, 44, 255, 0.04), 0 2px 8px rgba(21, 18, 38, 0.04), 0 0 16px rgba(184, 77, 255, 0.26), 0 0 32px rgba(122, 44, 255, 0.12);

}



.product-card::before {

    content: '';

    position: absolute;

    top: -3px;

    left: -3px;

    right: -3px;

    bottom: -3px;

    border-radius: inherit;

    padding: 2px;

    background: linear-gradient(135deg, #c084fc, #6947ff, #d629ff, #f02b9b);

    background-size: 300% 300%;

    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    mask-composite: exclude;

    pointer-events: none;

    z-index: 0;

    opacity: 0.8;

    filter: drop-shadow(0 0 7px rgba(184, 77, 255, 0.55));

    animation: dpbRGBFlow 9s linear infinite;

    transition: opacity 0.25s ease;

}



.product-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--dpb-shadow-lg), 0 0 28px rgba(122, 44, 255, 0.14);

    border-color: rgba(184, 77, 255, 0.4);

}



.product-card:hover::before {

    opacity: 1;

}



.product-image {

    width: 100%;

    height: 160px;

    background: linear-gradient(135deg, rgba(122, 44, 255, 0.02) 0%, rgba(155, 92, 255, 0.02) 100%);

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    flex-shrink: 0;

    position: relative;

    border-bottom: 1px solid var(--dpb-color-border-light);

}



.product-image img {

    max-width: 88%;

    max-height: 88%;

    object-fit: contain;

    transition: var(--dpb-transition);

}



.product-card:hover .product-image img {

    transform: scale(1.08);

}



.product-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(21, 18, 38, 0.5);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    opacity: 0;

    transition: var(--dpb-transition);

    z-index: 10;

    backdrop-filter: blur(2px);

}



.product-card:hover .product-overlay {

    opacity: 1;

}



.btn-overlay {

    width: 44px;

    height: 44px;

    background: var(--dpb-bg-card);

    border: none;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: var(--dpb-transition);

    color: var(--dpb-color-body-text);

    box-shadow: var(--dpb-shadow-md);

}



.btn-overlay:hover {

    transform: scale(1.12);

    background: linear-gradient(100deg, #8b3dff, #f02b9b 82%);

    background-size: 250% 100%;

    background-position: 0% center;

    animation: dpb-btn-gradient-flow 9s ease-in-out infinite;

    color: var(--dpb-color-button-text);

}



.btn-overlay:active {

    transform: scale(0.95);

}



.btn-overlay:disabled {

    opacity: 0.5;

    cursor: not-allowed;

    transform: none;

}



.btn-overlay svg {

    width: 20px;

    height: 20px;

}



.product-details {

    padding: 16px;

    display: flex;

    flex-direction: column;

    flex: 1;

    min-height: 0;

}



.product-name {

    margin: 0 0 6px 0;

    font-size: 13px;

    font-weight: 600;

    color: var(--dpb-color-heading-text);

    display: -webkit-box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    height: 38px;

    line-height: 1.45;

    flex-shrink: 0;

}



.product-sku {

    margin: 0 0 8px 0;

    font-size: 10px;

    color: var(--dpb-color-muted-text);

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.product-price {

    margin: 0 0 10px 0;

    font-size: 16px;

    font-weight: 800;

    color: var(--dpb-color-primary);

    letter-spacing: -0.01em;

    flex-shrink: 0;

}



.stock-status {

    margin: 0 0 8px 0;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.out-of-stock-text {

    color: var(--dpb-color-error);

}



.product-card.out-of-stock {

    opacity: 0.55;

}



.product-card.out-of-stock .product-image img {

    filter: grayscale(100%);

}



.product-card.out-of-stock .product-name,

.product-card.out-of-stock .product-price {

    color: var(--dpb-color-muted-text);

}



/* ============================================

   LOADING STATE

   ============================================ */

.loading-state {

    text-align: center;

    padding: 40px 20px;

}



.loading-message {

    text-align: center;

    padding: 24px 20px;

    margin-bottom: 16px;

}



.loading-message .spinner {

    width: 40px;

    height: 40px;

    margin: 0 auto 16px;

    border: 3px solid var(--dpb-color-border);

    border-top-color: var(--dpb-color-primary);

    border-radius: 50%;

    animation: dpbSpin 0.8s linear infinite;

}



.loading-message p {

    font-size: 14px;

    font-weight: 500;

    color: var(--dpb-color-muted-text);

    margin: 0;

}



@keyframes dpbSpin {

    to { transform: rotate(360deg); }

}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Inline spinner used inside buttons (download / generating states) */
.dpb-btn-spinner {
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: dpbSpin 0.8s linear infinite;
}

.dpb-btn-label {
    white-space: nowrap;
}

/* Override any external spinner animations */
.spinner-icon,
svg[style*="animation: spin"] {
    animation: dpbSpin 0.8s linear infinite !important;
}

.spinner {

    width: 36px;

    height: 36px;

    margin: 0 auto 14px;

    border: 3px solid var(--dpb-color-border);

    border-top-color: var(--dpb-color-primary);

    border-radius: 50%;

    animation: dpbSpin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;

}



.loading-state p {

    margin: 0;

    font-size: 13px;

    color: var(--dpb-color-muted-text);

    font-weight: 500;

}



/* ============================================

   EMPTY STATE

   ============================================ */

.empty-state {

    text-align: center;

    padding: 40px 20px;

}



.empty-state p {

    margin: 0;

    font-size: 14px;

    color: var(--dpb-color-muted-text);

    font-weight: 500;

}



/* ============================================

   ERROR STATE

   ============================================ */

.error-state {

    text-align: center;

    padding: 40px 20px;

}



.error-state p {

    margin: 0 0 14px 0;

    font-size: 14px;

    color: var(--dpb-color-error);

    font-weight: 500;

}



/* ============================================

   ADD TO CART SUMMARY MODAL

   ============================================ */

.section-title {

    font-size: 16px;

    font-weight: 700;

    color: var(--dpb-color-heading-text);

    margin: 0 0 16px 0;

    padding-bottom: 10px;

    border-bottom: 2px solid var(--dpb-color-border-light);

}



.section-title-error {

    color: var(--dpb-color-error);

    border-bottom-color: rgba(239, 68, 68, 0.2);

}



.product-list {

    max-height: 300px;

    overflow-y: auto;

    margin-bottom: 20px;

}



.product-item {

    display: flex;

    align-items: center;

    padding: 14px;

    margin-bottom: 8px;

    background: var(--dpb-bg-primary);

    border-radius: var(--dpb-radius-md);

    border: 1px solid var(--dpb-color-border-light);

}



.product-item-image {

    width: 60px;

    height: 60px;

    object-fit: cover;

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

    margin-right: 14px;

    background: var(--dpb-color-border-light);

}



.product-item-info {

    flex: 1;

}



.product-item-name {

    font-size: 14px;

    font-weight: 600;

    color: var(--dpb-color-heading-text);

    margin: 0 0 4px 0;

}



.product-item-price {

    font-size: 13px;

    color: var(--dpb-color-muted-text);

    margin: 0;

}



.product-item-error {

    font-size: 12px;

    color: var(--dpb-color-error);

    margin: 4px 0 0 0;

    font-weight: 500;

}



.cart-summary {

    padding: 18px;

    background: var(--dpb-bg-primary);

    border-radius: var(--dpb-radius-md);

    margin-bottom: 20px;

    border: 1px solid var(--dpb-color-border-light);

}



.summary-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 8px 0;

    font-size: 14px;

    font-weight: 500;

}



.summary-row-error {

    color: var(--dpb-color-error);

}



.summary-row-grand {

    padding-top: 12px;

    border-top: 1px solid var(--dpb-color-border);

    font-size: 16px;

    font-weight: 700;

}



.summary-row:last-child {

    padding-top: 12px;

    border-top: 1px solid var(--dpb-color-border);

    font-size: 16px;

    font-weight: 700;

}



/* ============================================

   CONFIRMATION MODAL

   ============================================ */

.confirm-text {

    margin: 0 0 24px 0;

    font-size: 14px;

    color: var(--dpb-color-body-text);

    line-height: 1.6;

}



#dream-pc-builder .modal-actions,
.dream-pc-modal .modal-actions {

    display: flex;

    gap: 12px;

    justify-content: flex-end;

}



#dream-pc-builder .modal-actions .btn-outline,
#dream-pc-builder .modal-actions .btn-primary,
.dream-pc-modal .modal-actions .btn-outline,
.dream-pc-modal .modal-actions .btn-primary {

    width: auto;

    margin-bottom: 0;

}



/* ============================================

   SHARE MODAL

   ============================================ */

#dream-pc-builder .download-section,
.dream-pc-modal .download-section {
    padding-top: 20px;
    border-top: 1px solid #E5E7EB;
}

#dream-pc-builder .download-content,
.dream-pc-modal .download-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#dream-pc-builder .download-select,
.dream-pc-modal .download-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 13px;
    font-family: var(--dpb-font-family);
    background: #fff;
    color: #374151;
    font-weight: 500;
    letter-spacing: normal;
    line-height: normal;
    box-sizing: border-box;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

#dream-pc-builder .download-buttons,
.dream-pc-modal .download-buttons {
    display: flex;
    gap: 10px;
}

#dream-pc-builder .download-buttons .btn-secondary,
#dream-pc-builder .download-buttons .btn-primary,
.dream-pc-modal .download-buttons .btn-secondary,
.dream-pc-modal .download-buttons .btn-primary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    width: auto;
    margin-bottom: 0;
}

#dream-pc-builder .btn-icon-only,
.dream-pc-modal .btn-icon-only {
    flex: 0 0 42px !important;
    width: 42px;
    padding: 12px;
    line-height: 0;
}

#dream-pc-builder .btn-icon-only svg,
.dream-pc-modal .btn-icon-only svg {
    display: block;
}

#dream-pc-builder .share-link-section,
.dream-pc-modal .share-link-section {
    margin-bottom: 24px;
}

#dream-pc-builder .share-link-section .share-label,
#dream-pc-builder .download-section .share-label,
.dream-pc-modal .share-link-section .share-label,
.dream-pc-modal .download-section .share-label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 13px;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#dream-pc-builder .share-link-section-row,
.dream-pc-modal .share-link-section-row {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
}

#dream-pc-builder .share-link-section-input,
.dream-pc-modal .share-link-section-input {
    flex: 1;
    min-width: 0;
    width: 0;
    padding: 12px 14px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 13px;
    font-family: var(--dpb-font-family);
    background-color: #F9FAFB;
    color: #374151;
    font-weight: 500;
    letter-spacing: normal;
    box-sizing: border-box;
    overflow-x: hidden;
    height: auto;
    line-height: normal;
    margin: 0;
    box-shadow: none;
    text-overflow: ellipsis;
    appearance: none;
    -webkit-appearance: none;
}

#dream-pc-builder .share-link-section-input:focus,
.dream-pc-modal .share-link-section-input:focus {
    outline: none;
    border-color: #C084FC;
}

/* Copy Link emphasis: big branded button first, full link revealed only after copy */
#dream-pc-builder .share-link-copy-box,
.dream-pc-modal .share-link-copy-box {
    margin-top: 6px;
}

#dream-pc-builder .share-link-copy-btn,
.dream-pc-modal .share-link-copy-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--dpb-radius-md);
    cursor: pointer;
}

/* Build code chip shown next to the copy button */
#dream-pc-builder .share-link-code-row,
.dream-pc-modal .share-link-code-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

#dream-pc-builder .share-link-code-label,
.dream-pc-modal .share-link-code-label {
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    white-space: nowrap;
}

#dream-pc-builder .share-link-code,
.dream-pc-modal .share-link-code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #6D2CFF;
    background: rgba(122, 44, 255, 0.07);
    border: 1px dashed rgba(122, 44, 255, 0.4);
    border-radius: 6px;
    padding: 4px 10px;
    line-height: normal;
}

#dream-pc-builder .share-link-reveal,
.dream-pc-modal .share-link-reveal {
    margin-top: 10px;
}

#dream-pc-builder .share-link-section-copy,
.dream-pc-modal .share-link-section-copy {
    flex: 0 0 auto;
    width: auto;
    margin-bottom: 0;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#dream-pc-builder .share-link-section-copy svg,
.dream-pc-modal .share-link-section-copy svg {
    flex: 0 0 auto;
}



/* ============================================

   NOTIFICATION TOAST

   ============================================ */

.dream-pc-notification {

    position: fixed;

    bottom: 24px;

    right: 24px;

    padding: 14px 24px;

    background-color: var(--dpb-color-heading-text);

    color: var(--dpb-color-button-text);

    border-radius: var(--dpb-radius-md);

    box-shadow: var(--dpb-shadow-xl);

    z-index: 10001;

    display: none;

    font-size: 14px;

    font-weight: 500;

    max-width: 400px;

}



.dream-pc-notification.success {

    background: linear-gradient(135deg, #059669 0%, #10B981 100%);

}



.dream-pc-notification.error {

    background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%);

}



.dream-pc-notification.warning {

    background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);

}



/* ============================================

   SKELETON LOADING

   ============================================ */

.skeleton-loading {

    pointer-events: none;

}



.skeleton {

    background: linear-gradient(90deg, rgba(122, 44, 255, 0.04) 25%, rgba(122, 44, 255, 0.08) 50%, rgba(122, 44, 255, 0.04) 75%);

    background-size: 200% 100%;

    animation: dpbShimmer 1.5s infinite;

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

}



.skeleton-text {

    background: linear-gradient(90deg, rgba(122, 44, 255, 0.04) 25%, rgba(122, 44, 255, 0.08) 50%, rgba(122, 44, 255, 0.04) 75%);

    background-size: 200% 100%;

    animation: dpbShimmer 1.5s infinite;

    border-radius: 4px;

    color: transparent !important;

    min-height: 16px;

    display: inline-block;

}



.skeleton-btn {

    background: linear-gradient(90deg, rgba(122, 44, 255, 0.04) 25%, rgba(122, 44, 255, 0.08) 50%, rgba(122, 44, 255, 0.04) 75%);

    background-size: 200% 100%;

    animation: dpbShimmer 1.5s infinite;

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

    width: 32px;

    height: 32px;

}



.skeleton-input {

    background: linear-gradient(90deg, rgba(122, 44, 255, 0.04) 25%, rgba(122, 44, 255, 0.08) 50%, rgba(122, 44, 255, 0.04) 75%);

    background-size: 200% 100%;

    animation: dpbShimmer 1.5s infinite;

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

    width: 50px;

    height: 32px;

}



.skeleton-shimmer {

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(122, 44, 255, 0.04), transparent);

    animation: dpbShimmer 1.5s infinite;

}



@keyframes dpbShimmer {

    0% { background-position: 200% 0; }

    100% { background-position: -200% 0; }

}



.skeleton-loading .component-image {

    width: 64px;

    height: 64px;

}



.skeleton-loading .component-content {

    flex: 1;

}



.skeleton-loading .component-title {

    width: 120px;

    height: 20px;

    margin-bottom: 8px;

}



.skeleton-loading .component-name {

    width: 180px;

    height: 16px;

    margin-bottom: 4px;

}



.skeleton-loading .component-price {

    width: 80px;

    height: 14px;

}



/* ============================================

   SHARE LINK SUMMARY

   ============================================ */

#dream-pc-builder .share-link-summary {

    margin: 16px 0;

    padding: 14px;

    background: linear-gradient(135deg, rgba(122, 44, 255, 0.04) 0%, rgba(155, 92, 255, 0.04) 100%);

    border: 1px solid rgba(122, 44, 255, 0.1);

    border-radius: var(--dpb-radius-md);

}



#dream-pc-builder .share-link-header {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

}



#dream-pc-builder .share-link-icon {

    font-size: 16px;

}



#dream-pc-builder .share-link-label {

    font-size: 11px;

    font-weight: 700;

    color: var(--dpb-color-primary);

    text-transform: uppercase;

    letter-spacing: 0.06em;

}



#dream-pc-builder .share-link-info {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



#dream-pc-builder .share-link-name {

    font-size: 13px;

    font-weight: 600;

    color: var(--dpb-color-heading-text);

}



#dream-pc-builder .share-link-url-container {

    display: flex;

    gap: 6px;

}



#dream-pc-builder .share-link-url-input {

    flex: 1;

    min-width: 0;

    padding: 6px 10px;

    font-size: 11px;

    font-family: var(--dpb-font-family);

    color: var(--dpb-color-muted-text);

    background: var(--dpb-bg-primary);

    border: 1px solid var(--dpb-color-border);

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

    outline: none;

    height: auto;

    line-height: normal;

    letter-spacing: normal;

    margin: 0;

    box-shadow: none;

    box-sizing: border-box;

    appearance: none;

    -webkit-appearance: none;

}



#dream-pc-builder .share-link-url-input:focus {

    border-color: var(--dpb-color-primary);

    outline: none;

}



#dream-pc-builder .btn-copy-mini {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 6px 12px;

    background: var(--dpb-color-primary);

    border: none;

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

    cursor: pointer;

    transition: var(--dpb-transition);

    color: white;

    font-size: 12px;

    font-weight: 700;

    line-height: normal;

    letter-spacing: normal;

    box-sizing: border-box;

    appearance: none;

    -webkit-appearance: none;

}



#dream-pc-builder .btn-copy-mini:hover {

    background: var(--dpb-color-primary-hover);

}



#dream-pc-builder .btn-copy-mini svg {

    width: 14px;

    height: 14px;

    flex: 0 0 auto;

}



/* ============================================

   RESPONSIVE DESIGN

   ============================================ */

@media (max-width: 1024px) {

    .dream-pc-builder-wrapper {

        padding: 24px 0 48px;

    }



    .dpb-builder-title {

        font-size: 34px;

    }



    .dream-pc-builder-sidebar {

        position: static;

    }

}



@media (max-width: 768px) {

    .dream-pc-builder-wrapper {

        padding: 16px 0 40px;

    }



    .dpb-builder-header {

        padding: 16px 16px 28px;

    }



    .dpb-builder-title {

        font-size: 28px;

    }



    .dpb-builder-subtitle {

        font-size: 14px;

    }



    .dream-pc-builder-container {

        grid-template-columns: 1fr;

        gap: 16px;

    }



    .components-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }



    .btn-add-component {

        width: 100%;

        justify-content: center;

    }



    .component-row {

        padding: 14px 16px;

    }



    #dream-pc-builder .sidebar-section {

        padding: 18px;

    }



    .modal-content {

        max-width: 98%;

        margin: 10px auto;

        max-height: 92vh;

        border-radius: var(--dpb-radius-md);

    }



    #dream-pc-builder .modal-header,
#dream-pc-builder .modal-body,
.dream-pc-modal .modal-header,
.dream-pc-modal .modal-body {

        padding: 16px;

    }



    #dream-pc-builder .modal-title,
    .dream-pc-modal .modal-title {

        font-size: 18px;

    }



    .dream-pc-builder-wrapper .search-input {

        padding: 12px 40px 12px 16px !important;

        font-size: 14px !important;

    }



    .modal-search {

        margin-bottom: 16px;

    }



    .pagination-controls {

        padding: 12px 0;

        gap: 8px;

    }



    .pagination-info {

        font-size: 12px;

    }



    .btn-prev-page,

    .btn-next-page {

        padding: 8px 12px;

        font-size: 13px;

    }



    .product-results {

        grid-template-columns: 1fr;

        gap: 12px;

    }



    .product-image {

        height: 140px;

    }



    .product-name {

        font-size: 13px;

        line-height: 1.4;

    }



    .product-price {

        font-size: 15px;

    }



    .category-grid {

        grid-template-columns: 1fr;

    }



    .dream-pc-notification {

        left: 16px;

        right: 16px;

        bottom: 16px;

    }



    .component-stacked-container {

        padding: 14px;

        gap: 6px;

    }



    .component-label {

        font-size: 10px;

        margin-bottom: 2px;

    }



    .component-row.stacked-row {

        padding: 10px 12px;

        gap: 10px;

    }



    .btn-add-component-stacked {

        padding: 10px 12px;

        margin-top: 6px;

    }



    .btn-add-component-stacked .add-text {

        font-size: 11px;

    }



    .component-row {

        padding: 12px 14px;

        gap: 12px;

        flex-wrap: wrap;

    }



    .component-icon-wrapper {

        width: 36px;

        height: 36px;

        margin-right: 8px;

    }

    .component-icon-wrapper svg {

        width: 28px;

        height: 28px;

    }



    .component-image {

        width: 52px;

        height: 52px;

    }



    .component-content {

        padding-right: 0;

        flex: 1;

        min-width: 0;

    }



    .component-title {

        font-size: 10px;

    }



    .component-name {

        font-size: 12px;

        line-height: 1.3;

        word-break: break-word;

    }



    .component-price {

        font-size: 14px;

    }



    .component-quantity {

        padding: 4px 8px;

        margin-right: 0;

        margin-top: 8px;

        width: 100%;

        justify-content: center;

    }



    .qty-btn {

        width: 26px;

        height: 26px;

        font-size: 13px;

    }



    .dream-pc-builder-wrapper .qty-input {

        width: 30px !important;

        height: 26px !important;

        font-size: 12px !important;

    }



    .additional-components-list {

        padding-left: 12px;

        gap: 6px;

    }



    .additional-row {

        padding: 8px 10px;

        gap: 8px;

    }



    .additional-image {

        width: 34px;

        height: 34px;

    }



    .additional-name {

        font-size: 11px;

    }



    .additional-price {

        font-size: 12px;

    }



    .additional-qty .qty-btn {

        width: 22px;

        height: 22px;

        font-size: 12px;

    }



    .additional-qty .qty-input {

        width: 26px;

        height: 22px;

        font-size: 11px;

    }



    .btn-remove-additional {

        width: 22px;

        height: 22px;

        font-size: 14px;

    }



    .quick-view-product {

        flex-direction: column;

    }



    .quick-view-image {

        width: 100%;

        min-height: 200px;

    }



    .quick-view-title {

        font-size: 16px;

    }



    .quick-view-price {

        font-size: 22px;

    }



    .btn-view-product {

        width: 100%;

        padding: 12px;

    }

}



@media (max-width: 480px) {

    .dpb-builder-title {

        font-size: 24px;

    }



    .product-results {

        grid-template-columns: 1fr;

    }



    .component-stacked-container {

        padding: 10px;

        gap: 4px;

    }



    .component-row.stacked-row {

        padding: 8px 10px;

        gap: 8px;

        flex-wrap: wrap;

    }



    .component-row.stacked-row .component-icon-wrapper {

        width: 32px;

        height: 32px;

        margin-right: 6px;

    }

    .component-row.stacked-row .component-icon-wrapper svg {

        width: 24px;

        height: 24px;

    }



    .component-row.stacked-row .component-image {

        width: 42px;

        height: 42px;

    }



    .component-row.stacked-row .component-content {

        flex: 1;

        min-width: 0;

        padding-right: 0;

    }



    .component-row.stacked-row .component-quantity {

        width: 100%;

        margin-right: 0;

        margin-top: 6px;

        justify-content: center;

    }



    .component-row.stacked-row .btn-remove-component {

        position: relative;

        top: auto;

        right: auto;

        transform: none;

        width: 100%;

        margin-top: 6px;

        justify-content: center;

    }



    .component-row.stacked-row .component-name {

        font-size: 11px;

    }



    .component-row.stacked-row .component-price {

        font-size: 12px;

    }



    .components-header h2 {

        font-size: 16px;

    }



    .component-title {

        font-size: 10px;

    }



    #dream-pc-builder .modal-title,
    .dream-pc-modal .modal-title {

        font-size: 16px;

    }



    #dream-pc-builder .summary-total {

        font-size: 14px;

    }



    #dream-pc-builder .total-amount {

        font-size: 22px;

    }



    .btn-select-component {

        padding: 8px;

    }



    .btn-select-component .select-text {

        display: none;

    }



    .btn-remove-component {

        position: relative;

        top: auto;

        right: auto;

        transform: none;

        padding: 6px 10px;

        margin-top: 8px;

        width: 100%;

        justify-content: center;

    }



    .btn-remove-component:active {

        transform: scale(0.97);

    }



    .btn-remove-component .remove-text {

        display: none;

    }

}



/* ============================================

   BREADCRUMB

   ============================================ */

.dream-pc-builder-breadcrumb {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 20px;

    font-size: 13px;

    font-weight: 500;

    color: var(--dpb-color-muted-text);

    letter-spacing: -0.01em;

}



.dream-pc-builder-breadcrumb a {

    color: var(--dpb-color-muted-text);

    text-decoration: none;

    transition: var(--dpb-transition);

}



.dream-pc-builder-breadcrumb a:hover {

    color: var(--dpb-color-primary);

}



.dream-pc-builder-breadcrumb .separator {

    color: var(--dpb-color-muted-text);

    font-size: 10px;

    opacity: 0.5;

}



/* ============================================

   UTILITY: slideOut animation (used by JS)

   ============================================ */

@keyframes slideOut {

    from { opacity: 1; transform: translateY(0); }

    to { opacity: 0; transform: translateY(-10px); }

}



@keyframes slideIn {

    from { opacity: 0; transform: translateY(-10px); }

    to { opacity: 1; transform: translateY(0); }

}

/* ============================================

   THEME SCROLLBARS (subtle / nearly transparent)

   ============================================ */

#dream-pc-builder * {

    scrollbar-width: thin;

    scrollbar-color: rgba(122, 44, 255, 0.25) transparent;

}

#dream-pc-builder ::-webkit-scrollbar {

    width: 6px;

    height: 6px;

}

#dream-pc-builder ::-webkit-scrollbar-track {

    background: transparent;

}

#dream-pc-builder ::-webkit-scrollbar-thumb {

    background: rgba(122, 44, 255, 0.22);

    border-radius: 6px;

}

#dream-pc-builder ::-webkit-scrollbar-thumb:hover {

    background: rgba(122, 44, 255, 0.4);

}

/* Single scroll region in the Add to Cart modal: let .modal-body scroll.
   The inner product lists no longer get their own (duplicate) scrollbar. */

#add-to-cart-modal .product-list {

    max-height: none;

    overflow-y: visible;

}

/* Scrollable summary list on the sidebar uses the subtle themed scrollbar */

#dream-pc-builder .summary-items {

    scrollbar-width: thin;

    scrollbar-color: rgba(122, 44, 255, 0.25) transparent;

}

/* ============================================================
   BUILDER HUB (dpb_builder_hub shortcode)
   ============================================================ */

.dpb-builder-hub {
    position: relative;
    background: var(--dpb-bg-primary);
    font-family: inherit;
    color: var(--dpb-color-body-text);
}

.dpb-builder-hub * {
    box-sizing: border-box;
}

/* The empty/loading states rely on the hidden attribute; author display
   rules must never override it inside the hub. */
.dpb-builder-hub [hidden] {
    display: none !important;
}

.dpb-hub-hero-greeting {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    padding: 7px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(232, 226, 255, 0.9);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(232, 226, 255, 0.18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Header */
.dpb-hub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    border: none;
}

.dpb-hub-btn-icon {
    flex: 0 0 auto;
}

.dpb-hub-btn--lg {
    padding: 14px 30px;
    font-size: 15px;
}

/* Hero (shares the builder banner's exact geometry: same dark gradient,
   neon lines, hover state and text widths; the bottom keeps extra padding
   so the MY BUILDS section can overlap it) */
.dpb-hub-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #10012A 0%, #10012A 72%, var(--dpb-bg-primary) 94%, var(--dpb-bg-primary) 100%);
    padding: 64px 24px 220px;
    text-align: center;
}

.dpb-hub-hero-content {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    text-align: center;
}

/* Keep hero buttons content-sized (base .btn-primary/.btn-outline are
   full-width in the builder UI, which would stretch them here) */
.dpb-hub-hero .dpb-hub-btn {
    width: auto;
}

.dpb-hub-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 10px;
}

.dpb-hub-hero .btn-primary {
    background: var(--dpb-color-primary-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 24px rgba(122, 44, 255, 0.45);
}

.dpb-hub-hero .btn-outline {
    border-color: rgba(232, 226, 255, 0.35);
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

/* Sections */
.dpb-hub-section {
    position: relative;
    z-index: 2;
    max-width: 1520px;
    margin: 0 auto;
    padding: 0 3% 72px;
}

.dpb-hub-section--hero-overlap {
    margin-top: -140px;
}

.dpb-hub-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 26px;
    padding: 18px 22px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(122, 44, 255, 0.14);
    box-shadow: 0 6px 22px rgba(21, 18, 38, 0.07);
}

.dpb-hub-section-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: #151226;
}

.dpb-hub-section-title::first-letter {
    color: var(--dpb-color-primary);
}

.dpb-hub-section-subtitle {
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: #5B5470;
}

.dpb-hub-section--featured {
    padding-top: 20px;
}

/* Grid & Cards */
.dpb-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 24px;
}

.dpb-hub-card {
    position: relative;
    border-radius: 18px;
    background: var(--dpb-bg-card);
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(122, 44, 255, 0.05),
        0 4px 16px rgba(21, 18, 38, 0.05),
        0 0 18px rgba(184, 77, 255, 0.12);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    display: flex;
    flex-direction: column;
}

.dpb-hub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px rgba(122, 44, 255, 0.14),
        0 14px 32px rgba(21, 18, 38, 0.12),
        0 0 26px rgba(184, 77, 255, 0.34),
        0 0 52px rgba(122, 44, 255, 0.16);
}

.dpb-hub-card--featured {
    box-shadow: 0 0 0 1px rgba(122, 44, 255, 0.1),
        0 4px 16px rgba(21, 18, 38, 0.05),
        0 0 24px rgba(184, 77, 255, 0.22),
        0 0 48px rgba(122, 44, 255, 0.12);
}

.dpb-hub-card-media {
    position: relative;
    display: block;
    background: linear-gradient(160deg, #17063B, #2B1060);
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
}

.dpb-hub-card-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    filter: saturate(1.05);
    transition: transform 0.45s ease;
}

.dpb-hub-card:hover .dpb-hub-card-media img {
    transform: scale(1.06);
}

.dpb-hub-card-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(16, 1, 42, 0.5) 100%);
    pointer-events: none;
}

.dpb-hub-card-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--dpb-color-primary-gradient);
    border-radius: 999px;
    padding: 4px 10px;
    box-shadow: 0 0 12px rgba(122, 44, 255, 0.5);
}

.dpb-hub-card-badge--muted {
    left: auto;
    right: 12px;
    bottom: 12px;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: none;
}

.dpb-hub-card-flag {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: #2A0E66;
    background: linear-gradient(135deg, #D9C6FF, #A855F7);
    border-radius: 999px;
    padding: 5px 12px;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.55);
}

.dpb-hub-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    background:
        linear-gradient(180deg, rgba(122, 44, 255, 0.035), transparent 28%),
        var(--dpb-bg-card);
}

.dpb-hub-card-name {
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--dpb-color-heading-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dpb-hub-card-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.dpb-hub-card-name a:hover {
    color: var(--dpb-color-primary);
}

.dpb-hub-card-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--dpb-color-primary);
}

.dpb-hub-card-price .woocommerce-Price-currencySymbol {
    font-size: 12px;
    vertical-align: super;
}

.dpb-hub-card-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

.dpb-hub-card-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(122, 44, 255, 0.18);
    background: var(--dpb-bg-card);
    color: var(--dpb-color-body-text);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(21, 18, 38, 0.06);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dpb-hub-card-icon:hover {
    background: var(--dpb-color-primary-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 14px rgba(122, 44, 255, 0.4);
}

.dpb-hub-card-icon--danger:hover {
    background: #EF4444;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.45);
}

/* Loading & empty states */
.dpb-hub-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 46px 0;
    color: var(--dpb-color-muted-text);
    font-size: 14px;
}

.dpb-hub-spinner {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid rgba(122, 44, 255, 0.15);
    border-top-color: var(--dpb-color-primary);
    animation: dpb-hub-spin 0.8s linear infinite;
}

@keyframes dpb-hub-spin {
    to {
        transform: rotate(360deg);
    }
}

.dpb-hub-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 24px;
    text-align: center;
    background: var(--dpb-bg-card);
    border: 1px dashed rgba(122, 44, 255, 0.28);
    border-radius: 18px;
}

.dpb-hub-empty-icon {
    color: var(--dpb-color-primary);
    opacity: 0.8;
}

.dpb-hub-empty-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--dpb-color-heading-text);
}

.dpb-hub-empty-text {
    margin: 0;
    font-size: 14px;
    color: var(--dpb-color-muted-text);
    max-width: 380px;
}

.dpb-hub-empty .dpb-hub-btn {
    margin-top: 8px;
}

/* Delete modal text */
.dpb-hub-delete-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--dpb-color-body-text);
}

/* Toast */
.dpb-hub-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translate(-50%, 16px);
    z-index: 2147483646;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: rgba(20, 12, 34, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(168, 85, 247, 0.4);
    box-shadow: 0 0 28px rgba(122, 44, 255, 0.4);
    border-radius: 999px;
    padding: 12px 22px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dpb-hub-toast--show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Featured slider (single row, snap-scroll, with prev/next arrows in the header) */
.dpb-hub-slider-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dpb-hub-featured-viewport {
    min-width: 0;
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-radius: 18px;
    padding: 2px;
}

.dpb-hub-featured-viewport::-webkit-scrollbar {
    display: none;
}

.dpb-hub-grid--featured {
    display: flex;
    flex-wrap: nowrap;
    overflow: visible;
}

.dpb-hub-grid--featured > .dpb-hub-card {
    flex: 0 0 340px;
    min-width: 0;
    scroll-snap-align: start;
}

.dpb-hub-slider-arrow {
    flex: 0 0 auto;
    align-self: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(122, 44, 255, 0.28);
    background: var(--dpb-bg-card);
    color: var(--dpb-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(21, 18, 38, 0.08);
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    padding: 0;
}

.dpb-hub-slider-arrow:hover {
    background: var(--dpb-color-primary-gradient);
    color: #fff;
    transform: translateY(-1px);
}

.dpb-hub-slider-arrow.is-disabled {
    opacity: 0.35;
    pointer-events: none;
    box-shadow: none;
}

/* Load More */
.dpb-hub-loadmore {
    margin-top: 26px;
    text-align: center;
}

.dpb-hub-loadmore-btn {
    min-width: 200px;
}

@media (max-width: 768px) {
    .dpb-hub-hero {
        padding: 16px 16px 200px;
    }

    .dpb-hub-grid {
        grid-template-columns: 1fr;
    }

    .dpb-hub-grid--featured {
        grid-template-columns: none;
    }

    .dpb-hub-grid--featured > .dpb-hub-card {
        flex: 0 0 82vw;
    }

    .dpb-hub-slider-arrow {
        width: 38px;
        height: 38px;
    }

    .dpb-hub-card-media {
        min-height: 140px;
    }

    .dpb-hub-card-icon {
        width: 40px;
        height: 40px;
    }
}

/* ============================================
   DARK RGB OVERRIDES — full-page retheme to the
   Dream PC reference design language (dark page,
   translucent cards, full-spectrum RGB accents).
   Kept at the end so it wins over earlier rules.
   ============================================ */

/* RGB divider accent under hero subtitles / section heads */

/* RGB divider accent under hero subtitles / section heads */
#dream-pc-builder .dpb-rgb-divider,
#dpb-builder-hub .dpb-rgb-divider {
    width: 168px;
    height: 3px;
    margin: 18px auto 0;
    border-radius: 99px;
    background: linear-gradient(100deg, #8b3dff, #f02b9b 82%);
    background-size: 200% 100%;
    animation: dpb-rgb-bar 5s linear infinite;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 18px rgba(192, 132, 252, 0.35), 0 0 30px rgba(255, 23, 68, 0.25);
}

@keyframes dpb-rgb-bar {
    to { background-position: 200% 0; }
}

/* Ambient glows -> RGB tints */
#dream-pc-builder .dpb-ambient-glow {
    background: radial-gradient(circle, rgba(192, 132, 252, 0.09) 0%, rgba(212, 41, 255, 0.03) 40%, transparent 70%);
}

#dream-pc-builder .dpb-ambient-glow--right {
    background: radial-gradient(circle, rgba(255, 23, 68, 0.07) 0%, rgba(192, 132, 252, 0.02) 40%, transparent 70%);
}

/* Buttons: RGB CTA (reference ops-cta-button) — SAME gradient on every
   primary button for consistency, with a slow sweep so it reads RGB */
#dream-pc-builder .btn-primary:not(:disabled),
#dream-pc-builder .btn-add-component,
#dream-pc-builder .btn-view-product,
#dpb-builder-hub .btn-primary:not(:disabled),
#dpb-builder-hub .btn-add-component,
#dpb-builder-hub .btn-view-product,
.dream-pc-modal .btn-primary:not(:disabled),
.dream-pc-modal .btn-view-product {
    background: linear-gradient(105deg, #8b3dff 0%, #f02b9b 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(192, 132, 252, 0.35), 0 0 12px rgba(255, 23, 68, 0.25);
}

#dream-pc-builder .btn-primary:not(:disabled),
#dream-pc-builder .btn-add-component,
#dream-pc-builder .btn-view-product,
#dpb-builder-hub .btn-primary:not(:disabled),
#dpb-builder-hub .btn-add-component,
#dpb-builder-hub .btn-view-product,
.dream-pc-modal .btn-primary:not(:disabled),
.dream-pc-modal .btn-view-product {
    background-size: 220% 100%;
    background-position: 0% center;
    animation: dpb-btn-gradient-flow 9s ease-in-out infinite;
}

#dream-pc-builder .btn-primary:hover:not(:disabled),
#dream-pc-builder .btn-add-component:hover,
#dream-pc-builder .btn-view-product:hover,
#dpb-builder-hub .btn-primary:hover:not(:disabled),
#dpb-builder-hub .btn-add-component:hover,
#dpb-builder-hub .btn-view-product:hover,
.dream-pc-modal .btn-primary:hover:not(:disabled),
.dream-pc-modal .btn-view-product:hover {
    box-shadow: 0 6px 24px rgba(192, 132, 252, 0.45), 0 0 20px rgba(255, 23, 68, 0.35);
}

#dream-pc-builder .btn-secondary,
.dream-pc-modal .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(192, 132, 252, 0.45);
    color: #bae6fd;
}

#dream-pc-builder .btn-secondary:hover,
.dream-pc-modal .btn-secondary:hover {
    background: rgba(192, 132, 252, 0.07);
    box-shadow: 0 4px 20px rgba(192, 132, 252, 0.2), 0 0 16px rgba(212, 41, 255, 0.22);
}

#dream-pc-builder .btn-outline,
#dpb-builder-hub .btn-outline,
.dream-pc-modal .btn-outline {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(192, 132, 252, 0.35);
    color: #cbd5e1;
}

#dream-pc-builder .btn-outline:hover,
#dpb-builder-hub .btn-outline:hover,
.dream-pc-modal .btn-outline:hover {
    border-color: rgba(192, 132, 252, 0.7);
    color: #c084fc;
    background: rgba(192, 132, 252, 0.06);
    box-shadow: 0 0 16px rgba(192, 132, 252, 0.22);
}

#dream-pc-builder .btn-select-component {
    background: rgba(192, 132, 252, 0.08);
    border: 1px solid rgba(192, 132, 252, 0.32);
    color: #d8b4fe;
}

#dream-pc-builder .btn-select-component:hover {
    color: #ffffff;
}

/* Component rows & add-component buttons */
#dream-pc-builder .component-row {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(192, 132, 252, 0.22);
    box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.04), 0 2px 8px rgba(0, 0, 0, 0.35);
}

#dream-pc-builder .component-row:hover {
    border-color: rgba(192, 132, 252, 0.45);
    box-shadow: var(--dpb-shadow-md), 0 0 16px rgba(192, 132, 252, 0.15);
}

#dream-pc-builder .component-stacked-container {
    border-color: rgba(192, 132, 252, 0.3);
    box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.06), 0 2px 8px rgba(0, 0, 0, 0.35);
}

#dream-pc-builder .btn-add-component-stacked,
#dream-pc-builder .btn-add-component-list {
    background: rgba(255, 255, 255, 0.06);
    border: 2px dashed rgba(192, 132, 252, 0.35);
    box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.04), 0 2px 8px rgba(0, 0, 0, 0.3);
}

#dream-pc-builder .btn-add-component-stacked:hover,
#dream-pc-builder .btn-add-component-list:hover {
    border-color: #c084fc;
    border-style: solid;
    background: rgba(192, 132, 252, 0.07);
    box-shadow: var(--dpb-shadow-md), 0 0 24px rgba(192, 132, 252, 0.18);
}

#dream-pc-builder .btn-add-component-stacked .add-icon,
#dream-pc-builder .btn-add-component-list .add-icon {
    background: rgba(192, 132, 252, 0.12);
}

/* Sidebar sections */
#dream-pc-builder .sidebar-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(192, 132, 252, 0.25);
    box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.05), 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 18px rgba(192, 132, 252, 0.14), 0 0 36px rgba(212, 41, 255, 0.08);
}

#dream-pc-builder .sidebar-section::before {
    filter: drop-shadow(0 0 7px rgba(192, 132, 252, 0.5));
}

/* Compatibility notice -> dark amber glass */
#dream-pc-builder .compatibility-notice,
#dream-pc-builder .compatibility-notice-modal,
.dream-pc-modal .compatibility-notice-modal {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.05) 100%);
    border: 1px solid rgba(245, 158, 11, 0.28);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.08), 0 0 24px rgba(245, 158, 11, 0.08);
}

#dream-pc-builder .compatibility-notice h3,
#dream-pc-builder .compatibility-notice-modal h3,
.dream-pc-modal .compatibility-notice-modal h3 {
    color: #fcd34d;
}

#dream-pc-builder .notice-text,
#dream-pc-builder .notice-disclaimer {
    color: #e7c98b;
}

#dream-pc-builder .notice-text strong {
    color: #fde68a;
}

#dream-pc-builder .warning-text {
    color: #fcd34d;
}

/* Category cards */
#dream-pc-builder .category-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(196, 181, 253, 0.28);
}

/* Modals */
#dream-pc-builder .modal-content,
.dream-pc-modal .modal-content {
    background: var(--dpb-bg-modal);
    border: 1px solid rgba(192, 132, 252, 0.25);
    box-shadow: var(--dpb-shadow-xl), 0 0 0 1px rgba(192, 132, 252, 0.05), 0 0 30px rgba(212, 41, 255, 0.25), 0 0 60px rgba(192, 132, 252, 0.1);
}

#dream-pc-builder .modal-header,
.dream-pc-modal .modal-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#dream-pc-builder .modal-close,
.dream-pc-modal .modal-close {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(192, 132, 252, 0.3);
    color: #cbd5e1;
}

#dream-pc-builder .modal-input,
.dream-pc-modal .modal-input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(196, 181, 253, 0.35);
}

#dream-pc-builder .modal-input:focus,
#dream-pc-builder .search-input:focus,
.dream-pc-modal .modal-input:focus {
    border-color: #c084fc;
    box-shadow: 0 0 0 4px rgba(192, 132, 252, 0.12);
}

/* Share / download modal fields */
#dream-pc-builder .download-section,
.dream-pc-modal .download-section {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#dream-pc-builder .download-select,
#dream-pc-builder .share-link-section-input,
.dream-pc-modal .download-select,
.dream-pc-modal .share-link-section-input {
    background: rgba(11, 6, 28, 0.6);
    border: 1px solid rgba(196, 181, 253, 0.3);
    color: #e6e6f0;
}

#dream-pc-builder .share-link-section .share-label,
#dream-pc-builder .download-section .share-label,
.dream-pc-modal .share-link-section .share-label,
.dream-pc-modal .download-section .share-label {
    color: #a8b0c8;
}

/* Preview floating actions stay legible on the dark canvas
   (the white document itself is untouched for print/download) */
#dream-pc-builder .dpb-preview-floating-actions .btn-icon-only,
.dream-pc-modal .dpb-preview-floating-actions .btn-icon-only {
    background: rgba(15, 8, 40, 0.85);
    border: 1px solid rgba(192, 132, 252, 0.35);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    color: #cbd5e1;
}

/* ================= BUILDER HUB ================= */

#dpb-builder-hub .dpb-hub-section-head {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

#dpb-builder-hub .dpb-hub-section-title {
    color: #f8fafc;
    font-family: var(--dpb-font-headings);
}

#dpb-builder-hub .dpb-hub-section-subtitle {
    color: #a8b0c8;
}

#dpb-builder-hub .dpb-hub-card {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 18px rgba(192, 132, 252, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

#dpb-builder-hub .dpb-hub-card:hover {
    box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.18), 0 14px 32px rgba(0, 0, 0, 0.45), 0 0 26px rgba(212, 41, 255, 0.25), 0 0 52px rgba(192, 132, 252, 0.12);
}

#dpb-builder-hub .dpb-hub-card--featured {
    box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.12), 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 24px rgba(212, 41, 255, 0.18), 0 0 48px rgba(192, 132, 252, 0.1);
}

#dpb-builder-hub .dpb-hub-card-body {
    background:
        linear-gradient(180deg, rgba(192, 132, 252, 0.05), transparent 28%),
        rgba(255, 255, 255, 0.05);
}

#dpb-builder-hub .dpb-hub-card-flag {
    color: #fff;
    background: linear-gradient(135deg, #8b3dff, #f02b9b);
    background-size: 200% 100%;
    animation: dpb-rgb-bar 4s linear infinite;
    box-shadow: 0 0 16px rgba(212, 41, 255, 0.5);
}

#dpb-builder-hub .dpb-hub-card-icon {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(192, 132, 252, 0.3);
    color: #cbd5e1;
}

#dpb-builder-hub .dpb-hub-card-icon:hover {
    background: var(--dpb-color-primary-gradient);
    border-color: transparent;
    box-shadow: 0 0 14px rgba(192, 132, 252, 0.4);
}

#dpb-builder-hub .dpb-hub-empty {
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(192, 132, 252, 0.35);
}

#dpb-builder-hub .dpb-hub-slider-arrow {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(192, 132, 252, 0.32);
    color: #c084fc;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

#dpb-builder-hub .dpb-hub-toast {
    border: 1px solid rgba(192, 132, 252, 0.45);
    box-shadow: 0 0 28px rgba(192, 132, 252, 0.35);
}

#dpb-builder-hub .dpb-hub-hero .btn-primary:not(:disabled) {
    background: linear-gradient(105deg, #8b3dff 0%, #f02b9b 100%);
    color: #fff;
    box-shadow: 0 0 24px rgba(192, 132, 252, 0.45), 0 0 24px rgba(255, 23, 68, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    #dream-pc-builder .dpb-rgb-divider,
    #dpb-builder-hub .dpb-rgb-divider,
    #dpb-builder-hub .dpb-hub-card-flag {
        animation: none;
        background-size: 100% 100%;
        background-position: 0 0;
    }
}

/* =========================================================
   BRAND-COHERENCE v4 — matches the reference .dcx section
   - primary CTAs = .dcx-btn look (violet -> magenta + sheen)
   - brand cyan / violet / magenta accents (no rainbow / pride
     flag gradients)
   - cards keep the reference glass + animated top sweep
   ========================================================= */

@keyframes dpb-card-sweep {
    to {
        background-position: 250% 0;
    }
}

#dream-pc-builder .btn-add-component,
#dream-pc-builder .btn-primary:not(:disabled),
#dream-pc-builder .btn-view-product,
#dpb-builder-hub .btn-add-component,
#dpb-builder-hub .btn-primary:not(:disabled),
#dpb-builder-hub .btn-view-product,
.dream-pc-modal .btn-primary:not(:disabled),
.dream-pc-modal .btn-view-product {
    position: relative;
    overflow: hidden;
    background: linear-gradient(100deg, #8b3dff, #f02b9b 82%) !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    animation: none !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;
    color: #fff !important;
    font-weight: 800 !important;
    box-shadow: 0 14px 36px rgba(139, 61, 255, 0.32), 0 4px 14px rgba(240, 43, 155, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

#dream-pc-builder .btn-add-component,
#dpb-builder-hub .btn-add-component {
    padding: 13px 24px;
}

#dream-pc-builder .btn-add-component::before,
#dream-pc-builder .btn-primary:not(:disabled)::before,
#dream-pc-builder .btn-view-product::before,
#dpb-builder-hub .btn-add-component::before,
#dpb-builder-hub .btn-primary:not(:disabled)::before,
#dpb-builder-hub .btn-view-product::before,
.dream-pc-modal .btn-primary:not(:disabled)::before,
.dream-pc-modal .btn-view-product::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.3) 50%, transparent 75%);
    transform: translateX(-140%);
    transition: transform 0.7s ease;
    pointer-events: none;
    z-index: 2;
}

#dream-pc-builder .btn-add-component:hover::before,
#dream-pc-builder .btn-primary:hover:not(:disabled)::before,
#dream-pc-builder .btn-view-product:hover::before,
#dpb-builder-hub .btn-add-component:hover::before,
#dpb-builder-hub .btn-primary:hover:not(:disabled)::before,
#dpb-builder-hub .btn-view-product:hover::before,
.dream-pc-modal .btn-primary:hover:not(:disabled)::before,
.dream-pc-modal .btn-view-product:hover::before {
    transform: translateX(140%);
}

#dream-pc-builder .btn-add-component:hover,
#dream-pc-builder .btn-primary:hover:not(:disabled),
#dream-pc-builder .btn-view-product:hover,
#dpb-builder-hub .btn-add-component:hover,
#dpb-builder-hub .btn-primary:hover:not(:disabled),
#dpb-builder-hub .btn-view-product:hover,
.dream-pc-modal .btn-primary:hover:not(:disabled),
.dream-pc-modal .btn-view-product:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 46px rgba(139, 61, 255, 0.42), 0 6px 20px rgba(240, 43, 155, 0.24);
}

#dream-pc-builder .component-row,
#dpb-builder-hub .component-row {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

#dream-pc-builder .component-row::after,
#dpb-builder-hub .component-row::after,
#dream-pc-builder .component-stacked-container::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    z-index: 6;
    pointer-events: none;
    background: linear-gradient(90deg, #c084fc, #6947ff, #d629ff, #f02b9b);
    background-size: 250% 100%;
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    transition: transform 0.45s cubic-bezier(.22, 1, .36, 1), opacity 0.3s ease;
}

#dream-pc-builder .component-row:hover::after,
#dpb-builder-hub .component-row:hover::after,
#dream-pc-builder .component-stacked-container:hover::after {
    transform: scaleX(1);
    opacity: 1;
    animation: dpb-card-sweep 2.4s linear infinite;
}

#dream-pc-builder .component-row:hover,
#dpb-builder-hub .component-row:hover,
#dream-pc-builder .component-stacked-container:hover {
    transform: translateY(-4px);
    border-color: rgba(196, 181, 253, 0.45);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45), 0 0 22px rgba(0, 212, 255, 0.2), 0 0 40px rgba(139, 61, 255, 0.18), 0 0 60px rgba(240, 43, 155, 0.12);
}

#dream-pc-builder .component-stacked-container,
#dpb-builder-hub .component-stacked-container {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

#dpb-builder-hub .dpb-hub-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 18px rgba(192, 132, 252, 0.08);
}

#dpb-builder-hub .dpb-hub-card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    z-index: 6;
    pointer-events: none;
    background: linear-gradient(90deg, #c084fc, #6947ff, #d629ff, #f02b9b);
    background-size: 250% 100%;
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    transition: transform 0.45s cubic-bezier(.22, 1, .36, 1), opacity 0.3s ease;
}

#dpb-builder-hub .dpb-hub-card:hover::after {
    transform: scaleX(1);
    opacity: 1;
    animation: dpb-card-sweep 2.4s linear infinite;
}

#dpb-builder-hub .dpb-hub-card:hover {
    transform: translateY(-6px);
    border-color: rgba(196, 181, 253, 0.45);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), 0 0 22px rgba(0, 212, 255, 0.2), 0 0 40px rgba(139, 61, 255, 0.18), 0 0 60px rgba(240, 43, 155, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    #dream-pc-builder .dpb-rgb-divider,
    #dpb-builder-hub .dpb-rgb-divider,
    #dpb-builder-hub .dpb-hub-card-flag,
    #dream-pc-builder .btn-add-component,
    #dream-pc-builder .btn-primary,
    #dream-pc-builder .btn-view-product,
    #dream-pc-builder .btn-select-component,
    #dpb-builder-hub .btn-add-component,
    #dpb-builder-hub .btn-primary,
    #dpb-builder-hub .btn-view-product,
    .dream-pc-modal .btn-primary,
    .dream-pc-modal .btn-view-product {
        animation: none;
    }

    #dream-pc-builder .btn-add-component::before,
    #dream-pc-builder .btn-primary::before,
    #dream-pc-builder .btn-view-product::before,
    #dpb-builder-hub .btn-add-component::before,
    #dpb-builder-hub .btn-primary::before,
    #dpb-builder-hub .btn-view-product::before,
    .dream-pc-modal .btn-primary::before,
    .dream-pc-modal .btn-view-product::before {
        transition: none;
        transform: translateX(-140%);
        opacity: 0;
    }

    #dream-pc-builder .component-row::after,
    #dpb-builder-hub .component-row::after,
    #dream-pc-builder .component-stacked-container::after,
    #dpb-builder-hub .dpb-hub-card::after {
        display: none;
    }
}

/* --- merged hero + orbitron headings + hub accents --- */
#dpb-builder-hub {
    background: #16063A;
}

#dpb-builder-hub .dpb-hub-card-flag {
    background: linear-gradient(135deg, #8b3dff, #f02b9b);
    animation: none;
    color: #fff;
    box-shadow: 0 0 16px rgba(139, 61, 255, 0.45);
}

#dpb-builder-hub .dpb-hub-card-icon {
    background: linear-gradient(100deg, #8b3dff, #f02b9b 82%);
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: 0 4px 14px rgba(139, 61, 255, 0.3);
}

#dpb-builder-hub .dpb-hub-card-icon:hover {
    background: linear-gradient(100deg, #8b3dff, #f02b9b 82%);
    border-color: transparent;
    box-shadow: 0 0 16px rgba(139, 61, 255, 0.5), 0 0 30px rgba(240, 43, 155, 0.25);
}

#dream-pc-builder .dpb-rgb-divider,
#dpb-builder-hub .dpb-rgb-divider {
    background: linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.75), rgba(139, 61, 255, 0.9), rgba(240, 43, 155, 0.75), transparent);
}

#dream-pc-builder .dpb-builder-title,
#dpb-builder-hub .dpb-builder-title,
#dream-pc-builder .total-amount,
#dpb-builder-hub .dpb-hub-section-title,
#dream-pc-builder .modal-title,
.dream-pc-modal .modal-title {
    font-family: var(--dpb-font-headings);
}

/* =========================================================
   v5 — orbitron titles, white doc preview, tech icons
   ========================================================= */

/* Orbitron guard for the hero title + badge (both pages) */
#dream-pc-builder .dpb-builder-title,
#dpb-builder-hub .dpb-builder-title {
    font-family: 'Orbitron', 'Montserrat', sans-serif !important;
    letter-spacing: -0.02em;
    line-height: 1.08;
}

#dream-pc-builder .dpb-header-badge,
#dpb-builder-hub .dpb-header-badge {
    font-family: 'Orbitron', 'Montserrat', sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Document preview must always read as a real white page (the generated
   document is transparent inline, so the guard is needed in the hub modal
   too, which renders outside #dream-pc-builder) */
#dream-pc-builder .dpb-preview-canvas .dpb-doc,
.dream-pc-modal .dpb-preview-canvas .dpb-doc,
#dream-pc-builder #dpb-hub-preview-canvas .dpb-doc {
    background: #ffffff !important;
    color: #1f2937 !important;
}

/* "Your Components" heading — future-tech style */
#dream-pc-builder .components-header h2 {
    font-family: var(--dpb-font-headings);
    font-size: 21px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0;
    padding-bottom: 10px;
    position: relative;
    background: linear-gradient(90deg, #c084fc, #6947ff, #d629ff, #f02b9b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 12px rgba(192, 132, 252, 0.35));
}

#dream-pc-builder .components-header h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 128px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, #c084fc, #6947ff, #d629ff, transparent);
    box-shadow: 0 0 12px rgba(192, 132, 252, 0.4);
}

/* Uniform tech icon tiles on component rows */
#dream-pc-builder .component-icon-wrapper,
#dpb-builder-hub .component-icon-wrapper {
    position: relative;
    width: 52px;
    height: 52px;
    margin-right: 16px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(192, 132, 252, 0.08), rgba(139, 61, 255, 0.06));
    border: 1px solid rgba(192, 132, 252, 0.22);
    box-shadow: inset 0 0 14px rgba(192, 132, 252, 0.08), 0 0 14px rgba(192, 132, 252, 0.06);
}

#dream-pc-builder .component-icon-wrapper::after,
#dpb-builder-hub .component-icon-wrapper::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 12px;
    right: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.6), transparent);
}

#dream-pc-builder .component-icon-wrapper svg,
#dpb-builder-hub .component-icon-wrapper svg {
    width: 30px;
    height: 30px;
    color: #d8b4fe;
    filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.55));
}

/* uniform icon-only action buttons (preview / print / download) */
#dream-pc-builder .btn-icon-only,
#dream-pc-builder .dpb-preview-floating-actions .btn-icon-only,
.dream-pc-modal .btn-icon-only,
.dream-pc-modal .dpb-preview-floating-actions .btn-icon-only {
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(192, 132, 252, 0.08), rgba(139, 61, 255, 0.05));
    border: 1px solid rgba(192, 132, 252, 0.25);
    box-shadow: inset 0 0 12px rgba(192, 132, 252, 0.06);
    color: #ecd9ff;
}

#dream-pc-builder .btn-icon-only:hover,
#dream-pc-builder .dpb-preview-floating-actions .btn-icon-only:hover,
.dream-pc-modal .btn-icon-only:hover,
.dream-pc-modal .dpb-preview-floating-actions .btn-icon-only:hover {
    border-color: rgba(192, 132, 252, 0.6);
    color: #ffffff;
    box-shadow: 0 0 16px rgba(192, 132, 252, 0.3), inset 0 0 12px rgba(192, 132, 252, 0.12);
}

#dream-pc-builder .btn-icon-only svg {
    filter: drop-shadow(0 0 4px rgba(192, 132, 252, 0.6));
}

/* plus tile on the stacked / list add placeholders */
#dream-pc-builder .btn-add-component-stacked .add-icon,
#dream-pc-builder .btn-add-component-list .add-icon {
    background: linear-gradient(180deg, rgba(192, 132, 252, 0.14), rgba(139, 61, 255, 0.1));
    border: 1px solid rgba(192, 132, 252, 0.3);
    box-shadow: inset 0 0 10px rgba(192, 132, 252, 0.08);
    color: #d8b4fe;
}

/* search + share + warning icons in the tech accent */
#dream-pc-builder .search-icon {
    color: rgba(192, 132, 252, 0.7);
}

#dream-pc-builder .share-link-icon svg,
#dream-pc-builder .warning-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

#dream-pc-builder .share-link-icon {
    color: #c084fc;
    filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.5));
}

#dream-pc-builder .warning-icon {
    color: #fbbf24;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));
}

#dream-pc-builder .modal-close:hover,
.dream-pc-modal .modal-close:hover {
    color: #ffffff;
    border-color: rgba(192, 132, 252, 0.7);
    box-shadow: 0 0 14px rgba(192, 132, 252, 0.35);
}

/* =========================================================
   v6 — build summary redesign (locked, !important-scoped
   so no other CSS can override it)
   ========================================================= */

#dream-pc-builder .dream-pc-builder-sidebar .sidebar-section.build-summary {
    background: linear-gradient(180deg, rgba(24, 19, 45, 0.97), rgba(15, 11, 30, 0.99)) !important;
    border: 1px solid rgba(192, 132, 252, 0.35) !important;
    box-shadow: 0 0 0 1px rgba(139, 61, 255, 0.08), 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 24px rgba(139, 61, 255, 0.22) !important;
    padding: 22px 20px !important;
}

#dream-pc-builder .dream-pc-builder-sidebar .sidebar-section.build-summary::before {
    background: linear-gradient(135deg, #c084fc, #8b3dff, #d629ff, #f02b9b) !important;
    background-size: 300% 300%;
    opacity: 1;
    filter: drop-shadow(0 0 9px rgba(192, 132, 252, 0.7));
    animation: dpbRGBFlow 8s linear infinite;
}

#dream-pc-builder .build-summary h3 {
    font-family: 'Orbitron', 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #f2e6ff !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
}

#dream-pc-builder .build-summary h3::before {
    content: '';
    flex: 0 0 auto;
    width: 4px;
    height: 14px;
    border-radius: 99px;
    background: linear-gradient(180deg, #c084fc, #8b3dff, #f02b9b);
    box-shadow: 0 0 10px rgba(192, 132, 252, 0.8);
    margin-right: 2px;
}

#dream-pc-builder .build-summary .summary-divider {
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.55), rgba(240, 43, 155, 0.4), transparent) !important;
    margin: 12px 0 !important;
}

#dream-pc-builder .build-summary .summary-items {
    max-height: 300px !important;
    gap: 0 !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 61, 255, 0.35) transparent;
}

#dream-pc-builder .build-summary .summary-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 2px !important;
    border-bottom: 1px solid rgba(192, 132, 252, 0.14) !important;
}

#dream-pc-builder .build-summary .summary-item:last-of-type {
    border-bottom: none !important;
}

#dream-pc-builder .build-summary .item-category {
    color: #ddc4f6 !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

#dream-pc-builder .build-summary .item-price {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

#dream-pc-builder .build-summary .item-stock-warning {
    color: #f0877e !important;
    font-size: 10px !important;
}

#dream-pc-builder .build-summary .summary-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 14px !important;
}

#dream-pc-builder .build-summary .total-label {
    font-family: 'Orbitron', 'Montserrat', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.24em !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #e2ccff !important;
}

#dream-pc-builder .build-summary .total-amount {
    font-family: 'Orbitron', 'Montserrat', sans-serif !important;
    font-size: 27px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    padding-left: 0.08em !important;
    background: var(--dpb-rgb-text) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    background-size: 200% 200% !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 0 14px rgba(192, 132, 252, 0.55));
    animation: dpb-gradient-flow 5s linear infinite;
}

#dream-pc-builder .build-summary .stock-warning {
    background: rgba(251, 191, 36, 0.1) !important;
    border: 1px solid rgba(251, 191, 36, 0.38) !important;
    border-radius: 10px !important;
}

#dream-pc-builder .build-summary .warning-text {
    color: #fde68a !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

#dream-pc-builder .build-summary .share-link-summary {
    background: rgba(139, 61, 255, 0.14) !important;
    border: 1px solid rgba(192, 132, 252, 0.32) !important;
    border-radius: 10px !important;
    padding: 12px !important;
    margin: 12px 0 !important;
}

#dream-pc-builder .build-summary .share-link-label,
#dream-pc-builder .build-summary .share-link-name,
#dream-pc-builder .build-summary .share-link-code {
    color: #ffffff !important;
}

#dream-pc-builder .build-summary .btn-add-to-cart {
    background: linear-gradient(100deg, #8b3dff, #f02b9b 82%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 14px 20px !important;
    position: relative;
    overflow: hidden;
    text-shadow: none;
    box-shadow: 0 14px 36px rgba(139, 61, 255, 0.35), 0 4px 14px rgba(240, 43, 155, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

#dream-pc-builder .build-summary .btn-add-to-cart:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 20px 46px rgba(139, 61, 255, 0.44), 0 6px 20px rgba(240, 43, 155, 0.22) !important;
}

#dream-pc-builder .build-summary .btn-add-to-cart:disabled {
    background: rgba(139, 61, 255, 0.16) !important;
    border-color: rgba(192, 132, 252, 0.28) !important;
    color: rgba(220, 210, 255, 0.55) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

#dream-pc-builder .build-summary .btn-share-build {
    background: rgba(192, 132, 252, 0.1) !important;
    border: 1px solid rgba(192, 132, 252, 0.42) !important;
    border-radius: 14px !important;
    color: #ecd9ff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin-top: 10px !important;
    padding: 13px 20px !important;
}

#dream-pc-builder .build-summary .btn-share-build:hover {
    background: rgba(192, 132, 252, 0.16) !important;
    border-color: rgba(192, 132, 252, 0.7) !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(192, 132, 252, 0.35) !important;
}

/* =========================================================
   v7 — expanded hero: taller, layered, animated background
   so the top of the page never reads flat (builder + hub)
   ========================================================= */

#dream-pc-builder .dpb-builder-header,
#dpb-builder-hub .dpb-builder-header {
    min-height: 0;
    padding: 96px 24px 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#dpb-builder-hub .dpb-builder-header.dpb-hub-hero {
    padding: 96px 24px 180px;
}

#dream-pc-builder .dpb-builder-title,
#dpb-builder-hub .dpb-builder-title {
    font-size: clamp(44px, 6.5vw, 78px);
    line-height: 1.1;
    margin-bottom: 20px;
}

#dream-pc-builder .dpb-builder-subtitle,
#dpb-builder-hub .dpb-builder-subtitle {
    max-width: 660px;
    margin-top: 4px;
    letter-spacing: 0.01em;
    color: #e4d5f7;
}

#dream-pc-builder .dpb-rgb-divider,
#dpb-builder-hub .dpb-rgb-divider {
    width: 320px;
    height: 4px;
    margin-top: 30px;
    box-shadow: 0 0 26px rgba(192, 132, 252, 0.6), 0 0 60px rgba(139, 61, 255, 0.35), 0 0 80px rgba(240, 43, 155, 0.25);
}

/* richer layered background */
#dream-pc-builder .dpb-hero-bg,
#dpb-builder-hub .dpb-hero-bg {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0.4) 84%, transparent 98%);
    mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0.4) 84%, transparent 98%);
}

#dream-pc-builder .dpb-hero-bg::after,
#dpb-builder-hub .dpb-hero-bg::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    width: 72%;
    height: 56%;
    min-width: 620px;
    min-height: 420px;
    background: radial-gradient(ellipse at center, rgba(139, 61, 255, 0.2) 0%, rgba(212, 41, 255, 0.1) 45%, transparent 72%);
    filter: blur(18px);
    border-radius: 50%;
}

#dream-pc-builder .dpb-hero-glow-1,
#dpb-builder-hub .dpb-hero-glow-1 {
    width: 740px;
    height: 740px;
    left: -260px;
    top: 4%;
    background: rgba(139, 61, 255, 0.26);
}

#dream-pc-builder .dpb-hero-glow-2,
#dpb-builder-hub .dpb-hero-glow-2 {
    width: 780px;
    height: 780px;
    right: -280px;
    bottom: -80px;
    background: rgba(240, 43, 155, 0.2);
}

#dream-pc-builder .dpb-hero-grid,
#dpb-builder-hub .dpb-hero-grid {
    background-size: 56px 56px;
    background-image:
        linear-gradient(rgba(196, 181, 253, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(196, 181, 253, 0.09) 1px, transparent 1px);
    -webkit-mask-image: radial-gradient(ellipse at 50% 36%, #000, transparent 82%);
    mask-image: radial-gradient(ellipse at 50% 36%, #000, transparent 82%);
}

#dream-pc-builder .dpb-hero-sheen,
#dpb-builder-hub .dpb-hero-sheen {
    animation-duration: 11s;
}

#dream-pc-builder .dpb-hero-orbit-a,
#dpb-builder-hub .dpb-hero-orbit-a {
    width: 800px;
    height: 800px;
    left: -300px;
    top: -300px;
}

#dream-pc-builder .dpb-hero-orbit-b,
#dpb-builder-hub .dpb-hero-orbit-b {
    width: 640px;
    height: 640px;
    right: -280px;
    top: 24%;
    border-color: rgba(192, 132, 252, 0.24);
}

#dream-pc-builder .dpb-hero-line-left,
#dpb-builder-hub .dpb-hero-line-left {
    top: 22%;
    width: 400px;
    opacity: 0.65;
}

#dream-pc-builder .dpb-hero-line-right,
#dpb-builder-hub .dpb-hero-line-right {
    bottom: 24%;
    width: 460px;
    opacity: 0.65;
}

#dream-pc-builder .dpb-hero-particles i,
#dpb-builder-hub .dpb-hero-particles i {
    background: rgba(200, 170, 255, 0.7);
    box-shadow: 0 0 8px rgba(192, 132, 252, 0.8);
}

@media (max-width: 900px) {
    #dream-pc-builder .dpb-builder-header,
    #dpb-builder-hub .dpb-builder-header {
        min-height: 0;
        padding: 84px 20px 112px;
    }

    #dpb-builder-hub .dpb-builder-header.dpb-hub-hero {
        padding: 84px 20px 160px;
    }

    #dream-pc-builder .dpb-builder-title,
    #dpb-builder-hub .dpb-builder-title {
        font-size: clamp(34px, 9vw, 54px);
    }

    #dream-pc-builder .dpb-rgb-divider,
    #dpb-builder-hub .dpb-rgb-divider {
        width: 240px;
    }
}

/* =========================================================
   v8 — design flows into the body, contrast + icon fixes
   ========================================================= */

/* pull the component area up into the hero's design zone and
   keep the animated grid + glow going behind the body */
#dream-pc-builder .dream-pc-builder-container {
    position: relative;
    z-index: auto;
    margin-top: -56px;
    padding-bottom: 24px;
}

#dream-pc-builder .dream-pc-builder-container::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(216, 180, 254, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(216, 180, 254, 0.05) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 78%);
    mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 78%);
}

#dream-pc-builder .dream-pc-builder-container::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    width: 92%;
    height: 460px;
    background: radial-gradient(ellipse at center, rgba(139, 61, 255, 0.16), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}

/* Compatibility Notice — proper contrast on the dark theme */
#dream-pc-builder .compatibility-notice,
#dream-pc-builder .compatibility-notice-modal,
.dream-pc-modal .compatibility-notice-modal {
    background: linear-gradient(135deg, rgba(139, 61, 255, 0.16), rgba(192, 132, 252, 0.07)) !important;
    border: 1px solid rgba(192, 132, 252, 0.38) !important;
    box-shadow: inset 0 0 22px rgba(139, 61, 255, 0.1), 0 0 18px rgba(139, 61, 255, 0.14) !important;
    color: #e6d8f8 !important;
}

#dream-pc-builder .compatibility-notice h3,
#dream-pc-builder .compatibility-notice-modal h3,
.dream-pc-modal .compatibility-notice-modal h3 {
    color: #f5ecff !important;
    font-family: var(--dpb-font-headings);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#dream-pc-builder .compatibility-notice .notice-text,
#dream-pc-builder .compatibility-notice .notice-disclaimer,
#dream-pc-builder .compatibility-notice-modal p,
.dream-pc-modal .compatibility-notice-modal p {
    color: #e6d8f8 !important;
    opacity: 1 !important;
}

#dream-pc-builder .compatibility-notice .notice-text strong,
#dream-pc-builder .compatibility-notice-modal p strong,
.dream-pc-modal .compatibility-notice-modal p strong {
    color: #ffffff !important;
}

#dream-pc-builder .compatibility-notice .notice-disclaimer {
    color: #cfbaf0 !important;
}

/* Reset / danger buttons get a clear red-tinted indicator (like Remove) */
#dream-pc-builder .btn-danger,
#dpb-builder-hub .btn-danger,
.dream-pc-modal .btn-danger {
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    border-radius: 100px !important;
    color: #fda4af !important;
}

#dream-pc-builder .btn-danger:hover,
#dpb-builder-hub .btn-danger:hover,
.dream-pc-modal .btn-danger:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.4) !important;
}

/* Preview modal: print + download sit inline with the X */
#dream-pc-builder .modal-header .modal-header-actions,
.dream-pc-modal .modal-header .modal-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

#dream-pc-builder .modal-header .modal-header-actions > *,
.dream-pc-modal .modal-header .modal-header-actions > * {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 10px;
}

#dream-pc-builder .modal-header .modal-header-actions svg,
.dream-pc-modal .modal-header .modal-header-actions svg {
    width: 18px;
    height: 18px;
    display: block;
}

#dream-pc-builder .modal-header .modal-header-actions .modal-close,
.dream-pc-modal .modal-header .modal-header-actions .modal-close {
    width: 42px;
    height: 42px;
    justify-content: center;
}

/* old floating print/download layer is no longer used */
#dream-pc-builder .dpb-preview-floating-actions,
.dream-pc-modal .dpb-preview-floating-actions {
    display: none !important;
}

/* Copy Link (mini) + Select buttons — clearly light purple, high contrast */
#dream-pc-builder .btn-copy-mini,
#dream-pc-builder #btn-copy-mini-share {
    background: linear-gradient(100deg, #8b3dff, #c084fc 82%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(139, 61, 255, 0.35) !important;
}

#dream-pc-builder .btn-copy-mini:hover,
#dream-pc-builder #btn-copy-mini-share:hover {
    box-shadow: 0 0 18px rgba(192, 132, 252, 0.55) !important;
    transform: translateY(-1px);
}

#dream-pc-builder .btn-select-component {
    background: rgba(192, 132, 252, 0.1) !important;
    border: 1px solid rgba(192, 132, 252, 0.42) !important;
    color: #f0e0ff !important;
}

@media (max-width: 900px) {
    #dream-pc-builder .dream-pc-builder-container {
        margin-top: -36px;
    }
}

/* =========================================================
   v9 — Add-to-Cart summary matches Build Summary card
   ========================================================= */

#dream-pc-builder .cart-summary,
.dream-pc-modal .cart-summary {
    background: linear-gradient(180deg, rgba(24, 19, 45, 0.97), rgba(15, 11, 30, 0.99)) !important;
    border: 1px solid rgba(192, 132, 252, 0.35) !important;
    border-radius: 14px !important;
    padding: 18px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 0 0 1px rgba(139, 61, 255, 0.08), 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 24px rgba(139, 61, 255, 0.22) !important;
}

#dream-pc-builder .cart-summary .summary-row,
.dream-pc-modal .cart-summary .summary-row {
    color: #ddc4f6 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(192, 132, 252, 0.14) !important;
}

#dream-pc-builder .cart-summary .summary-row:last-child,
.dream-pc-modal .cart-summary .summary-row:last-child {
    border-bottom: none !important;
}

#dream-pc-builder .cart-summary .summary-row span:nth-child(2),
.dream-pc-modal .cart-summary .summary-row span:nth-child(2) {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
}

#dream-pc-builder .cart-summary .summary-row-error,
.dream-pc-modal .cart-summary .summary-row-error {
    color: #ff8f87 !important;
}

#dream-pc-builder .cart-summary .summary-row-error span:nth-child(2),
.dream-pc-modal .cart-summary .summary-row-error span:nth-child(2) {
    color: #ff8f87 !important;
}

#dream-pc-builder .cart-summary .summary-row-grand,
.dream-pc-modal .cart-summary .summary-row-grand {
    font-family: 'Orbitron', 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    border-top: 1px solid rgba(192, 132, 252, 0.35) !important;
    background: none !important;
    color: #e2ccff !important;
}

#dream-pc-builder .cart-summary .summary-row-grand span:nth-child(2),
.dream-pc-modal .cart-summary .summary-row-grand span:nth-child(2) {
    font-family: 'Orbitron', 'Montserrat', sans-serif !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    padding-left: 0.08em !important;
    background: var(--dpb-rgb-text) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    background-size: 200% 200% !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 0 12px rgba(192, 132, 252, 0.55));
    animation: dpb-gradient-flow 5s linear infinite;
}

#dream-pc-builder #add-to-cart-modal .modal-title,
.dream-pc-modal #add-to-cart-modal .modal-title {
    font-family: 'Orbitron', 'Montserrat', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    font-weight: 800 !important;
    background: linear-gradient(90deg, #c084fc, #6947ff, #d629ff, #f02b9b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 14px rgba(192, 132, 252, 0.45));
}

/* =========================================================
   v10 — Builder Hub: guest banner, local card, Orbitron modal
   titles so every hub modal matches the PC builder modals
   ========================================================= */

#dream-pc-builder .dpb-hub-guest-banner,
.dpb-builder-hub .dpb-hub-guest-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(139, 61, 255, 0.18), rgba(240, 43, 155, 0.12));
    border: 1px solid rgba(192, 132, 252, 0.42);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
    box-shadow: 0 0 0 1px rgba(139, 61, 255, 0.08), 0 8px 26px rgba(0, 0, 0, 0.35), 0 0 22px rgba(139, 61, 255, 0.18);
}

#dream-pc-builder .dpb-hub-guest-banner-icon,
.dpb-builder-hub .dpb-hub-guest-banner-icon {
    flex: 0 0 auto;
    color: #f0bb4d;
    filter: drop-shadow(0 0 8px rgba(240, 187, 77, 0.5));
}

#dream-pc-builder .dpb-hub-guest-banner-text,
.dpb-builder-hub .dpb-hub-guest-banner-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#dream-pc-builder .dpb-hub-guest-banner-text strong,
.dpb-builder-hub .dpb-hub-guest-banner-text strong {
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

#dream-pc-builder .dpb-hub-guest-banner-text span,
.dpb-builder-hub .dpb-hub-guest-banner-text span {
    color: #d8c5f6;
    font-size: 12.5px;
    line-height: 1.45;
}

#dream-pc-builder .dpb-hub-guest-banner .dpb-hub-btn--sm,
.dpb-builder-hub .dpb-hub-guest-banner .dpb-hub-btn--sm {
    flex: 0 0 auto;
    padding: 9px 18px !important;
    font-size: 12.5px !important;
}

#dream-pc-builder .dpb-hub-btn--sm,
.dpb-builder-hub .dpb-hub-btn--sm {
    padding: 9px 18px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
}

.dpb-builder-hub .dpb-hub-card--local {
    box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.4), 0 12px 30px rgba(0, 0, 0, 0.42), 0 0 26px rgba(139, 61, 255, 0.25) !important;
}

.dpb-builder-hub .dpb-hub-card-local-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 150px;
    border-bottom: 1px solid rgba(192, 132, 252, 0.18);
    background:
        radial-gradient(160px 90px at 50% 120%, rgba(192, 132, 252, 0.18), transparent 70%),
        rgba(255, 255, 255, 0.03);
    color: #c084fc;
}

.dpb-builder-hub .dpb-hub-card--local .dpb-hub-card-badge {
    background: rgba(139, 61, 255, 0.2);
    border: 1px solid rgba(192, 132, 252, 0.35);
    color: #e0cafc;
    font-size: 11px;
    letter-spacing: 0.05em;
}

/* Hub modal titles match the PC builder's Orbitron gradient titles */
#dpb-hub-share-modal .modal-title,
#dpb-hub-preview-modal .modal-title,
#dpb-hub-delete-modal .modal-title,
.dream-pc-modal #dpb-hub-share-modal .modal-title,
.dream-pc-modal #dpb-hub-preview-modal .modal-title,
.dream-pc-modal #dpb-hub-delete-modal .modal-title {
    font-family: 'Orbitron', 'Montserrat', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    font-weight: 800 !important;
    background: linear-gradient(90deg, #c084fc, #6947ff, #d629ff, #f02b9b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 14px rgba(192, 132, 252, 0.45));
}

/* =========================================================
   v10.1 — Builder Hub continuous scroll: sections merge into
   the hero like the PC builder (overlapping container that
   keeps the animated grid + glow; no pill boxes / seams)
   ========================================================= */

#dpb-builder-hub .dpb-hub-body {
    position: relative;
    z-index: auto;
    margin-top: -140px;
    padding-bottom: 24px;
}

#dpb-builder-hub .dpb-hub-body::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(216, 180, 254, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(216, 180, 254, 0.05) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 78%);
    mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 78%);
}

#dpb-builder-hub .dpb-hub-body::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    width: 92%;
    height: 460px;
    background: radial-gradient(ellipse at center, rgba(139, 61, 255, 0.16), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}

#dpb-builder-hub .dpb-hub-section {
    position: relative;
    z-index: 1;
    max-width: 1520px;
    margin: 0 auto;
    padding: 0 3% 56px;
}

/* Section heads become plain text rows instead of floated glass
   boxes, so hero / My Builds / Featured reads as one page */
#dpb-builder-hub .dpb-hub-section-head {
    padding: 0 2px 22px;
    margin-bottom: 0;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(192, 132, 252, 0.16);
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* =========================================================
   v10.2 — Builder Hub: harden the guest banner layout using
   the id-level scope so no theme / utility class can break
   the flex row (id beats element/class specificity).
   ========================================================= */

#dpb-builder-hub .dpb-hub-guest-banner {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px 14px;
    max-width: 100%;
    box-sizing: border-box;
}

#dpb-builder-hub .dpb-hub-guest-banner-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}

#dpb-builder-hub .dpb-hub-guest-banner-text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#dpb-builder-hub .dpb-hub-guest-banner .dpb-hub-btn--sm {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* =========================================================
   v11 — Builder Hub: premium featured cards + visual cleanup.
   - Cards read as product cards: fixed 16/10 cover image, equal
     heights, price / component count / date always visible.
   - Featured Builds load for EVERY visitor (public showcase).
   - ~60% of the glow / blur / shadow noise removed; borders +
     contrast do the work while keeping the futuristic identity.
   ========================================================= */

#dpb-builder-hub .dpb-hub-featured-track {
    gap: 24px;
    align-items: stretch;
    padding: 2px 2px 12px;
}

#dpb-builder-hub .dpb-hub-grid--featured > .dpb-hub-card {
    flex: 0 0 320px;
    max-width: 320px;
    height: auto;
}

/* Fixed image box for every hub card (featured + my builds): no
   empty boxes, consistent ratio, images never stretched. */
#dpb-builder-hub .dpb-hub-card-media {
    aspect-ratio: 16 / 10;
    background: linear-gradient(160deg, #17063B, #2B1060);
}

#dpb-builder-hub .dpb-hub-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#dpb-builder-hub .dpb-hub-card-vignette {
    background: linear-gradient(180deg, transparent 45%, rgba(20, 5, 44, 0.6) 100%);
    opacity: 0.5;
}

#dpb-builder-hub .dpb-hub-card-flag {
    top: 12px;
    left: 12px;
    right: auto;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    padding: 5px 11px;
    color: #fff;
    background: linear-gradient(90deg, #8b3dff, #f02b9b);
    background-size: 100% 100%;
    animation: none;
    box-shadow: none;
}

/* Card surface — clean glass, no multi-layer glow bursts */
#dpb-builder-hub .dpb-hub-card {
    background: rgba(24, 9, 48, 0.92);
    border: 1px solid rgba(216, 180, 254, 0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 24px rgba(6, 2, 16, 0.35);
}

#dpb-builder-hub .dpb-hub-card:hover {
    transform: translateY(-4px);
    border-color: rgba(192, 132, 252, 0.35);
    box-shadow: 0 18px 36px rgba(6, 2, 16, 0.42);
}

#dpb-builder-hub .dpb-hub-card::after {
    height: 2px;
    opacity: 0.85;
}

#dpb-builder-hub .dpb-hub-card-body {
    padding: 14px 16px 16px;
    background: transparent;
}

#dpb-builder-hub .dpb-hub-card-name {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.32;
    min-height: 2.64em;
    font-size: 14.5px;
    color: #ffffff;
}

#dpb-builder-hub .dpb-hub-card-price {
    margin-top: 8px;
    font-size: 18px;
    font-weight: 800;
    color: #f4e9ff;
}

#dpb-builder-hub .dpb-hub-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(216, 180, 254, 0.1);
}

#dpb-builder-hub .dpb-hub-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: #9aa3b8;
}

#dpb-builder-hub .dpb-hub-card-meta-item svg {
    color: #8b5cf6;
}

#dpb-builder-hub .dpb-hub-card-actions {
    margin-top: 14px;
    align-items: center;
    justify-content: flex-end;
}

#dpb-builder-hub .dpb-hub-card-load {
    margin-right: auto;
    padding: 8px 14px;
    font-size: 12px;
}

#dpb-builder-hub .dpb-hub-card-icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(192, 132, 252, 0.25);
    color: #cdd6e8;
    box-shadow: none;
}

#dpb-builder-hub .dpb-hub-card-icon:hover {
    background: linear-gradient(100deg, #8b3dff, #f02b9b 82%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 1px rgba(139, 61, 255, 0.4);
}

#dpb-builder-hub .dpb-hub-card-icon--danger:hover {
    background: #ef4444;
    box-shadow: none;
}

/* Guest local build card keeps the same image box rhythm */
#dpb-builder-hub .dpb-hub-card--local .dpb-hub-card-local-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
    background:
        radial-gradient(120px 70px at 50% 130%, rgba(192, 132, 252, 0.16), transparent 70%),
        rgba(255, 255, 255, 0.03);
}

#dpb-builder-hub .dpb-hub-card--local .dpb-hub-card-badge {
    font-size: 11px;
    letter-spacing: 0.05em;
    margin-right: auto;
}

/* Slider controls — cleaner arrows */
#dpb-builder-hub .dpb-hub-slider-arrow {
    box-shadow: 0 4px 12px rgba(6, 2, 16, 0.3);
}

#dpb-builder-hub .dpb-hub-slider-arrow:hover {
    box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.45);
}

/* My Builds grid spacing */
#dpb-builder-hub .dpb-hub-grid:not(.dpb-hub-grid--featured) {
    gap: 24px;
}

/* Empty states — lighter surfaces, dashed borders instead of glow */
#dpb-builder-hub .dpb-hub-empty {
    padding: 44px 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(192, 132, 252, 0.3);
}

#dpb-builder-hub .dpb-hub-section {
    scroll-margin-top: 28px;
}

#dpb-builder-hub .dpb-hub-section-head {
    border-bottom-color: rgba(192, 132, 252, 0.12);
}

#dpb-builder-hub .dpb-hub-guest-banner {
    box-shadow: none;
}

/* Toast — drop the coloured bloom */
#dpb-builder-hub .dpb-hub-toast {
    box-shadow: 0 12px 28px rgba(6, 2, 16, 0.45);
}

/* ============ shared hero / page visual cleanup (both pages) ============ */

#dream-pc-builder .dpb-hero-glow-1,
#dpb-builder-hub .dpb-hero-glow-1 {
    background: rgba(139, 61, 255, 0.09);
}

#dream-pc-builder .dpb-hero-glow-2,
#dpb-builder-hub .dpb-hero-glow-2 {
    background: rgba(240, 43, 155, 0.055);
}

#dream-pc-builder .dpb-hero-grid,
#dpb-builder-hub .dpb-hero-grid {
    background-image:
        linear-gradient(rgba(196, 181, 253, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(196, 181, 253, 0.08) 1px, transparent 1px);
}

#dream-pc-builder .dpb-builder-header::after,
#dpb-builder-hub .dpb-builder-header::after {
    opacity: 0.45;
}

#dream-pc-builder .dpb-ambient-glow,
#dpb-builder-hub .dpb-ambient-glow {
    opacity: 0.55;
}

#dream-pc-builder .dpb-hero-orbit-a,
#dpb-builder-hub .dpb-hero-orbit-a,
#dream-pc-builder .dpb-hero-orbit-b,
#dpb-builder-hub .dpb-hero-orbit-b {
    border-color: rgba(192, 132, 252, 0.1);
}

#dream-pc-builder .dpb-hero-sheen,
#dpb-builder-hub .dpb-hero-sheen {
    opacity: 0.6;
}

#dream-pc-builder .dpb-hero-line-left,
#dpb-builder-hub .dpb-hero-line-left,
#dream-pc-builder .dpb-hero-line-right,
#dpb-builder-hub .dpb-hero-line-right {
    opacity: 0.3;
}

#dream-pc-builder .dpb-hero-particles i,
#dpb-builder-hub .dpb-hero-particles i {
    box-shadow: none;
}

#dpb-builder-hub .dpb-hub-body::before {
    background-image:
        linear-gradient(rgba(216, 180, 254, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(216, 180, 254, 0.035) 1px, transparent 1px);
}

#dpb-builder-hub .dpb-hub-body::after {
    opacity: 0.45;
}

/* Hero text — cut the heavy glow */
#dream-pc-builder .dpb-builder-title,
#dpb-builder-hub .dpb-builder-title {
    text-shadow: none;
}

#dream-pc-builder .dpb-gradient-text,
#dpb-builder-hub .dpb-gradient-text {
    background: var(--dpb-rgb-text);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    animation: dpb-gradient-flow 5s linear infinite;
    will-change: background-position;
    filter: none;
    transition: filter 0.3s ease;
}

/* Divider accent — soft instead of flashlight */
#dream-pc-builder .dpb-rgb-divider,
#dpb-builder-hub .dpb-rgb-divider {
    box-shadow: 0 0 10px rgba(192, 132, 252, 0.22);
}

/* Primary buttons — gradient + inset highlight, restrained drop */
#dream-pc-builder .btn-primary:not(:disabled),
#dream-pc-builder .btn-add-component,
#dream-pc-builder .btn-view-product,
#dpb-builder-hub .btn-primary:not(:disabled),
#dpb-builder-hub .btn-add-component,
#dpb-builder-hub .btn-view-product,
.dream-pc-modal .btn-primary:not(:disabled),
.dream-pc-modal .btn-view-product {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 20px rgba(139, 61, 255, 0.22);
}

#dream-pc-builder .btn-primary:hover:not(:disabled),
#dream-pc-builder .btn-add-component:hover,
#dream-pc-builder .btn-view-product:hover,
#dpb-builder-hub .btn-primary:hover:not(:disabled),
#dpb-builder-hub .btn-add-component:hover,
#dpb-builder-hub .btn-view-product:hover,
.dream-pc-modal .btn-primary:hover:not(:disabled),
.dream-pc-modal .btn-view-product:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 26px rgba(139, 61, 255, 0.3);
}

/* Hub modal gradient titles — smaller drop shadow */
#dpb-hub-share-modal .modal-title,
#dpb-hub-preview-modal .modal-title,
#dpb-hub-delete-modal .modal-title {
    filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.2));
}

/* Responsive slider */
@media (max-width: 1024px) {
    #dpb-builder-hub .dpb-hub-grid--featured > .dpb-hub-card {
        flex-basis: 300px;
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    #dpb-builder-hub .dpb-hub-featured-track {
        gap: 16px;
    }

    #dpb-builder-hub .dpb-hub-grid--featured > .dpb-hub-card {
        flex-basis: 82vw;
        max-width: 82vw;
    }
}

/* =========================================================
   v12 — de-fog the page background + plain-white text pass.
   Removes the heavy ambient/fog washes so the dark gradient
   background reads clean. Text forced to plain white (no RGB
   gradient, no purple): "Your Components" heading, component
   list titles/names, and the Build Summary total.
   ========================================================= */

/* De-fog: ambient aurora washes (both pages) */
#dream-pc-builder .dpb-ambient-glow,
#dpb-builder-hub .dpb-ambient-glow {
    background: radial-gradient(circle, rgba(122, 44, 255, 0.03) 0%, rgba(155, 92, 255, 0.01) 40%, transparent 70%);
}

#dream-pc-builder .dpb-ambient-glow--right,
#dpb-builder-hub .dpb-ambient-glow--right {
    background: radial-gradient(circle, rgba(155, 92, 255, 0.02) 0%, rgba(122, 44, 255, 0.008) 40%, transparent 70%);
}

/* De-fog: bottom gradient blob on the builder wrapper */
#dream-pc-builder.dream-pc-builder-wrapper::after {
    content: none;
}

/* De-fog: hero — softer glows, faint grid, dimmed sheen/aurora */
#dream-pc-builder .dpb-hero-glow-1,
#dpb-builder-hub .dpb-hero-glow-1 {
    background: rgba(139, 61, 255, 0.045);
}

#dream-pc-builder .dpb-hero-glow-2,
#dpb-builder-hub .dpb-hero-glow-2 {
    background: rgba(240, 43, 155, 0.03);
}

#dream-pc-builder .dpb-hero-grid,
#dpb-builder-hub .dpb-hero-grid {
    background-image:
        linear-gradient(rgba(196, 181, 253, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(196, 181, 253, 0.06) 1px, transparent 1px);
}

#dream-pc-builder .dpb-hero-sheen,
#dpb-builder-hub .dpb-hero-sheen {
    opacity: 0.3;
}

#dream-pc-builder .dpb-builder-header::after,
#dpb-builder-hub .dpb-builder-header::after {
    opacity: 0.2;
}

#dream-pc-builder .dpb-hero-particles i,
#dpb-builder-hub .dpb-hero-particles i {
    opacity: 0.5;
    background: rgba(190, 140, 255, 0.4);
}

/* White text: "Your Components" heading */
#dream-pc-builder .components-header h2 {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    filter: none !important;
    text-shadow: none !important;
}

#dream-pc-builder .components-header h2::after {
    box-shadow: 0 0 6px rgba(192, 132, 252, 0.25);
}

/* White text: component list title + product name (no purple) */
#dream-pc-builder .component-title,
#dream-pc-builder .component-name,
#dream-pc-builder .component-row .component-name,
#dream-pc-builder .component-row .component-title {
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* White text: Build Summary total */
#dream-pc-builder .build-summary .total-amount {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    filter: none !important;
    animation: none !important;
}

#dream-pc-builder .build-summary .total-label {
    color: #ffffff !important;
}

/* =========================================================
   v13 — remove the blurred glowing hero wash + fix icon
   visibility + show the full featured cover image.
   - Hero (both pages): the large blur(100px) glows and the
     sweeping sheen are removed; the clean grid / orbit / line
     structure stays. No more "blurry glowing" backdrop behind
     the Dream PC titles.
   - Component row icons: white, glow removed so they read
     clearly on the dark tiles.
   - Featured card cover: shown whole (object-fit contain +
     padding) instead of being cropped; cards keep their fixed
     16:10 media box.
   ========================================================= */

/* Remove the blurred glowing hero washes (builder + hub) */
#dream-pc-builder .dpb-hero-glow,
#dpb-builder-hub .dpb-hero-glow {
    display: none;
}

#dream-pc-builder .dpb-hero-sheen,
#dpb-builder-hub .dpb-hero-sheen {
    display: none;
}

#dream-pc-builder .dpb-builder-header::after,
#dpb-builder-hub .dpb-builder-header::after {
    display: none;
}

#dream-pc-builder .dpb-hero-line,
#dpb-builder-hub .dpb-hero-line {
    opacity: 0.3;
}

/* Component row icons: bright + glow-free */
#dream-pc-builder .component-icon-wrapper,
#dpb-builder-hub .component-icon-wrapper {
    box-shadow: inset 0 0 10px rgba(192, 132, 252, 0.06);
}

#dream-pc-builder .component-icon-wrapper svg,
#dpb-builder-hub .component-icon-wrapper svg {
    color: #ffffff;
    filter: none;
}

/* Featured / build card cover: show the whole image */
#dpb-builder-hub .dpb-hub-card-media {
    padding: 12px;
}

#dpb-builder-hub .dpb-hub-card-media img {
    object-fit: contain;
    object-position: center;
}

#dpb-builder-hub .dpb-hub-card-vignette {
    opacity: 0.3;
}

/* =========================================================
   v14 — remove the centered hero "middle glow".
   `dpb-hero-bg::after` is a large blur(18px) purple/pink
   ellipse that sits dead-centre behind the Dream PC title on
   both pages. It survived the earlier cleanup because only the
   glow/sheen/aurora elements were targeted. Suspend it, and
   drop the floating particle halos (box-shadow glow) too.
   ========================================================= */

#dream-pc-builder .dpb-hero-bg::after,
#dpb-builder-hub .dpb-hero-bg::after {
    display: none;
}

#dream-pc-builder .dpb-hero-particles i,
#dpb-builder-hub .dpb-hero-particles i {
    box-shadow: none;
}

/* =========================================================
   v15 — ADD TO CART SUMMARY modal: plain white title + totals.
   Removes the RGB gradient text and glow from the modal title
   and the Grand Total amount so it matches the white-text pass
   applied to the Build Summary.
   ========================================================= */

#dream-pc-builder #add-to-cart-modal .modal-title,
.dream-pc-modal #add-to-cart-modal .modal-title {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    filter: none !important;
    text-shadow: none !important;
}

#dream-pc-builder .cart-summary .summary-row,
.dream-pc-modal .cart-summary .summary-row {
    color: #ffffff !important;
}

#dream-pc-builder .cart-summary .summary-row-grand span:nth-child(2),
.dream-pc-modal .cart-summary .summary-row-grand span:nth-child(2) {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    filter: none !important;
    animation: none !important;
}

/* =========================================================
   v16 — Add-Component modal on small screens.
   1) Two-column product/category grid on phones (the old <=480px
      rule forced a single column).
   2) Re-asserts the maximum modal z-index so the theme's fixed
      bottom navigation can never paint over the picker.
   3) Caps the product modal height below the bottom nav so the
      last rows stay visible and tappable on short viewports.
   ========================================================= */

@media (max-width: 600px) {
    #dream-pc-builder .product-results,
    .dream-pc-modal .product-results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #dream-pc-builder .category-grid,
    .dream-pc-modal .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #dream-pc-builder .product-card,
    .dream-pc-modal .product-card {
        box-shadow: 0 0 0 1px rgba(122, 44, 255, 0.06), 0 2px 8px rgba(21, 18, 38, 0.04), 0 0 16px rgba(184, 77, 255, 0.18);
    }

    #dream-pc-builder .product-card .product-image,
    .dream-pc-modal .product-card .product-image {
        height: 120px;
    }

    #dream-pc-builder .product-card .product-image img,
    .dream-pc-modal .product-card .product-image img {
        max-width: 90%;
        max-height: 90%;
    }

    #product-modal .modal-content {
        max-height: calc(100dvh - 120px);
    }
}

.dream-pc-modal,
#dream-pc-builder .dream-pc-modal,
#dpb-builder-hub .dream-pc-modal {
    z-index: 2147483647 !important;
}

/* =========================================================
   v17 — Document preview containment.
   The generated document is inserted via innerHTML with its own
   inline stacking/z-index (watermark z:0, header z:1) and can
   bleed past its stage on some themes, so the top text appeared
   to sit above/behind the modal header. These rules keep the
   modal header always on top and clip the document to its own
   stage box using `contain: paint`.
   ========================================================= */

#dream-pc-builder .modal-header,
.dream-pc-modal .modal-header {
    position: relative;
    z-index: 30;
}

#dream-pc-builder .modal-body.dpb-preview-body,
.dream-pc-modal .modal-body.dpb-preview-body {
    position: relative;
    z-index: 20;
    overflow: hidden;
}

#dream-pc-builder .dpb-preview-canvas,
.dream-pc-modal .dpb-preview-canvas {
    position: relative;
    z-index: 10;
    contain: paint;
}

#dream-pc-builder .dpb-preview-canvas .dpb-doc,
.dream-pc-modal .dpb-preview-canvas .dpb-doc {
    position: relative;
    overflow: hidden;
}

/* =========================================================
   v18 — Preview modal usability rework.
   v17 clipped the preview body (broke scrolling) and did not
   address the real symptom: the fitted document can bleed up
   past its stage toward the modal header, overlapping the
   header buttons and swallowing their clicks. Here we:
     - restore body scrolling (v17 set overflow:hidden),
     - drop the stricter canvas containment (contain: paint),
     - clip overflow at the STAGE boundary (keeps the doc off
       the header while the body still scrolls the stage),
     - set the header action buttons on top of everything,
     - add a clear gutter so the document visually starts below
       the modal header and never touches it.
   ========================================================= */

#dream-pc-builder .modal-body.dpb-preview-body,
.dream-pc-modal .modal-body.dpb-preview-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 20px !important;
}

#dream-pc-builder .dpb-preview-stage,
.dream-pc-modal .dpb-preview-stage {
    position: relative;
    z-index: 10;
    overflow: hidden;
    overflow: clip;
}

#dream-pc-builder .dpb-preview-canvas,
.dream-pc-modal .dpb-preview-canvas {
    position: relative !important;
    z-index: 10 !important;
    contain: none !important;
}

#dream-pc-builder .modal-header .modal-header-actions,
.dream-pc-modal .modal-header .modal-header-actions {
    position: relative;
    z-index: 5;
}

#dream-pc-builder .modal-header-actions .btn-secondary,
#dream-pc-builder .modal-header-actions .modal-close,
.dream-pc-modal .modal-header-actions .btn-secondary,
.dream-pc-modal .modal-header-actions .modal-close {
    pointer-events: auto;
}

/* ============================================================
   v19 — MODERN REFRESH (builder, hub, dpb_banner hero)
   Shared design language: deep glass surfaces, hairline
   gradient-tinted borders, restrained glow, refined type.
   ============================================================ */

/* ---------- Hero headers (builder / hub / banner) ---------- */
#dream-pc-builder .dpb-builder-header,
#dpb-builder-hub .dpb-builder-header,
.dpb-banner .dpb-builder-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 92px 24px 104px;
    min-height: 420px;
    overflow: hidden;
}

#dream-pc-builder .dpb-hero-content,
#dpb-builder-hub .dpb-hub-hero-content,
.dpb-banner .dpb-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#dpb-builder-hub .dpb-hub-hero-content {
    padding: 0 24px;
}

.dpb-banner .dpb-hero-content {
    padding: 0 24px;
}

/* Calm the ambient blobs a notch so the hero reads crisp */
#dream-pc-builder .dpb-ambient-glow,
#dpb-builder-hub .dpb-ambient-glow,
.dpb-banner .dpb-ambient-glow {
    opacity: 0.55;
}

.dpb-banner {
    background: linear-gradient(180deg, #10012A 0%, #160335 55%, #1C0436 100%);
}

/* Badge: glass pill with a hairline gradient ring */
.dpb-header-badge {
    padding: 8px 20px;
    background: linear-gradient(90deg, rgba(139, 61, 255, 0.18), rgba(240, 43, 155, 0.12));
    border: 1px solid rgba(192, 132, 252, 0.35);
    letter-spacing: 0.14em;
    font-size: 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 24px rgba(122, 44, 255, 0.18);
}

/* Title: bigger, tighter, softer outer glow */
.dpb-builder-title {
    margin: 0 0 16px;
    font-size: clamp(38px, 6vw, 64px);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: #FFFFFF;
    text-shadow: 0 2px 40px rgba(139, 61, 255, 0.35);
}

/* The banner hero lives outside #dream-pc-builder / #dpb-builder-hub,
   so it can't inherit --dpb-rgb-text: give it a concrete gradient. */
.dpb-banner .dpb-gradient-text {
    background: linear-gradient(90deg, #00d9ff, #6947ff, #d629ff, #ff1744, #ff8a00, #00d9ff) !important;
    background-size: 200% auto;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: rgbText 3.5s linear infinite !important;
}

/* Subtitle: constrained, softer and easier to read */
.dpb-builder-subtitle {
    margin: 0;
    max-width: 640px;
    font-size: 17px;
    font-weight: 500;
    color: #CDD0E8;
    opacity: 1;
}

/* Gradient hairline divider under the hero copy */
.dpb-rgb-divider {
    width: 168px;
    height: 3px;
    border-radius: 100px;
    margin: 26px auto 0;
    background: linear-gradient(90deg, transparent, #c084fc, #d629ff, transparent);
    box-shadow: 0 0 16px rgba(214, 41, 255, 0.55);
}

/* ---------- Builder components column ---------- */
.components-header {
    padding: 12px 0 14px;
}

.components-header h2 {
    font-size: 21px;
    letter-spacing: -0.025em;
    background: linear-gradient(100deg, #FFFFFF 30%, #cdb8ff 70%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#dream-pc-builder .component-row {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.028));
    border: 1px solid rgba(192, 132, 252, 0.18);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 10px rgba(0, 0, 0, 0.28);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

#dream-pc-builder .component-row:hover {
    background: linear-gradient(180deg, rgba(192, 132, 252, 0.1), rgba(255, 255, 255, 0.035));
    border-color: rgba(192, 132, 252, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 26px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(192, 132, 252, 0.08);
    transform: translateY(-2px);
}

#dream-pc-builder .component-row::before {
    opacity: 0.35;
}

#dream-pc-builder .component-row:hover::before {
    opacity: 0.8;
}

#dream-pc-builder .component-stacked-container {
    border-radius: 14px;
    border-color: rgba(192, 132, 252, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 10px rgba(0, 0, 0, 0.28);
}

#dream-pc-builder .btn-add-component-stacked,
#dream-pc-builder .btn-add-component-list {
    border-radius: 12px;
    border-style: dashed;
}

#dream-pc-builder .btn-add-component-stacked:hover,
#dream-pc-builder .btn-add-component-list:hover {
    border-style: dashed;
    transform: translateY(-2px);
}

/* ---------- Sidebar sections ---------- */
#dream-pc-builder .sidebar-section {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
    border: 1px solid rgba(192, 132, 252, 0.18);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 24px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(192, 132, 252, 0.04);
    padding: 20px;
}

#dream-pc-builder .sidebar-section::before {
    opacity: 0.5;
}

#dream-pc-builder .sidebar-section h3 {
    font-size: 13px;
    letter-spacing: 0.12em;
    color: #F3EFFF;
    border-bottom: 1px solid rgba(192, 132, 252, 0.14);
    padding-bottom: 10px;
}

/* Summary rows subtle polish */
#dream-pc-builder .summary-divider {
    background: linear-gradient(90deg, transparent, rgba(195, 146, 255, 0.4) 50%, transparent);
    height: 1px;
}

#dream-pc-builder .summary-total {
    padding-top: 4px;
}

#dream-pc-builder .total-amount {
    background: linear-gradient(100deg, #FFFFFF, #d9c2ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
}

/* ---------- Buttons ---------- */
.btn-add-component,
.btn-primary,
.btn-view-product {
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(122, 44, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(139, 61, 255, 0.16);
}

.btn-primary:hover:not(:disabled),
.btn-add-component:hover,
.btn-view-product:hover {
    box-shadow: 0 10px 28px rgba(122, 44, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 22px rgba(168, 85, 247, 0.35);
}

.btn-primary:disabled {
    box-shadow: none;
}

.btn-secondary,
.btn-outline,
.btn-danger {
    border-radius: 12px;
}

#dream-pc-builder .btn-secondary {
    background: rgba(255, 255, 255, 0.045);
    color: #E3D8FF;
    border-color: rgba(192, 132, 252, 0.38);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#dream-pc-builder .btn-outline {
    background: rgba(255, 255, 255, 0.03);
    color: #DBE1FF;
    border-color: rgba(192, 132, 252, 0.3);
}

#dream-pc-builder .btn-outline:hover {
    border-color: rgba(192, 132, 252, 0.55);
    background: rgba(192, 132, 252, 0.07);
}

/* ---------- Category & product cards (picker modal) ---------- */
#dream-pc-builder .category-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(196, 181, 253, 0.22);
    border-radius: 16px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

#dream-pc-builder .category-card:hover {
    transform: translateY(-3px);
    border-color: rgba(192, 132, 252, 0.45);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35), 0 0 24px rgba(168, 85, 247, 0.16);
}

#dream-pc-builder .category-card.selected {
    border-color: rgba(192, 132, 252, 0.7);
    box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.25), 0 0 28px rgba(168, 85, 247, 0.25);
}

#dream-pc-builder .product-card {
    border-radius: 16px;
    border-color: rgba(196, 181, 253, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 16px rgba(0, 0, 0, 0.24);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

#dream-pc-builder .product-card:hover {
    transform: translateY(-3px);
    border-color: rgba(192, 132, 252, 0.42);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.36), 0 0 26px rgba(168, 85, 247, 0.18);
}

#dream-pc-builder .product-card .product-image {
    border-radius: 12px;
}

.dream-pc-modal .product-card .product-image {
    border-radius: 12px;
}

/* ---------- Modals: calmer, crisper ---------- */
#dream-pc-builder .modal-content,
.dream-pc-modal .modal-content {
    border-radius: 18px;
    border: 1px solid rgba(192, 132, 252, 0.22);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(192, 132, 252, 0.08), 0 0 40px rgba(122, 44, 255, 0.16);
}

#dream-pc-builder .modal-content::before,
.dream-pc-modal .modal-content::before {
    opacity: 0.35;
}

.dream-pc-modal .modal-title {
    letter-spacing: 0.1em;
}

#dream-pc-builder .modal-header,
.dream-pc-modal .modal-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.modal-body.dpb-preview-body {
    background: #0d0420;
}

/* ---------- Hub ---------- */
#dpb-builder-hub .dpb-hub-section-head {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(192, 132, 252, 0.18);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 26px rgba(0, 0, 0, 0.3);
    padding: 20px 22px;
}

#dpb-builder-hub .dpb-hub-section-title {
    color: #FFFFFF;
    font-size: 17px;
    letter-spacing: 0.18em;
}

#dpb-builder-hub .dpb-hub-section-subtitle {
    color: #B9B3D1;
}

#dpb-builder-hub .dpb-hub-card {
    border: 1px solid rgba(192, 132, 252, 0.16);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 22px rgba(0, 0, 0, 0.26);
}

#dpb-builder-hub .dpb-hub-card:hover {
    transform: translateY(-4px);
    border-color: rgba(192, 132, 252, 0.4);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34), 0 0 28px rgba(168, 85, 247, 0.18);
}

#dpb-builder-hub .dpb-hub-card--featured {
    border-color: rgba(192, 132, 252, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 26px rgba(0, 0, 0, 0.3), 0 0 28px rgba(168, 85, 247, 0.14);
}

#dpb-builder-hub .dpb-hub-card-body {
    background: linear-gradient(180deg, rgba(122, 44, 255, 0.045), transparent 30%), rgba(255, 255, 255, 0.02);
}

#dpb-builder-hub .dpb-hub-card-name {
    font-size: 15px;
    letter-spacing: -0.01em;
}

#dpb-builder-hub .dpb-hub-card-flag {
    border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Slider arrows & toasts keep the same rounded, quiet language */
#dpb-builder-hub .dpb-hub-slider-arrow {
    border-radius: 12px;
    border-color: rgba(192, 132, 252, 0.28);
}

#dpb-builder-hub .dpb-hub-guest-banner {
    background: linear-gradient(135deg, rgba(139, 61, 255, 0.12), rgba(240, 43, 155, 0.07));
    border: 1px solid rgba(192, 132, 252, 0.26);
    border-radius: 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    #dream-pc-builder .dpb-builder-header,
    #dpb-builder-hub .dpb-builder-header,
    .dpb-banner .dpb-builder-header {
        padding: 68px 20px 76px;
        min-height: 360px;
    }

    #dream-pc-builder .dpb-builder-subtitle,
    #dpb-builder-hub .dpb-builder-subtitle,
    .dpb-banner .dpb-builder-subtitle {
        font-size: 15px;
    }

    .dpb-hub-hero-actions {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* =========================================================
   Hero CTAs + emphasised title glow scrub (both pages)
   ========================================================= */
#dream-pc-builder .components-header .btn-add-component,
#dream-pc-builder .components-header .btn-add-component:hover,
#dpb-builder-hub .dpb-hub-hero .btn-primary,
#dpb-builder-hub .dpb-hub-hero .btn-primary:hover,
#dpb-builder-hub .dpb-hub-hero .btn-outline,
#dpb-builder-hub .dpb-hub-hero .btn-outline:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

/* =========================================================
   Theme link-color leak — classless links inside the plugin
   wrappers must keep the plugin's headings/whites instead of
   inheriting the theme's --rbb-general-link-color (reads black
   on the dark UI). Scoped to a:not([class]) so button links
   (btn-primary / dpb-hub-btn / card media) keep their colors.
   ========================================================= */
#dream-pc-builder a:not([class]),
#dream-pc-builder a:not([class]):visited,
#dpb-builder-hub a:not([class]),
#dpb-builder-hub a:not([class]):visited {
    color: inherit;
}

/* =========================================================
   Hub hero bottom — remove the seam / colour band between
   the hero and the overlapping body:
   - the blurred radial wash (.dpb-hub-body::after) draws a
     visible lighter band right at the hero edge — kill it;
   - smooth the hero gradient so it reaches the body colour
     early and stays flat to the edge.
   ========================================================= */
#dpb-builder-hub .dpb-hub-body::after {
    opacity: 0;
}

#dpb-builder-hub .dpb-hub-hero {
    background: linear-gradient(180deg, #10012A 0%, #10012A 40%, #16063A 82%, var(--dpb-bg-primary) 100%);
}