/* ==========================================================================
   GWL My Account — Support & Misc (Arabic RTL)
   My Product Reviews (list + single view), My Invitations (list + send), My Returns/RMA list + pagination, Support Tickets (Helpdesk), My Questions (Ask It) + pagination, Privacy Tools (GDPR), Refund CMS page, Privacy Policy CMS page.
   Loaded via: review_customer_index.xml, review_customer_view (or equivalent), invitation layout files, rma_rma_list.xml, helpdesk_ticket_index.xml, askit_customer_index.xml, swissup_gdpr_customer_index.xml, cms_page_view_id_refund.xml, cms_page_view_id_privacy-policy-cookie-restriction-mode.xml.
   ========================================================================== */

/* ==========================================================================
   GWL My Product Reviews — Figma (review-customer-index)
   ========================================================================== */
.review-customer-index .page-title-wrapper .page-title,
.review-customer-index .page-title-wrapper .page-title .base,
.review-customer-index .page-title-wrapper .page-title span,
.review-customer-index .page-title-wrapper h1.page-title {
    font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    line-height: 40px !important;
    letter-spacing: -0.25px;
    color: var(--Blue-blue-10, #0A053D) !important;
}
.review-customer-index .page-title-wrapper .account-page-subtitle {
    font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important;
    opacity: 1 !important;
}
.review-customer-index .gwl-review-empty {
    background: #fff;
    border: 1px solid #E7E6EC;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 24px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: none;
}
.review-customer-index .gwl-review-empty__illustration {
    margin: 0;
    line-height: 0;
}
.review-customer-index .gwl-review-empty__illustration img {
    display: block;
    width: 156px;
    height: auto;
    max-width: 100%;
}
.review-customer-index .gwl-review-empty__text {
    margin: 0;
    font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
    font-size: 20px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 26px !important;
    color: var(--Blue-blue-10, #0A053D) !important;
}
.review-customer-index .gwl-review-list.block-order-history-card {
    background: #fff;
    border: 1px solid #E7E6EC;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: none;
}
.review-customer-index .gwl-review-list .table-wrapper.orders-history {
    margin: 0 !important;
    overflow-x: auto;
    border-radius: 8px;
}
.review-customer-index .gwl-review-list table.table-reviews {
    width: 100%;
    border-collapse: collapse;
}
.review-customer-index .gwl-review-list table.table-reviews thead th {
    text-align: start;
    font-family: 'Bahij TheSansArabic', sans-serif !important;
    color: #6C698B;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #F5F5F7;
    border-bottom: 1px solid #E7E6EC;
    padding: 10px 12px;
    vertical-align: middle;
}
.review-customer-index .gwl-review-list table.table-reviews tbody td {
    border-top: 1px solid #E7E6EC;
    padding: 10px 12px;
    font-family: 'Bahij TheSansArabic', sans-serif !important;
    font-size: 14px;
    color: #6C698B;
    font-weight: 400;
    vertical-align: middle;
}
.review-customer-index .gwl-review-list table.table-reviews tbody td.col.date {
    color: #100F1B !important;
    white-space: nowrap;
}
.review-customer-index .gwl-review-list table.table-reviews tbody tr:last-child td {
    border-bottom: none;
}
.review-customer-index .gwl-review-list table.table-reviews .product-name a {
    color: #160B8B !important;
    font-weight: 400;
    text-decoration: underline !important;
}
.review-customer-index .gwl-review-list table.table-reviews .product-name a:hover {
    color: #160B8B !important;
    opacity: 0.85;
}
.review-customer-index .gwl-review-list table.table-reviews .col.description {
    color: #6C698B;
    max-width: 320px;
    word-break: break-word;
}
.review-customer-index .gwl-review-list table.table-reviews .col.summary .rating-summary {
    margin: 0;
}
.review-customer-index .gwl-review-list table.table-reviews .col.summary .rating-summary .label {
    display: none !important;
}
.review-customer-index .gwl-review-list table.table-reviews .col.actions {
    text-align: end;
    white-space: nowrap;
}
.review-customer-index .gwl-review-list table.table-reviews .col.actions .action,
.review-customer-index .gwl-review-list table.table-reviews .col.actions .action span {
    font-family: 'Bahij TheSansArabic', sans-serif !important;
    color: #160B8B !important;
    font-weight: 400 !important;
    font-size: 14px;
    line-height: 20px;
    text-decoration: underline !important;
}
.review-customer-index .gwl-review-list table.table-reviews .col.actions .action:hover {
    opacity: 0.85;
}
@media (max-width: 767px) {
    body.review-customer-index.account .block-collapsible-nav .title,
    body.review-customer-index.account .account-nav .title,
    body.review-customer-index.account .sidebar-main .block-collapsible-nav .title,
    body.review-customer-index.account .sidebar-main .account-nav .title {
        display: none !important;
    }
    .review-customer-index .page-title-wrapper {
        margin-bottom: 24px !important;
    }
    body.review-customer-index.account .breadcrumbs {
        margin-bottom: 8px !important;
    }
    body.review-customer-index.account .page-main .page-title-wrapper .page-title,
    body.review-customer-index.account .page-title-wrapper h1.page-title,
    body.review-customer-index.account .page-title-wrapper .page-title .base,
    body.review-customer-index.account .page-title-wrapper .page-title span {
        display: block !important;
        font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
        font-size: 32px !important;
        font-style: normal;
        font-weight: 300 !important;
        line-height: 40px !important;
        letter-spacing: -1px !important;
        color: var(--Blue-blue-10, #0A053D) !important;
    }
    body.review-customer-index.account .page-title-wrapper .account-page-subtitle {
        font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
        font-size: 16px !important;
        font-style: normal;
        font-weight: 300 !important;
        line-height: 20px !important;
        color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important;
        opacity: 1 !important;
    }
    .review-customer-index .gwl-review-list.block-order-history-card {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
    }
    .review-customer-index .gwl-review-list .products-reviews-toolbar.top {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }
    .review-customer-index .gwl-review-list .products-reviews-toolbar.bottom {
        margin-top: 12px;
        padding-top: 12px;
    }
    .review-customer-index .gwl-review-empty__text {
        font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
        font-size: 16px !important;
        font-style: normal;
        font-weight: 400 !important;
        line-height: 20px !important;
        color: var(--Blue-blue-10, #0A053D) !important;
    }
    .review-customer-index .gwl-review-list .gwl-review-card__info {
        gap: 8px;
    }
    .review-customer-index .gwl-review-list .gwl-review-card__product {
        font-family: 'Bahij TheSansArabic', sans-serif !important;
        font-size: 14px;
        font-weight: 600;
        color: #100F1B;
        word-break: break-word;
    }
    .review-customer-index .gwl-review-list .gwl-review-card__product a {
        color: #160B8B !important;
        text-decoration: underline !important;
        font-weight: 400;
    }
    .review-customer-index .gwl-review-list .gwl-review-card__rating {
        margin: 0;
    }
    .review-customer-index .gwl-review-list .gwl-review-card__rating .label {
        display: none !important;
    }
    .review-customer-index .gwl-review-list .gwl-review-card__description {
        font-family: 'Bahij TheSansArabic', sans-serif !important;
        font-size: 13px;
        color: #6C698B;
        line-height: 20px;
    }
}

/* ==========================================================================
   GWL Account Pagination — PLP-match restyle (My Product Reviews)
   No pagination CSS previously existed for this page — added from scratch,
   same spec as My Orders/My Returns above. list.phtml prints the SAME full
   pager markup (item count + limiter + page numbers) twice — once in a
   ".top" toolbar above the table, once in a ".bottom" toolbar below it.
   Every account list page follows the same split: item count + "Show N
   per page" limiter as their own row directly above the list/table; the
   page-number pagination as its own row below it. Here that means showing
   count+limiter in ".top" (hide its .pages) and only .pages in ".bottom"
   (hide its count+limiter).
   ========================================================================== */
.review-customer-index .gwl-review-list .products-reviews-toolbar.top {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    gap: 16px 24px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gwl-account-border);
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .toolbar-amount {
    flex: 1 1 auto;
    min-width: 0;
    /* Parent theme's base .products-reviews-toolbar .toolbar-amount rule
       sets text-align:center — override so the count hugs the row's start edge. */
    text-align: start;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .limiter {
    flex: 0 0 auto;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar.top .pages {
    display: none !important;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar.bottom {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gwl-account-border);
}
.review-customer-index .gwl-review-list .products-reviews-toolbar.bottom .toolbar-amount,
.review-customer-index .gwl-review-list .products-reviews-toolbar.bottom .limiter {
    display: none !important;
}
/* pager.phtml/history_pager.phtml wrap everything in their own
   <div class="pager"> — see the matching comment on My Orders above for
   the full rationale. */
.review-customer-index .gwl-review-list .products-reviews-toolbar .pager {
    display: contents;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .toolbar-amount,
.review-customer-index .gwl-review-list .products-reviews-toolbar .limiter {
    position: static !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .toolbar-amount {
    order: -2;
    font-family: 'Bahij TheSansArabic', sans-serif !important;
    font-size: 13px;
    color: var(--gwl-account-muted);
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .limiter {
    display: flex !important;
    align-items: center;
    gap: 8px;
    order: -1;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .limiter-label,
.review-customer-index .gwl-review-list .products-reviews-toolbar .limiter-text {
    font-family: 'Bahij TheSansArabic', sans-serif !important;
    font-size: 13px;
    font-weight: 500;
    color: #100f1b;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .limiter-options {
    appearance: none;
    min-width: 56px;
    height: 36px;
    padding: 6px 28px 6px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23100f1b' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 10px 6px;
    font-family: 'Bahij TheSansArabic', sans-serif !important;
    font-size: 13px;
    font-weight: 600;
    color: #100f1b;
    box-shadow: none !important;
    cursor: pointer;
}
/* position:static overrides the parent theme's absolute-positioning of
   .pages at this breakpoint (see the matching comment on the My Orders
   pagination above) — without it .pages overflows off the card's right
   edge instead of shrinking/wrapping inside the toolbar row. */
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages {
    display: block;
    position: static !important;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items li.item {
    margin: 0 !important;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page,
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items strong.page,
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background-color: #ffffff;
    font-family: 'Bahij TheSansArabic', sans-serif !important;
    font-size: 13px;
    font-weight: 500;
    color: #100f1b;
    text-decoration: none;
    transition: all 0.2s ease;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page:hover,
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action:hover {
    border-color: #100f1b;
    color: #100f1b;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items li.current strong.page {
    background: #100f1b !important;
    border-color: #100f1b !important;
    color: #ffffff !important;
    font-weight: 600;
}
/* First/Last — icon-only squares (double chevron) */
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.first,
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.last {
    min-width: 36px;
    padding: 0;
    font-size: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 12px;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.first {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M6.5 2 2.5 6l4 4M11.5 2 7.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.last {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M2.5 2 6.5 6l-4 4M7.5 2 11.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Previous — icon-only square (single chevron) */
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action.previous {
    min-width: 36px;
    padding: 0;
    font-size: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M7.5 2 3.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Next — keeps visible text + trailing chevron */
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action.next {
    width: auto;
    min-width: 0;
    padding: 0 34px 0 14px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2 8.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action.next span:not(.label) {
    display: inline !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    margin: 0 !important;
}
/* position:static overrides the parent theme's absolute-positioning of
   .pages at this breakpoint (see the matching comment on the My Orders
   pagination above) — without it .pages overflows off the card's right
   edge instead of shrinking/wrapping inside the toolbar row. */
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages {
    display: block;
    position: static !important;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items li.item {
    margin: 0 !important;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page,
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items strong.page,
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background-color: #ffffff;
    font-family: 'Bahij TheSansArabic', sans-serif !important;
    font-size: 13px;
    font-weight: 500;
    color: #100f1b;
    text-decoration: none;
    transition: all 0.2s ease;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page:hover,
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action:hover {
    border-color: #100f1b;
    color: #100f1b;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items li.current strong.page {
    background: #100f1b !important;
    border-color: #100f1b !important;
    color: #ffffff !important;
    font-weight: 600;
}
/* First/Last — icon-only squares (double chevron) */
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.first,
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.last {
    min-width: 36px;
    padding: 0;
    font-size: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 12px;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.first {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M6.5 2 2.5 6l4 4M11.5 2 7.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.last {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M2.5 2 6.5 6l-4 4M7.5 2 11.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Previous — icon-only square (single chevron) */
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action.previous {
    min-width: 36px;
    padding: 0;
    font-size: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M7.5 2 3.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Next — keeps visible text + trailing chevron */
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action.next {
    width: auto;
    min-width: 0;
    padding: 0 34px 0 14px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2 8.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action.next span:not(.label) {
    display: inline !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    margin: 0 !important;
}

/* ==========================================================================
   GWL My Invitations — Figma "Invitations" page (magento_invitation-index-index)
   ========================================================================== */
.magento_invitation-index-index .page-title-wrapper .page-title,
.magento_invitation-index-index .page-title-wrapper .page-title .base,
.magento_invitation-index-index .page-title-wrapper .page-title span,
.magento_invitation-index-index .page-title-wrapper h1.page-title {
    font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    line-height: 40px !important;
    letter-spacing: -0.25px;
    color: var(--Blue-blue-10, #0A053D) !important;
}
.magento_invitation-index-index .page-title-wrapper .account-page-subtitle {
    font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important;
    opacity: 1 !important;
}

/* Empty-state card */
.magento_invitation-index-index .gwl-invitation-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 24px;
    padding: 24px;
    margin-bottom: 0;
    box-shadow: none;
    border-radius: 8px;
    border: 1px solid #E7E6EC;
}
.magento_invitation-index-index .gwl-invitation-empty__illustration {
    margin: 0;
    line-height: 0;
}
.magento_invitation-index-index .gwl-invitation-empty__illustration img {
    display: block;
    width: 145px;
    height: auto;
    max-width: 100%;
}
.magento_invitation-index-index .gwl-invitation-empty__text {
    margin: 0;
    font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
    font-size: 20px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 26px !important;
    color: var(--Blue-blue-10, #0A053D) !important;
}

/* Populated invitation list (reuses the dashboard-orders table look) */
.magento_invitation-index-index .gwl-invitation-list .table-wrapper.invitations {
    overflow-x: auto;
    border-radius: 8px;
}
.magento_invitation-index-index .gwl-invitation-list table.table-invitations thead th {
    text-align: start;
    color: var(--gwl-account-muted);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--gwl-account-surface);
    border-bottom: 1px solid var(--gwl-account-border);
    padding: 10px 12px;
}
.magento_invitation-index-index .gwl-invitation-list table.table-invitations tbody td {
    border-top: 1px solid var(--gwl-account-border);
    padding: 10px 12px;
    font-size: 14px;
    color: var(--gwl-account-text);
    vertical-align: middle;
}

/* "Send an Invitation" button — sits below the card, not inside it */
.magento_invitation-index-index .gwl-invitation-actions {
    margin-top: 24px;
}
.magento_invitation-index-index .gwl-invitation-actions .action.send,
.magento_invitation-index-index .gwl-invitation-actions .action.send span {
    font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 16px !important;
    text-align: center;
    color: var(--Sub-White, #FFF) !important;
}
.magento_invitation-index-index .gwl-invitation-actions .action.send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 206px;
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 0 16px;
    background: var(--Main-Primary, #160B8B) !important;
    border: 0;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
}
.magento_invitation-index-index .gwl-invitation-actions .action.send:hover {
    background: #221796 !important;
    color: var(--Sub-White, #FFF) !important;
}
@media (max-width: 767px) {
    body.magento_invitation-index-index.account .block-collapsible-nav .title,
    body.magento_invitation-index-index.account .account-nav .title,
    body.magento_invitation-index-index.account .sidebar-main .block-collapsible-nav .title,
    body.magento_invitation-index-index.account .sidebar-main .account-nav .title {
        display: none !important;
    }
    .magento_invitation-index-index .page-title-wrapper {
        margin-bottom: 24px !important;
    }
    body.magento_invitation-index-index.account .breadcrumbs {
        margin-bottom: 8px !important;
    }
    body.magento_invitation-index-index.account .page-main .page-title-wrapper .page-title,
    body.magento_invitation-index-index.account .page-title-wrapper h1.page-title,
    body.magento_invitation-index-index.account .page-title-wrapper .page-title .base,
    body.magento_invitation-index-index.account .page-title-wrapper .page-title span {
        display: block !important;
        font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
        font-size: 32px !important;
        font-style: normal;
        font-weight: 300 !important;
        line-height: 40px !important;
        letter-spacing: -1px !important;
        color: var(--Blue-blue-10, #0A053D) !important;
    }
    body.magento_invitation-index-index.account .page-title-wrapper .account-page-subtitle {
        font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
        font-size: 16px !important;
        font-style: normal;
        font-weight: 300 !important;
        line-height: 20px !important;
        color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important;
        opacity: 1 !important;
    }
    .magento_invitation-index-index .gwl-invitation-empty__text {
        font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
        font-size: 16px !important;
        font-style: normal;
        font-weight: 400 !important;
        line-height: 20px !important;
        color: var(--Blue-blue-10, #0A053D) !important;
    }
}


/* ==========================================================================
   GWL Send Invitations — form page (magento_invitation-index-send)
   SVG icons (not luma-icons — those tofu in AR). Delete on inline-end
   (physical left in RTL); Add is a 36×36 + square on the physical left.
   ========================================================================== */
.magento_invitation-index-send .gwl-invitation-form {
    max-width: 620px;
}
.magento_invitation-index-send .gwl-invitation-form .fieldset {
    margin: 0 !important;
    letter-spacing: normal;
}
/* Each invitee row */
.magento_invitation-index-send .gwl-invitation-form #invitations-options > .additional,
.magento_invitation-index-send .gwl-invitation-form #invitations-options > div {
    position: static !important;
    max-width: 400px;
    margin-top: 0 !important;
}
.magento_invitation-index-send .gwl-invitation-form #invitations-options > .additional + .additional,
.magento_invitation-index-send .gwl-invitation-form #invitations-options > div + div {
    margin-top: 16px !important;
}
/* Kill Magento abs-add-fields + luma-icons ::before (tofu in AR).
   AR: trash vertically CENTERED inside the input, on the LEFT.
   Do NOT use the `inset` shorthand — it resets top and drops the icon below. */
.magento_invitation-index-send .gwl-invitation-form .field.email > .control {
    position: relative !important;
    display: block !important;
}
.magento_invitation-index-send .gwl-invitation-form .action.remove,
.magento_invitation-index-send .form-add-invitations .action.remove,
.magento_invitation-index-send .gwl-invitation-form .field.email .action.remove {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    left: 10px !important;
    right: auto !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 3;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2.5 5H4.16667H17.5' stroke='%236C698B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.8346 5.00008V16.6667C15.8346 17.1088 15.659 17.5327 15.3465 17.8453C15.0339 18.1578 14.61 18.3334 14.168 18.3334H5.83464C5.39261 18.3334 4.96868 18.1578 4.65612 17.8453C4.34356 17.5327 4.16797 17.1088 4.16797 16.6667V5.00008M6.66797 5.00008V3.33341C6.66797 2.89139 6.84356 2.46746 7.15612 2.1549C7.46869 1.84234 7.89261 1.66675 8.33464 1.66675H11.668C12.11 1.66675 12.5339 1.84234 12.8465 2.1549C13.159 2.46746 13.3346 2.89139 13.3346 3.33341V5.00008' stroke='%236C698B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
    cursor: pointer;
    display: block !important;
    float: none !important;
}
.magento_invitation-index-send .gwl-invitation-form .action.remove:hover,
.magento_invitation-index-send .form-add-invitations .action.remove:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2.5 5H4.16667H17.5' stroke='%23F04438' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.8346 5.00008V16.6667C15.8346 17.1088 15.659 17.5327 15.3465 17.8453C15.0339 18.1578 14.61 18.3334 14.168 18.3334H5.83464C5.39261 18.3334 4.96868 18.1578 4.65612 17.8453C4.34356 17.5327 4.16797 17.1088 4.16797 16.6667V5.00008M6.66797 5.00008V3.33341C6.66797 2.89139 6.84356 2.46746 7.15612 2.1549C7.46869 1.84234 7.89261 1.66675 8.33464 1.66675H11.668C12.11 1.66675 12.5339 1.84234 12.8465 2.1549C13.159 2.46746 13.3346 2.89139 13.3346 3.33341V5.00008' stroke='%23F04438' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
.magento_invitation-index-send .gwl-invitation-form .action.remove > span,
.magento_invitation-index-send .gwl-invitation-form .action.remove::before,
.magento_invitation-index-send .gwl-invitation-form .action.remove::after,
.magento_invitation-index-send .form-add-invitations .action.remove > span,
.magento_invitation-index-send .form-add-invitations .action.remove::before,
.magento_invitation-index-send .form-add-invitations .action.remove::after {
    content: none !important;
    display: none !important;
}

/* Field / label / input — same spec as the Gift Card input */
.magento_invitation-index-send .gwl-invitation-form .field {
    margin: 0 0 16px !important;
    position: relative;
}
.magento_invitation-index-send .gwl-invitation-form .field.email > .label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}
.magento_invitation-index-send .gwl-invitation-form .field > .label {
    display: block;
    float: none !important;
    width: auto !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    text-align: start !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--gwl-account-text) !important;
}
.magento_invitation-index-send .gwl-invitation-form .field.required > .label:after {
    content: '*';
    color: #F04438;
    margin-inline-start: 2px;
}
.magento_invitation-index-send .gwl-invitation-form .field > .control {
    width: 100% !important;
    max-width: 400px !important;
    float: none !important;
}
.magento_invitation-index-send .gwl-invitation-form input.input-text,
.magento_invitation-index-send .gwl-invitation-form textarea.input-text {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 4px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--gwl-account-text);
    font-family: 'Tajawal', 'Work Sans', sans-serif;
    box-sizing: border-box;
}
.magento_invitation-index-send .gwl-invitation-form input.input-text {
    height: 40px;
    /* Room for trash on the LEFT (AR) */
    padding: 0 12px 0 40px !important;
}
.magento_invitation-index-send .gwl-invitation-form textarea.input-text {
    padding: 10px 12px;
    line-height: 18px;
    resize: vertical;
}
.magento_invitation-index-send .gwl-invitation-form input.input-text::placeholder,
.magento_invitation-index-send .gwl-invitation-form textarea.input-text::placeholder {
    color: var(--gwl-account-muted);
}
.magento_invitation-index-send .gwl-invitation-form input.input-text:focus,
.magento_invitation-index-send .gwl-invitation-form textarea.input-text:focus {
    border-color: var(--gwl-account-blue);
    box-shadow: none;
    outline: none;
}

/* Add-row — 36×36 + square on the physical RIGHT (AR).
   Use physical `right` — flex-end flips to the left under dir=rtl. */
.magento_invitation-index-send .gwl-invitation-form__add-row {
    display: flex !important;
    justify-content: right !important;
    margin: 4px 0 20px;
    max-width: 400px;
    width: 100%;
}
.magento_invitation-index-send .gwl-invitation-form button.action.add,
.magento_invitation-index-send .form-add-invitations button.action.add {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 3.333v9.334M3.333 8h9.334' stroke='%23160B8B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    border: 1px solid var(--gwl-account-blue) !important;
    border-radius: 4px !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    cursor: pointer;
    float: none !important;
}
.magento_invitation-index-send .gwl-invitation-form button.action.add:hover,
.magento_invitation-index-send .form-add-invitations button.action.add:hover {
    background-color: var(--gwl-account-current-bg) !important;
}
.magento_invitation-index-send .gwl-invitation-form button.action.add > span,
.magento_invitation-index-send .gwl-invitation-form button.action.add::before,
.magento_invitation-index-send .gwl-invitation-form button.action.add::after,
.magento_invitation-index-send .form-add-invitations button.action.add > span,
.magento_invitation-index-send .form-add-invitations button.action.add::before,
.magento_invitation-index-send .form-add-invitations button.action.add::after {
    content: none !important;
    display: none !important;
}

/* Max-emails notice */
.magento_invitation-index-send .gwl-invitation-form #max-emails-message.message.notice {
    background: var(--gwl-account-surface);
    border: 1px solid var(--gwl-account-border);
    border-radius: 4px;
    padding: 10px 14px;
    margin: 0 0 16px;
    font-size: 12px;
    color: var(--gwl-account-muted);
}

/* Submit button — same spec as the other card-internal Save/submit buttons */
.magento_invitation-index-send .gwl-invitation-form .actions-toolbar {
    margin: 8px 0 0 !important;
}
.magento_invitation-index-send .gwl-invitation-form .actions-toolbar > .primary {
    float: none !important;
}
.magento_invitation-index-send .gwl-invitation-form button.action.submit.primary {
    height: 40px;
    padding: 0 22px !important;
    background: var(--gwl-account-blue) !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none !important;
    cursor: pointer;
}
.magento_invitation-index-send .gwl-invitation-form button.action.submit.primary:hover {
    background: #221796 !important;
}


/* ==========================================================================
   GWL My Returns — Mirasvit RMA list page (rma-rma-list)
   ========================================================================== */

/* "Request New Return" button — placement/spacing matches the "Send an
   Invitation" button on the My Invitations page exactly (below the card). */
.rma-rma-list .gwl-returns-actions {
    margin-top: 20px;
}
/* the Mirasvit module's own stylesheet floats this button right
   (body.rma-rma-list .mst-rma-list__new-request { float: right }) —
   override so it sits left/start, matching the Invitations page button */
.rma-rma-list .gwl-returns-actions button.mst-rma-list__new-request {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none !important;
    margin: 0 !important;
    height: 44px;
    padding: 0 24px;
    background: var(--gwl-account-blue);
    border: 0;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.rma-rma-list .gwl-returns-actions button.mst-rma-list__new-request:hover {
    background: #221796;
}

/* Empty-state card */
.rma-rma-list .gwl-returns-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 24px;
}
.rma-rma-list .gwl-returns-empty__illustration {
    margin-bottom: 20px;
}
.rma-rma-list .gwl-returns-empty__illustration svg {
    display: block;
}
.rma-rma-list .gwl-returns-empty__text {
    margin: 0;
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--gwl-account-title);
}

/* Populated returns list */
.rma-rma-list .gwl-returns-list .table-wrapper {
    overflow-x: auto;
    border-radius: 8px;
}
.rma-rma-list .gwl-returns-list table.mst-rma-list thead th {
    text-align: start;
    color: var(--gwl-account-muted);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--gwl-account-surface);
    border-bottom: 1px solid var(--gwl-account-border);
    padding: 10px 12px;
}
.rma-rma-list .gwl-returns-list table.mst-rma-list tbody td {
    border-top: 1px solid var(--gwl-account-border);
    padding: 10px 12px;
    font-size: 14px;
    color: var(--gwl-account-text);
    vertical-align: middle;
}
.rma-rma-list .gwl-returns-list table.mst-rma-list .mst-rma-list__name a,
.rma-rma-list .gwl-returns-list table.mst-rma-list .mst-rma-list__items a {
    color: var(--gwl-account-blue);
    text-decoration: none;
    font-weight: 500;
}
.rma-rma-list .gwl-returns-list table.mst-rma-list .mst-rma-list__name a:hover,
.rma-rma-list .gwl-returns-list table.mst-rma-list .mst-rma-list__items a:hover {
    text-decoration: underline;
}
.rma-rma-list .gwl-returns-list table.mst-rma-list .mst-rma-list__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.rma-rma-list .gwl-returns-list table.mst-rma-list .mst-rma-list__unread {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #F04438;
    flex: 0 0 auto;
}
.rma-rma-list .gwl-returns-list table.mst-rma-list .mst-rma-list__items p {
    margin: 0 0 4px;
}
.rma-rma-list .gwl-returns-list__items {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rma-rma-list .gwl-returns-list__items li {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rma-rma-list .gwl-returns-list__items img {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid var(--gwl-account-border);
    object-fit: cover;
    flex: 0 0 auto;
}
.rma-rma-list .gwl-returns-list__items strong {
    font-size: 12px;
    font-weight: 500;
    color: var(--gwl-account-text);
}
.rma-rma-list .gwl-returns-list table.mst-rma-list .col.actions a {
    color: var(--gwl-account-blue);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}
.rma-rma-list .gwl-returns-list table.mst-rma-list .col.actions a:hover {
    text-decoration: underline;
}

/* Status pill — shape/typography only; per-status background color is left
   to the site's own configured Mirasvit status colors (admin-managed) so
   the semantic meaning (pending/approved/rejected/etc.) is preserved. A
   neutral fallback is provided for any status left without a configured
   color (renders as plain "status-branch-" with no matching rule). */
.rma-rma-list .mst-rma-status {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
    background: var(--gwl-account-muted);
    color: #fff;
}


/* ==========================================================================
   GWL Account Pagination — PLP-match restyle (My Returns)
   Same spec as My Orders above — see that block's comment for the full
   rationale. list.phtml prints the SAME full pager markup twice — once in
   a plain (".top", unmodified) toolbar above the list, once in a
   ".bottom" toolbar below it — matching the split used on every other
   account list page: item count + "Show N per page" limiter as their own
   row above the list (.top, shown here), page-number pagination as its
   own row below it (.bottom, hides count+limiter, shows only .pages).
   ========================================================================== */
.rma-rma-list .gwl-returns-list .order-products-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    gap: 16px 24px;
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gwl-account-border);
}
.rma-rma-list .gwl-returns-list .order-products-toolbar .toolbar-amount {
    flex: 1 1 auto;
    min-width: 0;
    /* Parent theme's base .order-products-toolbar .toolbar-amount rule sets
       text-align:center — override so the count hugs the row's start edge. */
    text-align: start;
}
.rma-rma-list .gwl-returns-list .order-products-toolbar .limiter {
    flex: 0 0 auto;
}
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages {
    display: none !important;
}
/* pager.phtml wraps everything in its own <div class="pager"> — see the
   matching comment on My Orders above for the full rationale. */
.rma-rma-list .gwl-returns-list .order-products-toolbar .pager {
    display: contents;
}
.rma-rma-list .gwl-returns-list .order-products-toolbar.bottom {
    justify-content: flex-end;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-bottom: 0;
    border-top: 1px solid var(--gwl-account-border);
}
.rma-rma-list .gwl-returns-list .order-products-toolbar.bottom .pages {
    display: block !important;
}
.rma-rma-list .gwl-returns-list .order-products-toolbar.bottom .toolbar-amount,
.rma-rma-list .gwl-returns-list .order-products-toolbar.bottom .limiter {
    display: none !important;
}
.rma-rma-list .gwl-returns-list .order-products-toolbar .toolbar-amount,
.rma-rma-list .gwl-returns-list .order-products-toolbar .limiter {
    position: static !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}
.rma-rma-list .gwl-returns-list .order-products-toolbar .toolbar-amount {
    order: -2;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    color: var(--gwl-account-muted);
}
.rma-rma-list .gwl-returns-list .order-products-toolbar .limiter {
    display: flex !important;
    align-items: center;
    gap: 8px;
    order: -1;
}
.rma-rma-list .gwl-returns-list .order-products-toolbar .limiter-label,
.rma-rma-list .gwl-returns-list .order-products-toolbar .limiter-text {
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #100f1b;
}
.rma-rma-list .gwl-returns-list .order-products-toolbar .limiter-options {
    appearance: none;
    min-width: 56px;
    height: 36px;
    padding: 6px 28px 6px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23100f1b' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 10px 6px;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #100f1b;
    box-shadow: none !important;
    cursor: pointer;
}
/* position:static overrides the parent theme's absolute-positioning of
   .pages at this breakpoint (see the matching comment on the My Orders
   pagination above) — without it .pages overflows off the card's right
   edge instead of shrinking/wrapping inside the toolbar row. */
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages {
    display: block;
    position: static !important;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items li.item {
    margin: 0 !important;
}
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.page,
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items strong.page,
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background-color: #ffffff;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #100f1b;
    text-decoration: none;
    transition: all 0.2s ease;
}
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.page:hover,
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action:hover {
    border-color: #100f1b;
    color: #100f1b;
}
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items li.current strong.page {
    background: #100f1b !important;
    border-color: #100f1b !important;
    color: #ffffff !important;
    font-weight: 600;
}
/* First/Last — icon-only squares (double chevron). Two template variants
   are in play across account pages depending on which pager.phtml
   override resolves (a stock-style copy uses a.page.first/.last; the
   theme's own Figma-pager copy — see its "gwl-plp-pager__next" class
   below — uses a.action.first/.last instead) — cover both so this looks
   right regardless of which one a given page/cache state serves. */
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.page.first,
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.page.last,
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.first,
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.last {
    min-width: 36px;
    padding: 0;
    font-size: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 12px;
}
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.page.first,
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.first {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M6.5 2 2.5 6l4 4M11.5 2 7.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.page.last,
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.last {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M2.5 2 6.5 6l-4 4M7.5 2 11.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Previous — icon-only square (single chevron) */
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.previous {
    min-width: 36px;
    padding: 0;
    font-size: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M7.5 2 3.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Next — keeps visible text + trailing chevron */
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.next {
    width: auto;
    min-width: 0;
    padding: 0 34px 0 14px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2 8.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
}
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.next span:not(.label) {
    display: inline !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    margin: 0 !important;
}
/* The Figma-pager template variant (see comment above the First/Last
   rule) sidesteps that same clamp itself by using an <em> instead of a
   <span> for Next's visible text — but an unstyled <em> is italic by
   default in every browser, and the sitewide PLP rule that normally
   resets it (".gwl-plp-pager__next-label") is scoped to body.gwl-plp-figma,
   which account pages don't carry. Reset it here too. */
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items .gwl-plp-pager__next-label {
    display: inline;
    font-style: normal;
}


/* ==========================================================================
   GWL My Support Tickets — Mirasvit Helpdesk (helpdesk-ticket-index /
   helpdesk-ticket-create). Pure CSS restyle of the module's own markup
   (.hdmx__tickets / .hdmx__ticket-new etc — no template overrides), reusing
   the same card/field/button conventions as the rest of My Account.
   ========================================================================== */

/* Empty state — same illustration/card treatment as Invitations/Questions/Returns */
.helpdesk-ticket-index .hdmx__tickets .gwl-helpdesk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 24px;
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.helpdesk-ticket-index .hdmx__tickets .gwl-helpdesk-empty__illustration {
    margin-bottom: 20px;
}
.helpdesk-ticket-index .hdmx__tickets .gwl-helpdesk-empty__illustration svg {
    display: block;
}
.helpdesk-ticket-index .hdmx__tickets .gwl-helpdesk-empty__text {
    margin: 0;
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--gwl-account-title);
}

/* "Create ticket" button — a flex child of .gwl-helpdesk-list-shell, below
   the table on its own left-aligned row (order: 0, after .toolbar-amount/
   .limiter at -3/-2 and the table at -1, before .pages at 1). Resets
   Mirasvit's own float:right; margin-top:-40px placement (module/_tickets.
   less), which floated the button up and to the right of the card. */
.helpdesk-ticket-index .gwl-helpdesk-list-shell .create-button {
    order: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none !important;
    position: static !important;
    margin: 16px 0 0 !important;
    height: 44px;
    padding: 0 24px !important;
    background: var(--gwl-account-blue) !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    box-shadow: none !important;
    cursor: pointer;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .create-button:hover {
    background: #221796 !important;
}

/* Ticket table — card container, same treatment as My Returns/RMA */
.helpdesk-ticket-index .hdmx__tickets .table-wrapper {
    clear: both;
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    overflow: hidden;
}
.helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table {
    width: 100%;
}
.helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table .table-caption {
    display: none;
}
.helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table thead th {
    padding: 12px 16px;
    background: var(--gwl-account-surface);
    border-bottom: 1px solid var(--gwl-account-border);
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--gwl-account-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: start;
}
.helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table tbody td {
    padding: 14px 16px;
    border-top: 1px solid var(--gwl-account-border);
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    color: var(--gwl-account-text);
    vertical-align: middle;
}
.helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table tbody tr:first-child td {
    border-top: 0;
}
.helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table td.subject a {
    color: var(--gwl-account-blue);
    font-weight: 600;
    text-decoration: none;
}
.helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table td.subject a:hover {
    text-decoration: underline;
}
/* status pill — colors stay as defined by the module's own LESS
   (.hdmx-aqua/.hdmx-grey/.hdmx-navy/.hdmx-green/.hdmx-red/...), only
   the shape/spacing is unified with .order-status-pill elsewhere */
.helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table .hdmx__status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: 'Work Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-transform: capitalize;
}

/* Mobile — stack each row's columns as label/value pairs */
@media (max-width: 767px) {
    .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table thead {
        display: none;
    }
    .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table,
    .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table tbody,
    .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table tr,
    .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table tr {
        padding: 12px 16px;
        border-top: 1px solid var(--gwl-account-border);
    }
    .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table tr:first-child {
        border-top: 0;
    }
    .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 0;
        border-top: 0;
        text-align: end;
    }
    .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table td:before {
        content: attr(data-th);
        flex: 0 0 auto;
        font-weight: 600;
        color: var(--gwl-account-muted);
        text-align: start;
    }
}

/* --------------------------------------------------------------------
   Support Tickets pagination — same PLP-match restyle/technique as My
   Orders (see saudiceramics-ar-account-orders.css .gwl-order-history-shell):
   Gwl\Header\Plugin\Helpdesk\ListingPagination adds a single
   Magento\Theme\Block\Html\Pager (Magento_Theme::html/history_pager.phtml,
   the same template My Orders uses), rendered once by the theme's
   ticket/list.phtml override — .toolbar-amount/.limiter are promoted
   above the table and .pages below it via flex `order`, all three as
   direct flex children of .gwl-helpdesk-list-shell (their wrapping
   .pager/.gwl-helpdesk-pager-toolbar divs are display:contents so they
   don't interrupt the flex flow).
   -------------------------------------------------------------------- */
.helpdesk-ticket-index .gwl-helpdesk-list-shell {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    box-sizing: border-box;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .gwl-helpdesk-pager-toolbar,
.helpdesk-ticket-index .gwl-helpdesk-list-shell .gwl-helpdesk-pager-toolbar .pager {
    display: contents;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .toolbar-amount,
.helpdesk-ticket-index .gwl-helpdesk-list-shell .limiter {
    position: static !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .toolbar-amount {
    order: -3;
    flex: 1 1 0%;
    min-width: 0;
    margin-block-end: 16px !important;
    text-align: start;
    font-family: 'Bahij TheSansArabic', sans-serif !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #100F1B;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .limiter {
    order: -2;
    flex: 0 0 auto;
    margin: 0 0 16px !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .limiter-label,
.helpdesk-ticket-index .gwl-helpdesk-list-shell .limiter-text {
    font-family: 'Bahij TheSansArabic', sans-serif !important;
    font-size: 13px;
    font-weight: 500;
    color: #100f1b;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .limiter-options {
    appearance: none;
    min-width: 56px;
    height: 36px;
    padding: 6px 28px 6px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23100f1b' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 10px 6px;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #100f1b;
    box-shadow: none !important;
    cursor: pointer;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .gwl-helpdesk-table-card {
    order: -1;
    flex: 1 1 100%;
    width: 100%;
    box-sizing: border-box;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages {
    display: block;
    order: 1;
    flex: 1 1 100%;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 0 !important;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages .pages-label {
    display: none !important;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items li.item {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: static !important;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items a.page,
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items strong.page,
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items a.action {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #CECDD8;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: none;
    font-family: 'Bahij TheSansArabic', sans-serif !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #100F1B;
    text-decoration: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items a.page:hover,
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items a.action:hover {
    border-color: #100F1B;
    color: #100F1B;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items li.current strong.page {
    background: #100F1B !important;
    border-color: #100F1B !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items a.action.first,
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items a.action.last {
    min-width: 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    background-color: #ffffff !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 12px !important;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items a.action.first {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M6.5 2 2.5 6l4 4M11.5 2 7.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items a.action.last {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M2.5 2 6.5 6l-4 4M7.5 2 11.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-item-previous {
    display: none !important;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items a.action.next,
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items a.link.next,
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items .gwl-plp-pager__next {
    width: auto !important;
    min-width: 0 !important;
    height: 32px !important;
    padding: 0 30px 0 12px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    color: #100F1B !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2 8.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 12px !important;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items .gwl-plp-pager__next-label {
    display: inline !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    border: 0 !important;
    font-family: 'Bahij TheSansArabic', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    line-height: 20px !important;
    color: #100F1B !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items a.page .label,
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items a.action .label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items a.action.first::before,
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items a.action.first::after,
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items a.action.last::before,
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items a.action.last::after,
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items a.action.next::before,
.helpdesk-ticket-index .gwl-helpdesk-list-shell .pages-items a.action.next::after {
    content: none !important;
    display: none !important;
}
@media (max-width: 767px) {
    .helpdesk-ticket-index .gwl-helpdesk-list-shell {
        flex-direction: column;
    }
    .helpdesk-ticket-index .gwl-helpdesk-list-shell .toolbar-amount,
    .helpdesk-ticket-index .gwl-helpdesk-list-shell .limiter,
    .helpdesk-ticket-index .gwl-helpdesk-list-shell .create-button {
        flex: 1 1 100%;
    }
    .helpdesk-ticket-index .gwl-helpdesk-list-shell .create-button {
        width: 100%;
    }
}

/* Create ticket form */
.helpdesk-ticket-create .hdmx__ticket-new .fieldset {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 20px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.helpdesk-ticket-create .hdmx__ticket-new .fields.group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    align-items: start;
    margin: 0 0 4px;
}
/* the module's own LESS clearfixes .group via ::before/::after — as a
   grid container those pseudo-elements become phantom grid items and
   eat the first cell, so neutralize them once grid is in charge */
.helpdesk-ticket-create .hdmx__ticket-new .fields.group:before,
.helpdesk-ticket-create .hdmx__ticket-new .fields.group:after {
    display: none;
}
.helpdesk-ticket-create .hdmx__ticket-new .field {
    margin: 0 !important;
}
.helpdesk-ticket-create .hdmx__ticket-new .field.message,
.helpdesk-ticket-create .hdmx__ticket-new .field.custom {
    grid-column: 1 / -1;
}
.helpdesk-ticket-create .hdmx__ticket-new .field > .label {
    display: block;
    float: none !important;
    width: auto !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    text-align: start !important;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--gwl-account-text);
}
.helpdesk-ticket-create .hdmx__ticket-new .field > .control {
    width: 100% !important;
    float: none !important;
}
.helpdesk-ticket-create .hdmx__ticket-new .field .max-attachment-size,
.helpdesk-ticket-create .hdmx__ticket-new .field .note {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--gwl-account-muted);
}
.helpdesk-ticket-create .hdmx__ticket-new input.input-text,
.helpdesk-ticket-create .hdmx__ticket-new select,
.helpdesk-ticket-create .hdmx__ticket-new textarea {
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 4px;
    padding: 0 12px;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    color: var(--gwl-account-text);
}
.helpdesk-ticket-create .hdmx__ticket-new input.input-text,
.helpdesk-ticket-create .hdmx__ticket-new select {
    height: 40px;
}
.helpdesk-ticket-create .hdmx__ticket-new textarea {
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 120px;
    resize: vertical;
}
.helpdesk-ticket-create .hdmx__ticket-new input.input-text:focus,
.helpdesk-ticket-create .hdmx__ticket-new select:focus,
.helpdesk-ticket-create .hdmx__ticket-new textarea:focus {
    border-color: var(--gwl-account-blue);
    box-shadow: none;
}
.helpdesk-ticket-create .hdmx__ticket-new .field.order .orderLoading {
    font-size: 13px;
    color: var(--gwl-account-muted);
}
.helpdesk-ticket-create .hdmx__ticket-new input[type="file"].attachment {
    height: auto;
    padding: 8px 12px;
}
.helpdesk-ticket-create .hdmx__ticket-new .actions-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 0;
}
.helpdesk-ticket-create .hdmx__ticket-new .actions-toolbar button.action.primary {
    height: 38px;
    padding: 0 26px !important;
    background: var(--gwl-account-blue) !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none !important;
    cursor: pointer;
}
.helpdesk-ticket-create .hdmx__ticket-new .actions-toolbar button.action.primary:hover {
    background: #221796 !important;
}
/* Mobile — every field goes full width, one per row (fields that were
   only ever alone in their row, like Department/Order, otherwise left an
   empty gap beside them at the 2-column breakpoint) */
@media (max-width: 767px) {
    .helpdesk-ticket-create .hdmx__ticket-new .fields.group {
        grid-template-columns: 1fr;
    }
    .helpdesk-ticket-create .hdmx__ticket-new .field.message,
    .helpdesk-ticket-create .hdmx__ticket-new .field.custom {
        grid-column: 1;
    }
}


/* ==========================================================================
   GWL Support Ticket detail (helpdesk-ticket-view). Extends the same
   card/field/button conventions used for helpdesk-ticket-index /
   helpdesk-ticket-create above — no template overrides, pure CSS restyle
   of the module's own .hdmx__* markup.
   ========================================================================== */

/* Summary table — Subject/Status/Department/etc. key-value rows, card container */
.helpdesk-ticket-view .hdmx__ticket-summary {
    width: 100%;
    margin: 0 0 20px;
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    border-collapse: collapse;
}
.helpdesk-ticket-view .hdmx__ticket-summary tr {
    border-top: 1px solid var(--gwl-account-border);
}
.helpdesk-ticket-view .hdmx__ticket-summary tr:first-child {
    border-top: 0;
}
.helpdesk-ticket-view .hdmx__ticket-summary th,
.helpdesk-ticket-view .hdmx__ticket-summary td {
    padding: 12px 20px;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    vertical-align: middle;
}
.helpdesk-ticket-view .hdmx__ticket-summary th {
    width: 160px;
    color: var(--gwl-account-muted);
    font-weight: 600;
    text-align: start;
}
.helpdesk-ticket-view .hdmx__ticket-summary td {
    color: var(--gwl-account-text);
}
.helpdesk-ticket-view .hdmx__ticket-summary .hdmx__status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: 'Work Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-transform: capitalize;
}
/* Order row's status badge (GWL\Header\Plugin\Helpdesk\OrderLabelStatusBadge
   wraps the trailing status text in this exact markup) — same colour
   bucket convention as Order History/Order View (.order-status__badge in
   saudiceramics-ar-account-orders.css), just without the .order-status
   wrapper that context has, so the color rules are repeated here scoped
   to this page instead of relying on that ancestor. */
.helpdesk-ticket-view .hdmx__ticket-summary .order-status__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 24px;
    padding: 3px 12px;
    border-radius: 4px;
    color: #fff !important;
    font-family: 'Bahij TheSansArabic', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 0;
}
.helpdesk-ticket-view .hdmx__ticket-summary .order-status__badge.status-success { background: #34A853 !important; }
.helpdesk-ticket-view .hdmx__ticket-summary .order-status__badge.status-warning { background: #F59E0B !important; }
.helpdesk-ticket-view .hdmx__ticket-summary .order-status__badge.status-danger  { background: #EA4335 !important; }
.helpdesk-ticket-view .hdmx__ticket-summary .order-status__badge.status-neutral { background: #8A94A6 !important; }
@media (max-width: 767px) {
    .helpdesk-ticket-view .hdmx__ticket-summary,
    .helpdesk-ticket-view .hdmx__ticket-summary tbody,
    .helpdesk-ticket-view .hdmx__ticket-summary tr,
    .helpdesk-ticket-view .hdmx__ticket-summary th,
    .helpdesk-ticket-view .hdmx__ticket-summary td {
        display: block;
        width: auto;
    }
    .helpdesk-ticket-view .hdmx__ticket-summary tr {
        padding: 10px 20px;
    }
    .helpdesk-ticket-view .hdmx__ticket-summary th,
    .helpdesk-ticket-view .hdmx__ticket-summary td {
        padding: 2px 0;
    }
}

/* Locked-ticket notice */
.helpdesk-ticket-view .hdmx__ticket-locked {
    margin: 0 0 20px;
    padding: 16px 20px;
    background: var(--gwl-account-surface);
    border: 1px solid var(--gwl-account-border);
    border-radius: 4px;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    color: var(--gwl-account-text);
}

/* Reply form — same field/input/button conventions as helpdesk-ticket-create */
.helpdesk-ticket-view .hdmx__ticket-reply .fieldset {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 20px !important;
    padding: 20px !important;
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    /* Clearfix — contains any floated legacy Luma children so the card's
       own border/height always wraps the actions-toolbar at the bottom
       instead of collapsing above it. */
    overflow: hidden;
}
.helpdesk-ticket-view .hdmx__ticket-reply .legend {
    float: none !important;
    width: auto !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--gwl-account-title);
}
.helpdesk-ticket-view .hdmx__ticket-reply .field {
    margin: 0 0 16px !important;
}
.helpdesk-ticket-view .hdmx__ticket-reply .field > .label {
    display: block;
    float: none !important;
    width: auto !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    text-align: start !important;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--gwl-account-text);
}
.helpdesk-ticket-view .hdmx__ticket-reply .field > .control {
    width: 100% !important;
    float: none !important;
}
.helpdesk-ticket-view .hdmx__ticket-reply .field .max-attachment-size {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--gwl-account-muted);
}
.helpdesk-ticket-view .hdmx__ticket-reply textarea.message,
.helpdesk-ticket-view .hdmx__ticket-reply input.input-text {
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 4px;
    padding: 10px 12px;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    color: var(--gwl-account-text);
    resize: vertical;
}
.helpdesk-ticket-view .hdmx__ticket-reply textarea.message:focus,
.helpdesk-ticket-view .hdmx__ticket-reply input.input-text:focus {
    border-color: var(--gwl-account-blue);
    box-shadow: none;
    outline: none;
}
.helpdesk-ticket-view .hdmx__ticket-reply input[type="file"].attachment {
    height: auto;
    padding: 8px 0;
}
.helpdesk-ticket-view .hdmx__ticket-reply .actions-toolbar {
    display: flex !important;
    align-items: center;
    justify-content: flex-end !important;
    float: none !important;
    width: auto !important;
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
}
.helpdesk-ticket-view .hdmx__ticket-reply .actions-toolbar button.action.primary,
.helpdesk-ticket-view .hdmx__ticket-reply .actions-toolbar button.action.secondary {
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 38px;
    margin: 0 !important;
    padding: 0 26px !important;
    border-radius: 4px !important;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none !important;
    box-sizing: border-box;
    cursor: pointer;
}
.helpdesk-ticket-view .hdmx__ticket-reply .actions-toolbar button.action.primary {
    background: var(--gwl-account-blue) !important;
    border: 0 !important;
    color: #fff !important;
}
.helpdesk-ticket-view .hdmx__ticket-reply .actions-toolbar button.action.primary:hover {
    background: #221796 !important;
}
.helpdesk-ticket-view .hdmx__ticket-reply .actions-toolbar button.action.secondary {
    background: #fff !important;
    border: 1px solid var(--gwl-account-border) !important;
    color: var(--gwl-account-text) !important;
}
.helpdesk-ticket-view .hdmx__ticket-reply .actions-toolbar button.action.secondary:hover {
    border-color: var(--gwl-account-muted) !important;
}
@media (max-width: 767px) {
    .helpdesk-ticket-view .hdmx__ticket-reply .actions-toolbar {
        flex-direction: column-reverse;
    }
    .helpdesk-ticket-view .hdmx__ticket-reply .actions-toolbar button.action.primary,
    .helpdesk-ticket-view .hdmx__ticket-reply .actions-toolbar button.action.secondary {
        width: 100%;
    }
}

/* Message history — card container, each message a separated block;
   staff/third-party replies get a tinted background to read as distinct
   from the customer's own messages, chat-thread style. */
.helpdesk-ticket-view .hdmx__ticket-history {
    margin: 0 0 20px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.helpdesk-ticket-view .hdmx__ticket-history .legend {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--gwl-account-title);
}
.helpdesk-ticket-view .hdmx__message {
    padding: 16px;
    margin: 0 0 12px;
    border: 1px solid var(--gwl-account-border);
    border-radius: 4px;
}
.helpdesk-ticket-view .hdmx__message:last-child {
    margin-bottom: 0;
}
.helpdesk-ticket-view .hdmx-message__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
}
.helpdesk-ticket-view .hdmx-message__header strong {
    color: var(--gwl-account-title);
    font-weight: 600;
}
.helpdesk-ticket-view .hdmx-message__body {
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    line-height: 20px;
    color: var(--gwl-account-text);
    word-wrap: break-word;
}
.helpdesk-ticket-view .hdmx-message__body img {
    max-width: 100%;
    height: auto;
}
/* triggered_by values from Mirasvit\Helpdesk\Model\Config: user/third — a
   staff or third-party reply — get the tinted card so a customer scanning
   the thread can tell their own messages from a reply at a glance. */
.helpdesk-ticket-view .hdmx__message:has(.hdmx-message__body.user),
.helpdesk-ticket-view .hdmx__message:has(.hdmx-message__body.third) {
    background: var(--gwl-account-surface);
}
.helpdesk-ticket-view .hdmx-message__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.helpdesk-ticket-view .attachment-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 4px;
}
.helpdesk-ticket-view .attachment-thumbnail-container {
    display: flex;
    align-items: center;
    gap: 8px;
}
.helpdesk-ticket-view .attachment-icon img,
.helpdesk-ticket-view .attachment-link img {
    display: block;
    width: 20px;
    height: 20px;
}
.helpdesk-ticket-view .attachment-name {
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    color: var(--gwl-account-text);
}
.helpdesk-ticket-view .attachment-size {
    font-size: 11px;
    color: var(--gwl-account-muted);
}
.helpdesk-ticket-view .download-info {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.helpdesk-ticket-view .download-link {
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--gwl-account-blue);
}

/* "Back to My Tickets" link */
.helpdesk-ticket-view .buttons-set .back-link {
    margin: 0;
}
.helpdesk-ticket-view .buttons-set .back-link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--gwl-account-blue);
    text-decoration: none;
}
.helpdesk-ticket-view .buttons-set .back-link a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   GWL My Questions — Swissup Askit account page (askit-customer-index)
   ========================================================================== */
.askit-customer-index .page-title-wrapper .page-title,
.askit-customer-index .page-title-wrapper .page-title .base,
.askit-customer-index .page-title-wrapper .page-title span,
.askit-customer-index .page-title-wrapper h1.page-title {
    font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    line-height: 40px !important;
    letter-spacing: -0.25px;
    color: var(--Blue-blue-10, #0A053D) !important;
}
.askit-customer-index .page-title-wrapper .account-page-subtitle {
    font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important;
    opacity: 1 !important;
}

/* Empty-state card */
.askit-customer-index .gwl-questions-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 24px;
    padding: 24px;
    margin-bottom: 0;
    box-shadow: none;
    border-radius: 8px;
    border: 1px solid #E7E6EC;
}
.askit-customer-index .gwl-questions-empty__illustration {
    margin: 0;
    line-height: 0;
}
.askit-customer-index .gwl-questions-empty__illustration img {
    display: block;
    width: 145px;
    height: auto;
    max-width: 100%;
}
.askit-customer-index .gwl-questions-empty__text {
    margin: 0;
    font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
    font-size: 20px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 26px !important;
    color: var(--Blue-blue-10, #0A053D) !important;
}
@media (max-width: 767px) {
    body.askit-customer-index.account .block-collapsible-nav .title,
    body.askit-customer-index.account .account-nav .title,
    body.askit-customer-index.account .sidebar-main .block-collapsible-nav .title,
    body.askit-customer-index.account .sidebar-main .account-nav .title {
        display: none !important;
    }
    .askit-customer-index .page-title-wrapper {
        margin-bottom: 24px !important;
    }
    body.askit-customer-index.account .breadcrumbs {
        margin-bottom: 8px !important;
    }
    body.askit-customer-index.account .page-main .page-title-wrapper .page-title,
    body.askit-customer-index.account .page-title-wrapper h1.page-title,
    body.askit-customer-index.account .page-title-wrapper .page-title .base,
    body.askit-customer-index.account .page-title-wrapper .page-title span {
        display: block !important;
        font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
        font-size: 32px !important;
        font-style: normal;
        font-weight: 300 !important;
        line-height: 40px !important;
        letter-spacing: -1px !important;
        color: var(--Blue-blue-10, #0A053D) !important;
    }
    body.askit-customer-index.account .page-title-wrapper .account-page-subtitle {
        font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
        font-size: 16px !important;
        font-style: normal;
        font-weight: 300 !important;
        line-height: 20px !important;
        color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important;
        opacity: 1 !important;
    }
    .askit-customer-index .gwl-questions-empty__text {
        font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
        font-size: 16px !important;
        font-style: normal;
        font-weight: 400 !important;
        line-height: 20px !important;
        color: var(--Blue-blue-10, #0A053D) !important;
    }
}

/* Populated question list — card grid; answers panel is a sibling of the
   toggle checkbox (not Argento .askit-item-actions) so home-theme
   margin-left:-80px / always-show-first-child cannot break the layout. */
body.askit-customer-index .gwl-questions-list.block-dashboard-info {
    background: #fff;
    border: 1px solid #E7E6EC;
    border-radius: 8px;
    box-shadow: none;
    overflow: hidden;
}
body.askit-customer-index .gwl-questions-list > .block-title {
    margin: 0;
    padding: 16px 24px;
    border-bottom: 1px solid var(--gwl-account-border, #E5E8EE);
}
body.askit-customer-index .gwl-questions-list > .block-title strong {
    font-family: var(--Typography-Font-1, 'Bahij TheSansArabic', 'Outfit'), sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--gwl-account-title, #0A053D);
}
body.askit-customer-index .gwl-questions-list > .block-content {
    padding: 16px 24px 24px;
}
/* Shared content column — toolbar + cards share the same left/right edges */
body.askit-customer-index .gwl-questions-list > .block-content > .toolbar,
body.askit-customer-index .gwl-questions-list > .block-content > .gwl-questions-cards,
body.askit-customer-index .gwl-questions-list > .block-content > .askit-items {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.askit-customer-index .gwl-questions-list > .block-content > .toolbar:first-child {
    margin-bottom: 4px;
}

body.askit-customer-index .gwl-questions-list .askit-items,
body.askit-customer-index .gwl-questions-list .gwl-questions-cards {
    display: block !important;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100% !important;
}

body.askit-customer-index .gwl-questions-list .gwl-question-card.askit-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "meta meta"
        "body body"
        "vote toggle"
        "panel panel";
    align-items: center;
    justify-content: space-between;
    column-gap: 16px;
    row-gap: 10px;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--gwl-account-border, #E5E8EE) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
}
body.askit-customer-index .gwl-questions-list .gwl-question-card.askit-item:first-child {
    border-top: 0 !important;
    padding-top: 16px !important;
}

body.askit-customer-index .gwl-questions-list .askit-item-avatar,
body.askit-customer-index .gwl-questions-list .askit-item-avatar::before,
body.askit-customer-index .gwl-questions-list .no-avatar .askit-item-avatar {
    display: none !important;
}

body.askit-customer-index .gwl-questions-list .gwl-question-card__meta,
body.askit-customer-index .gwl-questions-list .askit-item-title {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    position: static !important;
    margin: 0 !important;
    font-size: 13px;
    line-height: 20px;
    color: var(--gwl-account-muted, #A19FA8);
}
body.askit-customer-index .gwl-questions-list .askit-item-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--gwl-account-surface, #F7F9FB);
    color: var(--gwl-account-muted, #A19FA8);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
body.askit-customer-index .gwl-questions-list .askit-item-parent {
    color: var(--gwl-account-blue, #160B8B);
    text-decoration: none;
    font-weight: 500;
}
body.askit-customer-index .gwl-questions-list .askit-item-parent:hover {
    text-decoration: underline;
}

body.askit-customer-index .gwl-questions-list .gwl-question-card__body,
body.askit-customer-index .gwl-questions-list .askit-item-body {
    grid-area: body;
    margin: 0 !important;
    font-family: var(--Typography-Font-1, 'Bahij TheSansArabic', 'Outfit'), sans-serif;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    color: var(--gwl-account-text, #100F1B) !important;
}

body.askit-customer-index .gwl-questions-list .gwl-question-card__vote,
body.askit-customer-index .gwl-questions-list .askit-item-same {
    grid-area: vote;
    justify-self: start;
    align-self: center;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
}
body.askit-customer-index .gwl-questions-list .askit-item-vote a.action {
    color: var(--gwl-account-blue, #160B8B);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}
body.askit-customer-index .gwl-questions-list .askit-item-vote a.action:hover {
    text-decoration: underline;
}
body.askit-customer-index .gwl-questions-list .askit-item-vote span {
    font-size: 12px;
    color: var(--gwl-account-muted, #A19FA8);
}

body.askit-customer-index .gwl-questions-list .gwl-question-card__toggle,
body.askit-customer-index .gwl-questions-list .askit-item-trigger {
    grid-area: toggle;
    justify-self: end;
    align-self: center;
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    margin: 0 !important;
    margin-inline-start: auto !important;
    padding: 0 !important;
    line-height: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--gwl-account-blue, #160B8B) !important;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
body.askit-customer-index .gwl-questions-list .gwl-question-card__toggle::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-inline-start: 2px;
    border: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.15s ease;
}
body.askit-customer-index .gwl-questions-list .gwl-question-card:has(.gwl-question-card__check:checked) .gwl-question-card__toggle::after {
    transform: rotate(225deg) translateY(-1px);
}

body.askit-customer-index .gwl-questions-list .gwl-question-card__check {
    grid-area: toggle;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.askit-customer-index .gwl-questions-list .gwl-question-card__panel {
    grid-area: panel;
    display: none !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 0 !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid var(--gwl-account-border, #E5E8EE);
    overflow: hidden;
}
body.askit-customer-index .gwl-questions-list .gwl-question-card__check:checked ~ .gwl-question-card__panel {
    display: block !important;
}

body.askit-customer-index .gwl-questions-list .askit-item-answers,
body.askit-customer-index .gwl-questions-list .gwl-question-card__answers {
    display: block !important;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
}
body.askit-customer-index .gwl-questions-list .askit-item-answers::before,
body.askit-customer-index .gwl-questions-list .askit-item-answers::after {
    content: none !important;
    display: none !important;
}
body.askit-customer-index .gwl-questions-list .askit-item-answers > *,
body.askit-customer-index .gwl-questions-list .gwl-question-card__answers > * {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    float: none !important;
}
body.askit-customer-index .gwl-questions-list .askit-item-answers > *:last-child,
body.askit-customer-index .gwl-questions-list .gwl-question-card__answers > *:last-child {
    margin-bottom: 0 !important;
}

body.askit-customer-index .gwl-questions-list .gwl-question-card__answer.askit-item-answer {
    box-sizing: border-box;
    padding: 12px 14px !important;
    background: var(--gwl-account-surface, #F7F9FB) !important;
    border-radius: 6px !important;
    border: 0 !important;
    border-inline-start: 3px solid var(--gwl-account-border, #E5E8EE) !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
body.askit-customer-index .gwl-questions-list .gwl-question-card__answer .askit-item-avatar {
    display: none !important;
}

body.askit-customer-index .gwl-questions-list .gwl-question-card__reply {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.askit-customer-index .gwl-questions-list .askit-answer-form {
    position: static !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.askit-customer-index .gwl-questions-list .askit-answer-form .form,
body.askit-customer-index .gwl-questions-list .askit-answer-form .fieldset {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
}
body.askit-customer-index .gwl-questions-list .askit-answer-form .field {
    margin: 0 0 12px !important;
}
body.askit-customer-index .gwl-questions-list .askit-answer-form .label {
    font-size: 13px;
    font-weight: 500;
    color: var(--gwl-account-text, #100F1B);
}
body.askit-customer-index .gwl-questions-list .askit-answer-form textarea.input-text {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 120px;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px 14px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    line-height: 22px;
    resize: vertical;
}
body.askit-customer-index .gwl-questions-list .askit-answer-form .control small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--gwl-account-muted, #A19FA8);
}
body.askit-customer-index .gwl-questions-list .askit-answer-form .actions-toolbar {
    display: flex;
    justify-content: flex-start;
    margin: 0 !important;
    padding: 0 !important;
}
body.askit-customer-index .gwl-questions-list .askit-answer-form .actions-toolbar .action,
body.askit-customer-index .gwl-questions-list .askit-answer-form .actions-toolbar button {
    float: none !important;
    margin: 0 !important;
}

@media (max-width: 767px) {
    body.askit-customer-index .gwl-questions-list > .block-title,
    body.askit-customer-index .gwl-questions-list > .block-content {
        padding-left: 16px;
        padding-right: 16px;
    }
    body.askit-customer-index .gwl-questions-list .gwl-question-card.askit-item {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
        row-gap: 8px;
    }
}

/* ==========================================================================
   GWL Account Pagination — PLP-match restyle (My Questions / Ask It)
   No pagination CSS previously existed for this page — added from scratch,
   same spec as My Orders/My Returns/My Product Reviews above. listing.phtml
   prints the SAME full pager markup twice as two identical, unmodified
   <div class="toolbar"> elements — the first and last children of
   .block-content, with the question list in between — so :first-child/
   :last-child (not a class) distinguish them. Matching the split used on
   every other account list page: item count + "Show N per page" limiter
   as their own row above the list (:first-child), page-number pagination
   as its own row below it (:last-child, hides count+limiter).
   ========================================================================== */
.askit-customer-index .gwl-questions-list .toolbar {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    width: 100% !important;
}
/* Top toolbar: count left, limiter right — pages must not eat flex space */
.askit-customer-index .gwl-questions-list .block-content > .toolbar:first-child .pages {
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important;
}
.askit-customer-index .gwl-questions-list .block-content > .toolbar:last-child {
    justify-content: flex-end;
}
.askit-customer-index .gwl-questions-list .block-content > .toolbar:last-child .pages {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    flex: 1 1 auto !important;
}
.askit-customer-index .gwl-questions-list .block-content > .toolbar:last-child .toolbar-amount,
.askit-customer-index .gwl-questions-list .block-content > .toolbar:last-child .limiter {
    display: none !important;
}
/* pager.phtml wraps everything in its own <div class="pager"> — see the
   matching comment on My Orders above for the full rationale. */
.askit-customer-index .gwl-questions-list .toolbar .pager {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0;
}
.askit-customer-index .gwl-questions-list .toolbar .toolbar-amount,
.askit-customer-index .gwl-questions-list .toolbar .limiter {
    position: static !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.askit-customer-index .gwl-questions-list .toolbar .toolbar-amount {
    order: -2;
    flex: 0 0 auto;
    margin-inline-end: auto !important;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    color: var(--gwl-account-muted);
    text-align: start;
}
.askit-customer-index .gwl-questions-list .toolbar .limiter {
    display: flex !important;
    align-items: center;
    gap: 8px;
    order: 2;
    flex: 0 0 auto;
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
}
.askit-customer-index .gwl-questions-list .toolbar .limiter-label,
.askit-customer-index .gwl-questions-list .toolbar .limiter-text {
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #100f1b;
}
.askit-customer-index .gwl-questions-list .toolbar .limiter-options {
    appearance: none;
    min-width: 56px;
    height: 36px;
    padding: 6px 28px 6px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23100f1b' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 10px 6px;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #100f1b;
    box-shadow: none !important;
    cursor: pointer;
}
/* Bottom toolbar pages only — never apply to the top count/limiter row
   or the limiter will sit mid-row instead of flush with “0 answers”. */
.askit-customer-index .gwl-questions-list .block-content > .toolbar:last-child .pages {
    display: block !important;
    position: static !important;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.askit-customer-index .gwl-questions-list .toolbar .pages-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.askit-customer-index .gwl-questions-list .toolbar .pages-items li.item {
    margin: 0 !important;
}
.askit-customer-index .gwl-questions-list .toolbar .pages-items a.page,
.askit-customer-index .gwl-questions-list .toolbar .pages-items strong.page,
.askit-customer-index .gwl-questions-list .toolbar .pages-items a.action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background-color: #ffffff;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #100f1b;
    text-decoration: none;
    transition: all 0.2s ease;
}
.askit-customer-index .gwl-questions-list .toolbar .pages-items a.page:hover,
.askit-customer-index .gwl-questions-list .toolbar .pages-items a.action:hover {
    border-color: #100f1b;
    color: #100f1b;
}
.askit-customer-index .gwl-questions-list .toolbar .pages-items li.current strong.page {
    background: #100f1b !important;
    border-color: #100f1b !important;
    color: #ffffff !important;
    font-weight: 600;
}
/* First/Last — icon-only squares (double chevron). Two template variants
   are in play across account pages depending on which pager.phtml
   override resolves (a stock-style copy uses a.page.first/.last; the
   theme's own Figma-pager copy — see its "gwl-plp-pager__next" class
   below — uses a.action.first/.last instead) — cover both so this looks
   right regardless of which one a given page/cache state serves. */
.askit-customer-index .gwl-questions-list .toolbar .pages-items a.page.first,
.askit-customer-index .gwl-questions-list .toolbar .pages-items a.page.last,
.askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.first,
.askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.last {
    min-width: 36px;
    padding: 0;
    font-size: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 12px;
}
.askit-customer-index .gwl-questions-list .toolbar .pages-items a.page.first,
.askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.first {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M6.5 2 2.5 6l4 4M11.5 2 7.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.askit-customer-index .gwl-questions-list .toolbar .pages-items a.page.last,
.askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.last {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M2.5 2 6.5 6l-4 4M7.5 2 11.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Previous — icon-only square (single chevron) */
.askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.previous {
    min-width: 36px;
    padding: 0;
    font-size: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M7.5 2 3.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Next — keeps visible text + trailing chevron */
.askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.next {
    width: auto;
    min-width: 0;
    padding: 0 34px 0 14px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2 8.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
}
.askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.next span:not(.label) {
    display: inline !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    margin: 0 !important;
}
/* The Figma-pager template variant (see comment above the First/Last
   rule) sidesteps that same clamp itself by using an <em> instead of a
   <span> for Next's visible text — but an unstyled <em> is italic by
   default in every browser, and the sitewide PLP rule that normally
   resets it (".gwl-plp-pager__next-label") is scoped to body.gwl-plp-figma,
   which account pages don't carry. Reset it here too. */
.askit-customer-index .gwl-questions-list .toolbar .pages-items .gwl-plp-pager__next-label {
    display: inline;
    font-style: normal;
}


/* ==========================================================================
   GWL Privacy Tools — Swissup Gdpr account page (swissup_gdpr-customer-index)
   ========================================================================== */
.swissup_gdpr-customer-index .page-title-wrapper .page-title,
.swissup_gdpr-customer-index .page-title-wrapper .page-title .base,
.swissup_gdpr-customer-index .page-title-wrapper .page-title span,
.swissup_gdpr-customer-index .page-title-wrapper h1.page-title {
    font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    line-height: 40px !important;
    letter-spacing: -0.25px;
    color: var(--Blue-blue-10, #0A053D) !important;
}
.swissup_gdpr-customer-index .page-title-wrapper .account-page-subtitle {
    font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important;
    opacity: 1 !important;
}
.swissup_gdpr-customer-index .gwl-privacy-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--Main-Secondary-Shades-Secondary-Shade-200, #E7E6EC);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: none;
}
.swissup_gdpr-customer-index .gwl-privacy-card:last-child {
    margin-bottom: 0;
}
.account.swissup_gdpr-customer-index .gwl-privacy-card.block-dashboard-info .block-title,
.swissup_gdpr-customer-index .gwl-privacy-card .block-title {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 0 !important;
}
.swissup_gdpr-customer-index .gwl-privacy-card .block-title strong {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
    font-size: 18px !important;
    font-style: normal;
    font-weight: 500 !important;
    line-height: 24px !important;
    color: var(--Main-Text-Color, #100F1B) !important;
}
.swissup_gdpr-customer-index .gwl-privacy-card .block-content {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.swissup_gdpr-customer-index .gwl-privacy-card .block-content::before,
.swissup_gdpr-customer-index .gwl-privacy-card .block-content::after {
    content: none !important;
    display: none !important;
}
.swissup_gdpr-customer-index .gwl-privacy-card .block-content p,
.swissup_gdpr-customer-index .gwl-privacy-card .gwl-privacy-note {
    margin: 0 !important;
    font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 300 !important;
    line-height: 22px !important;
    color: var(--Main-Button-Secondary, #100F1B) !important;
}
.swissup_gdpr-customer-index .gwl-privacy-card .grouped-consents {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.swissup_gdpr-customer-index .gwl-privacy-card .consent-form-title {
    display: block;
    margin: 0 0 6px;
    font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: var(--Main-Text-Color, #100F1B);
}
.swissup_gdpr-customer-index .gwl-privacy-card .list-consents {
    list-style: none;
    margin: 0;
    padding: 0;
}
.swissup_gdpr-customer-index .gwl-privacy-card .list-consents li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    color: var(--Main-Button-Secondary, #100F1B);
}
.swissup_gdpr-customer-index .gwl-privacy-card .list-consents svg {
    width: 14px;
    height: 14px;
    fill: #2EC175;
    flex: 0 0 auto;
}

/* Delete Account card + trigger button */
.swissup_gdpr-customer-index .gwl-privacy-danger button.gwl-privacy-danger-btn,
.swissup_gdpr-customer-index .gwl-privacy-danger button.gwl-privacy-danger-btn span {
    font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 16px !important;
    text-align: center;
    color: var(--Sub-White, #FFF) !important;
}
.swissup_gdpr-customer-index .gwl-privacy-danger button.gwl-privacy-danger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    box-sizing: border-box;
    max-width: 175px;
    width: 100%;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0 16px;
    background: var(--color-red-56, #EA4335) !important;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}
.swissup_gdpr-customer-index .gwl-privacy-danger button.gwl-privacy-danger-btn:hover {
    background: #d13c30 !important;
}
@media (max-width: 767px) {
    body.swissup_gdpr-customer-index.account .block-collapsible-nav .title,
    body.swissup_gdpr-customer-index.account .account-nav .title,
    body.swissup_gdpr-customer-index.account .sidebar-main .block-collapsible-nav .title,
    body.swissup_gdpr-customer-index.account .sidebar-main .account-nav .title {
        display: none !important;
    }
    .swissup_gdpr-customer-index .page-title-wrapper {
        margin-bottom: 24px !important;
    }
    body.swissup_gdpr-customer-index.account .breadcrumbs {
        margin-bottom: 8px !important;
    }
    body.swissup_gdpr-customer-index.account .page-main .page-title-wrapper .page-title,
    body.swissup_gdpr-customer-index.account .page-title-wrapper h1.page-title,
    body.swissup_gdpr-customer-index.account .page-title-wrapper .page-title .base,
    body.swissup_gdpr-customer-index.account .page-title-wrapper .page-title span {
        display: block !important;
        font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
        font-size: 32px !important;
        font-style: normal;
        font-weight: 300 !important;
        line-height: 40px !important;
        letter-spacing: -1px !important;
        color: var(--Blue-blue-10, #0A053D) !important;
    }
    body.swissup_gdpr-customer-index.account .page-title-wrapper .account-page-subtitle {
        font-family: var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
        font-size: 16px !important;
        font-style: normal;
        font-weight: 300 !important;
        line-height: 20px !important;
        color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important;
        opacity: 1 !important;
    }
    .swissup_gdpr-customer-index .gwl-privacy-card {
        padding: 16px;
    }
    .swissup_gdpr-customer-index .gwl-privacy-card .block-title strong {
        font-size: 16px !important;
        line-height: 20px !important;
    }
    .swissup_gdpr-customer-index .gwl-privacy-card .block-content p,
    .swissup_gdpr-customer-index .gwl-privacy-card .gwl-privacy-note {
        font-size: 14px !important;
        line-height: 20px !important;
    }
}


/* ==========================================================================
   GWL Privacy Policy + Refund CMS pages
   Typography / spacing / colors only. Admin CMS HTML is not rewritten.
   Arabic: Almarai body/titles. Tokens otherwise match EN CMS pages.
   ========================================================================== */

.cms-privacy-policy-cookie-restriction-mode .page-main,
.cms-refund .page-main {
    max-width: none !important;
    padding: 0 !important;
    overflow-x: clip;
}

.cms-privacy-policy-cookie-restriction-mode .breadcrumbs,
.cms-privacy-policy-cookie-restriction-mode .page-title-wrapper,
.cms-privacy-policy-cookie-restriction-mode .column.main,
.cms-refund .breadcrumbs,
.cms-refund .page-title-wrapper,
.cms-refund .column.main {
    max-width: 1280px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.cms-privacy-policy-cookie-restriction-mode .breadcrumbs,
.cms-refund .breadcrumbs {
    display: block !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}

.cms-privacy-policy-cookie-restriction-mode .page-title-wrapper,
.cms-refund .page-title-wrapper {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
}

.cms-privacy-policy-cookie-restriction-mode .page-title-wrapper .page-title,
.cms-refund .page-title-wrapper .page-title {
    color: var(--Blue-blue-10, #0A053D);
    font-family: 'Almarai', var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif !important;
    font-size: 40px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 48px !important;
    letter-spacing: -1px;
    margin: 0 !important;
}

.cms-privacy-policy-cookie-restriction-mode .page-title-wrapper .page-title:after,
.cms-refund .page-title-wrapper .page-title:after {
    content: none !important;
    display: none !important;
}

.cms-privacy-policy-cookie-restriction-mode .column.main,
.cms-refund .column.main {
    padding-bottom: 80px;
    float: none;
    width: 100%;
    overflow-x: clip;
}

.cms-privacy-policy-cookie-restriction-mode .column.main img,
.cms-privacy-policy-cookie-restriction-mode .column.main table,
.cms-privacy-policy-cookie-restriction-mode .column.main iframe,
.cms-refund .column.main img,
.cms-refund .column.main table,
.cms-refund .column.main iframe {
    max-width: 100%;
    height: auto;
}

.cms-privacy-policy-cookie-restriction-mode .column.main,
.cms-privacy-policy-cookie-restriction-mode .column.main p,
.cms-privacy-policy-cookie-restriction-mode .column.main li,
.cms-privacy-policy-cookie-restriction-mode .column.main h2,
.cms-privacy-policy-cookie-restriction-mode .column.main h3,
.cms-privacy-policy-cookie-restriction-mode .column.main h4,
.cms-refund .column.main,
.cms-refund .column.main p,
.cms-refund .column.main li,
.cms-refund .column.main h2,
.cms-refund .column.main h3,
.cms-refund .column.main h4 {
    font-family: 'Almarai', 'Bahij TheSansArabic', sans-serif;
}

.cms-privacy-policy-cookie-restriction-mode .column.main p,
.cms-refund .column.main p {
    margin: 0 0 16px;
    color: var(--Main-Secondary-Shades-Secondary-Shade-600, #3B3764);
    font-family: 'Almarai', var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 22px;
}

.cms-privacy-policy-cookie-restriction-mode .column.main p:empty,
.cms-refund .column.main p:empty {
    display: none;
}

.cms-privacy-policy-cookie-restriction-mode .column.main h2,
.cms-privacy-policy-cookie-restriction-mode .column.main h3,
.cms-refund .column.main h2,
.cms-refund .column.main h3,
.cms-privacy-policy-cookie-restriction-mode .column.main p:has(> strong:only-child) {
    margin: 28px 0 12px;
    padding-top: 24px;
    border-top: 1px solid #E7E6EC;
    color: var(--Main-Text-Color, #100F1B);
    font-family: 'Almarai', var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

.cms-privacy-policy-cookie-restriction-mode .column.main h2:first-of-type,
.cms-privacy-policy-cookie-restriction-mode .column.main h3:first-of-type,
.cms-refund .column.main h2:first-of-type,
.cms-refund .column.main h3:first-of-type,
.cms-privacy-policy-cookie-restriction-mode .column.main p:has(> strong:only-child):first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.cms-privacy-policy-cookie-restriction-mode .column.main strong,
.cms-privacy-policy-cookie-restriction-mode .column.main b,
.cms-refund .column.main strong,
.cms-refund .column.main b {
    color: var(--Main-Text-Color, #100F1B);
    font-family: 'Almarai', var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

.cms-privacy-policy-cookie-restriction-mode .column.main ul,
.cms-privacy-policy-cookie-restriction-mode .column.main ol,
.cms-refund .column.main ul,
.cms-refund .column.main ol {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.cms-privacy-policy-cookie-restriction-mode .column.main li,
.cms-refund .column.main li {
    position: relative;
    margin: 0 0 10px;
    padding-inline-start: 18px;
    color: var(--Main-Secondary-Shades-Secondary-Shade-600, #3B3764);
    font-family: 'Almarai', var(--Typography-Font-1, 'Bahij TheSansArabic'), sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 22px;
    background-image: none;
}

.cms-privacy-policy-cookie-restriction-mode .column.main li::before,
.cms-refund .column.main li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #160B8B;
    font: none;
    color: transparent;
}

.cms-privacy-policy-cookie-restriction-mode .column.main li::after,
.cms-refund .column.main li::after {
    content: none !important;
    display: none !important;
}

.cms-privacy-policy-cookie-restriction-mode .column.main a,
.cms-refund .column.main a {
    color: #160B8B;
    text-decoration: underline;
}


.cms-privacy-policy-cookie-restriction-mode .page-title-wrapper .page-title,
.cms-refund .page-title-wrapper .page-title,
.cms-privacy-policy-cookie-restriction-mode .column.main,
.cms-refund .column.main {
    text-align: start;
}

.cms-privacy-policy-cookie-restriction-mode .breadcrumbs .item a,
.cms-privacy-policy-cookie-restriction-mode .breadcrumbs .item strong,
.cms-privacy-policy-cookie-restriction-mode .breadcrumbs .item span,
.cms-refund .breadcrumbs .item a,
.cms-refund .breadcrumbs .item strong,
.cms-refund .breadcrumbs .item span {
    font-family: 'Almarai', sans-serif !important;
}

@media (max-width: 767px) {
    .cms-privacy-policy-cookie-restriction-mode .breadcrumbs,
    .cms-privacy-policy-cookie-restriction-mode .page-title-wrapper,
    .cms-privacy-policy-cookie-restriction-mode .column.main,
    .cms-refund .breadcrumbs,
    .cms-refund .page-title-wrapper,
    .cms-refund .column.main {
        padding-left: 16px;
        padding-right: 16px;
    }

    .cms-privacy-policy-cookie-restriction-mode .breadcrumbs,
    .cms-refund .breadcrumbs {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }

    .cms-privacy-policy-cookie-restriction-mode .page-title-wrapper,
    .cms-refund .page-title-wrapper {
        margin-bottom: 16px !important;
    }

    .cms-privacy-policy-cookie-restriction-mode .page-title-wrapper .page-title,
    .cms-refund .page-title-wrapper .page-title {
        font-size: 28px !important;
        line-height: 36px !important;
        letter-spacing: -0.5px;
    }

    .cms-privacy-policy-cookie-restriction-mode .column.main,
    .cms-refund .column.main {
        padding-bottom: 96px;
    }

    .cms-privacy-policy-cookie-restriction-mode .column.main h2,
    .cms-privacy-policy-cookie-restriction-mode .column.main h3,
    .cms-refund .column.main h2,
    .cms-refund .column.main h3,
    .cms-privacy-policy-cookie-restriction-mode .column.main p:has(> strong:only-child) {
        margin: 20px 0 10px;
        padding-top: 16px;
        font-size: 16px;
        line-height: 22px;
        font-weight: 400;
    }
}


/* ==========================================================================
   GWL My Product Reviews — single review detail page (review_customer_view).
   Reskins core Magento_Review::customer/view.phtml into the My Account card
   system. Layout: Magento_Review/layout/review_customer_view.xml
   (breadcrumb + "Review Detail" title + subtitle in columns.top).
   Rating stars: SVG override lives in saudiceramics-ar.css (luma-icons tofu in AR).
   ========================================================================== */
.review-customer-view .page-title-wrapper .page-title,
.review-customer-view .page-title-wrapper h1.page-title {
    font-family: 'Bahij TheSansArabic', sans-serif !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    line-height: 40px !important;
    color: #0A053D !important;
}
.review-customer-view .page-title-wrapper .account-page-subtitle {
    font-family: 'Bahij TheSansArabic', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: #6C698B !important;
    opacity: 1 !important;
}

.review-customer-view .customer-review.view {
    background: #fff;
    border: 1px solid #E7E6EC;
    border-radius: 8px;
    padding: 24px;
    margin: 0 0 16px;
    box-shadow: none;
}

/* product header */
.review-customer-view .customer-review.view .product-details {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #E7E6EC;
}
.review-customer-view .customer-review.view .product-details:before,
.review-customer-view .customer-review.view .product-details:after {
    content: none;
    display: none;
}
.review-customer-view .customer-review.view .product-media {
    flex: 0 0 auto;
    width: 96px;
    margin: 0;
}
.review-customer-view .customer-review.view .product-media .product-photo {
    display: block;
}
.review-customer-view .customer-review.view .product-media img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #E7E6EC;
}
.review-customer-view .customer-review.view .product-info {
    flex: 1 1 auto;
    min-width: 0;
}
.review-customer-view .customer-review.view .product-info .product-name {
    margin: 0 0 8px;
    font-family: 'Bahij TheSansArabic', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: #100F1B;
}
.review-customer-view .customer-review.view .product-info .rating-average-label {
    display: block;
    margin: 0 0 4px;
    font-family: 'Bahij TheSansArabic', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #6C698B;
}

/* review body */
.review-customer-view .customer-review.view .review-details .title {
    margin: 0 0 12px;
    border: 0;
}
.review-customer-view .customer-review.view .review-details .title strong {
    font-family: 'Bahij TheSansArabic', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: #100F1B;
}
.review-customer-view .customer-review.view .customer-review-rating {
    margin: 0 0 16px;
}
.review-customer-view .customer-review.view .customer-review-rating .rating-summary.item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
}
.review-customer-view .customer-review.view .customer-review-rating .rating-label {
    font-family: 'Bahij TheSansArabic', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #6C698B;
    min-width: 90px;
}
.review-customer-view .customer-review.view .review-title {
    margin: 0 0 6px;
    font-family: 'Bahij TheSansArabic', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    color: #100F1B;
}
.review-customer-view .customer-review.view .review-content {
    margin: 0 0 16px;
    font-family: 'Bahij TheSansArabic', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #58575F;
}
.review-customer-view .customer-review.view .review-date {
    font-family: 'Bahij TheSansArabic', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #A19FA8;
}
.review-customer-view .customer-review.view .review-date time {
    color: inherit;
}

/* back link */
.review-customer-view .actions-toolbar {
    margin: 0;
    padding: 0;
    border: 0;
}
.review-customer-view .actions-toolbar:before,
.review-customer-view .actions-toolbar:after {
    content: none;
    display: none;
}
.review-customer-view .actions-toolbar .secondary {
    float: none;
}
.review-customer-view .actions-toolbar a.action.back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Bahij TheSansArabic', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--gwl-account-blue);
    text-decoration: none;
}
.review-customer-view .actions-toolbar a.action.back:before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M0.599609 8.6001L4.59961 4.6001L0.599609 0.600098' stroke='%23160B8B' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: scaleX(-1);
}
.review-customer-view .actions-toolbar a.action.back:hover {
    text-decoration: underline;
}
[dir="rtl"] .review-customer-view .actions-toolbar a.action.back:before {
    transform: none;
}

@media (max-width: 767px) {
    .review-customer-view .customer-review.view {
        padding: 16px;
    }
    .review-customer-view .customer-review.view .product-details {
        flex-direction: column;
    }
}