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

   ThemeAdapt — marketplace components

   Hero search, product card, category tabs, bundles and the free-download
   dialog. Uses the tokens from themeadapt-app.css.

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

/* -------------------------------------------------------------------------
 * 01. Hero
 * ---------------------------------------------------------------------- */

/* No overflow clip here on purpose: the only thing that could spill is the
   wash below, and `inset: 0` already holds it to the hero box. Clipping would
   cut off the category list, which has to hang past the hero's bottom edge. */
.ta-hero {
    position: relative;
    padding-block: clamp(56px, 4vw + 34px, 90px) clamp(56px, 4vw + 34px, 90px);
    background: var(--ta-header-bg);
}

/* Soft wash behind the headline. Fills the hero so the fade has no box edge. */
.ta-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(58% 62% at 50% 30%,
            color-mix(in srgb, var(--ta-accent) 13%, transparent) 0%,
            color-mix(in srgb, var(--ta-accent) 5%, transparent) 42%,
            transparent 78%);
    pointer-events: none;
}

.ta-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 980px;
    margin-inline: auto;
    text-align: center;
}

/* Part transparent so the wash behind it shows through. */
.ta-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 7px 16px 7px 13px;
    border: 1px solid color-mix(in srgb, var(--ta-border) 80%, transparent);
    border-radius: var(--ta-radius-pill);
    background: color-mix(in srgb, var(--ta-surface) 55%, transparent);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--ta-muted);
    text-transform: uppercase;
}

.ta-hero__badge-dot {
    position: relative;
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ta-accent);
}

/* Pulsing halo, so the dot reads as a status light. */
.ta-hero__badge-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--ta-accent);
    opacity: .35;
    animation: ta-pulse 2.4s var(--ta-ease) infinite;
}

@keyframes ta-pulse {
    0% {
        transform: scale(.6);
        opacity: .45;
    }

    70%,
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.ta-hero__title {
    margin-bottom: 30px;
    font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -.035em;
}

/* Underlined by hand so the stroke clears the descenders. */
.ta-hero__accent {
    position: relative;
    color: var(--ta-accent);
    white-space: nowrap;
}

.ta-hero__accent::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.08em;
    height: .07em;
    border-radius: var(--ta-radius-pill);
    background: currentColor;
    opacity: .35;
}

.ta-hero__text {
    max-width: 680px;
    margin-inline: auto;
    margin-bottom: 36px;
    line-height: 1.65;
    color: var(--ta-muted);
}

@media (max-width: 419px) {
    .ta-hero__accent {
        white-space: normal;
    }
}

.ta-search {
    max-width: 720px;
    margin-inline: auto;
}

.ta-search__field {
    display: flex;
    align-items: stretch;
    padding: 6px;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-pill);
    background: var(--ta-surface);
    box-shadow: 0 10px 30px -14px rgba(16, 24, 32, .3);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.ta-search__field:focus-within {
    border-color: var(--ta-accent);
    box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--ta-accent) 55%, transparent);
}

.ta-search__select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: none;
    border-right: 1px solid var(--ta-border);
}

/* Not transparent: that gives the native popup a white backdrop. */
.ta-search__select {
    appearance: none;
    -webkit-appearance: none;
    max-width: 168px;
    padding: 0 32px 0 18px;
    border: 0;
    background-color: var(--ta-surface);
    font-size: .9375rem;
    font-weight: var(--ta-fw-medium);
    color: var(--ta-foreground);
    cursor: pointer;
}

.ta-search__select:focus-visible {
    outline: 0;
}

.ta-search__select-icon {
    position: absolute;
    right: 12px;
    display: flex;
    pointer-events: none;
    color: var(--ta-muted);
}

/* ---------------------------------------------------------------------------
   Custom select

   Only the list is replaced; the <select> underneath still holds the value and
   still submits. Everything here is inert until themeadapt-app.js swaps it in,
   so the native control is what shows when scripting is off.
   ------------------------------------------------------------------------ */

.ta-combo {
    position: relative;
    display: flex;
}

.ta-combo__native {
    display: none;
}

.ta-combo__trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 200px;
    padding: 0 18px;
    border: 0;
    background: none;
    font-size: .9375rem;
    font-weight: var(--ta-fw-medium);
    color: var(--ta-foreground);
    text-align: left;
    cursor: pointer;
}

/* The field around it already turns accent on focus-within; a second ring
   tight around the trigger just boxes it off from the search bar. */
.ta-combo__trigger:focus-visible {
    outline: 0;
}

/* Room for the chevron that already sits in the field. */
.ta-combo__label {
    overflow: hidden;
    padding-right: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-combo__panel {
    position: absolute;
    top: calc(100% + 12px);
    left: -6px;
    z-index: 30;
    min-width: 232px;
    /* Roughly eight rows: enough to show the shape of the list, short enough
       that it never runs off the fold on a laptop. The rest is a scroll. */
    max-height: 304px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius);
    background: var(--ta-surface);
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .7);
    scrollbar-width: thin;
    scrollbar-color: var(--ta-border) transparent;
}

.ta-combo__panel::-webkit-scrollbar {
    width: 10px;
}

.ta-combo__panel::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: var(--ta-radius-pill);
    background: var(--ta-border);
    background-clip: content-box;
}

.ta-combo__panel::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--ta-accent) 45%, var(--ta-border));
    background-clip: content-box;
}

.ta-combo__option {
    padding: 6px 12px;
    border-radius: var(--ta-radius-sm);
    font-size: .875rem;
    font-weight: var(--ta-fw-medium);
    line-height: 1.45;
    color: var(--ta-foreground);
    /* The hero centres its text and the panel sits inside it. A list of
       options reads as a column, so it sets its own alignment. */
    text-align: left;
    cursor: pointer;
}

/* A child sits under its platform: indented, quieter, lighter weight. */
.ta-combo__option--child {
    padding-left: 26px;
    font-weight: var(--ta-fw-regular);
    color: var(--ta-muted);
}

.ta-combo__option:hover,
.ta-combo__option:focus-visible {
    outline: 0;
    background: var(--ta-surface-2);
    color: var(--ta-foreground);
}

.ta-combo__option.is-selected {
    background: var(--ta-accent-soft);
    color: var(--ta-accent);
}

.ta-search__input {
    flex: 1 1 auto;
    min-width: 0;
    text-overflow: ellipsis;
    padding: 13px 18px;
    border: 0;
    background: transparent;
    font-size: .9375rem;
    color: var(--ta-foreground);
}

.ta-search__input::placeholder {
    color: var(--ta-muted);
}

.ta-search__input:focus-visible {
    outline: 0;
}

.ta-search__submit {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-inline: 24px;
    border: 1px solid var(--ta-cta-border);
    border-radius: var(--ta-radius-pill);
    background: var(--ta-cta);
    color: var(--ta-cta-fg);
    font-size: .9375rem;
    font-weight: var(--ta-fw-semibold);
    cursor: pointer;
    transition: background-color .2s ease;
}

.ta-search__submit:hover {
    background: #93ef5b;
}

.ta-search__submit svg {
    width: 20px;
    height: 20px;
    fill: none;
}

.ta-search__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    font-size: .875rem;
    color: var(--ta-muted);
}

.ta-search__tag {
    padding: 6px 14px;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-pill);
    background: var(--ta-surface);
    font-size: .8125rem;
    font-weight: var(--ta-fw-medium);
    color: var(--ta-foreground);
    transition: border-color .18s ease, color .18s ease;
}

.ta-search__tag:hover {
    border-color: var(--ta-accent);
    color: var(--ta-accent);
}

.ta-hero__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 40px;
    margin-top: 38px;
}

.ta-hero__stat {
    text-align: center;
}

.ta-hero__stat b {
    display: block;
    font-size: 1.375rem;
    font-weight: var(--ta-fw-extrabold);
    letter-spacing: -.02em;
}

.ta-hero__stat span {
    font-size: .8125rem;
    color: var(--ta-muted);
}

/* Phones: field and button stay on one line; the button keeps its icon and
   its label moves to screen readers only. */
@media (max-width: 575px) {
    .ta-search__field {
        padding: 5px;
    }

    .ta-search__input {
        padding: 11px 12px 11px 16px;
        font-size: .875rem;
    }

    .ta-search__submit {
        justify-content: center;
        width: 46px;
        padding: 0;
    }

    .ta-search__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* -------------------------------------------------------------------------
 * 02. Product card
 * ---------------------------------------------------------------------- */

.ta-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--ta-border);
    border-radius: 12px;
    background: var(--ta-surface);
    overflow: hidden;
    transition: transform .4s var(--ta-ease), border-color .4s var(--ta-ease), box-shadow .4s var(--ta-ease);
}

.ta-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--ta-accent) 45%, var(--ta-border));
    box-shadow: var(--ta-shadow-card);
}

/* The box is reserved before the image arrives, so nothing below it jumps.
   Envato previews are 590×300. */
.ta-card__media {
    position: relative;
    display: block;
    aspect-ratio: 590 / 300;
    background: var(--ta-surface-2);
    overflow: hidden;
}

.ta-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.ta-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top,
            color-mix(in srgb, var(--ta-background) 88%, transparent) 0%,
            color-mix(in srgb, var(--ta-background) 45%, transparent) 28%,
            transparent 58%);
    opacity: 0;
    transition: .3s;
}

.ta-card:hover .ta-card__media::after,
.ta-card__media:has(.ta-card__preview:focus-visible)::after {
    opacity: 1;
}

.ta-card__flags {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 2;
}

/* Revealed on hover; always visible on touch, which has none. */
.ta-card__preview {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: var(--ta-radius-pill);
    background: color-mix(in srgb, var(--ta-foreground) 88%, transparent);
    color: var(--ta-background);
    font-size: .8125rem;
    font-weight: var(--ta-fw-semibold);
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s var(--ta-ease), transform .25s var(--ta-ease);
}

.ta-card:hover .ta-card__preview,
.ta-card__preview:focus-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (hover: none) {
    /* No hover to reveal them, so the button and its scrim simply stay. */
    .ta-card__media::after {
        opacity: 1;
    }

    .ta-card__preview {
        opacity: 1;
        transform: none;
    }
}

.ta-card__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 18px 18px;
}

.ta-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.ta-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: var(--ta-fw-semibold);
    line-height: 1.35;
    letter-spacing: -.01em;
}

.ta-card__title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ta-card__price {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.ta-card__price b {
    font-size: 1.0625rem;
    font-weight: var(--ta-fw-extrabold);
    letter-spacing: -.02em;
}

.ta-card__price del {
    font-size: .75rem;
    font-weight: var(--ta-fw-regular);
    color: var(--ta-muted);
}

.ta-card__price--free b {
    color: var(--ta-accent);
}

/* Meta line: category left, rating and sales right. */
.ta-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 11px;
    border-top: 1px solid var(--ta-border);
    font-size: .8125rem;
    color: var(--ta-muted);
}

.ta-card__cat {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: var(--ta-fw-medium);
    color: var(--ta-muted);
}

.ta-card__cat:hover {
    color: var(--ta-accent);
}

.ta-card__cat svg {
    width: 14px;
    height: 14px;
    opacity: .7;
}

.ta-card__stats {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.ta-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: var(--ta-fw-medium);
    color: var(--ta-foreground);
}

.ta-card__rating svg {
    width: 13px;
    height: 13px;
    fill: #f5a623;
}

.ta-card__actions {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 8px;
    margin-top: 2px;
}

.ta-card__actions .ta-btn {
    flex: 1 1 auto;
    padding-block: 10px;
    font-size: .875rem;
}

.ta-card--compact .ta-card__body {
    padding: 14px 15px 16px;
    gap: 8px;
}

.ta-card--compact .ta-card__title {
    font-size: .9375rem;
}

/* -------------------------------------------------------------------------
 * 03. Category tabs
 * ---------------------------------------------------------------------- */

.ta-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
}

.ta-tabs--center {
    justify-content: center;
}

.ta-tabs__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 17px;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-pill);
    background: transparent;
    font-size: .875rem;
    font-weight: var(--ta-fw-medium);
    color: var(--ta-muted);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.ta-tabs__btn:hover {
    border-color: var(--ta-accent);
    color: var(--ta-accent);
}

.ta-tabs__btn[aria-selected="true"] {
    background: var(--ta-accent);
    border-color: var(--ta-accent);
    color: var(--ta-accent-fg);
}

/* Full strength on the lime tab: faded, the count failed contrast. */
.ta-tabs__btn[aria-selected="true"] .ta-tabs__count {
    opacity: 1;
    color: #2f5a10;
}

/* Underline variant.

   The pills are a filter control — they say "pick one of these". On a product
   page the tabs are chapters of one document, and pills there read as another
   row of buttons competing with Buy. Plain labels on a rule read as chapters.
   Everything the pill style set is unset rather than overridden in place, so
   the two variants stay independent. */
.ta-tabs--underline {
    gap: 28px;
    border-bottom: 1px solid var(--ta-border);
}

.ta-tabs--underline .ta-tabs__btn {
    position: relative;
    padding: 0 0 13px;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: .9375rem;
    color: var(--ta-muted);
}

.ta-tabs--underline .ta-tabs__btn:hover {
    border-color: transparent;
    color: var(--ta-foreground);
}

.ta-tabs--underline .ta-tabs__btn[aria-selected="true"] {
    background: none;
    border-color: transparent;
    font-weight: var(--ta-fw-semibold);
    color: var(--ta-foreground);
}

/* Sits on the strip's own rule rather than above it, so the two read as one
   line with a lit segment. */
.ta-tabs--underline .ta-tabs__btn[aria-selected="true"]::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--ta-accent);
}

.ta-tabs__count {
    font-size: .75rem;
    color: #8d8d8d;
}

/* Phones: one row that scrolls sideways instead of three wrapped rows. The
   scrollbar is hidden; the fade on the right edge, and the half-cut tab under
   it, are what say there is more. themeadapt-app.js moves the fade to the
   left once the row is scrolled and drops it at the end. */
@media (max-width: 767px) {
    .ta-tabs:not(.ta-tabs--underline) {
        --ta-fade-l: 0px;
        --ta-fade-r: 56px;
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin-inline: calc(var(--ta-gutter) * -1);
        padding-inline: var(--ta-gutter);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-padding-inline: var(--ta-gutter);
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ta-fade-l), #000 calc(100% - var(--ta-fade-r)), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 var(--ta-fade-l), #000 calc(100% - var(--ta-fade-r)), transparent 100%);
    }

    .ta-tabs:not(.ta-tabs--underline)::-webkit-scrollbar {
        display: none;
    }

    .ta-tabs.is-scrolled {
        --ta-fade-l: 40px;
    }

    .ta-tabs.is-end,
    .ta-tabs.is-static {
        --ta-fade-r: 0px;
    }

    .ta-tabs:not(.ta-tabs--underline) .ta-tabs__btn {
        flex: none;
        white-space: nowrap;
    }
}

.ta-tabpanel {
    position: relative;
    min-height: 140px;
    transition: opacity .18s ease;
}

/* Skeleton cards stand in while a grid reloads over AJAX (themeadapt-app.js).
   Same box as a real card, so the swap does not move anything. */
.ta-card--skeleton,
.ta-card--skeleton:hover {
    transform: none;
    border-color: var(--ta-border);
    box-shadow: none;
    pointer-events: none;
}

.ta-card--skeleton .ta-card__media {
    aspect-ratio: 590 / 300;
}

.ta-skel {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, #232323 0%, #313131 45%, #232323 90%);
    background-size: 220% 100%;
    animation: ta-shimmer 1.3s linear infinite;
}

.ta-card__media.ta-skel {
    border-radius: 0;
}

.ta-skel__lines {
    flex: 1;
    display: grid;
    gap: 9px;
    padding-block: 3px 2px;
}

.ta-skel--line {
    width: 88%;
    height: 15px;
}

.ta-skel--price {
    flex: none;
    width: 42px;
    height: 18px;
}

/* Margins make up the line height of the text it stands for. */
.ta-skel--meta {
    width: 96px;
    height: 12px;
    margin-block: 4px;
}

.ta-skel--short {
    width: 52%;
}

.ta-card__meta .ta-skel--short {
    width: 58px;
}

/* Compact cards (beside the archive sidebar) mostly fit the title on one line. */
.ta-card--compact .ta-skel__lines .ta-skel--short {
    display: none;
}

@keyframes ta-shimmer {
    from {
        background-position: 120% 0;
    }

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

@media (prefers-reduced-motion: reduce) {
    .ta-skel {
        animation: none;
    }
}

.ta-empty {
    grid-column: 1 / -1;
    padding: 56px 20px;
    text-align: center;
    color: var(--ta-muted);
}

/* -------------------------------------------------------------------------
 * 04. Bundles
 * ---------------------------------------------------------------------- */

.ta-bundle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
}

.ta-bundle {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-lg);
    background: var(--ta-surface);
    transition: transform .4s var(--ta-ease), border-color .4s var(--ta-ease), box-shadow .4s var(--ta-ease);
}

.ta-bundle:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--ta-accent) 45%, var(--ta-border));
    box-shadow: var(--ta-shadow-card);
}

.ta-bundle--featured {
    grid-column: 1 / -1;
    background: var(--ta-accent);
    border-color: var(--ta-accent);
    color: var(--ta-accent-fg);
}

.ta-bundle--featured .ta-bundle__title,
.ta-bundle--featured .ta-bundle__price b {
    color: var(--ta-accent-fg);
}

.ta-bundle--featured .ta-bundle__text,
.ta-bundle--featured .ta-bundle__meta,
.ta-bundle--featured .ta-bundle__price del {
    color: color-mix(in srgb, var(--ta-accent-fg) 78%, transparent);
}

.ta-bundle--featured .ta-badge {
    background: color-mix(in srgb, var(--ta-accent-fg) 16%, transparent);
    color: var(--ta-accent-fg);
}

.ta-bundle__badge-row {
    margin-bottom: 14px;
}

.ta-bundle__title {
    margin: 0 0 10px;
    font-size: 1.375rem;
    font-weight: var(--ta-fw-bold);
    line-height: 1.25;
}

.ta-bundle__text {
    margin: 0 0 20px;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--ta-muted);
}

.ta-bundle__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}

.ta-bundle__price b {
    font-size: 2.125rem;
    font-weight: var(--ta-fw-extrabold);
    letter-spacing: -.03em;
    line-height: 1;
}

.ta-bundle__price del {
    font-size: 1rem;
    color: var(--ta-muted);
}

.ta-bundle__meta {
    margin-bottom: 20px;
    font-size: .8125rem;
    color: var(--ta-muted);
}

.ta-bundle__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.ta-bundle--featured .ta-btn--outline {
    border-color: color-mix(in srgb, var(--ta-accent-fg) 40%, transparent);
    color: var(--ta-accent-fg);
}

.ta-bundle--featured .ta-btn--outline:hover {
    border-color: var(--ta-accent-fg);
}

/* -------------------------------------------------------------------------
 * 05. Free download dialog
 * ---------------------------------------------------------------------- */

body.ta-free-modal-open {
    overflow: hidden;
}

.ta-free-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ta-free-modal[hidden] {
    display: none;
}

.ta-free-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 32, .55);
}

.ta-free-modal__panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-lg);
    background: var(--ta-surface);
    box-shadow: var(--ta-shadow-pop);
}

.ta-free-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: var(--ta-muted);
    cursor: pointer;
}

.ta-free-modal__close:hover {
    background: var(--ta-surface-2);
    color: var(--ta-foreground);
}

.ta-free-modal__title {
    margin: 0 0 6px;
    font-size: 1.3125rem;
}

.ta-free-modal__item {
    margin: 0 0 10px;
    font-size: .875rem;
    font-weight: var(--ta-fw-semibold);
    color: var(--ta-accent);
}

.ta-free-modal__item:empty {
    display: none;
}

.ta-free-modal__intro {
    margin: 0 0 20px;
    font-size: .9375rem;
    color: var(--ta-muted);
}

.ta-free-modal__input {
    width: 100%;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-background);
    color: var(--ta-foreground);
    font-size: .9375rem;
}

.ta-free-modal__input:focus-visible {
    outline: 0;
    border-color: var(--ta-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ta-accent) 18%, transparent);
}

.ta-free-modal__label {
    display: block;
    margin-bottom: 6px;
    font-size: .8125rem;
    font-weight: var(--ta-fw-medium);
    color: var(--ta-muted);
}

.ta-free-modal__status {
    margin: 14px 0 0;
    font-size: .875rem;
    line-height: 1.5;
}

.ta-free-modal__status:empty {
    display: none;
}

.ta-free-modal__status.is-success {
    color: var(--ta-accent);
}

.ta-free-modal__status.is-error {
    color: var(--ta-danger);
}

/* -------------------------------------------------------------------------
 * 06. Single product
 * ---------------------------------------------------------------------- */
.mb-0 {
    margin-bottom: 0;
}
.related-products-heading {
    margin-bottom: 30px;
}
.ta-single {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 390px);
    gap: 65px;
    align-items: start;
}

/* The share rail takes a column of its own so the copy below the preview keeps
   the same left edge. Narrowing the content column is deliberate as well: the
   Envato preview is only 590px wide, and every pixel the column loses is a
   pixel it no longer has to be stretched over. */
.ta-single__main {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.ta-single__rail {
    position: sticky;
    top: 100px;
}

@media (max-width: 991px) {
    .ta-single {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    /* No room for a rail: the links move under the content as a normal row. */
    .ta-single__main {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .ta-single__rail {
        position: static;
        order: 1;
    }

    /* One column: price and buttons come straight after the preview, not
       after the whole description. The two wrappers step aside so the
       screenshot, the buy box, the description and the share row can be
       ordered as siblings. */
    .ta-single__main,
    .ta-single__body {
        display: contents;
    }

    /* Scoped up a level: the base rule for the figure comes later in the file. */
    .ta-single .ta-single__shot {
        order: 1;
        margin-bottom: 0;
    }

    .ta-single__side {
        order: 2;
    }

    .ta-single__tabs {
        order: 3;
    }

    .ta-single__rail {
        order: 4;
    }
}

.ta-share {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ta-share__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius);
    background: var(--ta-surface);
    color: var(--ta-muted);
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.ta-share__link:hover,
.ta-share__link:focus-visible {
    border-color: var(--ta-accent);
    background: var(--ta-accent-soft);
    color: var(--ta-accent);
}

@media (max-width: 991px) {
    .ta-share--rail {
        flex-direction: row;
    }
}

.ta-single__shot {
    margin: 0 0 36px;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-lg);
    background: var(--ta-surface-2);
    overflow: hidden;
    --ta-radius-lg: 10px;
}

/* The shot doubles as the link to the demo. The icon only appears on hover,
   so the screenshot is unobstructed while it is being looked at, and the
   affordance arrives the moment the pointer says it is wanted. */
.ta-single__shot-link {
    position: relative;
    display: block;
    line-height: 0;
}

.ta-single__shot-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #000 55%, transparent);
    opacity: 0;
    transition: opacity .22s var(--ta-ease);
}

.ta-single__shot-link:hover .ta-single__shot-overlay,
.ta-single__shot-link:focus-visible .ta-single__shot-overlay {
    opacity: 1;
}

.ta-single__shot-overlay svg {
    width: 54px;
    height: 54px;
    color: #fff;
    transform: scale(.92);
    transition: transform .22s var(--ta-ease);
}

.ta-single__shot-link:hover .ta-single__shot-overlay svg,
.ta-single__shot-link:focus-visible .ta-single__shot-overlay svg {
    transform: scale(1);
}

/* No hover to reveal it, so the icon simply stays. */
@media (hover: none) {
    .ta-single__shot-overlay {
        opacity: 1;
        background: transparent;
    }

    .ta-single__shot-overlay svg {
        width: 40px;
        height: 40px;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6));
    }
}

.ta-single__shot img {
    width: 100%;
    height: auto;
}

.ta-single__block + .ta-single__block {
    margin-top: 36px;
    padding-top: 36px;
    border-top: 1px solid var(--ta-border);
}

.ta-single__block > h2 {
    margin-bottom: 18px;
    font-size: 1.375rem;
}

/* Once the sections become tabs their headings are redundant — the tab the
   reader just pressed already names the panel. Without JS the class is never
   added, so the headings stay and the page reads as stacked sections. */
/* Hidden from sight only: a screen reader still needs the h2, or the
   imported description's own h3s would follow the page's h1 directly. */
.ta-single__tabs.is-tabbed .ta-single__block-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* The stacked-section separator above — margin, padding and a rule — exists to
   divide sections that follow one another. Inside a tab group only one panel
   is ever visible, so the separator would draw a second line directly under
   the tab strip's own, with 72px of empty space between them. */
.ta-single__tabs.is-tabbed .ta-single__block + .ta-single__block {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.ta-single__tabs.is-tabbed .ta-single__block {
    padding-top: 0;
}

/* The Envato spec sheet. A label column wide enough for "ThemeForest Files
   Included" without wrapping, and a value column that takes the rest — long
   lists like the WordPress version history wrap inside their own cell. */
.ta-spec-table {
    margin: 0;
    border-top: 1px solid var(--ta-border);
}

.ta-spec-table__row {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: 8px 24px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ta-border);
    font-size: .9375rem;
}

.ta-spec-table dt {
    font-weight: var(--ta-fw-semibold);
    color: var(--ta-foreground);
}

.ta-spec-table dd {
    margin: 0;
    color: var(--ta-muted);
}

/* Below the grid's comfortable width the two columns stack rather than
   squeezing the values into a ribbon. */
@media (max-width: 480px) {
    .ta-spec-table__row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* Two columns of ticks, collapsing to one when there is no room. */
.ta-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2px 32px;
}

.ta-specs li {
    position: relative;
    padding: 9px 0 9px 26px;
    font-size: .9375rem;
    color: var(--ta-muted);
}

.ta-specs li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ta-accent);
}

/* The buy panel follows the reader down the page on tall descriptions. */
.ta-single__side {
    position: sticky;
    top: 100px;
}

@media (max-width: 991px) {
    .ta-single__side {
        position: static;
    }
}

.ta-buy {
    padding: 26px;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-lg);
    background: var(--ta-surface);
}

.ta-buy__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.ta-buy__price b {
    font-size: 2.25rem;
    font-weight: var(--ta-fw-extrabold);
    letter-spacing: -.03em;
    line-height: 1;
}

.ta-buy__price del {
    font-size: 1.0625rem;
    color: var(--ta-muted);
}

.ta-buy__terms {
    margin: 8px 0 20px;
    font-size: .8125rem;
    color: var(--ta-muted);
}

.ta-buy__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ta-buy__facts {
    margin: 24px 0 0;
    border-top: 1px solid var(--ta-border);
}

.ta-buy__facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ta-border);
    font-size: .875rem;
}

.ta-buy__facts dt {
    flex: none;
    color: var(--ta-muted);
}

.ta-buy__facts dd {
    margin: 0;
    text-align: right;
    font-weight: var(--ta-fw-medium);
}

.ta-buy__facts a:hover {
    color: var(--ta-accent);
}

/* Cross-sell panel for a sidebar. Used beside the buy card and in the archive
   sidebar, so it lives here rather than in the archive stylesheet — that one
   only loads on archives, which left this unstyled on a product page.

   Not to be confused with `.ta-promo`, the wide promo band on the home page:
   that one is a flex row with its own gap and padding.

   Deliberately a shade darker than the cards it sits under: it is an aside,
   not part of the thing being bought. */
.ta-upsell {
    padding: 22px;
    border: 1px solid var(--ta-header-border);
    border-radius: var(--ta-radius-lg);
    background: var(--ta-header-bg);
}

.ta-upsell h3 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.ta-upsell p {
    margin: 0 0 16px;
    font-size: .875rem;
    color: var(--ta-muted);
}

/* Lifted into its own panel so it reads as a statement about the payment
   rather than one more row of the table above it. A wash of the foreground
   colour rather than a fixed grey: it lifts off the card whatever the card
   sits on, and needs no border to separate it from the one around the card. */
.ta-buy__note {
    margin: 18px 0 0;
    padding: 14px 15px;
    border-radius: var(--ta-radius);
    background: color-mix(in srgb, var(--ta-foreground) 5%, transparent);
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--ta-muted);
}

.ta-buy__note p {
    margin: 0;
}

/* The wordmark is a fixed-colour brand asset, so it is sized down rather than
   recoloured — its grey already sits close to the muted text beneath it. */
.ta-buy__note-logo {
    width: 72px;
    height: auto;
    margin-bottom: 8px;
    opacity: .9;
}

/* Rating in the buy panel: a star and the score, nothing else. The count and
   the "out of 5" were more words than the number needed. */
.ta-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ta-rating svg {
    width: 14px;
    height: 14px;
    fill: #f5a623;
}

/* -------------------------------------------------------------------------
 * About page
 *
 * The spacing overrides are scoped to the template's body class rather than
 * changed globally: every other page still wants the stock section rhythm.
 * ---------------------------------------------------------------------- */

.page-template-template-about .ta-section--flush-top {
    padding-top: 0;
}

.page-template-template-about .ta-heading {
    max-width: 675px;
}

/* Five platforms, one row — the catalogue reads as a set rather than a list
   that happens to wrap. Two rows of odd lengths looked accidental. */
.ta-catgrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 1100px) {
    .ta-catgrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ta-catgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The closing call to action carries its own inner padding, so the section
   around it only needs to clear the page bottom. */
.page-template-template-about .ta-section--tight {
    padding: 0 0 96px;
}

/* Team ---------------------------------------------------------------- */

.ta-team {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 991px) {
    .ta-team {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ta-team {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ta-member {
    padding: 22px 16px;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-lg);
    background: var(--ta-surface);
    text-align: center;
}

/* A drawn silhouette rather than a stock portrait: a bought photograph of a
   stranger presented as a named colleague is a picture of someone else.
   The figure is clipped by the circle, so it reads as a cropped portrait. */
.ta-member__avatar {
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 auto 14px;
    border: 1px solid color-mix(in srgb, var(--ta-accent) 20%, transparent);
    border-radius: 50%;
    background: var(--ta-accent-soft);
    overflow: hidden;
}

.ta-member__avatar .ta-avatar {
    display: block;
    width: 100%;
    height: 100%;
    color: color-mix(in srgb, var(--ta-accent) 65%, var(--ta-surface));
}

.ta-member__name {
    margin: 0 0 4px;
    font-size: .9375rem;
}

.ta-member__role {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--ta-muted);
}