.bpla-drone-page {
    min-height: 70vh;
    color: var(--mn-text, #f4f7ef);
}

.bpla-drone-hero,
.bpla-drone-library,
.bpla-drone-single {
    width: min(100% - 48px, 1560px);
    margin: 0 auto;
}

.bpla-drone-hero {
    padding: clamp(40px, 6vw, 92px) 0 28px;
}

.bpla-drone-hero p,
.bpla-drone-single__head p,
.bpla-drone-card__terms {
    margin: 0 0 10px;
    color: var(--mn-accent, #9fbd73);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bpla-drone-hero h1,
.bpla-drone-single__head h1 {
    margin: 0;
    max-width: 980px;
    font-size: clamp(42px, 7vw, 112px);
    line-height: .9;
    letter-spacing: 0;
    text-transform: uppercase;
}

.bpla-drone-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(200px, 360px) auto;
    gap: 12px;
    align-items: end;
    margin: 8px 0 28px;
    padding: 16px;
    border: 1px solid var(--mn-border, rgba(190, 194, 184, .32));
    background: var(--mn-panel, var(--mn-surface, #121714));
}

.bpla-drone-filter label {
    display: grid;
    gap: 7px;
    margin: 0;
}

.bpla-drone-filter span {
    color: var(--mn-muted, #a8b0a2);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bpla-drone-filter input,
.bpla-drone-filter select {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--mn-border, rgba(190, 194, 184, .32));
    background: var(--mn-bg, #070d09);
    color: var(--mn-text, #f4f7ef);
    padding: 0 14px;
    font: inherit;
}

.bpla-drone-filter button {
    min-height: 48px;
    border: 0;
    background: var(--mn-accent, #9fbd73);
    color: #0b120d;
    padding: 0 22px;
    font-weight: 950;
    text-transform: uppercase;
}

.bpla-drone-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding-bottom: 64px;
}

.bpla-drone-card {
    overflow: hidden;
    border: 1px solid var(--mn-border, rgba(190, 194, 184, .28));
    background: var(--mn-panel, var(--mn-surface, #121714));
}

.bpla-drone-card__image {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    background: color-mix(in srgb, var(--mn-surface-2, #182019) 86%, var(--mn-accent, #9fbd73));
    color: var(--mn-muted, #a8b0a2);
    text-decoration: none;
}

.bpla-drone-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bpla-drone-card__body {
    padding: 18px;
}

.bpla-drone-card h2 {
    margin: 0 0 16px;
    font-size: clamp(24px, 2.4vw, 38px);
    line-height: 1;
    letter-spacing: 0;
}

.bpla-drone-card h2 a {
    color: inherit;
    text-decoration: none;
}

.bpla-drone-card dl,
.bpla-drone-specs {
    display: grid;
    gap: 8px;
    margin: 0;
}

.bpla-drone-card dl div,
.bpla-drone-specs div {
    display: grid;
    grid-template-columns: minmax(110px, .55fr) 1fr;
    gap: 10px;
    align-items: baseline;
    padding-top: 8px;
    border-top: 1px solid var(--mn-border, rgba(190, 194, 184, .24));
}

.bpla-drone-card dt,
.bpla-drone-specs dt {
    color: var(--mn-muted, #a8b0a2);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.bpla-drone-card dd,
.bpla-drone-specs dd {
    margin: 0;
    color: var(--mn-text, #f4f7ef);
    font-weight: 800;
}

.bpla-drone-single {
    padding: clamp(32px, 5vw, 72px) 0 72px;
}

.bpla-drone-single__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 560px);
    gap: 28px;
    align-items: end;
    margin-bottom: 28px;
}

.bpla-drone-single__head img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border: 1px solid var(--mn-border, rgba(190, 194, 184, .28));
}

.bpla-drone-single__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    gap: 28px;
    align-items: start;
}

.bpla-drone-single__content,
.bpla-drone-single__specs,
.bpla-drone-empty {
    border: 1px solid var(--mn-border, rgba(190, 194, 184, .28));
    background: var(--mn-panel, var(--mn-surface, #121714));
    padding: clamp(20px, 3vw, 34px);
}

.bpla-drone-single__content {
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.55;
}

.bpla-drone-single__content > *:first-child {
    margin-top: 0;
}

.bpla-drone-single__content > *:last-child {
    margin-bottom: 0;
}

.bpla-drone-single__specs h2 {
    margin: 0 0 16px;
    font-size: 32px;
    letter-spacing: 0;
    text-transform: uppercase;
}

[data-theme="light"] .bpla-drone-hero p,
[data-theme="light"] .bpla-drone-single__head p,
[data-theme="light"] .bpla-drone-card__terms {
    color: var(--mn-accent, #565d4b);
}

[data-theme="light"] .bpla-drone-filter,
[data-theme="light"] .bpla-drone-card,
[data-theme="light"] .bpla-drone-single__content,
[data-theme="light"] .bpla-drone-single__specs,
[data-theme="light"] .bpla-drone-empty {
    background: #ffffff;
    border-color: rgba(38, 40, 37, .14);
    box-shadow: 0 14px 34px rgba(31, 32, 29, .08);
}

[data-theme="light"] .bpla-drone-card__image {
    background: #ecebe4;
    color: #74766f;
}

[data-theme="light"] .bpla-drone-filter input,
[data-theme="light"] .bpla-drone-filter select {
    background: #f7f7f2;
    border-color: rgba(38, 40, 37, .16);
    color: #141615;
}

[data-theme="light"] .bpla-drone-filter button {
    background: #1d211b;
    color: #ffffff;
}

[data-theme="light"] .bpla-drone-card dl div,
[data-theme="light"] .bpla-drone-specs div {
    border-top-color: rgba(38, 40, 37, .12);
}

@media (max-width: 980px) {
    .bpla-drone-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bpla-drone-single__head,
    .bpla-drone-single__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .bpla-drone-hero,
    .bpla-drone-library,
    .bpla-drone-single {
        width: min(100% - 28px, 560px);
    }

    .bpla-drone-hero h1,
    .bpla-drone-single__head h1 {
        font-size: clamp(38px, 14vw, 64px);
    }

    .bpla-drone-filter,
    .bpla-drone-grid {
        grid-template-columns: 1fr;
    }

    .bpla-drone-card {
        width: 100%;
        max-width: 520px;
        margin-inline: auto;
    }

    .bpla-drone-card dl div,
    .bpla-drone-specs div {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}
