#appBg,#appBg .fade,.card-loading{top:0;right:0;bottom:0;left:0}body{font-family:'BR Omny',sans-serif;background:var(--background-color)}[x-cloak]{display:none!important}.container{max-width:var(--content-width)!important}.bg-content{background:var(--content-color)}.bg-content-light{background:var(--content-light-color)}.bg-secondary{background:var(--secondary-color)}.bg-primary{background:var(--primary-color)}.text-primary{color:var(--primary-color)}.border-content-light{border-color:rgb(255 255 255 / 10%)!important}.btn-shine{position:relative;overflow:hidden}#appBg,#appBg .fade,.card-loading{position:absolute}.btn-shine:hover:before{animation:.5s linear shine;background-color:rgba(255,255,255,10%);content:"";height:300px;left:-100px;position:absolute;top:-100px;transform:rotate(30deg);width:10%}.custom-avatar{overflow:hidden;border-radius:10px}#paynow{max-width:38px;margin:0 auto;padding-top:5px}#paynow path{fill:#ffffff}#appBg{max-height:400px;overflow:hidden;opacity:var(--hero-opacity)}#appBg img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-position)}#appBg .fade{background:linear-gradient(0deg,var(--background-color),transparent)}#storeApp{position:relative;z-index:5}.gift-icon{box-shadow:0 0 20px #29292ed6;cursor:pointer;background:#ffffff29;font-size:14px!important;backdrop-filter:blur(15px);border:1px solid #ffffff36}.modal-nav{padding-right:15px!important;padding-left:5px!important}.modal-nav::-webkit-scrollbar{width:8px!important;border-radius:100px!important;overflow:hidden}.modal-nav::-webkit-scrollbar-track{background:#3f3f46;border-radius:100px!important}.modal-nav::-webkit-scrollbar-thumb{background:#888;border-radius:100px!important}.modal-nav i{color:#fff}.card-loading{background:var(--background-color);z-index:5;opacity:.85}.loader{width:48px;height:48px;border:5px solid #fff;border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:1s linear infinite rotation}#notification-alert .font-medium{text-transform:capitalize}.sidebar .top-customer{order:2}.sidebar .recent-payments{order:3}.sidebar .giftcards{order:10}.sidebar .text-block{order:15}@keyframes shine{0%{left:-100px}to{left:calc(100% + 100px)}}@keyframes rotation{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@media only screen and (max-width:768px){.sidebar .store-menu-toggle,.view--home #mobile-secondary{display:none!important}}button, .btn {cursor: pointer;}
/* =========================================================
   Green theme additions
   Category panel, announcements, sale countdown,
   product cards, product modal, login skin preview.
   ========================================================= */

:root {
    --primary-soft: color-mix(in srgb, var(--primary-color) 14%, transparent);
    --primary-line: color-mix(in srgb, var(--primary-color) 34%, transparent);
    --primary-glow: color-mix(in srgb, var(--primary-color) 45%, transparent);
    --accent-color: var(--secondary-color);
    --panel-line: rgba(255, 255, 255, .07);
}

button, .btn { cursor: pointer; }

::selection { background: var(--primary-color); color: #10120f; }

*:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 6px;
}

/* =========================================================
   Category panel
   ========================================================= */

.cat-panel { border: 1px solid var(--panel-line); }

.cat-panel-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    width: 100%;
    padding: 1.35rem 1.25rem;
    border-bottom: 1px solid var(--panel-line);
}

.cat-panel-head--button { cursor: pointer; }

.cat-panel-title {
    color: var(--primary-color);
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-align: center;
}

.cat-panel-chevron { color: var(--text-muted); font-size: .8rem; }
.cat-panel-chevron i { transition: transform .2s ease; }
.cat-panel-chevron i.is-open { transform: rotate(180deg); }

.cat-panel-body {
    max-height: 640px;
    overflow-y: auto;
}

.cat-nav { display: flex; flex-direction: column; }

.cat-group { display: flex; flex-direction: column; }

/* Full-bleed rows split by hairlines, like a server menu */
.cat-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .55rem 1.35rem;
    min-height: 76px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--panel-line);
    transition: background .18s ease;
}

.cat-nav > *:last-child .cat-row:last-child,
.cat-nav > .cat-row:last-child { border-bottom: 0; }

.cat-row:hover { background: rgba(255, 255, 255, .04); }

.cat-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    background: var(--primary-color);
    border-radius: 0 3px 3px 0;
    transform: translateY(-50%);
    transition: height .18s ease;
}

.cat-row:hover::before { height: 40%; }

.cat-row.is-active { background: var(--primary-soft); }
.cat-row.is-active::before { height: 62%; }
.cat-row.is-active .cat-name { color: var(--primary-color); }

.cat-link {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.cat-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: none;
}

.cat-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45));
    transition: transform .2s ease;
}

.cat-row:hover .cat-thumb img { transform: scale(1.08); }

.cat-thumb--sm { width: 34px; height: 34px; }

/* No image on a tag means no placeholder symbol - the slot just stays empty
   so the names still line up. Glyphs are only used for Home and custom pages. */
.cat-thumb--empty { visibility: hidden; }

.cat-thumb--glyph {
    color: var(--text-muted);
    font-size: 1.4rem;
    transition: color .18s ease;
}

.cat-row:hover .cat-thumb--glyph,
.cat-row.is-active .cat-thumb--glyph { color: var(--primary-color); }

/* Diagnostic panel */
.dbg {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px dashed var(--primary-line);
    border-radius: .75rem;
    background: rgba(0, 0, 0, .35);
}

.dbg-title {
    margin-bottom: .35rem;
    color: var(--primary-color);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dbg-note {
    margin-bottom: .75rem;
    color: var(--text-muted);
    font-size: .72rem;
    line-height: 1.5;
}

.dbg-row {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-bottom: .6rem;
    padding: .6rem;
    border-radius: .5rem;
    background: rgba(0, 0, 0, .4);
    color: var(--text-muted);
    font-size: .7rem;
}

.dbg-row b { color: #fff; font-size: .8rem; }
.dbg-row code { color: var(--accent-color); word-break: break-all; }
.dbg-child { padding-left: .75rem; opacity: .8; }

/* A dead image URL should leave a blank slot, not a broken-image icon */
.cat-thumb--broken img { display: none; }

.dbg-pre {
    margin-bottom: .9rem;
    padding: .6rem;
    max-height: 260px;
    overflow: auto;
    border-radius: .5rem;
    background: rgba(0, 0, 0, .45);
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
}

.cat-name {
    min-width: 0;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: .5rem;
    background: transparent;
    color: #fff;
    font-size: .8rem;
    transition: background .18s ease, color .18s ease;
}

.cat-toggle:hover { background: rgba(255, 255, 255, .08); color: var(--primary-color); }
.cat-toggle i { transition: transform .2s ease; }
.cat-toggle i.is-open { transform: rotate(180deg); }

.cat-children { background: rgba(0, 0, 0, .18); }

.cat-row--child {
    min-height: 58px;
    padding-left: 2.5rem;
}

.cat-row--child .cat-name { font-size: .92rem; font-weight: 700; }

.cat-anim { transition: opacity .2s ease, transform .2s ease; }
.cat-anim-start { opacity: 0; transform: translateY(-6px); }
.cat-anim-end { opacity: 1; transform: translateY(0); }

.cat-panel-body::-webkit-scrollbar { width: 8px; }
.cat-panel-body::-webkit-scrollbar-track { background: transparent; }
.cat-panel-body::-webkit-scrollbar-thumb { background: var(--content-light-color); border-radius: 100px; }
.cat-panel-body::-webkit-scrollbar-thumb:hover { background: var(--primary-color); }

/* =========================================================
   Product cards
   ========================================================= */

.pc {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--content-color);
    border: 1px solid var(--panel-line);
    border-radius: 1rem;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.pc:hover {
    transform: translateY(-6px);
    border-color: var(--primary-line);
    box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .7), 0 0 0 1px var(--primary-line);
}

.pc-media {
    position: relative;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, var(--primary-soft), transparent 62%),
        var(--content-light-color);
}

/* contain, not cover - package art is usually a tall render and must not crop */
.pc-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .35s ease;
}

.pc:hover .pc-img { transform: scale(1.07); }

.pc-img-fallback {
    color: var(--primary-color);
    font-size: 3.25rem;
    opacity: .55;
}

.pc-badges {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .35rem;
}

.pc-badge {
    padding: .25rem .6rem;
    border-radius: 100px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.pc-badge--sub { background: rgba(255, 255, 255, .14); color: #fff; }
.pc-badge--trial { background: color-mix(in srgb, var(--accent-color) 22%, transparent); color: var(--accent-color); }

.pc-out {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 12, .72);
    backdrop-filter: blur(2px);
}

.pc-out span {
    padding: .4rem .9rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 100px;
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pc--out { opacity: .75; }

.pc-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.25rem 1.35rem 1.35rem;
    text-align: center;
}

.pc-name {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.25;
}

.pc-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .55rem;
    margin-top: .15rem;
}

.pc-price-now {
    color: var(--primary-color);
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
}

.pc-price-was {
    color: #ef5b5b;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-color: #ef5b5b;
}

.pc-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    height: 46px;
    margin-top: .6rem;
    border-radius: .65rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--panel-line);
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.pc-cta i { font-size: .8rem; }

.pc:hover .pc-cta {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.pc-cta--current { background: rgba(16, 185, 129, .16); border-color: rgba(16, 185, 129, .35); color: #6ee7b7; }
.pc-cta--pending { background: rgba(234, 179, 8, .14); border-color: rgba(234, 179, 8, .32); color: #fde047; }
.pc:hover .pc-cta--current, .pc:hover .pc-cta--pending { background: rgba(255, 255, 255, .06); border-color: var(--panel-line); }

.pc-empty {
    padding: 4rem 1.5rem;
    text-align: center;
    background: var(--content-color);
    border: 1px solid var(--panel-line);
    border-radius: 1rem;
}

.pc-empty i { color: var(--text-muted); font-size: 3rem; opacity: .5; }
.pc-empty h3 { margin-top: 1rem; color: #fff; font-size: 1.5rem; font-weight: 800; }
.pc-empty p { margin-top: .4rem; color: var(--text-muted); }

/* =========================================================
   Product modal
   ========================================================= */

.pm-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(12, 12, 14, .65);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    transition: background .2s ease, transform .2s ease;
}

.pm-close:hover { background: rgba(12, 12, 14, .9); transform: scale(1.06); }

.pm-hero {
    position: relative;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 38%, var(--primary-soft), transparent 62%),
        var(--content-light-color);
}

.pm-hero-img { width: 100%; height: 100%; object-fit: contain; }

.pm-hero-fallback { color: var(--primary-color); font-size: 3.5rem; opacity: .55; }

.pm-hero-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45px;
    background: linear-gradient(to top, var(--content-color), transparent);
    pointer-events: none;
}

.pm-badges {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.pm-badge {
    padding: .28rem .65rem;
    border-radius: 100px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pm-badge--sale { background: var(--primary-color); color: #0d1410; }
.pm-badge--sub { background: rgba(255, 255, 255, .14); color: #fff; }
.pm-badge--out { background: rgba(239, 68, 68, .2); color: #fca5a5; }

.pm-gift {
    position: absolute;
    right: 1.35rem;
    bottom: -20px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    border: 3px solid var(--content-color);
    box-shadow: 0 10px 24px -10px var(--primary-glow);
    transition: transform .2s ease, opacity .2s ease;
}

.pm-gift:hover { transform: translateY(-2px) scale(1.05); }

.pm-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 1.75rem 1.75rem;
}

.pm-title {
    color: #fff;
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.15;
}

.pm-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: -.4rem;
}

.pm-price {
    color: var(--primary-color);
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1;
}

.pm-price-was {
    color: #ef5b5b;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-color: #ef5b5b;
}

.pm-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: -.4rem; }

.pm-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .7rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--panel-line);
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 600;
}

.pm-chip b { color: #fff; }
.pm-chip--accent { color: var(--accent-color); border-color: var(--primary-line); }

.pm-section {
    padding: 1.15rem 1.25rem;
    border-radius: .85rem;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--panel-line);
}

.pm-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .65rem;
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.pm-section-title i { color: var(--primary-color); font-size: .85rem; }

.pm-actions { display: flex; flex-direction: column; gap: .65rem; }

.pm-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    height: 54px;
    border-radius: .75rem;
    background: var(--primary-color);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: 0 14px 30px -14px var(--primary-glow);
    transition: opacity .2s ease, transform .2s ease;
}

.pm-cta:hover { opacity: .85; transform: translateY(-2px); }
.pm-cta i { font-size: .9rem; }

.pm-cta--alt {
    background: transparent;
    border: 1px solid var(--primary-line);
    color: #fff;
    box-shadow: none;
}

.pm-cta--alt:hover { background: var(--primary-soft); opacity: 1; }

.pm-cta--trial {
    background: transparent;
    border: 1px dashed var(--primary-line);
    color: var(--accent-color);
    box-shadow: none;
}

.pm-cta--trial:hover { background: var(--primary-soft); opacity: 1; }

.pm-input {
    width: 100%;
    padding: 1rem;
    border-radius: .75rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--panel-line);
    color: #fff;
    font-size: .9rem;
    text-align: center;
    outline: none;
    transition: border-color .2s ease;
}

.pm-input:focus { border-color: var(--primary-color); }
.pm-input::placeholder { color: var(--text-muted); }

@media (min-width: 640px) {
    .pm-actions { flex-direction: row; }
}

/* =========================================================
   Announcement cards
   ========================================================= */

.ann-stack { display: flex; flex-direction: column; gap: 1rem; }

.ann-card { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.ann-card--split { grid-template-columns: 1fr 1fr; }

.ann-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .75rem;
    padding: 2.75rem;
    background: var(--content-color);
    border: 1px solid var(--panel-line);
    border-radius: .75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
}

.ann-eyebrow {
    color: var(--primary-color);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ann-title {
    color: #fff;
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
}

.ann-text { color: var(--text-muted); line-height: 1.6; }
.ann-text a { color: var(--primary-color); }
.ann-text p + p { margin-top: .75rem; }
.ann-text ul { list-style: disc; margin-left: 1.25rem; }

.ann-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }

.ann-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 48px;
    padding: 0 1.35rem;
    border-radius: .5rem;
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .2s ease, transform .2s ease;
}

.ann-button:hover { opacity: .8; transform: translateY(-2px); }
.ann-button i { font-size: .75rem; }

.ann-button--ghost { background: transparent; border: 1px solid var(--primary-line); color: #fff; }
.ann-button--ghost:hover { background: var(--primary-soft); }

.ann-media {
    position: relative;
    min-height: 240px;
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
}

.ann-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ann-card--flip .ann-body { order: 2; }
.ann-card--flip .ann-media { order: 1; }

@media (max-width: 1023px) {
    .ann-card--split { grid-template-columns: 1fr; }
    .ann-body { padding: 2rem; }
    .ann-media { min-height: 200px; order: 0 !important; }
    .ann-card--flip .ann-body { order: 1; }
}

/* =========================================================
   Top announcement bar
   ========================================================= */

.ann-bar {
    position: relative;
    z-index: 20;
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary-color) 22%, var(--content-color)), var(--content-color) 70%);
    border-bottom: 1px solid var(--primary-line);
}

.ann-bar-inner { display: flex; align-items: center; gap: .85rem; padding-top: .7rem; padding-bottom: .7rem; }

.ann-bar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 8px;
    background: var(--primary-color);
    color: #10120f;
    font-size: .72rem;
}

.ann-bar-text { flex: 1 1 auto; min-width: 0; color: #fff; font-size: .88rem; font-weight: 600; line-height: 1.35; }

.ann-bar-link {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--accent-color);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s ease;
}

.ann-bar-link:hover { opacity: .75; }
.ann-bar-link i { font-size: .7rem; transition: transform .2s ease; }
.ann-bar-link:hover i { transform: translateX(3px); }

.ann-bar-close {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: var(--text-muted);
    font-size: .75rem;
    transition: background .2s ease, color .2s ease;
}

.ann-bar-close:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.ann-bar-leave { transition: opacity .2s ease, transform .2s ease; }
.ann-bar-leave-start { opacity: 1; transform: translateY(0); }
.ann-bar-leave-end { opacity: 0; transform: translateY(-100%); }

@media (max-width: 640px) {
    .ann-bar-text { font-size: .8rem; }
    .ann-bar-link { display: none; }
}

/* =========================================================
   Sale banner + countdown
   ========================================================= */

.sale-banner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    padding: 1.9rem 2.25rem;
    background: var(--content-color);
    border: 1px solid var(--panel-line);
    border-radius: .75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
    overflow: hidden;
}

.sale-banner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
}

.sale-banner-text { min-width: 0; flex: 1 1 260px; }

.sale-title {
    color: #fff;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.sale-subtitle { margin-top: .5rem; color: var(--accent-color); font-size: 1rem; font-weight: 700; }

.sale-banner-side { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.sale-timer {
    display: flex;
    align-items: stretch;
    gap: .35rem;
    padding: .75rem .9rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--panel-line);
    border-radius: .9rem;
}

.sale-timer[hidden], .sale-ended[hidden] { display: none; }

.sale-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    min-width: 58px;
    padding: 0 .4rem;
}

.sale-unit + .sale-unit { border-left: 1px solid var(--panel-line); }

.sale-digit {
    display: block;
    color: #fff;
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.sale-label {
    color: var(--text-muted);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sale-ended { color: var(--text-muted); font-size: .9rem; font-weight: 700; }

.sale-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 52px;
    padding: 0 1.5rem;
    border-radius: .5rem;
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 30px -12px var(--primary-glow);
    transition: opacity .2s ease, transform .2s ease;
}

.sale-button:hover { opacity: .8; transform: translateY(-2px); }

@media (max-width: 768px) {
    .sale-banner { padding: 1.5rem 1.25rem 1.5rem 1.5rem; }
    .sale-banner-side { width: 100%; }
    .sale-timer { width: 100%; justify-content: space-between; }
    .sale-unit { min-width: 0; flex: 1; }
    .sale-digit { font-size: 1.5rem; }
    .sale-button { width: 100%; justify-content: center; }
}

/* =========================================================
   Login skin preview
   ========================================================= */

.login-avatar {
    position: relative;
    width: 128px;
    height: 128px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-avatar-glow {
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary-glow), transparent 68%);
    filter: blur(6px);
}

.login-avatar img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .55));
}

.login-avatar-spinner {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--content-light-color);
    color: var(--primary-color);
    font-size: .7rem;
}

.login-avatar-spinner[hidden] { display: none; }

.login-avatar.is-pop img { animation: avatarPop .32s ease; }

@keyframes avatarPop {
    0%   { transform: scale(.9); opacity: .5; }
    60%  { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1); }
}

.login-preview-name { color: var(--primary-color); font-weight: 700; }
.login-input.is-valid { border-color: var(--primary-color) !important; }
.login-input.is-invalid { border-color: #ef4444 !important; }
.login-card { border-color: var(--panel-line) !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   Standalone product page
   ========================================================= */

.pp-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 600;
}

.pp-crumbs a { color: var(--text-muted); text-decoration: none; transition: color .2s ease; }
.pp-crumbs a:hover { color: var(--primary-color); }
.pp-crumbs i { font-size: .6rem; opacity: .5; }
.pp-crumbs span { color: #fff; }

.pp {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--content-color);
    border: 1px solid var(--panel-line);
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
}

.pp-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    border-radius: .85rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 40%, var(--primary-soft), transparent 62%),
        var(--content-light-color);
}

.pp-media { padding: 1.5rem; }
.pp-media img { width: 100%; height: 100%; object-fit: contain; }
.pp-media-fallback { color: var(--primary-color); font-size: 5rem; opacity: .5; }

.pp-out {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 12, .72);
    backdrop-filter: blur(2px);
}

.pp-out span {
    padding: .5rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 100px;
    color: #fff;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pp-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .9rem;
    padding: .5rem .5rem .5rem 0;
}

.pp-badges { display: flex; flex-wrap: wrap; gap: .4rem; }

.pp-name {
    color: #fff;
    font-size: clamp(1.9rem, 3.5vw, 2.6rem);
    font-weight: 900;
    line-height: 1.1;
}

.pp-label { color: var(--text-muted); font-size: .95rem; }

.pp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .65rem; }

.pp-price-now { color: var(--primary-color); font-size: 2rem; font-weight: 900; line-height: 1; }

.pp-price-was {
    color: #ef5b5b;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-color: #ef5b5b;
}

.pp-actions { margin-top: .5rem; max-width: 320px; }

.pm-cta[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.pp-description {
    padding: 2rem;
    background: var(--content-color);
    border: 1px solid var(--panel-line);
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
}

.pp-description .pm-section-title { margin-bottom: 1rem; font-size: .85rem; }

@media (min-width: 1024px) {
    .pp { grid-template-columns: 5fr 7fr; padding: 2rem; gap: 2.5rem; }
    .pp-details { padding: 1rem 1rem 1rem 0; }
}

/* Custom marketing labels (Marketing tab in the template settings) */
.pc-badge--promo,
.pm-badge--promo {
    max-width: 200px;
    background: rgba(12, 14, 12, .78);
    border: 1px solid var(--primary-line);
    color: var(--accent-color);
    white-space: normal;
    text-align: right;
    line-height: 1.3;
    backdrop-filter: blur(6px);
}

.pc-badges { max-width: 78%; }

/* =========================================================
   Rich text from the PayNow description editor
   The Tailwind browser build ships no typography plugin, so
   headings, bold and lists need real rules here.
   ========================================================= */

.pm-rich { color: var(--text-muted); font-size: .9rem; line-height: 1.65; }

.pm-rich > * + * { margin-top: .7rem; }
.pm-rich > :first-child { margin-top: 0; }

.pm-rich h1,
.pm-rich h2,
.pm-rich h3,
.pm-rich h4,
.pm-rich h5,
.pm-rich h6 {
    color: #fff;
    font-weight: 800;
    line-height: 1.25;
    margin-top: 1.2rem;
}

.pm-rich h1 { font-size: 1.35rem; }
.pm-rich h2 { font-size: 1.18rem; }
.pm-rich h3 { font-size: 1.05rem; }
.pm-rich h4,
.pm-rich h5,
.pm-rich h6 { font-size: .95rem; }

.pm-rich p { margin-top: .7rem; }

.pm-rich strong,
.pm-rich b { color: #fff; font-weight: 800; }

.pm-rich em,
.pm-rich i { font-style: italic; }

.pm-rich u { text-decoration: underline; text-underline-offset: 2px; }
.pm-rich s,
.pm-rich del { text-decoration: line-through; opacity: .7; }

.pm-rich a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pm-rich a:hover { color: var(--accent-color); }

.pm-rich ul { list-style: disc; padding-left: 1.3rem; }
.pm-rich ol { list-style: decimal; padding-left: 1.3rem; }
.pm-rich li { margin-top: .3rem; }
.pm-rich li::marker { color: var(--primary-color); }
.pm-rich ul ul,
.pm-rich ol ol { margin-top: .3rem; }

.pm-rich img {
    max-width: 100%;
    height: auto;
    border-radius: .6rem;
    margin-top: .8rem;
}

.pm-rich hr { border: 0; border-top: 1px solid var(--panel-line); margin: 1.1rem 0; }

.pm-rich blockquote {
    border-left: 3px solid var(--primary-color);
    padding-left: .9rem;
    color: #fff;
}

.pm-rich code {
    padding: .1rem .35rem;
    border-radius: .3rem;
    background: rgba(255, 255, 255, .08);
    color: var(--accent-color);
    font-size: .88em;
}

.pm-rich pre {
    padding: .9rem;
    border-radius: .6rem;
    background: rgba(0, 0, 0, .35);
    overflow-x: auto;
}

.pm-rich pre code { background: none; padding: 0; color: inherit; }

.pm-rich table { width: 100%; border-collapse: collapse; }

.pm-rich th,
.pm-rich td {
    padding: .45rem .6rem;
    border: 1px solid var(--panel-line);
    text-align: left;
}

.pm-rich th { color: #fff; font-weight: 700; background: rgba(255, 255, 255, .04); }