/**
 * /urunler — YON / header shell palette (--h-*)
 */
.cm-shell.yc,
.yc {
    --yc-bg: var(--h-bg-page, #161b28);
    --yc-header: var(--h-bg-header, #222433);
    --yc-surface: var(--h-bg-card, #2f3144);
    --yc-surface-2: var(--h-bg-raised, #333548);
    --yc-border: var(--h-border, #32394e);
    --yc-border-soft: rgba(50, 57, 78, 0.72);
    --yc-text: var(--h-text, #d7d8e6);
    --yc-text-bright: var(--h-text-bright, #ffffff);
    --yc-muted: var(--h-text-muted, #9192a5);
    --yc-green: var(--h-green, #34d399);
    --yc-green-dark: var(--h-green-dark, #43a047);
    --yc-blue: var(--h-blue, #667afa);
    --yc-blue-dark: var(--h-blue-dark, #6366f1);
    --yc-blue-text: var(--h-blue-text, #c7d2fe);
    --yc-orange: var(--h-orange, #ffc107);
    --yc-radius: var(--h-radius, 12px);
    --yc-shadow: var(--h-shadow-card, 0 4px 16px rgba(0, 0, 0, 0.25));
    min-height: 60vh;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(12px, 2vw, 18px) 3.5rem;
    background: var(--yc-bg);
    color: var(--yc-text);
    font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
}

.yc-container {
    max-width: var(--h-container, 1680px);
    margin-inline: auto;
}

.yc-section {
    padding: 0 0 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Hero */
.yc-hero {
    max-width: var(--h-container, 1680px);
    margin: 0 auto 1.75rem;
    text-align: center;
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--yc-radius);
    border: 1px solid var(--yc-border-soft);
    background: linear-gradient(180deg, var(--yc-header) 0%, var(--yc-surface) 100%);
    box-shadow: var(--yc-shadow);
}

.yc-crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--yc-muted);
    margin-bottom: 12px;
}

.yc-crumb a {
    color: var(--yc-muted);
    transition: color 0.15s;
}

.yc-crumb a:hover {
    color: var(--yc-blue-text);
}

.yc-crumb__sep {
    opacity: 0.5;
}

.yc-crumb .is-active {
    color: var(--yc-text-bright);
    font-weight: 700;
}

.yc-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    color: var(--yc-blue-text);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.yc-hero__eyebrow i {
    color: var(--yc-green);
}

.yc-hero__title {
    margin: 0;
    font-size: clamp(1.65rem, 3.5vw, 2.25rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--yc-text-bright);
}

.yc-hero__sub {
    margin: 0.75rem auto 0;
    max-width: 640px;
    font-size: 0.9rem;
    color: var(--yc-muted);
    line-height: 1.6;
}

.yc-hero__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    font-size: 12px;
    color: var(--yc-muted);
}

.yc-hero__stat strong {
    color: var(--yc-text-bright);
    font-weight: 800;
    font-size: 13px;
}

.yc-hero__stat-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--yc-border);
}

.yc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
    margin-top: 1.25rem;
}

.yc-hero__note {
    margin: 0.65rem 0 0;
    font-size: 11px;
    color: var(--yc-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.yc-hero__note i {
    color: var(--yc-green);
}

.yc-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--yc-border-soft);
}

.yc-trust__pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(52, 211, 153, 0.28);
    background: var(--h-green-soft, rgba(52, 211, 153, 0.12));
    font-size: 12px;
    font-weight: 700;
    color: var(--yc-text);
}

.yc-trust__pill i {
    color: var(--yc-green);
    font-size: 15px;
}

/* Buttons */
.yc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
    border-radius: 10px;
    padding: 0 1.15rem;
    font-size: 0.8125rem;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1.2;
}

.yc-btn:hover {
    transform: translateY(-1px);
}

.yc-btn--green {
    background: linear-gradient(135deg, var(--yc-green) 0%, var(--yc-green-dark) 100%);
    color: var(--h-green-text-on, #04140a);
    box-shadow: var(--h-shadow-green, 0 4px 14px rgba(52, 211, 153, 0.28));
}

.yc-btn--green:hover {
    filter: brightness(1.06);
}

.yc-btn--blue {
    background: linear-gradient(135deg, var(--yc-blue) 0%, var(--yc-blue-dark) 100%);
    color: #fff;
    box-shadow: var(--h-shadow-blue, 0 4px 14px rgba(102, 122, 250, 0.35));
}

.yc-btn--blue:hover {
    filter: brightness(1.06);
}

.yc-btn--ghost,
.yc-btn--outline {
    background: var(--yc-surface-2);
    border-color: var(--yc-border);
    color: var(--yc-text);
}

.yc-btn--ghost:hover,
.yc-btn--outline:hover {
    border-color: rgba(102, 122, 250, 0.45);
    background: rgba(102, 122, 250, 0.1);
    color: var(--yc-text-bright);
}

.yc-btn--sm {
    min-height: 36px;
    padding: 0 0.85rem;
    font-size: 0.75rem;
}

.yc-btn--icon {
    min-width: 36px;
    width: 36px;
    padding: 0;
}

.yc-btn--block {
    width: 100%;
}

.yc-btn--disabled,
.yc-btn--disabled:hover,
.yc-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    filter: none;
    pointer-events: none;
}

.yc-btn:focus-visible {
    outline: 2px solid rgba(102, 122, 250, 0.55);
    outline-offset: 2px;
}

/* Toggle group (grid/list) */
.yc-btn-group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--yc-border);
    border-radius: 10px;
    background: var(--yc-surface-2);
}

.yc-btn--toggle {
    min-height: 32px;
    min-width: 34px;
    width: 34px;
    padding: 0;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--yc-muted);
}

.yc-btn--toggle:hover {
    color: var(--yc-text-bright);
    background: rgba(102, 122, 250, 0.1);
    transform: none;
}

.yc-btn--toggle.is-active {
    background: linear-gradient(135deg, var(--yc-green) 0%, var(--yc-green-dark) 100%);
    color: var(--h-green-text-on, #04140a);
    box-shadow: var(--h-shadow-green, 0 2px 8px rgba(52, 211, 153, 0.28));
    transform: none;
}

.yc-btn--toggle.is-active:hover {
    filter: brightness(1.06);
}

/* Accordion triggers (FAQ, fraud) */
.yc-btn--accordion {
    width: 100%;
    min-height: 52px;
    justify-content: space-between;
    padding: 14px 18px;
    border-radius: 0;
    background: transparent;
    border: 0;
    color: var(--yc-text-bright);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    transform: none;
    white-space: normal;
}

.yc-btn--accordion:hover {
    background: rgba(102, 122, 250, 0.06);
    transform: none;
}

.yc-btn--accordion i {
    font-size: 20px;
    color: var(--yc-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.yc-faq__item.is-open .yc-btn--accordion i,
.yc-fraud.is-open .yc-btn--accordion i {
    transform: rotate(180deg);
}

.yc-fraud__toggle.yc-btn--accordion {
    gap: 10px;
    justify-content: flex-start;
}

.yc-fraud__toggle.yc-btn--accordion .yc-fraud__title {
    flex: 1;
}

.yc-fraud__toggle.yc-btn--accordion .yc-fraud__caret {
    margin-left: auto;
}

/* Pagination */
.yc-pager {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 8px;
}

.yc-pager__info {
    margin: 0;
    font-size: 13px;
    color: var(--yc-muted);
}

.yc-pager__info strong {
    color: var(--yc-text-bright);
    font-weight: 800;
}

.yc-pager__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.yc-pager__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.yc-pager__dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 36px;
    color: var(--yc-muted);
    font-weight: 700;
}

.yc-btn--page {
    min-width: 36px;
    padding: 0 10px;
}

.yc-btn--page.is-active {
    cursor: default;
    pointer-events: none;
}

/* Shell panels */
.yc-shell {
    border: 1px solid var(--yc-border-soft);
    border-radius: var(--yc-radius);
    background: var(--yc-surface);
    padding: 20px;
    box-shadow: var(--yc-shadow);
}

.yc-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.yc-section-head__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 20px;
    color: var(--yc-blue-text);
    background: rgba(102, 122, 250, 0.14);
    border: 1px solid rgba(102, 122, 250, 0.28);
}

.yc-section-head__title {
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 800;
    color: var(--yc-text-bright);
}

/* Alert / fraud */
.yc-alert {
    padding: 12px 16px;
    border-radius: var(--h-radius-lg);
    border: 1px solid rgba(61, 90, 254, 0.28);
    background: var(--h-blue-soft);
    color: var(--yc-blue-text);
    font-size: 13px;
}

.yc-fraud {
    border-radius: var(--yc-radius);
    border: 1px solid rgba(255, 179, 0, 0.32);
    background: linear-gradient(135deg, var(--h-orange-soft), var(--yc-surface));
    overflow: hidden;
}

.yc-fraud__toggle {
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.yc-fraud__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--h-radius-sm);
    display: grid;
    place-items: center;
    background: var(--h-orange-soft);
    color: var(--yc-orange);
    font-size: 16px;
    flex-shrink: 0;
}

.yc-fraud__title {
    flex: 1;
    font-size: 13px;
    font-weight: 800;
    color: var(--h-text-bright);
}

.yc-fraud__caret {
    transition: transform 0.2s;
    color: var(--yc-muted);
}

.yc-fraud__caret.is-open {
    transform: rotate(180deg);
}

.yc-fraud__preview,
.yc-fraud__body {
    padding: 0 14px 12px 56px;
    font-size: 12px;
    color: var(--yc-muted);
    line-height: 1.45;
}

.yc-fraud__body p,
.yc-fraud__preview p {
    margin: 0 0 4px;
}

.yc-fraud__body p:last-child {
    margin-bottom: 0;
}

/* Layout */
.yc-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.yc-layout:not(:has(.yc-side)) {
    grid-template-columns: 1fr;
}

.yc-side {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 110px);
    overflow: auto;
    padding-bottom: 8px;
}

.yc-side::-webkit-scrollbar {
    width: 5px;
}

.yc-side::-webkit-scrollbar-thumb {
    background: rgba(61, 90, 254, 0.35);
    border-radius: 99px;
}

.yc-side__close {
    display: none;
}

.yc-side__scrim {
    display: none;
}

.yc-panel {
    border-radius: var(--yc-radius);
    border: 1px solid var(--yc-border);
    background: var(--yc-surface);
    box-shadow: var(--yc-shadow);
    padding: 14px;
}

.yc-panel__head {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--yc-muted);
    margin-bottom: 12px;
}

.yc-cat-search,
.yc-input-wrap {
    position: relative;
    margin-bottom: 10px;
}

.yc-cat-search i,
.yc-input-wrap i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--yc-muted);
    font-size: 15px;
    pointer-events: none;
}

.yc-cat-search input,
.yc-input-wrap input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 34px;
    border-radius: var(--h-radius);
    border: 1px solid var(--yc-border);
    background: var(--yc-surface-2);
    color: var(--yc-text);
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.yc-cat-search input:focus,
.yc-input-wrap input:focus {
    border-color: rgba(61, 90, 254, 0.45);
    box-shadow: 0 0 0 3px var(--h-blue-soft);
}

.yc-cats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow: auto;
}

.yc-cat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--h-radius);
    color: var(--yc-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}

.yc-cat:hover {
    background: var(--h-blue-soft);
}

.yc-cat.is-active {
    background: var(--h-green-soft);
    color: var(--yc-green);
}

.yc-cat__thumb {
    width: 32px;
    height: 32px;
    border-radius: var(--h-radius-sm);
    overflow: hidden;
    background: var(--yc-surface-2);
    border: 1px solid var(--yc-border);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.yc-cat__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yc-cat__thumb em {
    font-style: normal;
    font-size: 9px;
    font-weight: 900;
    color: var(--yc-muted);
}

.yc-subcats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0 6px 42px;
}

.yc-subcat {
    font-size: 12px;
    color: var(--yc-muted);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--h-radius-sm);
}

.yc-subcat:hover,
.yc-subcat.is-active {
    color: var(--yc-blue-text);
    background: var(--h-blue-soft);
}

.yc-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--yc-muted);
    margin: 10px 0 6px;
}

.yc-price-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.yc-price-row input {
    height: 38px;
    border-radius: var(--h-radius);
    border: 1px solid var(--yc-border);
    background: var(--yc-surface-2);
    color: var(--yc-text);
    padding: 0 10px;
    font-size: 13px;
    outline: none;
}

.yc-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--yc-text);
    padding: 6px 2px;
    cursor: pointer;
}

.yc-check input {
    accent-color: var(--yc-green);
}

.yc-side__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.yc-btn--mobile {
    display: none;
}

/* Main */
.yc-main {
    min-width: 0;
}

.yc-rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 14px;
    margin-bottom: 6px;
    scrollbar-width: thin;
}

.yc-rail__item {
    flex: 0 0 auto;
    width: 76px;
    text-decoration: none;
    color: var(--yc-muted);
    text-align: center;
    transition: color 0.15s, transform 0.15s;
}

.yc-rail__item:hover {
    color: var(--h-text-bright);
    transform: translateY(-2px);
}

.yc-rail__item.is-active {
    color: var(--yc-green);
}

.yc-rail__thumb {
    width: 56px;
    height: 56px;
    margin: 0 auto 6px;
    border-radius: var(--h-radius);
    overflow: hidden;
    border: 1px solid var(--yc-border);
    background: var(--yc-surface);
    display: grid;
    place-items: center;
    box-shadow: var(--yc-shadow);
}

.yc-rail__item.is-active .yc-rail__thumb {
    border-color: rgba(17, 211, 119, 0.45);
    box-shadow: 0 0 0 2px var(--h-green-glow);
}

.yc-rail__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yc-rail__thumb em {
    font-style: normal;
    font-size: 11px;
    font-weight: 900;
    color: var(--yc-muted);
}

.yc-rail__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 auto;
}

.yc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border-radius: var(--yc-radius);
    border: 1px solid var(--yc-border);
    background: var(--yc-surface);
    box-shadow: var(--yc-shadow);
}

.yc-toolbar__left,
.yc-toolbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.yc-count {
    font-size: 13px;
    color: var(--yc-muted);
}

.yc-count strong {
    color: var(--h-text-bright);
    font-weight: 800;
}

.yc-toolbar__search,
.yc-sort {
    height: 36px;
    border-radius: var(--h-radius);
    border: 1px solid var(--yc-border);
    background: var(--yc-surface-2);
    color: var(--yc-text);
    padding: 0 12px;
    font-size: 13px;
    outline: none;
}

.yc-toolbar__search {
    min-width: 180px;
}

.yc-toolbar__search:focus,
.yc-sort:focus {
    border-color: rgba(61, 90, 254, 0.45);
    box-shadow: 0 0 0 3px var(--h-blue-soft);
}

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

@media (min-width: 700px) {
    .yc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .yc-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.yc-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 16px;
    border-radius: var(--yc-radius);
    border: 1px dashed var(--yc-border);
    background: var(--yc-surface);
    color: var(--yc-muted);
    text-align: center;
}

.yc-empty i {
    font-size: 36px;
    color: var(--yc-blue-text);
    opacity: 0.85;
}

.yc-empty p {
    margin: 0;
    font-size: 14px;
    max-width: 36ch;
}

.yc-pagination {
    margin-top: 8px;
}

.yc-pagination .yc-pager {
    margin-top: 0;
}

/* Vitrin */
.yc-vitrin {
    margin-bottom: 16px;
    padding: 14px;
    border-radius: var(--yc-radius);
    border: 1px solid var(--yc-border);
    background: linear-gradient(165deg, var(--h-green-soft), var(--yc-surface));
    box-shadow: var(--yc-shadow);
}

.yc-vitrin__head {
    margin-bottom: 12px;
}

.yc-vitrin__head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--h-text-bright);
}

.yc-vitrin__head h2 i {
    color: var(--yc-orange);
}

.yc-vitrin__head p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--yc-muted);
}

.yc-vitrin__rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.yc-vitrin__card {
    flex: 0 0 160px;
    text-decoration: none;
    color: var(--yc-text);
    border-radius: var(--h-radius);
    border: 1px solid var(--yc-border);
    background: var(--yc-surface-2);
    overflow: hidden;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.yc-vitrin__card:hover {
    transform: translateY(-3px);
    border-color: rgba(17, 211, 119, 0.35);
    box-shadow: var(--h-shadow-elevated);
}

.yc-vitrin__media {
    position: relative;
    aspect-ratio: 1;
    background: var(--yc-surface);
}

.yc-vitrin__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yc-vitrin__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 7px;
    border-radius: var(--h-radius-sm);
    background: var(--h-green-dark);
    color: var(--h-text-bright);
    font-size: 10px;
    font-weight: 800;
}

.yc-vitrin__body {
    padding: 8px 10px 10px;
}

.yc-vitrin__body strong {
    display: block;
    font-size: 12px;
    line-height: 1.3;
    margin-bottom: 4px;
}

.yc-vitrin__body span {
    font-size: 13px;
    font-weight: 800;
    color: var(--yc-green);
}

.yc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.yc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(61, 90, 254, 0.28);
    background: var(--h-blue-soft);
    color: var(--yc-blue-text);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
}

.yc-chip:hover {
    border-color: rgba(17, 211, 119, 0.35);
    background: var(--h-green-soft);
    color: var(--yc-green);
}

.yc-chip--clear {
    background: transparent;
    border-color: var(--yc-border);
    color: var(--yc-muted);
}

.yc-chip--clear:hover {
    border-color: rgba(102, 122, 250, 0.45);
    background: rgba(102, 122, 250, 0.1);
    color: var(--yc-text-bright);
}

.yc-sort-label {
    font-size: 12px;
    color: var(--yc-muted);
    font-weight: 700;
}

.yc-grid[data-yc-view="list"] {
    grid-template-columns: 1fr !important;
    gap: 10px;
}

.yc-item__list {
    display: none;
}

.yc-grid[data-yc-view="list"] .yc-item__grid {
    display: none;
}

.yc-grid[data-yc-view="list"] .yc-item__list {
    display: block;
}

.yc-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border-radius: var(--yc-radius);
    border: 1px solid var(--yc-border);
    background: var(--yc-surface);
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.yc-row:hover {
    border-color: rgba(17, 211, 119, 0.35);
    transform: translateY(-1px);
    box-shadow: var(--h-shadow-elevated);
}

.yc-row__media {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: var(--h-radius);
    overflow: hidden;
    background: var(--yc-surface-2);
    display: grid;
    place-items: center;
    color: var(--yc-muted);
    font-size: 24px;
}

.yc-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yc-row__badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    border-radius: var(--h-radius-sm);
    background: var(--h-green-dark);
    color: var(--h-text-bright);
    font-size: 10px;
    font-weight: 800;
}

.yc-row__cat {
    display: inline-block;
    font-size: 11px;
    color: var(--yc-muted);
    margin-bottom: 4px;
}

.yc-row__title {
    display: block;
    color: var(--h-text-bright);
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}

.yc-row__title:hover {
    color: var(--yc-green);
}

.yc-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--yc-muted);
}

.yc-row__meta i {
    color: var(--yc-blue-text);
}

.yc-row__delivery {
    color: var(--yc-green);
}

.yc-row__buy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.yc-row__price strong {
    display: block;
    font-size: 16px;
    font-weight: 900;
    color: var(--yc-green);
}

.yc-row__price s {
    font-size: 12px;
    color: var(--yc-muted);
}

/* How / FAQ / SEO */
.yc-how {
    margin-top: 8px;
    padding: 22px;
}

.yc-how__title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 900;
    color: var(--h-text-bright);
}

.yc-how__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .yc-how__steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .yc-how__steps {
        grid-template-columns: repeat(4, 1fr);
    }
}

.yc-how__steps li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    border-radius: var(--h-radius);
    border: 1px solid var(--yc-border);
    background: var(--yc-surface-2);
    font-size: 13px;
    line-height: 1.4;
    color: var(--yc-muted);
}

.yc-how__num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--h-radius-sm);
    display: grid;
    place-items: center;
    background: var(--h-blue-soft);
    color: var(--yc-blue-text);
    font-weight: 900;
    font-size: 12px;
    border: 1px solid rgba(61, 90, 254, 0.28);
}

.yc-faq {
    margin-top: 8px;
}

.yc-faq__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.yc-faq__item {
    border: 1px solid var(--yc-border);
    border-radius: var(--yc-radius);
    background: linear-gradient(180deg, var(--yc-surface-2) 0%, var(--yc-surface) 100%);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.yc-faq__item.is-open {
    border-color: rgba(52, 211, 153, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.yc-faq__a {
    padding: 0 18px 18px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--yc-muted);
    border-top: 1px solid var(--yc-border-soft);
}

.yc-faq {
    padding-top: 8px;
}

.yc-faq .yc-section-head {
    margin-bottom: 14px;
}

.yc-seo {
    margin-top: 8px;
    padding: 20px;
}

.yc-seo h2 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 900;
    color: var(--h-text-bright);
}

.yc-seo p {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--yc-muted);
    line-height: 1.55;
}

.yc-seo p:last-child {
    margin-bottom: 0;
}

/* Mobile */
@media (max-width: 980px) {
    .yc-layout {
        grid-template-columns: 1fr;
    }

    .yc-side {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(320px, 88vw);
        max-height: none;
        z-index: 80;
        transform: translateX(-105%);
        transition: transform 0.28s ease;
        background: var(--yc-bg);
        padding: 16px;
        border-right: 1px solid var(--yc-border);
        box-shadow: 20px 0 40px -20px rgba(0, 0, 0, 0.5);
    }

    .yc-side.is-open {
        transform: translateX(0);
    }

    .yc-side__close {
        display: inline-flex;
        margin: 0 0 10px auto;
    }

    .yc-side__scrim {
        position: fixed;
        inset: 0;
        z-index: 70;
        background: rgba(0, 0, 0, 0.55);
        display: none;
    }

    .yc-side__scrim.is-on {
        display: block;
    }

    .yc-btn--mobile {
        display: inline-flex;
    }
}

@media (max-width: 560px) {
    .yc-hero__title {
        font-size: 1.5rem;
    }

    .yc-hero__actions {
        width: 100%;
    }

    .yc-hero__actions .yc-btn {
        width: 100%;
        justify-content: center;
    }

    .yc-grid {
        gap: 10px;
    }

    .yc-row {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .yc-row__buy {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* Product cards — catalog grid */
.yc-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--yc-border);
    border-radius: var(--yc-radius);
    background: var(--yc-surface);
    box-shadow: var(--yc-shadow);
    overflow: hidden;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.yc-card:hover {
    border-color: rgba(52, 211, 153, 0.35);
    transform: translateY(-2px);
    box-shadow: var(--h-shadow-elevated, 0 10px 30px rgba(0, 0, 0, 0.35));
}

.yc-card__media-link {
    display: block;
    text-decoration: none;
    color: inherit;
    flex: 1;
}

.yc-card__media {
    position: relative;
    aspect-ratio: 1;
    background: var(--yc-surface-2);
    overflow: hidden;
}

.yc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.yc-card:hover .yc-card__media img {
    transform: scale(1.04);
}

.yc-card__fallback {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--yc-blue-text);
    opacity: 0.45;
}

.yc-card__badge {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 2;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    color: var(--h-green-text-on, #04140a);
    background: linear-gradient(135deg, var(--yc-green), var(--yc-green-dark));
}

.yc-card__name {
    margin: 0;
    padding: 10px 12px 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--yc-text-bright);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
}

.yc-card__foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px 12px;
    margin-top: auto;
}

.yc-card__foot .yon-pcard__line {
    margin-top: 0;
}

.yc-card__foot .yon-pcard__price {
    font-size: 15px;
    font-weight: 900;
    color: var(--yc-green);
}

.yc-card__form {
    margin: 0;
}

/* Legacy card alias inside catalog shell */
.yc .yon-fg-card {
    background: var(--yc-surface);
    border: 1px solid var(--yc-border);
    border-radius: var(--h-radius);
    box-shadow: var(--yc-shadow);
}

.yc .yon-fg-card:hover {
    border-color: rgba(17, 211, 119, 0.35);
    box-shadow: var(--h-shadow-elevated);
}

.yc .yon-fg-card__media {
    background: var(--yc-surface-2);
}

.yc .yon-fg-card__name {
    color: var(--h-text-bright);
}

.yc .yon-fg-card__price,
.yc .yon-pcard__price {
    color: var(--yc-green);
}

.yc .yon-fg-card__fallback {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--yc-blue-text);
    opacity: 0.45;
}

.yc .yon-fg-card__badge,
.cat-shell .yon-fg-card__badge,
.pd-shell .yon-fg-card__badge {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 2;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    color: var(--h-green-text-on);
    background: linear-gradient(135deg, var(--h-green), var(--h-green-dark));
}