/* AYIN Frontend Unified UI + Smart Full-stack R27C */
:root {
    --r27c-navy-950: #061a36;
    --r27c-navy-900: #08244a;
    --r27c-navy-800: #0d3567;
    --r27c-blue-600: #1559b7;
    --r27c-blue-500: #1b6fd6;
    --r27c-gold-500: #efc75e;
    --r27c-gold-400: #f6d87f;
    --r27c-green-600: #169447;
    --r27c-red-600: #c93f46;
    --r27c-ink: #0b203e;
    --r27c-muted: #718096;
    --r27c-line: #e4dccb;
    --r27c-surface: #ffffff;
    --r27c-surface-soft: #f7f9fc;
    --r27c-radius-lg: 24px;
    --r27c-radius-md: 17px;
    --r27c-radius-sm: 12px;
    --r27c-shadow: 0 18px 48px rgba(7, 31, 66, .08);
    --r27c-shadow-hover: 0 20px 52px rgba(7, 31, 66, .13);
    --r27c-header-height: 72px;
}

body.ayin-page {
    color: var(--r27c-ink);
    background:
        radial-gradient(circle at 10% 4%, rgba(239, 199, 94, .08), transparent 28%),
        linear-gradient(180deg, #fbfbfa 0, #f3f7fc 100%);
}

body.ayin-page .ayin-container {
    width: min(1240px, calc(100% - 36px));
}

body.ayin-page .ayin-card,
body.ayin-page .checkout-section-card,
body.ayin-page .order-summary-card,
body.ayin-page .cart-items-card,
body.ayin-page .support-form-card,
body.ayin-page .support-faq-card,
body.ayin-page .support-history,
body.ayin-page .notifications-panel {
    border: 1px solid rgba(220, 207, 181, .78);
    border-radius: var(--r27c-radius-md);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--r27c-shadow);
}

body.ayin-page .ayin-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 1000;
    min-height: var(--r27c-header-height);
    background: rgba(6, 26, 54, .985);
    box-shadow: 0 8px 30px rgba(5, 20, 42, .16);
    backdrop-filter: blur(12px);
}

body.ayin-page .ayin-topbar-inner {
    min-height: var(--r27c-header-height) !important;
    gap: clamp(16px, 3vw, 38px);
}

body.ayin-page .ayin-brand img,
body.ayin-page .ayin-brand svg {
    max-height: 48px;
}

body.ayin-page .ayin-nav {
    gap: 6px;
    justify-content: center;
}

body.ayin-page .ayin-nav a {
    position: relative;
    padding: 11px 15px;
    border-radius: 11px;
    color: rgba(255, 255, 255, .72);
    font-weight: 800;
    transition: color .2s ease, background .2s ease, translate .2s ease;
}

body.ayin-page .ayin-nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
    translate: 0 -1px;
}

body.ayin-page .ayin-nav a.active {
    color: var(--r27c-gold-400);
    background: rgba(239, 199, 94, .08);
}

body.ayin-page .ayin-nav a.active::after {
    content: '';
    position: absolute;
    inset-inline: 16px;
    inset-block-end: 4px;
    height: 2px;
    border-radius: 999px;
    background: var(--r27c-gold-500);
}

body.ayin-page .ayin-top-actions {
    gap: 10px;
}

body.ayin-page .ayin-icon-btn {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .15);
    color: #fff;
    background: rgba(255, 255, 255, .055);
}

body.ayin-page .ayin-icon-btn:hover {
    background: rgba(255, 255, 255, .11);
}

body.ayin-page .ayin-notification-count {
    position: absolute;
    inset-block-start: -7px;
    inset-inline-start: -5px;
    min-width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    padding-inline: 4px;
    border: 2px solid var(--r27c-navy-950);
    border-radius: 999px;
    background: #ec3f50;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

body.ayin-page .ayin-account-link {
    min-height: 46px;
    padding: 9px 18px;
    gap: 8px;
    color: var(--r27c-ink);
    background: linear-gradient(135deg, var(--r27c-gold-400), var(--r27c-gold-500));
    box-shadow: 0 10px 25px rgba(239, 199, 94, .2);
}

body.ayin-page .ayin-top-avatar {
    width: 27px;
    height: 27px;
    border-radius: 9px;
    object-fit: cover;
}

body.ayin-page main {
    min-height: calc(100vh - var(--r27c-header-height));
}

body.ayin-page .ayin-flash {
    margin-block: 18px 0;
    padding: 14px 18px;
    border-radius: 14px;
    font-weight: 700;
}

body.ayin-page .ayin-flash-success {
    border: 1px solid #a9e7be;
    background: #effcf3;
    color: #116b32;
}

body.ayin-page .ayin-flash-error {
    border: 1px solid #f0b6ba;
    background: #fff3f4;
    color: #9f2630;
}

body.ayin-page .ayin-flash ul {
    margin: 8px 0 0;
    padding-inline-start: 20px;
}

body.ayin-page .dashboard-shell {
    display: grid;
    grid-template-columns: 276px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding-block: 30px 50px;
}

body.ayin-page .main-content {
    min-width: 0;
}

body.ayin-page .side-panel {
    position: sticky;
    inset-block-start: calc(var(--r27c-header-height) + 18px);
    overflow: hidden;
    padding: 17px;
    max-height: calc(100vh - var(--r27c-header-height) - 36px);
    overflow-y: auto;
    scrollbar-width: thin;
}

body.ayin-page .side-user {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 6px 4px 17px;
    border-bottom: 1px solid var(--r27c-line);
    color: var(--r27c-ink);
}

body.ayin-page .side-user:hover strong {
    color: var(--r27c-blue-600);
}

body.ayin-page .side-user .avatar {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    flex: 0 0 50px;
    border-radius: 16px;
    background: linear-gradient(145deg, #f7f9fd, #edf2fb);
    color: var(--r27c-blue-600);
    font-weight: 900;
}

body.ayin-page .side-user .avatar-image {
    object-fit: cover;
}

body.ayin-page .side-menu {
    display: grid;
    gap: 5px;
    margin-block-start: 13px;
}

body.ayin-page .side-menu-label {
    margin: 10px 10px 3px;
    color: #a28c61;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .02em;
}

body.ayin-page .side-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 45px;
    padding: 9px 13px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #667085;
    font-weight: 800;
    transition: background .18s ease, border .18s ease, color .18s ease, translate .18s ease;
}

body.ayin-page .side-menu a:hover {
    color: var(--r27c-ink);
    background: #f6f8fb;
    translate: -2px 0;
}

body.ayin-page .side-menu a.active {
    color: var(--r27c-ink);
    border-color: rgba(239, 199, 94, .42);
    background: linear-gradient(90deg, rgba(231, 240, 253, .9), rgba(248, 241, 220, .55));
    box-shadow: inset -3px 0 0 var(--r27c-gold-500);
}

body.ayin-page .side-menu a span {
    width: 24px;
    text-align: center;
}

body.ayin-page .ayin-unified-hero,
body.ayin-page .hero-dashboard,
body.ayin-page .utility-hero,
body.ayin-page .profile-hero,
body.ayin-page .checkout-hero {
    position: relative;
    overflow: hidden;
    min-height: 210px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: clamp(28px, 4vw, 44px);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r27c-radius-lg);
    background:
        radial-gradient(circle at 8% 108%, rgba(255, 255, 255, .10) 0 14%, transparent 14.5%),
        linear-gradient(115deg, #11283f 0%, #082c59 58%, #071f42 100%);
    color: #fff;
    box-shadow: 0 22px 52px rgba(7, 31, 66, .15);
}

body.ayin-page .ayin-unified-hero::after,
body.ayin-page .hero-dashboard::after,
body.ayin-page .utility-hero::after,
body.ayin-page .profile-hero::after {
    content: '';
    position: absolute;
    width: 330px;
    height: 330px;
    inset-inline-end: -165px;
    inset-block-start: -180px;
    border: 1px solid rgba(239, 199, 94, .18);
    border-radius: 50%;
    pointer-events: none;
}

body.ayin-page :where(.hero-dashboard, .utility-hero, .profile-hero) h1 {
    margin: 7px 0 10px;
    color: #fff;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.12;
}

body.ayin-page :where(.hero-dashboard, .utility-hero, .profile-hero) p {
    max-width: 660px;
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: 16px;
    line-height: 1.9;
}

body.ayin-page .hero-eyebrow,
body.ayin-page .section-kicker {
    color: #d7b968;
    font-size: 13px;
    font-weight: 900;
}

body.ayin-page .referral-box,
body.ayin-page .profile-completion-card,
body.ayin-page .support-availability {
    position: relative;
    z-index: 1;
    width: min(325px, 100%);
    padding: 19px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 17px;
    background: rgba(255, 255, 255, .075);
    backdrop-filter: blur(8px);
}

body.ayin-page .referral-box p {
    margin-block: 6px 12px;
    font-size: 13px;
}

body.ayin-page .referral-code {
    padding: 12px 13px;
    border-radius: 11px;
    color: var(--r27c-ink);
    background: #fff;
    direction: ltr;
    overflow-wrap: anywhere;
    font-weight: 800;
    font-size: 13px;
}

body.ayin-page .ayin-referral-card .ayin-btn {
    width: 100%;
    margin-block-start: 10px;
}

body.ayin-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-block: 22px;
}

body.ayin-page .stat-card {
    min-height: 152px;
    padding: 22px;
    transition: translate .2s ease, box-shadow .2s ease;
}

body.ayin-page .stat-card:hover,
body.ayin-page .service-card:hover,
body.ayin-page .product-card:hover {
    translate: 0 -3px;
    box-shadow: var(--r27c-shadow-hover);
}

body.ayin-page .stat-card strong {
    font-size: clamp(22px, 2.2vw, 31px);
    color: var(--r27c-ink);
}

body.ayin-page .stat-card.green strong,
body.ayin-page .activity-value.positive {
    color: var(--r27c-green-600);
}

body.ayin-page .stat-card.blue strong {
    color: var(--r27c-blue-600);
}

body.ayin-page .activity-value.negative {
    color: var(--r27c-red-600);
}

body.ayin-page .web-grid-2,
body.ayin-page .ayin-dashboard-grid {
    gap: 20px;
}

body.ayin-page .ayin-section-head,
body.ayin-page .utility-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-block-end: 18px;
}

body.ayin-page .ayin-section-title,
body.ayin-page .utility-section-head h2,
body.ayin-page .profile-section-heading h2 {
    margin: 2px 0 0;
    color: var(--r27c-ink);
    font-size: clamp(24px, 2.5vw, 34px);
}

body.ayin-page .services-grid {
    gap: 13px;
}

body.ayin-page .service-card {
    min-height: 116px;
    border: 1px solid #e8dfcf;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #fbfaf7);
    transition: translate .2s ease, box-shadow .2s ease, border .2s ease;
}

body.ayin-page .service-card:hover {
    border-color: rgba(27, 111, 214, .28);
}

body.ayin-page .service-card small {
    color: var(--r27c-muted);
    font-size: 11px;
}

body.ayin-page .activity-list {
    display: grid;
}

body.ayin-page .activity-item {
    gap: 14px;
    min-height: 71px;
    padding-block: 13px;
    border-bottom: 1px solid #eee8de;
}

body.ayin-page .activity-item:last-child {
    border-bottom: 0;
}

body.ayin-page .ayin-empty-compact {
    padding: 32px 16px;
    text-align: center;
    color: var(--r27c-muted);
}

body.ayin-page .ayin-dashboard-orders {
    margin-block-start: 20px;
}

body.ayin-page .ayin-order-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

body.ayin-page .ayin-order-strip a {
    display: grid;
    gap: 7px;
    padding: 15px;
    border: 1px solid #e8dfcf;
    border-radius: 14px;
    color: var(--r27c-ink);
    background: #fbfcfe;
}

body.ayin-page .ayin-order-strip span {
    color: var(--r27c-muted);
    font-size: 13px;
}

/* Single focus ring: wrapper owns focus, inner control stays clean. */
body.ayin-page :where(input, select, textarea):focus,
body.ayin-page :where(input, select, textarea):focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
}

body.ayin-page :where(.auth-input-wrap, .profile-field, .checkout-form-grid label, .support-form label):focus-within {
    border-color: var(--r27c-blue-500) !important;
    box-shadow: 0 0 0 3px rgba(27, 111, 214, .16) !important;
}

body.ayin-page .auth-input-wrap {
    border: 1px solid #d9dfe9;
    border-radius: 15px;
    background: #fbfcfe;
    transition: border .18s ease, box-shadow .18s ease, background .18s ease;
}

body.ayin-page .auth-input-wrap input {
    border: 0 !important;
    background: transparent !important;
}

body.ayin-page .auth-shell {
    min-height: 100vh;
}

body.ayin-page .auth-form-side,
body.ayin-page .auth-showcase {
    min-height: 100vh;
}

body.ayin-page .auth-form-wrap {
    width: min(610px, calc(100% - 44px));
}

body.ayin-page .auth-heading h1 {
    color: var(--r27c-ink);
}

body.ayin-page .auth-submit {
    min-height: 58px;
    border-radius: 15px;
}

body.ayin-page .auth-showcase {
    background: linear-gradient(145deg, #0d3567 0, #071f42 65%, #061a36 100%);
}

/* Store, product, cart and checkout refinements */
body.ayin-page .store-filter-card {
    padding: 20px;
}

body.ayin-page .store-filter-head,
body.ayin-page .store-search {
    gap: 12px;
}

body.ayin-page .store-search input {
    min-height: 50px;
    border-radius: 13px;
}

body.ayin-page .products-grid {
    gap: 18px;
}

body.ayin-page .product-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    transition: translate .2s ease, box-shadow .2s ease;
}

body.ayin-page .product-image {
    min-height: 210px;
}

body.ayin-page .product-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 19px;
}

body.ayin-page .product-footer {
    margin-block-start: auto;
}

body.ayin-page .product-details-layout {
    grid-template-columns: minmax(340px, .9fr) minmax(0, 1.1fr);
    gap: 20px;
    align-items: stretch;
}

body.ayin-page .product-details-image,
body.ayin-page .product-details-info {
    min-height: 540px;
}

body.ayin-page .product-details-image {
    display: grid;
    place-items: center;
}

body.ayin-page .big-product-icon {
    font-size: clamp(110px, 13vw, 180px);
}

body.ayin-page .product-actions {
    margin-block-start: auto;
}

body.ayin-page .cart-layout,
body.ayin-page .checkout-layout {
    gap: 20px;
}

body.ayin-page .cart-items-card,
body.ayin-page .order-summary-card,
body.ayin-page .checkout-section-card {
    min-height: auto !important;
}

body.ayin-page .cart-item-v3 {
    align-items: center;
    min-height: 154px;
    border-radius: 15px;
}

body.ayin-page .catalog-empty,
body.ayin-page .ayin-empty-state {
    min-height: 250px !important;
    padding: 38px 24px !important;
}

body.ayin-page .ayin-empty-state.compact {
    min-height: 190px !important;
}

body.ayin-page .checkout-payment-option {
    border-radius: 15px;
    transition: border .18s ease, box-shadow .18s ease, background .18s ease;
}

body.ayin-page .checkout-payment-option.active {
    border-color: var(--r27c-blue-500);
    background: #f3f7ff;
    box-shadow: 0 0 0 3px rgba(27, 111, 214, .10);
}

/* Wallet, profits and tree */
body.ayin-page .wallet-live-layout,
body.ayin-page .profits-main-grid,
body.ayin-page .tree-bottom-grid {
    gap: 18px;
}

body.ayin-page .wallet-live-card,
body.ayin-page .profit-summary-card,
body.ayin-page .tree-summary-card {
    border-radius: 18px;
    box-shadow: var(--r27c-shadow);
}

body.ayin-page .profits-table-wrap,
body.ayin-page .agencies-table-wrap,
body.ayin-page .tree-explorer-viewport {
    scrollbar-color: #9aa8ba #edf1f6;
    scrollbar-width: thin;
}

body.ayin-page :where(.profits-table, .agencies-table) th {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: #f8f4eb;
}

body.ayin-page :where(.profits-table, .agencies-table) td,
body.ayin-page :where(.profits-table, .agencies-table) th {
    padding: 14px 12px;
    white-space: nowrap;
}

body.ayin-page .tree-workspace-card {
    overflow: hidden;
}

body.ayin-page .tree-explorer-viewport {
    min-height: 520px;
    max-height: 720px;
}

/* Profile */
body.ayin-page .profile-hero h1 {
    display: inline;
    padding: 0;
    background: transparent !important;
    box-shadow: none !important;
}

body.ayin-page .profile-completion-card {
    display: flex;
    align-items: center;
    gap: 15px;
}

body.ayin-page .profile-completion-ring {
    flex: 0 0 82px;
}

body.ayin-page .ayin-profile-layout,
body.ayin-page .profile-main-column {
    width: 100%;
}

body.ayin-page .profile-tabs-card {
    margin-block-start: 20px;
    padding: 0;
    overflow: hidden;
}

body.ayin-page .profile-tabs {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 12px;
    border-bottom: 1px solid #e7dfd1;
    background: #fbfcfe;
}

body.ayin-page .profile-tab {
    min-width: max-content;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #697386;
    background: transparent;
    font-weight: 900;
}

body.ayin-page .profile-tab:hover {
    background: #f1f5fb;
}

body.ayin-page .profile-tab.active {
    border-color: #d9e5f7;
    color: var(--r27c-blue-600);
    background: #eaf2ff;
}

body.ayin-page .profile-tab-panel {
    padding: clamp(20px, 3vw, 32px);
}

body.ayin-page .profile-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-block-end: 20px;
}

body.ayin-page .profile-avatar-editor {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px;
    border: 1px solid #e7dfd1;
    border-radius: 16px;
    background: #fbfcfe;
}

body.ayin-page .profile-avatar-large {
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    flex: 0 0 96px;
    border-radius: 28px;
    color: #fff;
    background: linear-gradient(145deg, var(--r27c-blue-500), var(--r27c-navy-900));
    background-size: cover;
    background-position: center;
    font-size: 42px;
    font-weight: 900;
}

body.ayin-page .profile-avatar-large img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

body.ayin-page .profile-form-grid,
body.ayin-page .support-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-block-start: 20px;
}

body.ayin-page .profile-field,
body.ayin-page .support-form label {
    display: grid;
    gap: 8px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 13px;
    transition: border .18s ease, box-shadow .18s ease;
}

body.ayin-page .profile-field > span,
body.ayin-page .support-form label > span {
    font-weight: 800;
}

body.ayin-page .profile-field :where(input, select, textarea),
body.ayin-page .support-form label :where(input, select, textarea) {
    width: 100%;
    min-height: 51px;
    padding: 12px 14px;
    border: 1px solid #dfe3ea;
    border-radius: 12px;
    color: var(--r27c-ink);
    background: #fbfcfe;
}

body.ayin-page .profile-field textarea,
body.ayin-page .support-form textarea {
    min-height: 120px;
    resize: vertical;
}

body.ayin-page .profile-field-wide,
body.ayin-page .support-field-wide {
    grid-column: 1 / -1;
}

body.ayin-page .profile-form-actions,
body.ayin-page .support-form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-block-start: 20px;
}

body.ayin-page .profile-referral-grid,
body.ayin-page .support-ticket-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

body.ayin-page .profile-referral-grid article,
body.ayin-page .support-ticket-meta-grid article {
    display: grid;
    gap: 8px;
    padding: 17px;
    border: 1px solid #e5dfd4;
    border-radius: 14px;
    background: #fbfcfe;
}

body.ayin-page .profile-referral-grid span,
body.ayin-page .support-ticket-meta-grid span {
    color: var(--r27c-muted);
    font-size: 12px;
}

body.ayin-page .profile-copy-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-block: 18px;
    padding: 18px;
    border-radius: 15px;
    background: linear-gradient(135deg, #edf5ff, #fff8e7);
}

body.ayin-page .profile-copy-card strong {
    display: block;
    margin-block-start: 5px;
    direction: ltr;
    overflow-wrap: anywhere;
}

body.ayin-page .ayin-info-panel {
    padding: 16px;
    border: 1px solid #d7e5f6;
    border-radius: 14px;
    color: #35516f;
    background: #f2f7fd;
}

body.ayin-page .ayin-security-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

body.ayin-page .ayin-security-card {
    padding: 20px;
    border: 1px solid #e4dccf;
    border-radius: 16px;
    background: #fbfcfe;
}

/* Notifications */
body.ayin-page .ayin-notification-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 13px;
}

body.ayin-page .notification-summary-card {
    min-height: 126px;
    padding: 20px;
    border-radius: 17px;
    box-shadow: var(--r27c-shadow);
}

body.ayin-page .notification-summary-card :where(span, strong, small) {
    position: relative;
    z-index: 2;
    color: inherit !important;
    opacity: 1 !important;
}

body.ayin-page .notification-summary-card.blue { color: #fff; background: linear-gradient(135deg, #1f6ed4, #0f4ca4); }
body.ayin-page .notification-summary-card.green { color: #fff; background: linear-gradient(135deg, #2cb661, #138d43); }
body.ayin-page .notification-summary-card.gold { color: var(--r27c-ink); background: linear-gradient(135deg, #ffe6a2, #f1c659); }
body.ayin-page .notification-summary-card.gray { color: var(--r27c-ink); background: linear-gradient(135deg, #edf2f8, #dfe7f1); }
body.ayin-page .notification-summary-card.purple { color: #fff; background: linear-gradient(135deg, #8065d9, #5842ae); }

body.ayin-page .notifications-panel {
    margin-block-start: 20px;
    padding: 24px;
}

body.ayin-page .notification-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

body.ayin-page .notification-filters button {
    padding: 9px 14px;
    border: 1px solid #dfe4ec;
    border-radius: 11px;
    color: #667085;
    background: #fff;
    font-weight: 800;
}

body.ayin-page .notification-filters button.active {
    border-color: #c9dcf6;
    color: var(--r27c-blue-600);
    background: #eaf2ff;
}

body.ayin-page .notification-item {
    border-radius: 15px;
}

body.ayin-page .notification-item.unread {
    border-color: #bad4f6;
    background: #f1f7ff;
}

/* Support */
body.ayin-page .support-availability {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.ayin-page .support-availability > span {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #2dc762;
    box-shadow: 0 0 0 7px rgba(45, 199, 98, .13);
}

body.ayin-page .support-availability small {
    display: block;
    margin-block-start: 4px;
    color: rgba(255, 255, 255, .65);
}

body.ayin-page .support-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-block: 20px;
}

body.ayin-page .support-contact-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 13px;
    padding: 20px;
}

body.ayin-page .support-contact-card .ayin-btn {
    grid-column: 1 / -1;
}

body.ayin-page .support-contact-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #edf4ff;
    font-size: 23px;
}

body.ayin-page .support-contact-card small,
body.ayin-page .support-contact-card p {
    color: var(--r27c-muted);
}

body.ayin-page .support-contact-card p {
    min-height: 42px;
    margin: 7px 0 0;
    font-size: 13px;
}

body.ayin-page .support-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr);
    gap: 18px;
}

body.ayin-page .support-form-card,
body.ayin-page .support-faq-card,
body.ayin-page .support-history,
body.ayin-page .support-ticket-details {
    padding: 24px;
}

body.ayin-page .ayin-live-badge {
    padding: 8px 12px;
    border-radius: 999px;
    color: #116b32;
    background: #eaf9ef;
    font-size: 12px;
    font-weight: 900;
}

body.ayin-page .support-upload {
    padding: 18px !important;
    border: 1px dashed #b9c8dc !important;
    background: #f8fbff;
}

body.ayin-page .support-faq-card details {
    border-bottom: 1px solid #e8e1d6;
    padding-block: 13px;
}

body.ayin-page .support-faq-card summary {
    cursor: pointer;
    font-weight: 900;
}

body.ayin-page .support-faq-card p {
    color: var(--r27c-muted);
    line-height: 1.8;
}

body.ayin-page .support-history {
    margin-block-start: 20px;
}

body.ayin-page .support-ticket-list {
    display: grid;
    gap: 10px;
}

body.ayin-page .support-ticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid #e4dfd6;
    border-radius: 14px;
    color: var(--r27c-ink);
    background: #fbfcfe;
}

body.ayin-page .support-ticket-row > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

body.ayin-page .support-ticket-row > div:first-child {
    display: grid;
}

body.ayin-page .support-ticket-row span {
    color: var(--r27c-muted);
    font-size: 12px;
}

body.ayin-page .support-priority,
body.ayin-page .support-status {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

body.ayin-page .support-priority.normal { color: #235a97; background: #eaf3ff; }
body.ayin-page .support-priority.high,
body.ayin-page .support-priority.urgent { color: #9d2b35; background: #fff0f1; }
body.ayin-page .support-priority.low { color: #4d657b; background: #eef2f5; }
body.ayin-page .support-status.open { color: #915f00; background: #fff5d7; }
body.ayin-page .support-status.in_progress { color: #235a97; background: #eaf3ff; }
body.ayin-page .support-status.resolved { color: #116b32; background: #eaf9ef; }
body.ayin-page .support-status.closed { color: #566273; background: #edf0f3; }

body.ayin-page .support-ticket-hero-meta {
    display: flex;
    gap: 9px;
}

body.ayin-page .support-ticket-details {
    margin-block-start: 20px;
}

body.ayin-page .support-ticket-message {
    margin-block: 20px;
    padding: 20px;
    border-radius: 15px;
    background: #f8fafc;
}

body.ayin-page .support-ticket-message p {
    white-space: pre-wrap;
    line-height: 1.9;
}

body.ayin-page .support-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body.ayin-page .support-attachments h2 {
    width: 100%;
}

body.ayin-page .support-attachments a {
    padding: 10px 13px;
    border: 1px solid #dce5f1;
    border-radius: 11px;
    background: #f4f8fd;
}

body.ayin-page .support-ticket-actions {
    margin-block-start: 22px;
}

body.ayin-page .ayin-btn {
    border-radius: 12px;
    font-weight: 900;
}

body.ayin-page .ayin-btn-primary {
    background: linear-gradient(135deg, #1765ca, #0b438f);
    box-shadow: 0 12px 28px rgba(21, 89, 183, .2);
}

body.ayin-page .ayin-btn-primary:hover {
    filter: brightness(1.05);
    translate: 0 -1px;
}

body.ayin-page .ayin-btn-gold {
    background: linear-gradient(135deg, var(--r27c-gold-400), var(--r27c-gold-500));
}

body.ayin-page .ayin-btn-light {
    border: 1px solid #d9e1eb;
    color: var(--r27c-blue-600);
    background: #fff;
}

body.ayin-page button[disabled],
body.ayin-page .ayin-btn[aria-disabled='true'] {
    opacity: .58;
    filter: grayscale(.15);
}

@media (max-width: 1180px) {
    body.ayin-page .dashboard-shell { grid-template-columns: 240px minmax(0, 1fr); gap: 18px; }
    body.ayin-page .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.ayin-page .ayin-notification-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.ayin-page .profile-referral-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    body.ayin-page .ayin-topbar-inner { flex-wrap: wrap; padding-block: 8px; }
    body.ayin-page .ayin-brand { order: 1; }
    body.ayin-page .ayin-top-actions { order: 2; margin-inline-start: auto; }
    body.ayin-page .ayin-nav { order: 3; width: 100%; justify-content: flex-start; }
    body.ayin-page .dashboard-shell { display: block; }
    body.ayin-page .side-panel { display: none; }
    body.ayin-page .ayin-unified-hero,
    body.ayin-page .hero-dashboard,
    body.ayin-page .utility-hero,
    body.ayin-page .profile-hero { min-height: auto; }
    body.ayin-page .support-main-grid { grid-template-columns: 1fr; }
    body.ayin-page .product-details-layout { grid-template-columns: 1fr; }
    body.ayin-page .product-details-image,
    body.ayin-page .product-details-info { min-height: auto; }
}

@media (max-width: 760px) {
    :root { --r27c-header-height: 64px; }
    body.ayin-page .ayin-container { width: min(100% - 24px, 1240px); }
    body.ayin-page .ayin-topbar { position: relative; }
    body.ayin-page .ayin-nav { display: none; }
    body.ayin-page .ayin-brand img,
    body.ayin-page .ayin-brand svg { max-width: 132px; }
    body.ayin-page .ayin-account-link { max-width: 42vw; padding-inline: 12px; }
    body.ayin-page .dashboard-shell { padding-block: 18px 90px; }
    body.ayin-page .ayin-unified-hero,
    body.ayin-page .hero-dashboard,
    body.ayin-page .utility-hero,
    body.ayin-page .profile-hero,
    body.ayin-page .checkout-hero { flex-direction: column; align-items: stretch; gap: 20px; padding: 25px 20px; border-radius: 20px; }
    body.ayin-page :where(.hero-dashboard, .utility-hero, .profile-hero) h1 { font-size: 34px; }
    body.ayin-page .referral-box,
    body.ayin-page .profile-completion-card,
    body.ayin-page .support-availability { width: 100%; }
    body.ayin-page .stats-grid,
    body.ayin-page .ayin-notification-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.ayin-page .stat-card { min-height: 132px; padding: 17px; }
    body.ayin-page .web-grid-2,
    body.ayin-page .ayin-dashboard-grid { grid-template-columns: 1fr; }
    body.ayin-page .ayin-order-strip { grid-template-columns: 1fr; }
    body.ayin-page .support-contact-grid { grid-template-columns: 1fr; }
    body.ayin-page .support-ticket-row { align-items: flex-start; flex-direction: column; }
    body.ayin-page .profile-form-grid,
    body.ayin-page .support-form-grid,
    body.ayin-page .ayin-security-grid,
    body.ayin-page .profile-referral-grid,
    body.ayin-page .support-ticket-meta-grid { grid-template-columns: 1fr; }
    body.ayin-page .profile-avatar-editor { align-items: flex-start; }
    body.ayin-page .profile-copy-card { align-items: stretch; flex-direction: column; }
    body.ayin-page .profile-tabs { position: sticky; inset-block-start: 0; z-index: 5; }
    body.ayin-page .cart-item-v3 { grid-template-columns: 82px minmax(0, 1fr); }
    body.ayin-page .auth-shell { display: block; }
    body.ayin-page .auth-form-side,
    body.ayin-page .auth-showcase { min-height: auto; }
    body.ayin-page .auth-showcase { padding-block: 44px; }
    body.ayin-page .auth-form-wrap { width: min(100% - 28px, 610px); }
}

@media (max-width: 480px) {
    body.ayin-page .ayin-top-actions .ayin-account-link span { max-width: 95px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body.ayin-page .stats-grid,
    body.ayin-page .ayin-notification-summary-grid { grid-template-columns: 1fr; }
    body.ayin-page .profile-avatar-editor { flex-direction: column; }
    body.ayin-page .profile-tab-panel { padding: 17px; }
    body.ayin-page .profile-section-heading,
    body.ayin-page .utility-section-head { align-items: flex-start; flex-direction: column; }
}

/* AYIN_MOBILE_TWO_PRODUCTS_START */
@media (max-width: 760px) {
    body.ayin-page .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body.ayin-page .product-card {
        min-width: 0 !important;
        border-radius: 14px !important;
    }

    body.ayin-page .product-image {
        width: 100% !important;
        height: 132px !important;
        min-height: 132px !important;
        font-size: 44px !important;
    }

    body.ayin-page .product-content {
        padding: 11px 9px 12px !important;
        gap: 7px !important;
    }

    body.ayin-page .product-content h3 {
        font-size: 14px !important;
        line-height: 1.4 !important;
        min-height: 2.8em;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    body.ayin-page .product-meta,
    body.ayin-page .product-rating,
    body.ayin-page .product-stock-line,
    body.ayin-page .product-content p {
        font-size: 11px !important;
        line-height: 1.45 !important;
    }

    body.ayin-page .product-content p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    body.ayin-page .product-card .ayin-btn {
        width: 100% !important;
        min-height: 38px !important;
        padding: 8px 5px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 380px) {
    body.ayin-page .products-grid {
        gap: 8px !important;
    }

    body.ayin-page .product-image {
        height: 118px !important;
        min-height: 118px !important;
    }

    body.ayin-page .product-content {
        padding-inline: 7px !important;
    }

    body.ayin-page .product-content h3 {
        font-size: 13px !important;
    }
}
/* AYIN_MOBILE_TWO_PRODUCTS_END */

/* AYIN_COMPACT_PRODUCT_CARD_START */
body.ayin-page .product-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}

body.ayin-page .product-buy-form {
    width: 100%;
    margin: 0;
}

body.ayin-page .product-card-actions .ayin-btn {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap;
}

body.ayin-page .product-buy-now {
    color: #0b2a53 !important;
    background: #fff8e5 !important;
    border: 1px solid rgba(198, 154, 51, 0.75) !important;
    box-shadow: none !important;
}

body.ayin-page .product-buy-now:hover {
    color: #081f3e !important;
    background: #f9edc8 !important;
    border-color: #ba8c22 !important;
    transform: translateY(-1px);
}

body.ayin-page .product-buy-now.is-disabled {
    color: #8b8b8b !important;
    background: #f4f4f4 !important;
    border-color: #dedede !important;
    cursor: not-allowed;
    opacity: 0.8;
}

@media (max-width: 760px) {
    body.ayin-page .product-content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        padding: 9px 8px 10px !important;
    }

    body.ayin-page .product-meta,
    body.ayin-page .product-rating,
    body.ayin-page .product-stock-line,
    body.ayin-page .product-footer,
    body.ayin-page .product-price-line,
    body.ayin-page .product-points-inline,
    body.ayin-page .product-content h3,
    body.ayin-page .product-content p {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    body.ayin-page .product-content h3 {
        line-height: 1.35 !important;
    }

    body.ayin-page .product-rating,
    body.ayin-page .product-stock-line {
        min-height: 0 !important;
        line-height: 1.35 !important;
    }

    body.ayin-page .product-footer {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 3px !important;
        padding: 0 !important;
    }

    body.ayin-page .product-price-line {
        gap: 3px !important;
    }

    body.ayin-page .product-card-actions {
        gap: 6px !important;
        margin-top: auto !important;
        padding-top: 5px !important;
    }

    body.ayin-page .product-card-actions .ayin-btn {
        min-height: 36px !important;
        padding: 7px 4px !important;
        border-radius: 9px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 380px) {
    body.ayin-page .product-card-actions {
        gap: 5px !important;
    }

    body.ayin-page .product-card-actions .ayin-btn {
        padding-inline: 2px !important;
        font-size: 10.5px !important;
    }
}
/* AYIN_COMPACT_PRODUCT_CARD_END */

/* AYIN_PRODUCT_CART_CONTROLS_START */
body.ayin-page .product-purchase-controls,
body.ayin-page .product-buy-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin: 0;
}

body.ayin-page .product-purchase-controls {
    margin-top: auto;
    padding-top: 4px;
}

body.ayin-page .product-quantity-control {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    align-items: center;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(11, 42, 83, 0.15);
    border-radius: 9px;
    background: #f7f9fc;
}

body.ayin-page .product-quantity-control input {
    width: 100%;
    height: 30px;
    padding: 0 3px;
    border: 0;
    outline: 0;
    color: #0b2a53;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    appearance: textfield;
}

body.ayin-page .product-quantity-control input::-webkit-inner-spin-button,
body.ayin-page .product-quantity-control input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

body.ayin-page .product-qty-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    color: #0b2a53;
    background: transparent;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

body.ayin-page .product-qty-btn:hover {
    background: rgba(198, 154, 51, 0.14);
}

body.ayin-page .product-add-cart {
    color: #0b2a53 !important;
    background: #fff8e5 !important;
    border: 1px solid rgba(198, 154, 51, 0.78) !important;
    box-shadow: none !important;
}

body.ayin-page .product-add-cart:hover {
    background: #f8edca !important;
    border-color: #b98a1f !important;
}

body.ayin-page .product-add-cart.is-disabled {
    color: #888 !important;
    background: #f3f3f3 !important;
    border-color: #ddd !important;
    cursor: not-allowed;
    opacity: 0.78;
}

@media (max-width: 760px) {
    body.ayin-page .product-card-actions {
        gap: 5px !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body.ayin-page .product-card-actions .ayin-btn {
        min-height: 34px !important;
        padding: 6px 3px !important;
        font-size: 10.5px !important;
    }
}
/* AYIN_PRODUCT_CART_CONTROLS_END */

/* AYIN_FINAL_STORE_CARD_START */

body.ayin-page .products-grid {
    align-items: stretch !important;
    grid-auto-rows: 1fr !important;
}

body.ayin-page .product-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* صور موحدة وبنظام Cover */
body.ayin-page .product-image {
    width: 100% !important;
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;
    overflow: hidden !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

body.ayin-page .product-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* توحيد محتوى وارتفاع البطاقات */
body.ayin-page .product-content {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 4px !important;
}

body.ayin-page .product-meta,
body.ayin-page .product-rating,
body.ayin-page .product-stock-line,
body.ayin-page .product-content p,
body.ayin-page .product-footer,
body.ayin-page .product-price-line,
body.ayin-page .product-points-inline {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.ayin-page .product-content h3 {
    min-height: 2.7em !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body.ayin-page .product-rating,
body.ayin-page .product-stock-line {
    min-height: 1.35em !important;
    line-height: 1.35 !important;
}

body.ayin-page .product-content p {
    min-height: 1.35em !important;
    overflow: hidden !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
}

/* السعر والنقاط في سطر واحد */
body.ayin-page .product-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-top: 3px !important;
    padding: 0 !important;
}

body.ayin-page .product-price-line {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 5px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}

body.ayin-page .product-price-main {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 3px !important;
    white-space: nowrap !important;
}

body.ayin-page .product-price-main strong {
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

body.ayin-page .product-price-main small {
    font-size: 10px !important;
    font-weight: 400 !important;
}

/* نقاط صغيرة ومن دون Bold */
body.ayin-page .product-points-inline {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 2px !important;
    color: #198c4b !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

body.ayin-page .product-points-inline *,
body.ayin-page .product-points-inline span,
body.ayin-page .product-points-inline strong {
    font-size: inherit !important;
    font-weight: 400 !important;
}

body.ayin-page .product-points-inline .product-slash {
    color: #98a2b3 !important;
}

/* الأزرار أسفل البطاقة بارتفاع موحد */
body.ayin-page .product-purchase-controls {
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 7px !important;
}

body.ayin-page .product-buy-form {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

body.ayin-page .product-card-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.ayin-page .product-card-actions .ayin-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 7px 4px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}

/* إضافة للسلة: ستايل ذهبي هادئ */
body.ayin-page .product-add-cart {
    color: #5d4812 !important;
    background: #fff8df !important;
    border: 1px solid #d8ba53 !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}

body.ayin-page .product-add-cart:hover {
    color: #473606 !important;
    background: #f7ebbb !important;
    border-color: #c7a632 !important;
}

body.ayin-page .product-add-cart.is-disabled {
    color: #888 !important;
    background: #f2f2f2 !important;
    border-color: #ddd !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
}

/* منع ظهور أي محدد كمية قديم */
body.ayin-page .product-quantity-control,
body.ayin-page .product-quantity-bar,
body.ayin-page .product-card-quantity,
body.ayin-page .quantity-controls,
body.ayin-page .store-qty-controls,
body.ayin-page .product-card .qty-wrap {
    display: none !important;
}

@media (max-width: 760px) {
    body.ayin-page .product-card {
        border-radius: 14px !important;
    }

    body.ayin-page .product-image {
        height: 148px !important;
        min-height: 148px !important;
        max-height: 148px !important;
    }

    body.ayin-page .product-content {
        gap: 3px !important;
        padding: 8px 7px 9px !important;
    }

    body.ayin-page .product-content h3 {
        min-height: 2.7em !important;
        font-size: 13px !important;
    }

    body.ayin-page .product-meta,
    body.ayin-page .product-rating,
    body.ayin-page .product-stock-line,
    body.ayin-page .product-content p {
        font-size: 10px !important;
    }

    body.ayin-page .product-price-main strong {
        font-size: 16px !important;
    }

    body.ayin-page .product-price-main small {
        font-size: 9px !important;
    }

    body.ayin-page .product-points-inline {
        font-size: 9.5px !important;
    }

    body.ayin-page .product-card-actions {
        gap: 5px !important;
    }

    body.ayin-page .product-card-actions .ayin-btn {
        min-height: 36px !important;
        padding: 7px 2px !important;
        font-size: 10px !important;
        border-radius: 9px !important;
    }
}

@media (max-width: 380px) {
    body.ayin-page .product-image {
        height: 136px !important;
        min-height: 136px !important;
        max-height: 136px !important;
    }

    body.ayin-page .product-content {
        padding-inline: 6px !important;
    }

    body.ayin-page .product-price-main strong {
        font-size: 15px !important;
    }

    body.ayin-page .product-points-inline {
        font-size: 9px !important;
    }
}

/* AYIN_FINAL_STORE_CARD_END */

/* AYIN_PRODUCT_FALLBACK_IMAGE_START */
body.ayin-page .cart-v3-image {
    overflow: hidden !important;
    padding: 0 !important;
    background: #f7f2e9 !important;
}

body.ayin-page .cart-v3-image img,
body.ayin-page .product-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

body.ayin-page .product-fallback-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}
/* AYIN_PRODUCT_FALLBACK_IMAGE_END */

/* AYIN_CHECKOUT_PRODUCT_IMAGE_START */
body.ayin-page .checkout-product-image {
    display: grid !important;
    place-items: center !important;
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 13px !important;
    background: #f7f2e9 !important;
}

body.ayin-page .checkout-product-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

@media (max-width: 480px) {
    body.ayin-page .checkout-product-image {
        width: 52px !important;
        min-width: 52px !important;
        height: 52px !important;
        border-radius: 11px !important;
    }
}
/* AYIN_CHECKOUT_PRODUCT_IMAGE_END */

/* AYIN_STORE_CARD_COMPACT_V3_START */

/* التصنيف كرابط لطيف لمنتجات نفس التصنيف */
body.ayin-page .product-meta-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 24px !important;
    margin: 0 0 2px !important;
    padding: 4px 7px !important;
    overflow: hidden !important;
    border: 1px solid rgba(30, 92, 164, 0.09) !important;
    border-radius: 10px !important;
    color: #5b6878 !important;
    background: linear-gradient(135deg, #f4f8fe, #eaf2fc) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

body.ayin-page .product-meta-link:hover {
    color: #0b4d98 !important;
    background: #e2eefc !important;
    border-color: rgba(30, 92, 164, 0.2) !important;
}

/* تقليل المسافة بين التقييم والمخزون بنحو 50% */
body.ayin-page .product-content {
    gap: 1px !important;
}

body.ayin-page .product-rating {
    min-height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.05 !important;
}

body.ayin-page .product-stock-line {
    min-height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.05 !important;
}

body.ayin-page .product-content > p {
    min-height: 0 !important;
    margin: 0 !important;
    line-height: 1.15 !important;
}

body.ayin-page .product-content > p:empty {
    display: none !important;
}

/* أزرار أصغر وألطف */
body.ayin-page .product-purchase-controls {
    padding-top: 3px !important;
}

body.ayin-page .product-card-actions {
    gap: 5px !important;
}

body.ayin-page .product-card-actions .ayin-btn {
    min-height: 30px !important;
    height: 30px !important;
    padding: 4px 3px !important;
    border-radius: 8px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

body.ayin-page .product-card-btn {
    border: 1px solid rgba(10, 69, 141, 0.14) !important;
}

body.ayin-page .product-add-cart {
    color: #604a10 !important;
    background: #fffaf0 !important;
    border: 1px solid #dbc166 !important;
    box-shadow: none !important;
}

body.ayin-page .product-add-cart:hover {
    color: #473606 !important;
    background: #f7ecc6 !important;
    border-color: #c6a83f !important;
}

@media (max-width: 480px) {
    body.ayin-page .product-meta-link {
        min-height: 23px !important;
        padding: 4px 5px !important;
        font-size: 9.5px !important;
    }

    body.ayin-page .product-card-actions .ayin-btn {
        min-height: 29px !important;
        height: 29px !important;
        padding: 3px 2px !important;
        font-size: 9px !important;
    }
}

/* AYIN_STORE_CARD_COMPACT_V3_END */

/* AYIN_SUPPORT_CARD_LINES_R28Z_START */

/*
 * كل بطاقة دعم:
 * الوصف الصغير في سطر مستقل،
 * العنوان في السطر التالي،
 * والفقرة تحتهما.
 */
body.ayin-page.support-page
.support-contact-card
> div {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: 100% !important;
    min-width: 0 !important;

    text-align: start !important;
}

body.ayin-page.support-page
.support-contact-card
> div
> small {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 5px !important;

    line-height: 1.35 !important;
    white-space: normal !important;
}

body.ayin-page.support-page
.support-contact-card
> div
> strong {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
    unicode-bidi: plaintext;
}

body.ayin-page.support-page
.support-contact-card
> div
> p {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 7px 0 0 !important;

    line-height: 1.7 !important;
    white-space: normal !important;
}

/* AYIN_SUPPORT_CARD_LINES_R28Z_END */