.desc h2 {
    font-size: 2rem;
    margin-top: 1rem;
}

.desc [id^="item-description__version"] {
    font-size: 1.2rem !important;
}

.desc h2[id^="item-description__version"]+ul {
    margin-left: 1rem;
}

.desc h2[id^="item-description"]+p {
    margin-bottom: 1rem;
}

.desc img {
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.desc ul li {
    margin-bottom: 0.5rem;
}

.desc ul li:first-child {
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------------
   Buy Now modal
   --------------------------------------------------------------- */
.buy-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
}

/* full-modal overlay - shown while the price is being recalculated
   (licence/addon change, coupon apply) and while the order is submitting */
.buy-modal__overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background-color: hsl(var(--white) / .92);
    backdrop-filter: blur(1px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}

.buy-modal__overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.buy-modal__overlay-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 4px solid hsl(var(--base) / .15);
    border-top-color: hsl(var(--base));
    animation: buyModalSpin .75s linear infinite;
}

.buy-modal__overlay-text {
    font-size: .85rem;
    font-weight: 600;
    color: hsl(var(--heading-color));
}

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

.buy-modal__header {
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid hsl(var(--border-color));
    background-color: hsl(var(--base) / .05);
}

.buy-modal__heading {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.buy-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 10px;
    background-color: hsl(var(--base));
    color: #fff;
    font-size: 1.25rem;
}

.buy-modal__product {
    display: block;
    font-size: .8rem;
    opacity: .7;
    margin-top: 2px;
}

.buy-modal__body {
    padding: 4px 24px 8px;
    max-height: min(60vh, 520px);
    overflow-y: auto;
}

.buy-modal__section {
    padding: 20px 0;
    border-bottom: 1px solid hsl(var(--border-color));
}

.buy-modal__section:last-child {
    border-bottom: 0;
}

.buy-modal__section-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.buy-modal__section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.buy-modal__link {
    font-size: .85rem;
    color: hsl(var(--base));
    text-decoration: none;
}

.buy-modal__link:hover {
    text-decoration: underline;
}

/* the "what is the difference?" toggle, sitting in the section head */
button.buy-modal__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
}

button.buy-modal__link:hover,
button.buy-modal__link:focus {
    text-decoration: none;
}

.license-compare-toggle__caret {
    display: inline-block;
    font-size: .8rem;
    transition: transform .18s ease;
}

.license-compare-toggle[aria-expanded="true"] .license-compare-toggle__caret {
    transform: rotate(180deg);
}

/* "what is the difference?" popover card, anchored under the section head */
.license-compare {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 15;
    border: 1px solid hsl(var(--border-color));
    border-radius: 12px;
    background-color: hsl(var(--white));
    box-shadow: 0 18px 40px hsl(var(--black) / .18);
}

.license-compare[hidden] {
    display: none;
}

.license-compare::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 30px;
    width: 12px;
    height: 12px;
    background-color: hsl(0, 0%, 100%);
    border-top: 1px solid hsl(var(--border-color));
    border-left: 1px solid hsl(var(--border-color));
    border-radius: 2px;
    transform: rotate(45deg);
}

.license-compare.is-open {
    animation: licenseCompareIn .18s ease;
}

@keyframes licenseCompareIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.license-compare__close {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: hsl(var(--heading-color));
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.license-compare__close:hover {
    background-color: hsl(var(--base) / .12);
    color: hsl(var(--base));
}

.license-compare__body {
    padding: 14px 16px 14px;
}

.license-compare__cols,
.license-compare__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
    gap: 10px;
    align-items: start;
}

.license-compare__cols {
    padding-top: 2px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid hsl(var(--border-color));
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.license-compare__cols span:not(:first-child) {
    color: hsl(var(--base));
}

.license-compare__row {
    padding: 5px 0;
    font-size: .8rem;
    line-height: 1.45;
}

.license-compare__row i {
    font-size: .95rem;
    vertical-align: -1px;
}

.license-compare__criterion {
    font-weight: 600;
}

.license-compare__note {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px dashed hsl(var(--border-color));
    font-size: .78rem;
    line-height: 1.45;
    opacity: .85;
}

.license-compare__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: .8rem;
    color: hsl(var(--base));
    text-decoration: none;
}

.license-compare__more:hover {
    text-decoration: underline;
}

@media (max-width: 575px) {
    .license-compare {
        top: calc(100% + 6px);
    }

    .license-compare__body {
        padding: 12px 14px 12px;
    }

    /* column headers: drop the empty cell, keep Regular | Extended visible */
    .license-compare__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding-top: 2px;
        padding-bottom: 6px;
        margin-bottom: 6px;
        font-size: .72rem;
    }

    .license-compare__cols span:first-child {
        display: none;
    }

    /* each criterion takes a full row, then its two licence values sit under
       the matching column header as two tidy cards */
    .license-compare__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 5px 0;
        font-size: .75rem;
        line-height: 1.4;
    }

    .license-compare__row .license-compare__criterion {
        grid-column: 1 / -1;
        margin: 0 0 2px;
        font-size: .75rem;
    }

    .license-compare__row span:not(.license-compare__criterion) {
        background-color: hsl(var(--white));
        border: 1px solid hsl(var(--border-color) / .6);
        border-radius: 6px;
        padding: 5px 8px;
        font-size: .74rem;
    }

    .license-compare__note {
        margin: 8px 0 0;
        padding-top: 8px;
        font-size: .74rem;
        line-height: 1.4;
    }

    .license-compare__more {
        margin-top: 4px;
        font-size: .75rem;
    }
}

.buy-modal__note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    font-size: .875rem;
    opacity: .85;
}

.buy-modal__note i {
    color: hsl(var(--base));
    font-size: 1.05rem;
}

/* licence + addon pickers */
.license-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 575px) {
    .license-options {
        grid-template-columns: minmax(0, 1fr);
    }
}

.license-option,
.addon-option {
    position: relative;
    display: block;
    margin: 0;
    padding: 14px 16px 14px 44px;
    border: 1.5px solid hsl(var(--border-color));
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.license-option input,
.addon-option input {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: hsl(var(--base));
    cursor: pointer;
}

.license-option:hover,
.addon-option:hover {
    border-color: hsl(var(--base) / .6);
}

.license-option:has(input:checked),
.addon-option:has(input:checked),
.license-option.is-selected,
.addon-option.is-selected {
    border-color: hsl(var(--base));
    background-color: hsl(var(--base) / .06);
    box-shadow: 0 0 0 3px hsl(var(--base) / .1);
}

.license-option__top,
.addon-option__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.license-option__title,
.addon-option__title {
    font-weight: 600;
    line-height: 1.35;
}

.license-option__price,
.addon-option__price {
    white-space: nowrap;
    font-weight: 700;
}

.license-option__price del,
.addon-option__price del {
    margin-right: 6px;
    font-weight: 400;
    opacity: .55;
}

.license-option__desc {
    display: block;
    margin-top: 5px;
    font-size: .82rem;
    line-height: 1.5;
    opacity: .72;
}

.addon-option__price b {
    color: hsl(var(--base));
}

/* coupon - collapsed by default so it never dominates the modal */
.buy-modal__section--coupon {
    padding-bottom: 4px;
}

.coupon-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-size: .9rem;
    font-weight: 600;
    color: hsl(var(--base));
}

.coupon-toggle i {
    font-size: 1rem;
}

.coupon-toggle__caret {
    transition: transform .2s ease;
}

.coupon-toggle.is-open .coupon-toggle__caret {
    transform: rotate(180deg);
}

.coupon-panel {
    display: none;
    padding-top: 12px;
}

.coupon-panel.is-open {
    display: block;
}

.coupon-field {
    display: flex;
    align-items: stretch;
    max-width: 320px;
    border: 1px solid hsl(var(--border-color-two));
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .18s ease;
}

.coupon-field:focus-within {
    border-color: hsl(var(--base));
}

.coupon-field input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 14px;
    border: 0;
    outline: none;
    background: transparent;
    font-size: .9rem;
    line-height: 1.4;
    text-transform: uppercase;
    color: hsl(var(--black));
}

.coupon-field input::placeholder {
    text-transform: none;
    color: hsl(var(--text-mute) / .7);
}

.coupon-field button {
    flex-shrink: 0;
    padding: 0 18px;
    border: 0;
    border-left: 1px solid hsl(var(--border-color-two));
    background-color: hsl(var(--base) / .08);
    color: hsl(var(--base));
    font-size: .85rem;
    font-weight: 600;
    transition: background-color .18s ease, color .18s ease;
}

.coupon-field button:hover {
    background-color: hsl(var(--base));
    color: #fff;
}

.coupon-feedback {
    display: block;
    margin-top: 8px;
    font-size: .82rem;
}

.coupon-feedback.is-ok {
    color: #1f9d55;
}

.coupon-feedback.is-error {
    color: #eb2222;
}

/* footer summary */
.buy-modal__footer {
    display: block!important;
    padding: 18px 24px 20px;
    border-top: 1px solid hsl(var(--border-color));
    background-color: hsl(var(--gray-bg));
}

.order-summary {
    display: grid;
    gap: 8px;
}

.order-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    font-size: .9rem;
}

.order-summary__label {
    color: hsl(var(--body-color));
}

.order-summary__label em {
    font-style: normal;
    opacity: .6;
    font-size: .82rem;
}

.order-summary__value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: hsl(var(--heading-color));
    white-space: nowrap;
}

.order-summary__row--discount .order-summary__label,
.order-summary__row--discount .order-summary__value {
    color: #1f9d55;
}

.buy-modal__total-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid hsl(var(--border-color));
}

.buy-modal__total-label {
    display: block;
    font-size: .78rem;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: hsl(var(--text-mute));
}

.buy-modal__total {
    display: block;
    margin-top: 2px;
    font-family: var(--heading-font);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: hsl(var(--heading-color));
}

.order-now-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
}

.order-now-btn.is-loading {
    opacity: .7;
    pointer-events: none;
}

/* sidebar licence picker */
.license-picker {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

.license-pick {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 13px 16px 13px 42px;
    border: 1.5px solid hsl(var(--border-color));
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.license-pick input {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: hsl(var(--base));
    cursor: pointer;
}

.license-pick:hover {
    border-color: hsl(var(--base) / .6);
}

.license-pick:has(input:checked),
.license-pick.is-selected {
    border-color: hsl(var(--base));
    background-color: hsl(var(--base) / .06);
    box-shadow: 0 0 0 3px hsl(var(--base) / .1);
}

.license-pick__label {
    font-weight: 600;
    line-height: 1.3;
}

.license-pick__price {
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.license-pick__price del {
    margin-right: 5px;
    font-weight: 400;
    opacity: .55;
}

/* release history */
.release-history .release-item {
    padding: 16px 0;
    border-bottom: 1px solid hsl(var(--border-color));
}

.release-history .release-item:last-child {
    border-bottom: 0;
}

.release-history .release-version {
    font-weight: 700;
}

/* Mobile Fixed Bottom Buy Bar & Sidebar Hide Rules */
@media (max-width: 991px) {
    .product-details__sidebar__widget--get-product {
        display: none !important;
    }

    body {
        padding-bottom: 72px;
    }

    .scroll-top {
        bottom: 80px !important;
    }
}

.mobile-buy-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background-color: hsl(var(--white));
    border-top: 1px solid hsl(var(--border-color));
    box-shadow: 0 -8px 24px hsl(var(--black) / .12);
    padding: 10px 16px;
}

.mobile-buy-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 540px;
    margin: 0 auto;
}

.mobile-buy-bar__price {
    display: flex;
    flex-direction: column;
}

.mobile-buy-bar__label {
    font-size: .72rem;
    color: hsl(var(--body-color) / .75);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 600;
}

.mobile-buy-bar__amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(var(--heading-color));
    line-height: 1.2;
}

.mobile-buy-bar .btn {
    padding: 10px 24px;
    font-size: .925rem;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
}

/* ==========================================================================
   Page header — breadcrumb / title / share / meta strip
   Overrides main.css (which loads earlier); everything scoped to .product-details.
   ========================================================================== */

.product-details__header {
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
    padding-bottom: 24px;
    margin-bottom: 4px;
    border-bottom: 1px solid hsl(var(--border-color));
}

/* --- breadcrumb --- */

.product-details__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    line-height: 1.4;
    color: hsl(var(--text-mute));
}

.product-details__crumbs a {
    color: hsl(var(--text-mute));
    text-decoration: none;
    transition: color .2s;
}

.product-details__crumbs a:hover,
.product-details__crumbs a:focus {
    color: hsl(var(--base));
}

.product-details__crumbs__sep {
    color: hsl(var(--border-color));
}

.product-details__crumbs__current {
    color: hsl(var(--heading-color));
    font-weight: 500;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media screen and (max-width: 575px) {
    .product-details__crumbs__current {
        max-width: 160px;
    }
}

/* --- title --- */

/* main.css caps this at 950px; the title now owns the full container width */
.product-details__title {
    max-width: 100%;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
}

/* main.css ships these as 48px filled circles, which sit at the same optical
   weight as the product name. Quiet them down to outlined chips. */
.product-details__header .social-list__link {
    width: 38px;
    height: 38px;
    font-size: .875rem;
    background-color: transparent;
    color: hsl(var(--text-mute));
    border: 1px solid hsl(var(--border-color));
}

.product-details__header .social-list__link:hover,
.product-details__header .social-list__link:focus {
    background-color: transparent !important;
    color: hsl(var(--base)) !important;
    border-color: hsl(var(--base)) !important;
}

@media screen and (max-width: 767px) {
    .product-details__header .social-list__link {
        width: 34px;
        height: 34px;
    }
}

/* --- meta strip --- */

/* meta facts left, share icons right, on one row */
.product-details__meta {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.product-details__meta__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* hairline separators between meta items instead of the single left border
   main.css puts on .product-details__price */
.product-details__meta__list > li + li {
    padding-left: 16px;
    border-left: 1px solid hsl(var(--border-color) / .8);
}

.product-details .product-details__meta__list .product-details__price {
    border-left: 0;
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-details__meta__fact {
    font-size: .875rem;
    color: hsl(var(--text-mute));
    white-space: nowrap;
}

.product-details__meta__fact strong {
    color: hsl(var(--heading-color));
    font-weight: 600;
}

.product-details__meta .rating-list {
    display: flex;
    align-items: center;
    gap: 2px;
}

@media screen and (max-width: 575px) {
    .product-details__meta__list > li + li {
        padding-left: 0;
        border-left: 0;
    }
}

/* --- live preview action under the image (small screens only) --- */

/* the sidebar card that carries the desktop CTA is hidden below 992px */
.product-details__preview-mobile {
    display: none;
    margin-top: 12px;
    padding-top: 11px;
    padding-bottom: 11px;
}

@media screen and (max-width: 991px) {
    .product-details__preview-mobile {
        display: inline-flex;
    }
}

/* --- sidebar secondary CTA --- */

.product-details__preview-cta {
    padding-top: 13px;
    padding-bottom: 13px;
    margin-bottom: 20px;
}

/* the meta strip used to live here and carried the divider */
.product-details__inner {
    padding: 24px 8px 8px;
}

/* On phones the panel's own padding sits on top of the container gutter (12px)
   and the column gutter (12px). main.css even raises it from 12px to 15px below
   992px, so four nested layers cost 47px a side - a quarter of a 375px screen.
   Drop the panel's padding here and let the gutters do the spacing; the white
   background stays so this still matches the cards below it. */
@media screen and (max-width: 767px) {
    .product-details__left {
        padding: 0;
        border-radius: 0;
    }

    .product-details__inner {
        padding: 20px 0 0;
    }
}

/* ==========================================================================
   Sidebar — "Get this product"
   ========================================================================== */

.product-details__leadprice {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid hsl(var(--border-color) / .6);
}

.product-details__leadprice__label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: hsl(var(--text-mute));
    line-height: 1.2;
}

.product-details__leadprice__amount {
    font-family: var(--heading-font);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: hsl(var(--heading-color));
}

.product-details__benefits {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.product-details__benefits li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .875rem;
    line-height: 1.5;
    color: hsl(var(--body-color));
}

.product-details__benefits i {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.35;
    color: hsl(var(--base));
}

.product-details__notice {
    margin: 0 0 20px;
    padding: 10px 12px;
    border-radius: 8px;
    background-color: hsl(var(--base) / .06);
    font-size: .8125rem;
    line-height: 1.5;
    color: hsl(var(--body-color));
}

/* ==========================================================================
   Sidebar — "Product Details" spec rows
   These replace .product-update__list-item on the template-owned rows, which
   main.css hides globally (display:none) and main.js reveals two at a time.
   ========================================================================== */

.product-details__sidebar__widget .product-update__list .product-details__meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid hsl(var(--border-color) / .6);
}

.product-details__sidebar__widget .product-update__list .product-details__meta-row .item-title {
    margin-bottom: 0;
    font-size: .875rem;
    font-weight: 500;
    color: hsl(var(--text-mute));
    white-space: nowrap;
}

.product-details__sidebar__widget .product-update__list .product-details__meta-row .update-date {
    font-size: .875rem;
    font-weight: 600;
    color: hsl(var(--heading-color));
    text-align: right;
}

.product-details__sidebar__widget .product-update__list .product-details__meta-row .update-date.tag a {
    color: hsl(var(--base));
    text-decoration: none;
}

.product-details__sidebar__widget .product-update__list .product-details__meta-row--stack {
    display: block;
}

.product-details__sidebar__widget .product-update__list .product-details__meta-row--stack .item-title {
    margin-bottom: 8px;
}

.product-details__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.product-details__sidebar__widget .product-update__list .product-details__tags a {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 8px;
    background-color: hsl(var(--border-color-three));
    color: hsl(var(--body-color));
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: .2s;
}

.product-details__sidebar__widget .product-update__list .product-details__tags a:hover {
    background-color: hsl(var(--base) / .1);
    color: hsl(var(--base));
    text-decoration: none;
}

/* last core row keeps its rule off when no dynamic attributes follow */
.product-details__sidebar__widget .product-update__list .product-details__meta-row:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

/* ==========================================================================
   Changelog
   ========================================================================== */

.release-history {
    background-color: hsl(var(--white));
    border: 1px solid hsl(var(--border-color) / .6);
    border-radius: 20px;
    padding: 24px;
}

@media screen and (max-width: 575px) {
    .release-history {
        padding: 20px 16px;
    }
}

.release-history__title {
    font-size: 1.25rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid hsl(var(--border-color) / .6);
}

.release-history .release-item {
    position: relative;
    padding-left: 18px;
}

/* left rail */
.release-history .release-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 0;
    width: 2px;
    border-radius: 2px;
    background-color: hsl(var(--border-color) / .8);
}

.release-history .release-item:last-child::before {
    bottom: auto;
    height: 14px;
}

.release-history .release-item::after {
    content: "";
    position: absolute;
    left: -3px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: hsl(var(--border-color));
}

.release-history .release-item:first-child::after {
    background-color: hsl(var(--base));
}

.release-history .release-item:not(:last-child) {
    padding-bottom: 20px;
}

.release-item__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.release-history .release-version {
    font-weight: 700;
    font-family: var(--heading-font);
    color: hsl(var(--heading-color));
}

.release-history .release-item .desc {
    font-size: .9375rem;
}