/* TarahSefid homepage — closely matching rtl-theme layout */

.rt-page {
    --brand: #8ed557;
    --brand-hover: #7fc945;
    --brand-dark: #689e3f;
    --ink: #3c4354;
    --mute: #959595;
    --mute-2: #6a6a6a;
    --line: #ededed;
    --soft: #f7f8fa;
    --dark: #363d4d;
    --dark-card: #485166;
    color: var(--ink);
    background: #fff;
    overflow-x: clip;
    overflow-y: visible;
}

.rt-page .container {
    width: min(1180px, 94%);
    margin-inline: auto;
}

.rt-block {
    padding: 1.1rem 0;
}

/* ========== Hero ========== */
.rt-hero {
    position: relative;
    isolation: isolate;
    padding: clamp(.45rem, 1.2vw, .85rem) 0 clamp(2rem, 3.5vw, 3rem);
    overflow: visible;
    background: #f7f8f8;
    z-index: 2;
}

.rt-hero.is-searching {
    z-index: 50;
    isolation: auto;
}

.rt-hero.has-stories {
    padding-top: .25rem;
}

.rt-hero-marks {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .07;
    background-image: url("../images/logo.svg");
    background-size: 92px 92px;
    background-repeat: space;
    filter: grayscale(1);
    mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 10%, transparent 78%);
}

.rt-hero-inner {
    position: relative;
    z-index: 5;
    width: min(760px, 92%);
    margin-inline: auto;
    text-align: center;
}

.rt-stories {
    display: flex;
    justify-content: center;
    gap: .85rem;
    overflow-x: auto;
    padding: 0 0 .45rem;
    margin: 0 auto .15rem;
    max-width: 100%;
    scrollbar-width: thin;
}

.rt-stories .story-item {
    flex: 0 0 auto;
    text-align: center;
    width: 78px;
    text-decoration: none;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.rt-stories .story-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-inline: auto;
}

.rt-stories .story-ring-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 6px 14px rgba(127, 201, 69, .22));
}

.rt-stories .story-ring-track {
    stroke: rgba(127, 201, 69, .16);
}

.rt-stories .story-ring-seg {
    transition: stroke .2s ease;
}

.rt-stories .story-ring-avatar {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    overflow: hidden;
    border: 2.5px solid #fff;
    background: #eef7e8;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .04);
}

.rt-stories .story-ring-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rt-stories .story-vid {
    display: grid;
    place-items: center;
    height: 100%;
    font-size: .75rem;
    color: #3f7a18;
    font-weight: 800;
}

.rt-stories .story-name {
    display: block;
    margin-top: .4rem;
    font-size: .74rem;
    font-weight: 700;
    color: #5b6570;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rt-hero h1 {
    margin: 0 0 .75rem;
    color: #2b2f33;
    font-size: clamp(1.45rem, 3.1vw, 2.05rem);
    font-weight: 800;
    line-height: 1.7;
}

.rt-hero h1 .em {
    position: relative;
    display: inline-block;
    color: #7fc945;
    padding: 0 .15em;
}

.rt-hero h1 .spark {
    position: absolute;
    background: #7fc945;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    pointer-events: none;
}

.rt-hero h1 .spark.s1 { top: -10px; right: -8px; width: 12px; height: 12px; }
.rt-hero h1 .spark.s2 { top: -4px; left: -10px; width: 8px; height: 8px; opacity: .85; }
.rt-hero h1 .spark.s3 { bottom: 4px; right: -14px; width: 7px; height: 7px; opacity: .7; }

.rt-lead {
    margin: 0 auto 1.7rem;
    color: #8b9298;
    font-size: clamp(.95rem, 1.6vw, 1.1rem);
    font-weight: 500;
    line-height: 1.8;
}

.rt-search {
    direction: ltr;
    display: flex;
    align-items: stretch;
    max-width: 680px;
    margin: 0 auto 1.15rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 36px rgba(40, 50, 60, .08);
    overflow: visible;
    border: 1px solid #eef1f3;
}

.rt-search-btn {
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    border: 0;
    background: #7fc945;
    color: #fff;
    cursor: pointer;
    border-radius: 14px 0 0 14px;
}

.rt-search-btn:hover { background: #6fb536; }

.rt-search input {
    direction: rtl;
    flex: 1;
    border: 0 !important;
    outline: 0;
    margin: 0 !important;
    background: transparent;
    padding: 1rem .9rem !important;
    min-width: 0;
    font-size: .98rem;
    color: #2b2f33;
    box-shadow: none !important;
    text-align: right;
}

.rt-search input::placeholder { color: #a0a7ae; }

.rt-search-cat {
    direction: rtl;
    position: relative;
    flex: 0 0 auto;
    min-width: 148px;
    border-left: 1px solid #eef1f3;
    background: #fafbfc;
    display: flex;
    align-items: center;
    border-radius: 0 14px 14px 0;
}

.rt-search-cat select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0 1rem 0 2.1rem;
    color: #5c646c;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
}

.rt-search-cat svg {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa3ab;
    pointer-events: none;
}

.rt-hot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .15rem .2rem;
    color: #9aa3ab;
    font-size: .84rem;
    line-height: 1.9;
}

.rt-hot > span:first-child { margin-inline-end: .2rem; font-weight: 600; }
.rt-hot a { color: #9aa3ab; }
.rt-hot a:hover { color: #7fc945; }
.rt-hot .sep { color: #9aa3ab; }

/* ========== Section head ========== */
.rt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.rt-head__title {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.rt-head__icon {
    display: inline-flex;
    color: var(--brand);
}

.rt-head__icon svg { width: 21px; height: 21px; display: block; }

.rt-head h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
}

.rt-head.light h2 { color: #fff; }

.rt-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--brand);
    color: var(--brand);
    background: transparent;
    border-radius: 4px;
    padding: 14px 15px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    transition: .2s ease;
}

.rt-btn-outline:hover {
    border-color: var(--brand-dark);
    color: var(--brand-dark);
}

.rt-head.light .rt-btn-outline {
    border-color: var(--brand);
    color: var(--brand);
    background: transparent;
}

.rt-head__tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.rt-mini-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 18px;
    border: 0;
    border-radius: 4px;
    background: #f7f8fa;
    color: #6a6a6a;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.rt-mini-tab:hover,
.rt-mini-tab.active {
    color: var(--brand-dark);
    background: #eef8ea;
}

.rt-mini-tab.active {
    box-shadow: inset 0 -2px 0 var(--brand, #7fc945);
}

.rt-grid.is-loading {
    opacity: .48;
    pointer-events: none;
    transition: opacity .18s ease;
}

/* ========== Category boxes ========== */
.rt-catboxes {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
}

.rt-catbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 180px;
    padding: 36px 16px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 10px hsla(0, 0%, 74.9%, .35);
    transition: .3s;
    overflow: hidden;
}

.rt-catbox__icon {
    font-size: 36px;
    margin-bottom: 22px;
    color: var(--brand);
    transition: .3s;
    line-height: 0;
}

.rt-catbox__icon svg {
    width: 36px;
    height: 36px;
    display: block;
}

.rt-catbox__title {
    font-size: 16px;
    color: #4d535b;
    font-weight: 500;
    margin-bottom: .5rem;
    transition: .3s;
    white-space: nowrap;
}

.rt-catbox__desc {
    color: #6a6a6a;
    font-size: 13px;
    transition: .3s;
}

.rt-catbox__desc b {
    font-size: 14px;
    color: var(--brand);
    font-weight: 700;
    margin-inline-end: .15rem;
    transition: .3s;
}

.rt-catbox:hover {
    background-color: var(--brand);
}

.rt-catbox:hover .rt-catbox__icon,
.rt-catbox:hover .rt-catbox__title,
.rt-catbox:hover .rt-catbox__desc,
.rt-catbox:hover .rt-catbox__desc b {
    color: #fff;
}

/* ========== CTA trio ========== */
.rt-cta-trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.rt-cta-card {
    min-height: 180px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 1.25rem 1.2rem;
    color: #fff;
    box-shadow: 0 10px 28px rgba(40, 50, 60, .1);
    transition: transform .25s ease;
}

.rt-cta-card:hover { transform: translateY(-4px); }

.rt-cta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(400px 180px at 80% 0%, rgba(255, 255, 255, .22), transparent 55%),
        linear-gradient(145deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .35));
}

.rt-cta-card.tone-pro { background: linear-gradient(135deg, #1f8f4e, #8ed557); }
.rt-cta-card.tone-cloud { background: linear-gradient(135deg, #2457c5, #56a0ff); }
.rt-cta-card.tone-gift { background: linear-gradient(135deg, #c2410c, #f59e0b); }

.rt-cta-card__body {
    position: relative;
    z-index: 1;
}

.rt-cta-card__body strong {
    display: block;
    font-size: 1.15rem;
    margin-bottom: .35rem;
}

.rt-cta-card__body span {
    font-size: .88rem;
    opacity: .92;
}

/* ========== Wide banner ========== */
.rt-wide-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.35rem 1.5rem;
    border-radius: 12px;
    background: linear-gradient(90deg, #2f80ed, #56a0ff);
    color: #fff;
    box-shadow: 0 12px 28px rgba(47, 128, 237, .2);
}

.rt-wide-banner strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: .25rem;
}

.rt-wide-banner span {
    opacity: .92;
    font-size: .9rem;
}

.rt-wide-banner em {
    font-style: normal;
    background: #fff;
    color: #2f80ed;
    border-radius: 8px;
    padding: .7rem 1.15rem;
    font-weight: 800;
}

/* ========== Product grid / cards (rtl-theme exact) ========== */
.rt-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.rt-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: .3s;
    box-shadow: 0 2px 14px rgba(60, 67, 84, .08);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.rt-card:hover {
    box-shadow: 0 10px 28px rgba(60, 67, 84, .14);
}

.rt-card-media {
    position: relative;
    aspect-ratio: 911 / 451;
    overflow: hidden;
}

.rt-card-img {
    position: absolute;
    inset: 0;
    padding: 12px 12px 0;
    display: block;
}

.rt-card-img img,
.rt-card-img .ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    background: #eef2f4;
}

.rt-card-img .ph {
    display: grid;
    place-items: center;
    color: var(--brand);
    font-size: 1.8rem;
    font-weight: 800;
    background: #eef8ea;
}

.rt-card-body {
    height: 93px;
    padding: 13.5px 16px 0;
    transition: .3s;
}

.rt-card-title {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 400;
    line-height: 32px;
    max-height: 32px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: .3s;
}

.rt-card-title a {
    color: #3c4354;
    transition: .3s;
}

.rt-card-title a:hover { color: var(--brand); }

.rt-card-usage {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    color: #959595;
    font-size: 13px;
    height: 21px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rt-card-usage svg {
    flex: 0 0 auto;
    opacity: .75;
}

.rt-card-footer {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0 12px;
    margin: 0 12px;
    position: relative;
    gap: .5rem;
}

.rt-card-swap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 54px;
    height: 54px;
    display: flex;
    align-items: center;
}

.rt-card-details {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    transition: opacity .28s ease, visibility .28s ease;
    opacity: 1;
    visibility: visible;
}

.rt-detail {
    margin: 0 4px;
    text-align: center;
    min-width: 40px;
}

.rt-detail--sale {
    background: #f3f5f7;
    border-radius: 8px;
    padding: 6px 10px;
    min-width: 48px;
}

.rt-detail b {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #3c4354;
    line-height: 1.2;
}

.rt-detail--support b {
    color: rgb(60 67 84 / .85);
    font-size: 14px;
}

.rt-detail span {
    display: block;
    font-size: 11px;
    color: hsla(0, 0%, 42.7%, .85);
    font-weight: 400;
    margin-top: 2px;
}

.rt-detail-new {
    display: block;
    font-size: 11px;
    line-height: 1.35;
    color: hsla(0, 0%, 42.7%, .85);
    font-weight: 500;
}

.rt-card-price {
    position: relative;
    flex: 0 0 auto;
    min-height: 54px;
    min-width: 118px;
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-right: 14px;
    text-align: left;
    direction: ltr;
    z-index: 2;
}

.rt-card-price::after {
    content: "";
    position: absolute;
    border-right: 1px solid #ededed;
    right: 0;
    height: 43px;
    bottom: 6px;
}

.rt-card-price.has-off {
    padding-top: 2px;
}

.rt-price-off {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 22px;
    padding: 0 6px;
    border-radius: 4px;
    color: #fff;
    background: #8ed557;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.rt-price-row {
    display: flex;
    align-items: center;
    gap: 6px;
    direction: ltr;
    margin-bottom: 1px;
}

.rt-price-row .rt-price-off { order: 0; }
.rt-price-row s {
    order: 1;
    font-size: 13px;
    font-weight: 400;
    color: #959595;
    text-decoration: line-through;
}

.rt-price-final {
    display: flex;
    align-items: baseline;
    gap: 4px;
    direction: rtl;
    white-space: nowrap;
}

.rt-price-final strong {
    font-size: 17px;
    font-weight: 700;
    color: #3c4354;
    line-height: 1.4;
}

.rt-price-final span {
    font-size: 12px;
    font-weight: 700;
    color: #6d6d6d;
}

.rt-card-actions {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
    background: transparent;
    z-index: 1;
}

.rt-card-actions form { margin: 0; }

.rt-btn-buy {
    border: 0;
    background: #8ed557 !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 700;
    min-height: 42px;
    min-width: 115px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rt-btn-buy:hover { background: #7fc945 !important; }

.rt-btn-preview {
    min-height: 42px;
    min-width: 42px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f1f3f5;
    color: #3c4354;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font-size: 13px;
    font-weight: 700;
}

.rt-btn-preview span { display: none; }

.rt-card:hover .rt-card-details {
    opacity: 0;
    visibility: hidden;
}

.rt-card:hover .rt-card-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.rt-card.is-dark .rt-card-actions {
    background: transparent;
}

/* Dark card variant */
.rt-card.is-dark {
    background: var(--dark-card);
    box-shadow: 0 0 40px 0 rgb(26 41 70 / .5);
    border: none;
    color: #fff;
}

.rt-card.is-dark .rt-card-title a,
.rt-card.is-dark .rt-price-final strong {
    color: #fff;
}

.rt-card.is-dark .rt-card-usage,
.rt-card.is-dark .rt-detail span,
.rt-card.is-dark .rt-price-final span,
.rt-card.is-dark .rt-detail-new,
.rt-card.is-dark .rt-price-row s {
    color: rgba(255, 255, 255, .65);
}

.rt-card.is-dark .rt-detail b {
    color: rgba(255, 255, 255, .95);
}

.rt-card.is-dark .rt-detail--sale {
    background: rgba(255, 255, 255, .08);
}

.rt-card.is-dark .rt-card-price::after {
    border-right-color: rgba(255, 255, 255, .12);
}

.rt-card.is-dark .rt-btn-preview {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* ========== Dark section ========== */
.rt-dark {
    background-color: #363d4d;
    background-image:
        radial-gradient(700px 240px at 10% 0%, rgba(142, 213, 87, .12), transparent 55%),
        radial-gradient(600px 220px at 90% 100%, rgba(47, 128, 237, .12), transparent 50%);
    padding: 40px 0;
    margin: 1.4rem 0;
}

/* ========== Spotlight (graphical carousel) ========== */
.rt-spotlight-section {
    --spot-accent: #f5b427;
    --spot-ink: #24301c;
    --spot-muted: #6b7a5c;
    --spot-card: #1a2030;
}

.rt-spotlight-head {
    align-items: center;
    gap: .75rem;
}

.rt-spotlight-icon {
    color: var(--spot-accent) !important;
    filter: drop-shadow(0 4px 10px rgba(245, 180, 39, .35));
}

.rt-spotlight-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

.rt-spotlight-nav {
    display: inline-flex;
    gap: .35rem;
}

.rt-spotlight-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid #e2ecd4;
    background: #fff;
    color: #4a5d38;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .18s ease;
    box-shadow: 0 4px 12px rgba(30, 40, 20, .05);
}

.rt-spotlight-btn:hover {
    border-color: #cfeab0;
    background: #f4faec;
    color: #3f7a18;
    transform: translateY(-1px);
}

.rt-spotlight-btn:active { transform: translateY(0); }

.rt-spotlight-stage {
    position: relative;
    padding: 1.1rem;
    border-radius: 24px;
    border: 1px solid #e4ecd9;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(245, 180, 39, .14), transparent 46%),
        radial-gradient(90% 80% at 0% 100%, rgba(127, 201, 69, .12), transparent 48%),
        linear-gradient(165deg, #fcfef9 0%, #f7faf2 55%, #eef6e4 100%);
    box-shadow: 0 14px 34px rgba(30, 40, 20, .06);
    overflow: hidden;
}

.rt-spotlight-glow {
    pointer-events: none;
    position: absolute;
    inset: auto -10% -40% 40%;
    height: 70%;
    background: radial-gradient(circle, rgba(142, 213, 87, .22), transparent 68%);
    filter: blur(8px);
}

.rt-spotlight {
    position: relative;
    z-index: 1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 300px);
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .35rem .15rem 1rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    outline: none;
}

.rt-spotlight::-webkit-scrollbar { display: none; }
.rt-spotlight.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rt-spotlight.is-dragging .rt-spot { pointer-events: none; }

.rt-spot {
    scroll-snap-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: var(--spot-card);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 10px 28px rgba(20, 28, 40, .18);
    transform: scale(.94);
    opacity: .78;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, box-shadow .3s ease;
    isolation: isolate;
}

.rt-spot.is-active {
    transform: scale(1);
    opacity: 1;
    box-shadow:
        0 18px 40px rgba(20, 28, 40, .28),
        0 0 0 2px rgba(245, 180, 39, .45);
}

.rt-spot-rank {
    position: absolute;
    top: .75rem;
    inset-inline-start: .75rem;
    z-index: 3;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .45rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    font-size: .78rem;
    font-weight: 900;
    color: #3a2a05;
    background: linear-gradient(135deg, #ffe08a, #f5b427);
    box-shadow: 0 6px 16px rgba(245, 180, 39, .35);
}

.rt-spot-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background:
        radial-gradient(80% 70% at 30% 20%, rgba(142, 213, 87, .28), transparent 55%),
        linear-gradient(145deg, #2a3348, #171c28);
}

.rt-spot-media img,
.rt-spot-media .ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

.rt-spot.is-active .rt-spot-media img {
    transform: scale(1.05);
}

.rt-spot-media .ph {
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 2.4rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.rt-spot-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .18) 48%, transparent 62%);
    transform: translateX(120%);
    pointer-events: none;
}

.rt-spot.is-active .rt-spot-shine {
    animation: rtSpotShine 1.1s ease .15s both;
}

@keyframes rtSpotShine {
    from { transform: translateX(-120%); }
    to { transform: translateX(120%); }
}

.rt-spot-meta {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: .95rem 1rem 1.05rem;
    background:
        linear-gradient(180deg, rgba(18, 22, 32, .35), rgba(12, 15, 22, .96));
}

.rt-spot-meta strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.45;
    color: #fff;
    white-space: normal;
}

.rt-spot-price {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    width: fit-content;
    padding: .28rem .6rem;
    border-radius: 999px;
    background: rgba(142, 213, 87, .16);
    border: 1px solid rgba(142, 213, 87, .35);
    color: #d7f5b6;
    font-size: .75rem;
    font-weight: 700;
}

.rt-spot-price em {
    font-style: normal;
    font-size: .88rem;
    font-weight: 900;
    color: #8ed557;
}

.rt-spotlight-dots {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: .4rem;
    padding-top: .15rem;
}

.rt-spotlight-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: #c9d9b8;
    cursor: pointer;
    transition: .2s ease;
}

.rt-spotlight-dot.is-active {
    width: 22px;
    background: linear-gradient(90deg, #7fc945, #f5b427);
}

.hw-density-compact .rt-spotlight-stage { padding: .85rem; }
.hw-density-compact .rt-spotlight { grid-auto-columns: minmax(220px, 260px); }

@media (min-width: 768px) {
    .rt-spotlight {
        grid-auto-columns: minmax(280px, 320px);
        gap: 1.15rem;
    }
}

@media (min-width: 1100px) {
    .rt-spotlight {
        grid-auto-columns: minmax(300px, 340px);
    }
}

@media (max-width: 640px) {
    .rt-spotlight-stage {
        padding: .8rem;
        border-radius: 18px;
    }

    .rt-spotlight {
        grid-auto-columns: minmax(78%, 86%);
        gap: .75rem;
        padding-bottom: .75rem;
    }

    .rt-spotlight-btn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .rt-spot-meta strong { font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
    .rt-spot,
    .rt-spot-media img,
    .rt-spotlight-dot { transition: none; }
    .rt-spot.is-active .rt-spot-shine { animation: none; }
}

/* ========== Custom tab / block ========== */
.rt-custom-block { margin-block: 1.2rem; }
.rt-custom-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(140px, .7fr);
    gap: 1rem;
    align-items: center;
    padding: 1.35rem 1.4rem;
    border-radius: 22px;
    border: 1px solid #e4ecd9;
    background:
        radial-gradient(90% 80% at 100% 0%, rgba(127, 201, 69, .16), transparent 48%),
        linear-gradient(145deg, #fcfef9, #f3f8ec);
    box-shadow: 0 12px 30px rgba(30, 40, 20, .06);
}
.rt-custom-block.tone-amber .rt-custom-card {
    background:
        radial-gradient(90% 80% at 100% 0%, rgba(245, 180, 39, .18), transparent 48%),
        linear-gradient(145deg, #fffdf7, #fff5df);
    border-color: #f0e2b8;
}
.rt-custom-block.tone-slate .rt-custom-card {
    background:
        radial-gradient(90% 80% at 100% 0%, rgba(100, 116, 139, .16), transparent 48%),
        linear-gradient(145deg, #f8fafc, #eef2f7);
    border-color: #dbe3ee;
}
.rt-custom-eyebrow {
    display: inline-flex;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: rgba(255,255,255,.8);
    border: 1px solid #d8efb8;
    color: #3f7a18;
    font-size: .72rem;
    font-weight: 800;
}
.rt-custom-block.tone-amber .rt-custom-eyebrow {
    border-color: #f0d48a;
    color: #8a5a00;
}
.rt-custom-block.tone-slate .rt-custom-eyebrow {
    border-color: #cbd5e1;
    color: #475569;
}
.rt-custom-copy h2 {
    margin: .55rem 0 .35rem;
    font-size: clamp(1.15rem, 2.2vw, 1.55rem);
    font-weight: 900;
    color: #24301c;
}
.rt-custom-sub {
    margin: 0;
    color: #5a6a4d;
    font-size: .95rem;
    font-weight: 700;
}
.rt-custom-text {
    margin: .55rem 0 0;
    color: #6b7a5c;
    font-size: .88rem;
    line-height: 1.75;
    max-width: 42rem;
}
.rt-custom-btn {
    display: inline-flex;
    margin-top: 1rem;
    padding: .65rem 1.1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #7fc945, #5ea82a);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(94, 168, 42, .25);
}
.rt-custom-block.tone-amber .rt-custom-btn {
    background: linear-gradient(135deg, #f5b427, #d9920a);
    box-shadow: 0 8px 18px rgba(217, 146, 10, .25);
}
.rt-custom-block.tone-slate .rt-custom-btn {
    background: linear-gradient(135deg, #64748b, #475569);
    box-shadow: 0 8px 18px rgba(71, 85, 105, .25);
}
.rt-custom-art {
    min-height: 120px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 45%),
        linear-gradient(135deg, rgba(142, 213, 87, .45), rgba(245, 180, 39, .35));
}
@media (max-width: 720px) {
    .rt-custom-card {
        grid-template-columns: 1fr;
        padding: 1.1rem;
    }
    .rt-custom-art { min-height: 84px; }
}

/* ========== Designer of the week ========== */
.rt-designer-week__icon {
    color: #7fc945 !important;
    background: rgba(142, 213, 87, .14);
    border-radius: 10px;
    width: 34px;
    height: 34px;
    display: inline-grid !important;
    place-items: center;
}
.rt-designer-week__stage {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}
.rt-dw-vendor {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem 1.1rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e8eee0;
    box-shadow: 0 8px 24px rgba(40, 50, 30, .06);
}
.rt-dw-vendor__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
}
.rt-dw-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #8ed557, #f5b427);
    margin-bottom: .35rem;
}
.rt-dw-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 3px solid #fff;
}
.rt-dw-name {
    font-size: 1rem;
    font-weight: 900;
    color: #24301c;
}
.rt-dw-handle {
    font-size: .78rem;
    color: #8a96a3;
    direction: ltr;
}
.rt-dw-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
    width: 100%;
    margin: 1rem 0 .95rem;
}
.rt-dw-stat {
    padding: .55rem .4rem;
    border-radius: 12px;
    background: #f7faf2;
    border: 1px solid #e8f0dc;
}
.rt-dw-stat span {
    display: block;
    font-size: .72rem;
    color: #7a876c;
    font-weight: 700;
}
.rt-dw-stat b {
    display: block;
    margin-top: .15rem;
    font-size: 1.05rem;
    font-weight: 900;
}
.rt-dw-stat.is-sales b { color: #c9a227; }
.rt-dw-stat.is-rate b { color: #5ea82a; }
.rt-dw-stat.is-rate small {
    font-size: .75em;
    margin-inline-start: 1px;
}
.rt-dw-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    padding: .7rem .9rem;
    border-radius: 12px;
    background: #f1f4f7;
    color: #4a5563;
    font-weight: 800;
    font-size: .88rem;
    text-decoration: none;
    transition: .18s ease;
}
.rt-dw-all:hover {
    background: #e8f6d8;
    color: #3f7a18;
}
.rt-dw-products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.rt-dw-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e8eee0;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(40, 50, 30, .05);
    transition: transform .2s ease, box-shadow .2s ease;
}
.rt-dw-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(40, 50, 30, .09);
}
.rt-dw-card__media {
    display: block;
    aspect-ratio: 911 / 451;
    background: #eef2f6;
    overflow: hidden;
}
.rt-dw-card__media img,
.rt-dw-card__media .ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rt-dw-card__media .ph {
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    font-weight: 900;
    color: #7a876c;
    background: linear-gradient(145deg, #f4faec, #e8f0dc);
}
.rt-dw-card__body {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .85rem .9rem 1rem;
    flex: 1;
}
.rt-dw-card__title {
    margin: 0;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.45;
}
.rt-dw-card__title a {
    color: #24301c;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rt-dw-card__cat {
    color: #8a96a3;
    font-size: .78rem;
    font-weight: 600;
}
.rt-dw-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: .6rem;
    margin-top: auto;
    padding-top: .65rem;
}
.rt-dw-card__metrics {
    display: flex;
    gap: .55rem;
}
.rt-dw-m {
    min-width: 2.2rem;
    text-align: center;
}
.rt-dw-m b {
    display: block;
    font-size: .86rem;
    font-weight: 900;
    color: #314028;
}
.rt-dw-m b.is-new {
    color: #5ea82a;
    font-size: .72rem;
}
.rt-dw-m span {
    display: block;
    margin-top: .1rem;
    font-size: .68rem;
    color: #8a96a3;
    font-weight: 700;
}
.rt-dw-card__price {
    text-align: left;
    direction: rtl;
}
.rt-dw-off {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .35rem;
    margin-bottom: .2rem;
}
.rt-dw-off em {
    font-style: normal;
    font-size: .72rem;
    font-weight: 900;
    color: #fff;
    background: #7fc945;
    border-radius: 8px;
    padding: .12rem .35rem;
}
.rt-dw-off s {
    color: #a0aab5;
    font-size: .72rem;
}
.rt-dw-final {
    display: flex;
    align-items: baseline;
    gap: .25rem;
    justify-content: flex-start;
}
.rt-dw-final strong {
    font-size: .95rem;
    font-weight: 900;
    color: #24301c;
}
.rt-dw-final span {
    font-size: .72rem;
    color: #8a96a3;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .rt-dw-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rt-dw-products .rt-dw-card:nth-child(3) { display: none; }
}

@media (max-width: 820px) {
    .rt-designer-week__stage {
        grid-template-columns: 1fr;
    }
    .rt-dw-vendor {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "avatar meta"
            "stats stats"
            "btn btn";
        text-align: right;
        gap: .75rem 1rem;
        align-items: center;
    }
    .rt-dw-vendor__top {
        grid-area: meta;
        align-items: flex-start;
        text-align: right;
    }
    .rt-dw-avatar {
        grid-area: avatar;
        margin: 0;
        width: 72px;
        height: 72px;
    }
    .rt-dw-stats { grid-area: stats; margin: 0; }
    .rt-dw-all { grid-area: btn; }
    .rt-dw-products {
        grid-template-columns: 1fr;
        gap: .85rem;
    }
    .rt-dw-products .rt-dw-card:nth-child(3) { display: flex; }
}

@media (max-width: 640px) {
    .rt-dw-products {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(78%, 86%);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: .25rem;
    }
    .rt-dw-products::-webkit-scrollbar { display: none; }
    .rt-dw-card { scroll-snap-align: start; }
}

/* Featured deal styles live in home-featured-deal.css */


/* ========== Blog ========== */
.rt-blog {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.rt-blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px hsla(0, 0%, 74.9%, .35);
    transition: .2s ease;
    min-height: 100%;
}

.rt-blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(60, 67, 84, .1);
}

.rt-blog-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
}

.rt-blog-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.rt-blog-card:hover .rt-blog-card__media img {
    transform: scale(1.04);
}

.rt-blog-card__media span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .92);
    font-size: 2rem;
    font-weight: 800;
}

.rt-blog-card__media.tone-a { background: linear-gradient(135deg, #2f80ed, #56ccf2); }
.rt-blog-card__media.tone-b { background: linear-gradient(135deg, #8ed557, #56c08a); }
.rt-blog-card__media.tone-c { background: linear-gradient(135deg, #f5b427, #f2994a); }
.rt-blog-card__media.tone-d { background: linear-gradient(135deg, #6a5acd, #9b8cff); }
.rt-blog-card__media.has-cover { background: #e8edf2; }

.rt-blog-card__body {
    padding: 1rem 1rem .55rem;
    flex: 1;
}

.rt-blog-card__title {
    margin: 0 0 .55rem;
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.2em;
}

.rt-blog-card__title a { color: #3c4354; }
.rt-blog-card__title a:hover { color: #7fc945; }

.rt-blog-card__body p {
    margin: 0;
    color: #959595;
    font-size: .84rem;
    line-height: 1.85;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rt-blog-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .7rem 1rem 1rem;
    color: #959595;
    font-size: .78rem;
    font-weight: 600;
}

.rt-blog-cat,
.rt-blog-comments {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.rt-seo-text {
    margin: .4rem auto 1.2rem;
    max-width: 920px;
    text-align: center;
    color: #8b9298;
    font-size: .9rem;
    line-height: 2.1;
}

.rt-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--mute);
    padding: 2rem 1rem;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: #fafbfc;
}

/* ========== Responsive ========== */
@media (max-width: 1100px) {
    .rt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rt-catboxes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rt-cta-trio { grid-template-columns: 1fr; }
    .rt-blog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .rt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .rt-catboxes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .rt-blog { grid-template-columns: 1fr; }
    .rt-dark { padding: 28px 0; }
    .rt-head { gap: .75rem; }
    .rt-head h2 { font-size: 1.05rem; }
    .rt-btn-outline { padding: 10px 12px; font-size: 13px; }
    .rt-mini-tab { padding: 10px 12px; font-size: 13px; }
    .rt-wide-banner { padding: 1.15rem 1.2rem; }
    .rt-wide-banner strong { font-size: 1rem; }
    .rt-card-body { height: auto; min-height: 84px; padding: 12px 12px 0; }
    .rt-card-title {
        font-size: 15px;
        line-height: 1.45;
        max-height: 2.9em;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .rt-card-footer { height: auto; min-height: 64px; }
}

@media (max-width: 640px) {
    .rt-page .container {
        width: 100%;
        padding-inline: 14px;
    }

    .rt-block { padding: .85rem 0; }

    .rt-hero {
        padding: .35rem 0 1.5rem;
    }

    .rt-hero-inner { width: 100%; }

    .rt-hero h1 {
        font-size: clamp(1.22rem, 6.2vw, 1.45rem);
        line-height: 1.65;
        margin-bottom: .55rem;
    }

    .rt-hero h1 .spark.s1,
    .rt-hero h1 .spark.s2,
    .rt-hero h1 .spark.s3 { display: none; }

    .rt-lead {
        margin-bottom: 1.15rem;
        font-size: .92rem;
        line-height: 1.7;
        padding-inline: .25rem;
    }

    .rt-stories {
        justify-content: flex-start;
        gap: .55rem;
        padding-inline: 2px;
        margin-bottom: .35rem;
        scrollbar-width: none;
    }
    .rt-stories::-webkit-scrollbar { display: none; }
    .rt-stories .story-item { width: 68px; }
    .rt-stories .story-ring { width: 62px; height: 62px; }

    .rt-search {
        flex-wrap: wrap;
        border-radius: 16px;
        max-width: 100%;
        width: 100%;
        margin-bottom: .9rem;
    }
    .rt-search-btn {
        order: 3;
        flex: 1 1 100%;
        height: 48px;
        border-radius: 0 0 16px 16px;
    }
    .rt-search input {
        order: 2;
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
        padding: .85rem .9rem !important;
        font-size: .92rem;
    }
    .rt-search-cat {
        order: 1;
        flex: 1 1 100%;
        min-height: 46px;
        min-width: 0;
        border-left: 0;
        border-bottom: 1px solid #eef1f3;
        border-radius: 16px 16px 0 0;
    }
    .rt-search-cat select {
        padding: 0 .9rem 0 2rem;
        font-size: .86rem;
    }

    .rt-hot {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: .35rem .55rem;
        font-size: .78rem;
        padding-inline: 2px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .rt-hot::-webkit-scrollbar { display: none; }
    .rt-hot > * { flex: 0 0 auto; white-space: nowrap; }

    .rt-head {
        flex-direction: column;
        align-items: stretch;
        gap: .7rem;
        margin-bottom: 12px;
    }
    .rt-head__title {
        width: 100%;
        min-width: 0;
    }
    .rt-head h2 {
        font-size: 1rem;
        line-height: 1.45;
    }
    .rt-head__tabs {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 2px;
    }
    .rt-head__tabs::-webkit-scrollbar { display: none; }
    .rt-mini-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: .55rem .8rem;
        font-size: .78rem;
        border-radius: 8px;
    }
    .rt-btn-outline {
        align-self: flex-start;
        padding: .55rem .85rem;
        font-size: .8rem;
        border-radius: 8px;
    }

    .rt-spotlight-actions {
        width: 100%;
        justify-content: space-between;
    }
    .rt-spotlight-stage {
        padding: .75rem;
        border-radius: 16px;
    }
    .rt-spotlight {
        grid-auto-columns: minmax(78%, 86%);
        gap: .75rem;
        padding-bottom: .75rem;
    }
    .rt-spotlight-btn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
    .rt-spot-meta strong { font-size: .86rem; }

    .rt-wide-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: .85rem;
        padding: 1.05rem 1rem;
        border-radius: 14px;
    }
    .rt-wide-banner strong {
        font-size: .98rem;
        line-height: 1.5;
    }
    .rt-wide-banner span {
        font-size: .84rem;
        line-height: 1.6;
    }
    .rt-wide-banner em {
        width: 100%;
        text-align: center;
        padding: .75rem 1rem;
    }

    .rt-grid { gap: 12px; }

    .rt-card { border-radius: 14px; }
    .rt-card-img { padding: 8px 8px 0; }
    .rt-card-body {
        min-height: 70px;
        padding: 10px 10px 0;
    }
    .rt-card-title {
        font-size: 13px;
        margin-bottom: 6px;
        line-height: 1.45;
        max-height: 2.9em;
    }
    .rt-card-usage {
        font-size: 11px;
        height: auto;
        min-height: 18px;
    }
    .rt-card-footer {
        margin: 0 8px;
        padding: 2px 0 10px;
        min-height: 52px;
        gap: .35rem;
    }
    .rt-card-swap { min-height: 44px; height: auto; }
    .rt-card-details .rt-detail:nth-child(n + 2) { display: none; }
    .rt-detail { margin: 0; min-width: 0; }
    .rt-detail--sale { padding: 5px 8px; min-width: 0; border-radius: 8px; }
    .rt-detail b { font-size: 13px; }
    .rt-detail span { font-size: 10px; }
    .rt-card-price {
        width: auto;
        min-width: 0;
        min-height: 44px;
        padding-right: 0;
        align-items: flex-end;
    }
    .rt-card-price::after { display: none; }
    .rt-price-row { gap: 4px; margin-bottom: 0; }
    .rt-price-row s { font-size: 11px; }
    .rt-price-off {
        min-width: 28px;
        height: 18px;
        font-size: 11px;
        padding: 0 5px;
    }
    .rt-price-final strong { font-size: 13px; }
    .rt-price-final span { font-size: 10px; }

    .rt-catbox { min-height: 132px; padding: 18px 10px; border-radius: 14px; }
    .rt-catbox__title { font-size: .88rem; }
    .rt-catbox__desc { font-size: .75rem; }

    .rt-cta-card { min-height: 150px; border-radius: 16px; padding: 1rem; }

    .rt-blog { gap: 14px; }
    .rt-blog-card { border-radius: 14px; }
}

@media (max-width: 480px) {
    .rt-page .container { padding-inline: 12px; }

    .rt-grid { gap: 10px; }

    .rt-card-body { min-height: 64px; padding: 8px 8px 0; }
    .rt-card-title { font-size: 12.5px; }
    .rt-card-usage { display: none; }
    .rt-detail span { display: none; }
    .rt-detail--sale { padding: 6px 7px; }
    .rt-detail b { font-size: 12px; }
    .rt-price-final strong { font-size: 12.5px; }
    .rt-price-row s { display: none; }

    .rt-catboxes { gap: 8px; }
    .rt-catbox { min-height: 118px; padding: 14px 8px; }
    .rt-catbox__desc { display: none; }

    .rt-spotlight {
        grid-auto-columns: minmax(84%, 90%);
    }

    .rt-dw-products {
        grid-auto-columns: minmax(84%, 92%);
    }
}

/* Touch: keep stats/price visible (no hover-only buy swap) */
@media (hover: none), (pointer: coarse) {
    .rt-card:hover .rt-card-details,
    .rt-card:focus-within .rt-card-details {
        opacity: 1;
        visibility: visible;
    }
    .rt-card:hover .rt-card-actions,
    .rt-card:focus-within .rt-card-actions {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .rt-card-actions { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rt-card,
    .rt-card:hover,
    .rt-cta-card:hover,
    .rt-blog-card:hover,
    .rt-spotlight-btn:hover {
        transform: none;
    }
}