/* BUGOLINI Kiezer - front end. Everything is scoped under .bgpk. */

.bgpk {
    --bgpk-ink: #14202B;
    --bgpk-ink-2: #4B5B69;
    --bgpk-ink-3: #6F7F8C;
    --bgpk-sky-top: #EEF4F7;
    --bgpk-sky: #E2EBF1;
    --bgpk-sky-2: #CFDDE6;
    --bgpk-surface: #FFFFFF;
    --bgpk-plate: #FFFFFF;
    --bgpk-line: rgba(20, 32, 43, 0.12);
    --bgpk-line-2: rgba(20, 32, 43, 0.28);
    --bgpk-btn-bg: #14202B;
    --bgpk-btn-fg: #FFFFFF;
    --bgpk-good: #1D7449;
    --bgpk-good-bg: rgba(29, 116, 73, 0.12);
    --bgpk-part: #8A5A00;
    --bgpk-part-bg: rgba(176, 116, 0, 0.14);
    --bgpk-no: #A0392A;
    --bgpk-no-bg: rgba(160, 57, 42, 0.12);
    --bgpk-note-bg: rgba(176, 116, 0, 0.10);
    --bgpk-accent: #B08D57;
    --bgpk-accent-ink: #14202B;
    --bgpk-h: 0;
    --bgpk-r-lg: 22px;
    --bgpk-r-md: 14px;
    --bgpk-r-sm: 10px;

    color: var(--bgpk-ink);
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto 32px;
    max-width: 1120px;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

.bgpk--dark {
    --bgpk-ink: #E8EEF2;
    --bgpk-ink-2: #A9B8C4;
    --bgpk-ink-3: #8597A5;
    --bgpk-sky-top: #182837;
    --bgpk-sky: #13202C;
    --bgpk-sky-2: #24384A;
    --bgpk-surface: #1B2B39;
    --bgpk-plate: #F4F7F9;
    --bgpk-line: rgba(232, 238, 242, 0.12);
    --bgpk-line-2: rgba(232, 238, 242, 0.32);
    --bgpk-btn-bg: #E8EEF2;
    --bgpk-btn-fg: #13202C;
    --bgpk-good: #6FD3A0;
    --bgpk-good-bg: rgba(111, 211, 160, 0.14);
    --bgpk-part: #F0C060;
    --bgpk-part-bg: rgba(240, 192, 96, 0.14);
    --bgpk-no: #F29A8B;
    --bgpk-no-bg: rgba(242, 154, 139, 0.14);
    --bgpk-note-bg: rgba(240, 192, 96, 0.10);
}

.bgpk *,
.bgpk *::before,
.bgpk *::after {
    box-sizing: border-box;
}

/* Mesmerize injects clearfix pseudo-elements into all div/section/ul
 * elements. In grid and flex containers these become extra layout items.
 * Reset only those structural elements; retain the stock badge's own
 * span::before decoration. Scope this reset to the plugin. */
.bgpk::before,
.bgpk::after,
.bgpk div::before,
.bgpk div::after,
.bgpk section::before,
.bgpk section::after,
.bgpk ul::before,
.bgpk ul::after {
    content: none;
    display: none;
}

/* Neutralise theme styles on our own controls. */
.bgpk button,
.bgpk a.bgpk-btn {
    font: inherit;
    text-transform: none;
    letter-spacing: normal;
    text-shadow: none;
    box-shadow: none;
    margin: 0;
    width: auto;
    height: auto;
    -webkit-appearance: none;
    appearance: none;
}

.bgpk a {
    color: inherit;
    text-decoration-color: var(--bgpk-line-2);
    text-underline-offset: 3px;
}

.bgpk a:hover {
    text-decoration-color: currentColor;
}

.bgpk :focus-visible {
    outline: 3px solid var(--bgpk-accent);
    outline-offset: 2px;
}

.bgpk img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.bgpk ul,
.bgpk ol,
.bgpk dl {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bgpk .bgpk-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------- */
/* Shell                                                              */
/* ---------------------------------------------------------------- */

.bgpk__shell {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    padding: clamp(22px, 4vw, 48px) clamp(18px, 4vw, 48px);
    border-radius: var(--bgpk-r-lg);
    background: linear-gradient(180deg, var(--bgpk-sky-top) 0%, var(--bgpk-sky) 100%);
    border: 1px solid var(--bgpk-line);
}

.bgpk__stage {
    min-width: 0;
    min-height: 340px;
}

.bgpk__stage.is-in > * {
    animation: bgpk-in 0.28s ease-out both;
}

@keyframes bgpk-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- */
/* Altimeter                                                          */
/* ---------------------------------------------------------------- */

.bgpk-alt {
    position: sticky;
    top: 110px;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    user-select: none;
}

.bgpk-alt__read {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.bgpk-alt__num {
    font-size: 2.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.bgpk-alt__unit {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bgpk-ink-2);
}

.bgpk-alt__gauge {
    display: grid;
    grid-template-columns: auto 34px;
    gap: 10px;
    height: 296px;
    padding: 16px 0;
}

.bgpk-alt__ticks {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: -6px 0 !important;
    height: calc(100% + 12px);
    font-size: 0.75rem;
    line-height: 1;
    color: var(--bgpk-ink-3);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.bgpk-alt__ticks li {
    position: relative;
    transform: translateY(-1px);
}

.bgpk-alt__track {
    position: relative;
    width: 34px;
    background: linear-gradient(90deg, transparent 15px, var(--bgpk-sky-2) 15px, var(--bgpk-sky-2) 19px, transparent 19px);
    border-radius: 2px;
}

.bgpk-alt__fill {
    position: absolute;
    left: 15px;
    bottom: 0;
    width: 4px;
    height: calc(var(--bgpk-h) * 100%);
    background: var(--bgpk-accent);
    border-radius: 2px;
    transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.bgpk-alt__marker {
    position: absolute;
    left: 1px;
    bottom: calc(var(--bgpk-h) * 100% - 16px);
    width: 32px;
    height: 32px;
    color: var(--bgpk-ink);
    background: var(--bgpk-sky);
    border-radius: 50%;
    transition: bottom 0.6s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}

.bgpk-alt__marker svg {
    display: block;
    width: 32px;
    height: 32px;
}

.bgpk-alt.is-top .bgpk-alt__marker {
    color: var(--bgpk-accent);
}

.bgpk-alt__cap {
    margin: 0;
    max-width: 96px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--bgpk-ink-3);
}

/* ---------------------------------------------------------------- */
/* Type                                                               */
/* ---------------------------------------------------------------- */

.bgpk .bgpk-title {
    margin: 0 0 10px;
    padding: 0;
    color: var(--bgpk-ink);
    font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-transform: none;
    max-width: 24ch;
}

.bgpk .bgpk-title:focus {
    outline: none;
}

.bgpk .bgpk-lead {
    margin: 0 0 24px;
    color: var(--bgpk-ink-2);
    font-size: 1.0625rem;
    line-height: 1.55;
    max-width: 60ch;
}

.bgpk .bgpk-h3 {
    margin: 0 0 14px;
    padding: 0;
    color: var(--bgpk-ink);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.005em;
    text-transform: none;
}

.bgpk .bgpk-sub {
    margin: 22px 0 10px;
    padding: 0;
    color: var(--bgpk-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
}

.bgpk .bgpk-note {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: var(--bgpk-r-sm);
    background: var(--bgpk-note-bg);
    color: var(--bgpk-ink);
    font-size: 0.9375rem;
    max-width: 70ch;
}

/* ---------------------------------------------------------------- */
/* Buttons                                                            */
/* ---------------------------------------------------------------- */

.bgpk .bgpk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--bgpk-btn-bg);
    color: var(--bgpk-btn-fg);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.bgpk .bgpk-btn:hover {
    opacity: 0.88;
    color: var(--bgpk-btn-fg);
}

.bgpk .bgpk-btn:disabled {
    cursor: default;
    opacity: 0.6;
}

.bgpk .bgpk-btn--ghost {
    background: transparent;
    color: var(--bgpk-ink);
    border-color: var(--bgpk-line-2);
}

.bgpk .bgpk-btn--ghost:hover {
    color: var(--bgpk-ink);
    border-color: var(--bgpk-ink);
    opacity: 1;
}

.bgpk .bgpk-btn--sm {
    min-height: 42px;
    padding: 0 16px;
    font-size: 0.9375rem;
    border-radius: 10px;
}

.bgpk .bgpk-btn.is-done {
    background: var(--bgpk-good);
    color: #FFFFFF;
    opacity: 1;
}

.bgpk--dark .bgpk-btn.is-done {
    color: #10241A;
}

.bgpk .bgpk-back,
.bgpk .bgpk-linkbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--bgpk-ink-2);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
}

.bgpk .bgpk-back:hover,
.bgpk .bgpk-linkbtn:hover {
    color: var(--bgpk-ink);
    background: transparent;
}

.bgpk .bgpk-back .bgpk-i {
    width: 18px;
    height: 18px;
}

.bgpk .bgpk-i {
    width: 24px;
    height: 24px;
    flex: none;
    display: block;
}

.bgpk .bgpk-i--sm {
    width: 16px;
    height: 16px;
}

/* ---------------------------------------------------------------- */
/* Intro                                                              */
/* ---------------------------------------------------------------- */

.bgpk-intro {
    padding-top: clamp(8px, 4vw, 48px);
}

.bgpk-intro .bgpk-title {
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    max-width: 18ch;
    margin-bottom: 14px;
}

.bgpk-intro__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
}

.bgpk-intro__time {
    color: var(--bgpk-ink-3);
    font-size: 0.9375rem;
}

/* ---------------------------------------------------------------- */
/* Questions                                                          */
/* ---------------------------------------------------------------- */

.bgpk .bgpk-q__count {
    margin: 0 0 8px;
    color: var(--bgpk-ink-3);
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.bgpk .bgpk-q__hint {
    margin: 0 0 22px;
    color: var(--bgpk-ink-2);
    font-size: 1rem;
}

.bgpk-opts {
    display: grid;
    gap: 12px;
}

.bgpk-opts--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bgpk-opts--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bgpk .bgpk-opt {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 80px;
    padding: 16px 44px 16px 16px;
    border: 1px solid var(--bgpk-line);
    border-radius: var(--bgpk-r-md);
    background: var(--bgpk-surface);
    color: var(--bgpk-ink);
    text-align: left;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.bgpk .bgpk-opt:hover {
    border-color: var(--bgpk-line-2);
    background: var(--bgpk-surface);
    color: var(--bgpk-ink);
}

.bgpk .bgpk-opt:active {
    transform: scale(0.99);
}

.bgpk .bgpk-opt.is-on {
    border-color: var(--bgpk-accent);
    box-shadow: inset 0 0 0 1px var(--bgpk-accent);
}

.bgpk .bgpk-opt[aria-disabled="true"],
.bgpk .bgpk-opt:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.bgpk .bgpk-opt[aria-disabled="true"]:active {
    transform: none;
}

.bgpk-opt__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--bgpk-sky);
    color: var(--bgpk-ink);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.bgpk-opt.is-on .bgpk-opt__icon {
    background: var(--bgpk-accent);
    color: var(--bgpk-accent-ink);
}

.bgpk-opt__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.bgpk-opt__title {
    font-size: 1rem;
    font-weight: 650;
}

.bgpk-opt__sub {
    font-size: 0.875rem;
    color: var(--bgpk-ink-2);
}

.bgpk-opt__tick {
    position: absolute;
    top: 50%;
    right: 14px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border-radius: 50%;
    background: var(--bgpk-accent);
    color: var(--bgpk-accent-ink);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.bgpk-opt__tick .bgpk-i {
    width: 14px;
    height: 14px;
    stroke-width: 2.4;
}

.bgpk-opt.is-on .bgpk-opt__tick {
    opacity: 1;
    transform: none;
}

.bgpk-opts--compact .bgpk-opt {
    grid-template-columns: minmax(0, 1fr);
    min-height: 72px;
}

.bgpk-opts--compact .bgpk-opt__title {
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
}

.bgpk-opts--multi .bgpk-opt {
    min-height: 72px;
    padding-top: 13px;
    padding-bottom: 13px;
}

.bgpk-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    min-height: 50px;
}

.bgpk-nav__count {
    margin-left: auto;
    color: var(--bgpk-ink-2);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}

.bgpk-nav .bgpk-btn {
    margin-left: auto;
}

.bgpk-nav__count + .bgpk-btn {
    margin-left: 0;
}

/* ---------------------------------------------------------------- */
/* Scanning                                                           */
/* ---------------------------------------------------------------- */

.bgpk-scan {
    padding-top: clamp(8px, 4vw, 48px);
}

.bgpk-scan__bar {
    position: relative;
    height: 6px;
    max-width: 420px;
    margin-top: 18px;
    border-radius: 3px;
    background: var(--bgpk-sky-2);
    overflow: hidden;
}

.bgpk-scan__bar span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: var(--bgpk-accent);
    border-radius: 3px;
    animation: bgpk-scan 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bgpk-scan {
    to { width: 100%; }
}

/* ---------------------------------------------------------------- */
/* Result                                                             */
/* ---------------------------------------------------------------- */

.bgpk-result__head .bgpk-lead {
    margin-bottom: 20px;
}

.bgpk-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(18px, 3vw, 36px);
    padding: clamp(16px, 2.4vw, 28px);
    border-radius: 18px;
    background: var(--bgpk-surface);
    border: 1px solid var(--bgpk-line);
}

.bgpk .bgpk-hero__media,
.bgpk .bgpk-card__media,
.bgpk .bgpk-acc__media {
    position: relative;
    display: grid;
    place-items: center;
    border-radius: var(--bgpk-r-md);
    background: radial-gradient(circle at 50% 46%, var(--bgpk-plate) 0%, var(--bgpk-plate) 58%, #E9EFF3 100%);
    overflow: hidden;
    text-decoration: none;
}

.bgpk .bgpk-hero__media {
    align-self: start;
    aspect-ratio: 1 / 1;
    padding: 20px;
}

.bgpk .bgpk-hero__media img,
.bgpk .bgpk-card__media img,
.bgpk .bgpk-acc__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.bgpk .bgpk-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--bgpk-accent);
    color: var(--bgpk-accent-ink);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
}

.bgpk .bgpk-tag--sm {
    position: static;
    display: block;
    width: max-content;
    margin-bottom: 6px;
    padding: 3px 9px;
    font-size: 0.75rem;
}

.bgpk .bgpk-hero__name {
    margin: 0 0 6px;
    padding: 0;
    color: var(--bgpk-ink);
    font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: none;
}

.bgpk .bgpk-hero__name a {
    text-decoration: none;
}

.bgpk .bgpk-hero__name a:hover {
    text-decoration: underline;
}

.bgpk .bgpk-hero__full {
    margin: 0 0 10px;
    color: var(--bgpk-ink-3);
    font-size: 0.8125rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bgpk .bgpk-hero__pitch {
    margin: 0 0 12px;
    font-size: 1rem;
    color: var(--bgpk-ink);
}

.bgpk-hero__buy {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
}

.bgpk-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    font-variant-numeric: tabular-nums;
}

.bgpk-price del {
    color: var(--bgpk-ink-3);
    font-size: 0.9375rem;
}

.bgpk-price strong {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bgpk-ink);
}

.bgpk-hero .bgpk-price strong {
    font-size: 1.625rem;
}

.bgpk-price__vat {
    color: var(--bgpk-ink-3);
    font-size: 0.8125rem;
}

.bgpk-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--bgpk-good);
    font-size: 0.875rem;
    font-weight: 600;
}

.bgpk-stock::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.bgpk-stock.is-back {
    color: var(--bgpk-part);
}

.bgpk-checks {
    display: grid;
    gap: 2px;
}

.bgpk-checks li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--bgpk-line);
    font-size: 0.9375rem;
}

.bgpk-checks li:last-child {
    border-bottom: 0;
}

.bgpk-checks__ico {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.bgpk-checks__ico .bgpk-i--sm {
    width: 14px;
    height: 14px;
    stroke-width: 2.4;
}

.bgpk-checks .is-yes .bgpk-checks__ico { background: var(--bgpk-good-bg); color: var(--bgpk-good); }
.bgpk-checks .is-part .bgpk-checks__ico { background: var(--bgpk-part-bg); color: var(--bgpk-part); }
.bgpk-checks .is-no .bgpk-checks__ico { background: var(--bgpk-no-bg); color: var(--bgpk-no); }
.bgpk-checks .is-unknown .bgpk-checks__ico { background: var(--bgpk-sky); color: var(--bgpk-ink-3); }

.bgpk-checks .is-unknown .bgpk-checks__label {
    color: var(--bgpk-ink-2);
}

.bgpk-checks__detail {
    color: var(--bgpk-ink-3);
    font-size: 0.8125rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bgpk-specs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.bgpk-specs div {
    padding: 10px 12px;
    border-radius: var(--bgpk-r-sm);
    background: var(--bgpk-sky-top);
}

.bgpk--dark .bgpk-specs div {
    background: var(--bgpk-sky);
}

.bgpk .bgpk-specs dt {
    margin: 0 0 2px;
    color: var(--bgpk-ink-3);
    font-size: 0.75rem;
    font-weight: 500;
}

.bgpk .bgpk-specs dd {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.bgpk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-top: 20px;
}

.bgpk .bgpk-tocart {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bgpk-ink);
}

.bgpk .bgpk-err {
    flex-basis: 100%;
    margin: 4px 0 0;
    color: var(--bgpk-no);
    font-size: 0.875rem;
}

.bgpk .bgpk-variants {
    margin: 14px 0 0;
    color: var(--bgpk-ink-2);
    font-size: 0.875rem;
}

/* Blocks below the hero */

.bgpk-block {
    margin-top: clamp(28px, 4vw, 40px);
}

.bgpk-alts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.bgpk-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    padding: 14px;
    border-radius: 16px;
    background: var(--bgpk-surface);
    border: 1px solid var(--bgpk-line);
}

.bgpk .bgpk-card__media {
    align-self: start;
    aspect-ratio: 1 / 1;
    padding: 10px;
}

.bgpk .bgpk-card__name {
    margin: 2px 0 8px;
    padding: 0;
    color: var(--bgpk-ink);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: normal;
}

.bgpk .bgpk-card__name a {
    text-decoration: none;
}

.bgpk .bgpk-card__name a:hover {
    text-decoration: underline;
}

.bgpk-gains {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px !important;
}

.bgpk-gains li {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bgpk-good-bg);
    color: var(--bgpk-good);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
}

.bgpk-gains li.is-plain {
    background: var(--bgpk-sky);
    color: var(--bgpk-ink-2);
}

.bgpk-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 12px;
}

.bgpk .bgpk-compare-toggle {
    margin-top: 14px;
}

.bgpk-compare {
    margin-top: 14px;
}

.bgpk-table-wrap {
    overflow-x: auto;
    border-radius: var(--bgpk-r-md);
    border: 1px solid var(--bgpk-line);
    background: var(--bgpk-surface);
}

.bgpk .bgpk-table {
    width: 100%;
    min-width: 520px;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}

.bgpk .bgpk-table th,
.bgpk .bgpk-table td {
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--bgpk-line);
    text-align: left;
    vertical-align: top;
    background: transparent;
    color: var(--bgpk-ink);
}

.bgpk .bgpk-table thead th {
    font-weight: 700;
    vertical-align: bottom;
}

.bgpk .bgpk-table tbody th {
    color: var(--bgpk-ink-2);
    font-weight: 500;
    white-space: nowrap;
}

.bgpk .bgpk-table tr:last-child th,
.bgpk .bgpk-table tr:last-child td {
    border-bottom: 0;
}

.bgpk .bgpk-table td.is-unknown {
    color: var(--bgpk-ink-3);
}

/* Accessories */

.bgpk-acc {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.bgpk-acc__item {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: var(--bgpk-r-md);
    background: var(--bgpk-surface);
    border: 1px solid var(--bgpk-line);
}

.bgpk .bgpk-acc__media {
    width: 68px;
    height: 68px;
    padding: 6px;
    border-radius: var(--bgpk-r-sm);
}

.bgpk-acc__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.bgpk .bgpk-acc__name {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bgpk .bgpk-acc__name:hover {
    text-decoration: underline;
}

.bgpk-acc__price {
    font-size: 0.875rem;
    color: var(--bgpk-ink-2);
    font-variant-numeric: tabular-nums;
}

.bgpk .bgpk-acc__body .bgpk-linkbtn {
    min-height: 32px;
    padding: 0;
    color: var(--bgpk-ink);
    text-decoration: underline;
    text-decoration-color: var(--bgpk-line-2);
    text-underline-offset: 3px;
}

.bgpk .bgpk-acc__body .bgpk-linkbtn.is-done {
    color: var(--bgpk-good);
    text-decoration: none;
}

.bgpk .bgpk-acc__body .bgpk-tocart {
    font-size: 0.8125rem;
}

/* Rules and help */

.bgpk-rules,
.bgpk-help {
    margin-top: clamp(24px, 3.5vw, 36px);
    padding: 18px 20px;
    border-radius: var(--bgpk-r-md);
    background: var(--bgpk-surface);
    border: 1px solid var(--bgpk-line);
}

.bgpk-rules p {
    margin: 0 0 8px;
    max-width: 72ch;
}

.bgpk .bgpk-rules .bgpk-rules__foot {
    margin: 0;
    color: var(--bgpk-ink-2);
    font-size: 0.875rem;
}

.bgpk-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    margin-top: 14px;
}

.bgpk-help .bgpk-h3 {
    margin-bottom: 2px;
}

.bgpk-help p {
    margin: 0;
    color: var(--bgpk-ink-2);
}

.bgpk-help__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bgpk-again {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin-top: 22px;
}

.bgpk-state {
    padding-top: clamp(8px, 4vw, 48px);
}

/* ---------------------------------------------------------------- */
/* Responsive                                                         */
/* ---------------------------------------------------------------- */

@media (max-width: 960px) {
    .bgpk-opts--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bgpk-acc {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .bgpk-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .bgpk .bgpk-hero__media {
        width: 100%;
        max-width: 360px;
        justify-self: center;
    }

    .bgpk-alts {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .bgpk__shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 18px 16px 22px;
        border-radius: 18px;
    }

    .bgpk-alt {
        position: relative;
        top: 0;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        width: 100%;
    }

    .bgpk-alt__num {
        font-size: 1.375rem;
    }

    .bgpk-alt__unit {
        font-size: 0.875rem;
    }

    .bgpk-alt__gauge {
        flex: 1;
        display: block;
        height: 32px;
        padding: 0;
    }

    .bgpk-alt__ticks,
    .bgpk-alt__cap {
        display: none;
    }

    .bgpk-alt__track {
        width: 100%;
        height: 32px;
        background: linear-gradient(180deg, transparent 14px, var(--bgpk-sky-2) 14px, var(--bgpk-sky-2) 18px, transparent 18px);
    }

    .bgpk-alt__fill {
        left: 0;
        top: 14px;
        bottom: auto;
        height: 4px;
        width: calc(var(--bgpk-h) * (100% - 32px) + 16px);
        transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .bgpk-alt__marker {
        top: 0;
        bottom: auto;
        left: calc(var(--bgpk-h) * (100% - 32px));
        transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
    }

    .bgpk__stage {
        min-height: 0;
    }

    .bgpk-opts--2,
    .bgpk-opts--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .bgpk-opts--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bgpk .bgpk-opt {
        min-height: 68px;
        padding: 12px 42px 12px 12px;
        gap: 12px;
    }

    .bgpk-opt__icon {
        width: 40px;
        height: 40px;
    }

    .bgpk-opts--compact .bgpk-opt {
        min-height: 64px;
        padding: 12px 36px 12px 14px;
    }

    .bgpk-opts--compact .bgpk-opt__tick {
        right: 10px;
    }

    .bgpk .bgpk-hero__media {
        max-width: 240px;
        padding: 14px;
    }

    .bgpk-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bgpk-card {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 12px;
    }

    .bgpk-acc {
        grid-template-columns: minmax(0, 1fr);
    }

    .bgpk-nav {
        flex-wrap: wrap;
    }

    .bgpk-nav .bgpk-btn {
        flex: 1 0 100%;
        order: 3;
    }

    .bgpk-actions .bgpk-btn {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bgpk *,
    .bgpk *::before,
    .bgpk *::after {
        animation: none !important;
        transition: none !important;
    }

    .bgpk-scan__bar span {
        width: 100%;
    }
}

/* Studio layout. Scoped so the shop theme is unaffected. */
.bgpk.bgpk--studio {
    --bgpk-ink:#f7f3ec; --bgpk-ink-2:#d6cdbf; --bgpk-ink-3:#b3a794;
    --bgpk-surface:#211c17; --bgpk-line:rgba(214,201,182,.18);
    --bgpk-line-2:rgba(214,201,182,.35); --bgpk-plate:#fff;
    --bgpk-good:#85e2b4; --bgpk-good-bg:rgba(73,199,135,.13);
    --bgpk-part:#f4c975; --bgpk-no:#ffa89d;
    width:100%; max-width:1200px; font-family:inherit;
}
.bgpk.bgpk--studio::before,.bgpk.bgpk--studio::after,
.bgpk.bgpk--studio :is(div,section,article,aside,nav,ul)::before,
.bgpk.bgpk--studio :is(div,section,article,aside,nav,ul)::after {
    content:none !important; display:none !important;
}
.bgpk--studio .bgpk__shell {
    display:block; overflow:hidden; padding:clamp(22px,4vw,52px);
    background:radial-gradient(ellipse at 95% 0%,rgba(120,96,64,.28),transparent 52%),#15120f;
    border:1px solid #3a3129; border-radius:28px;
    box-shadow:0 24px 64px rgba(20,16,12,.14);
}
.bgpk--studio .bgpk-alt {display:none;}
.bgpk--studio .bgpk__stage {width:100%;min-width:0;min-height:0;}
.bgpk--studio .bgpk-intro {
    display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    align-items:center;gap:28px 34px;padding:0;max-width:none;
}
.bgpk--studio .bgpk-intro__copy {min-width:0;}
.bgpk--studio .bgpk-eyebrow {margin:0 0 18px;color:var(--bgpk-accent-soft, #D9C29B);font-size:11px;font-weight:700;letter-spacing:.16em;line-height:1.5;}
.bgpk--studio .bgpk-title {color:var(--bgpk-ink);font-weight:750;letter-spacing:-.035em;line-height:1.12;font-size:clamp(28px,3.8vw,48px);max-width:22ch;margin:0 0 20px;word-break:normal;overflow-wrap:normal;}
.bgpk--studio .bgpk-intro .bgpk-title {max-width:15ch;}
.bgpk--studio .bgpk-lead {color:var(--bgpk-ink-2);font-size:16px;line-height:1.8;max-width:62ch;margin:0 0 22px;}
.bgpk--studio .bgpk-intro__time {color:var(--bgpk-ink-3);font-size:12px;margin:16px 0 0;}
.bgpk--studio .bgpk-btn--primary {background:var(--bgpk-accent);color:var(--bgpk-accent-ink);border:1px solid var(--bgpk-accent);border-radius:12px;padding:15px 23px;min-height:52px;font-weight:700;box-shadow:0 8px 24px var(--bgpk-accent-shadow, rgba(176,141,87,.15));}
.bgpk--studio .bgpk-btn--primary:hover {background:var(--bgpk-accent);color:var(--bgpk-accent-ink);filter:brightness(1.12);transform:translateY(-2px);}
.bgpk--studio .bgpk-intro__steps {grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px;}
.bgpk--studio .bgpk-intro__steps>div {padding:20px;background:rgba(255,255,255,.035);border:1px solid var(--bgpk-line);border-radius:16px;}
.bgpk--studio .bgpk-intro__steps span {display:block;color:var(--bgpk-accent-soft, #D9C29B);font-size:11px;letter-spacing:.1em;margin-bottom:10px;}
.bgpk--studio .bgpk-intro__steps strong {display:block;font-size:15px;color:var(--bgpk-ink);}
.bgpk--studio .bgpk-intro__steps p {font-size:13px;color:var(--bgpk-ink-3);line-height:1.6;margin:6px 0 0;}
.bgpk--studio .bgpk-flight {position:relative;display:grid;place-items:center;min-height:340px;isolation:isolate;border:1px solid var(--bgpk-line);border-radius:24px;background:radial-gradient(ellipse,rgba(140,110,70,.22),transparent 70%);overflow:hidden;}
.bgpk--studio .bgpk-flight__label,.bgpk--studio .bgpk-flight__caption {position:absolute;text-align:center;color:#cfc5b6;font-size:10px;letter-spacing:.18em;left:12px;right:12px;top:22px;}
.bgpk--studio .bgpk-flight__caption {top:auto;bottom:24px;letter-spacing:.03em;font-size:12px;}
.bgpk--studio .bgpk-flight__art {width:94%;max-width:390px;height:auto;filter:drop-shadow(0 22px 15px rgba(0,0,0,.35));animation:bgpk-hover 4s ease-in-out 1;}
.bgpk--studio .bgpk-flight__orbit {position:absolute;width:240px;height:240px;max-width:86%;border-radius:50%;border:1px solid rgba(217,194,155,.18);z-index:-1;}
.bgpk--studio .bgpk-flight__orbit--two {width:160px;height:160px;border-style:dashed;}
@keyframes bgpk-hover {0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-16px) rotate(3deg)}}
.bgpk--studio .bgpk-progress {height:5px;border-radius:8px;background:#352d25;margin-bottom:26px;overflow:hidden;}
.bgpk--studio .bgpk-progress>span {display:block;height:100%;background:var(--bgpk-accent);border-radius:8px;transition:width .25s ease;}
.bgpk--studio .bgpk-q__count {color:var(--bgpk-accent-soft, #D9C29B);}
.bgpk--studio .bgpk-opt {background:#211c17;border:1px solid #443a30;border-radius:16px;min-height:116px;padding:22px 46px 22px 20px;transition:background .2s,border-color .2s,transform .2s;}
.bgpk--studio .bgpk-opt:hover:not(:disabled) {background:#2e2720;border-color:var(--bgpk-accent-soft, #D9C29B);transform:translateY(-2px);}
.bgpk--studio .bgpk-opt.is-on {background:#2b2b35;border-color:var(--bgpk-accent);box-shadow:0 0 0 1px var(--bgpk-accent);}
.bgpk--studio .bgpk-opt__icon {color:var(--bgpk-accent-soft, #D9C29B);background:rgba(217,194,155,.08);border-radius:12px;}
.bgpk--studio .bgpk-opt__title {color:var(--bgpk-ink);}
.bgpk--studio .bgpk-opt__sub {color:var(--bgpk-ink-2);}
.bgpk--studio .bgpk-back {color:var(--bgpk-ink-2);}
.bgpk--studio .bgpk-browse-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px;}
.bgpk--studio .bgpk-browse-card {display:flex;flex-direction:column;border:1px solid var(--bgpk-line);border-radius:18px;overflow:hidden;background:var(--bgpk-surface);margin:0;padding:0;min-width:0;}
.bgpk--studio .bgpk-browse-image {display:grid;place-items:center;background:#fff;aspect-ratio:1.2;padding:20px;}
.bgpk--studio .bgpk-browse-image img {width:100%;height:190px;object-fit:contain;}
.bgpk--studio .bgpk-browse-body {display:flex;flex:1;flex-direction:column;gap:18px;padding:20px;}
.bgpk--studio .bgpk-browse-body .bgpk-h3 {font-size:15px;line-height:1.5;margin:0;color:var(--bgpk-ink);overflow-wrap:anywhere;}
.bgpk--studio .bgpk-browse-body .bgpk-price {margin-top:auto;}
.bgpk--studio .bgpk-browse-body .bgpk-btn {font-size:13px;padding:13px 10px;}
.bgpk--studio .bgpk-hero,.bgpk--studio .bgpk-altcard {border-radius:20px;}
.bgpk--studio .bgpk-state {padding:12px 0;}
.bgpk--studio .bgpk-note {border:1px solid rgba(217,194,155,.2);color:var(--bgpk-ink-2);background:rgba(217,194,155,.06);border-radius:12px;}
.bgpk--studio .bgpk-note a {color:var(--bgpk-ink);}
@media(max-width:860px) {
 .bgpk--studio .bgpk-browse-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
 .bgpk--studio .bgpk-intro {grid-template-columns:minmax(0,1fr);}
 .bgpk--studio .bgpk-flight {min-height:250px;}
 .bgpk--studio .bgpk-flight__art {max-width:290px;}
 .bgpk--studio .bgpk-intro .bgpk-title {max-width:22ch;}
}
@media(max-width:560px) {
 .bgpk--studio .bgpk__shell {padding:24px 18px;border-radius:20px;}
 .bgpk--studio .bgpk-intro__steps {grid-template-columns:minmax(0,1fr);gap:8px;}
 .bgpk--studio .bgpk-intro__steps>div {padding:14px 16px;}
 .bgpk--studio .bgpk-intro__steps span {float:left;margin:3px 14px 20px 0;}
 .bgpk--studio .bgpk-browse-grid {grid-template-columns:minmax(0,1fr);}
 .bgpk--studio .bgpk-title {font-size:30px;}
 .bgpk--studio .bgpk-lead {font-size:14px;}
 .bgpk--studio .bgpk-opt {min-height:88px;}
}
@media(prefers-reduced-motion:reduce) {
 .bgpk--studio .bgpk-flight__art,.bgpk--studio .bgpk-glow,.bgpk--studio .bgpk-led {animation:none;}
 .bgpk--studio * {transition:none !important;}
}

/* 1.2: result screen in the studio layout. The base result styles use light
 * "sky" tints that the studio palette does not define; give them dark
 * equivalents so text keeps its contrast. */
.bgpk--studio .bgpk-specs div {background:rgba(255,255,255,.045);border:1px solid var(--bgpk-line);}
.bgpk--studio .bgpk-specs dt {color:var(--bgpk-ink-3);}
.bgpk--studio .bgpk-specs dd {color:var(--bgpk-ink);}
.bgpk--studio .bgpk-gains li.is-plain {background:rgba(255,255,255,.07);color:var(--bgpk-ink-2);}
.bgpk--studio .bgpk-checks .is-unknown .bgpk-checks__ico {background:rgba(255,255,255,.08);color:var(--bgpk-ink-3);}
.bgpk--studio .bgpk-checks .is-part .bgpk-checks__ico {background:rgba(244,201,117,.14);}
.bgpk--studio .bgpk-checks .is-no .bgpk-checks__ico {background:rgba(255,168,157,.14);}
.bgpk--studio .bgpk-checks li {border-bottom-color:var(--bgpk-line);}
.bgpk--studio .bgpk-hero,
.bgpk--studio .bgpk-card,
.bgpk--studio .bgpk-acc__item,
.bgpk--studio .bgpk-rules,
.bgpk--studio .bgpk-help,
.bgpk--studio .bgpk-table-wrap {background:var(--bgpk-surface);border-color:var(--bgpk-line);}
.bgpk--studio .bgpk-opt[aria-disabled="true"] {opacity:.4;}
.bgpk--studio .bgpk-opts--compact .bgpk-opt {min-height:96px;}

/* 1.2.2: the best-match label lives above the product name, not on the photo. */
.bgpk .bgpk-tag.bgpk-tag--inline {position:static;display:inline-block;width:max-content;margin:0 0 12px;}

/* Illustration animation and type label. */
.bgpk--studio .bgpk-devices {animation:bgpk-float 5s ease-in-out 1;}
@keyframes bgpk-float {0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.bgpk--studio .bgpk-glow {animation:bgpk-glow 3.2s ease-in-out 3;}
@keyframes bgpk-glow {0%,100%{opacity:.12}50%{opacity:.3}}
.bgpk--studio .bgpk-led {animation:bgpk-led 1.6s ease-in-out 6;}
@keyframes bgpk-led {0%,100%{opacity:1}50%{opacity:.35}}
.bgpk .bgpk-hero__type {margin:0 0 4px;color:var(--bgpk-accent-soft, #D9C29B);font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.bgpk .bgpk-gains li.is-warn {background:rgba(240,180,80,.16);color:#F0C060;}
.bgpk:not(.bgpk--studio) .bgpk-gains li.is-warn {background:rgba(176,116,0,.12);color:#8A5A00;}
.bgpk .bgpk-title {text-wrap:balance;}
.bgpk .bgpk-opts--2 > .bgpk-opt:last-child:nth-child(odd) {grid-column:1 / -1;}

/* BUGOLINI: colour swatches, promo line, gift card block. */
.bgpk .bgpk-swatch {width:30px;height:30px;flex:0 0 30px;border-radius:50%;border:2px solid rgba(255,255,255,.28);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);}
.bgpk .bgpk-swatch--silver {background:linear-gradient(135deg,#f4f4f4,#a7abb1);}
.bgpk .bgpk-swatch--black {background:#121212;}
.bgpk .bgpk-swatch--gold {background:linear-gradient(135deg,#f0d58a,#a8862f);}
.bgpk .bgpk-swatch--rosegold {background:linear-gradient(135deg,#f1c4b3,#b97a68);}
.bgpk .bgpk-swatch--brown {background:linear-gradient(135deg,#9a6a43,#5e3a1f);}
.bgpk .bgpk-swatch--blue {background:#2f6fd6;}
.bgpk .bgpk-swatch--green {background:#2f8a4f;}
.bgpk .bgpk-swatch--pink {background:#e48cb0;}
.bgpk .bgpk-swatch--white {background:#fff;}
.bgpk .bgpk-swatch--grey {background:#8a8f96;}
.bgpk .bgpk-swatch--red {background:#c0392b;}
.bgpk .bgpk-promo {display:flex;gap:10px;align-items:flex-start;margin-top:10px;color:var(--bgpk-accent-soft, #D9C29B);font-weight:600;}
.bgpk .bgpk-promo .bgpk-i {flex:0 0 auto;margin-top:2px;}
.bgpk .bgpk-gift {border-color:var(--bgpk-accent-shadow, rgba(176,141,87,.35));}