/* ==========================================================================
   GWL My Account — Support & Misc
   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, 'Outfit'), 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, 'Outfit'), 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, 'Outfit'), 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: 'Outfit', 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: 'Outfit', 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: 'Outfit', 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, 'Outfit'), 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, 'Outfit'), 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, 'Outfit'), 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: 'Outfit', 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: 'Outfit', 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: 'Outfit', 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: 'Outfit', 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: 'Outfit', 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: 'Outfit', 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, 'Outfit'), 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, 'Outfit'), 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;
}
.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, 'Outfit'), 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, 'Outfit'), 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, 'Outfit'), 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, 'Outfit'), 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, 'Outfit'), 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)
   ========================================================================== */
.magento_invitation-index-send .gwl-invitation-form {
    max-width: 620px;
}
.magento_invitation-index-send .gwl-invitation-form .fieldset {
    margin: 0 !important;
    letter-spacing: normal;
}
.magento_invitation-index-send .gwl-invitation-form__row-actions {
    display: flex;
    justify-content: flex-end;
}
.magento_invitation-index-send .gwl-invitation-form .action.remove {
    background: none;
    border: 0;
    padding: 0;
    color: var(--gwl-account-muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.magento_invitation-index-send .gwl-invitation-form .action.remove:hover {
    color: #F04438;
}

/* Field / label / input — same spec as the Gift Card input */
.magento_invitation-index-send .gwl-invitation-form .field {
    margin: 0 0 16px !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;
    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: 'Work Sans', sans-serif;
}
.magento_invitation-index-send .gwl-invitation-form input.input-text {
    height: 40px;
}
.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 button — secondary/outline, distinct from the primary submit */
.magento_invitation-index-send .gwl-invitation-form__add-row {
    margin: 4px 0 20px;
}
.magento_invitation-index-send .gwl-invitation-form button.action.add {
    height: 36px;
    padding: 0 18px;
    background: #fff;
    border: 1px solid var(--gwl-account-blue);
    border-radius: 4px;
    color: var(--gwl-account-blue);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.magento_invitation-index-send .gwl-invitation-form button.action.add:hover {
    background: var(--gwl-account-current-bg);
}

/* 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;
}
.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;
}
/* 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 .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-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: 'Outfit', 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: 'Outfit', 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: 'Outfit', 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: 'Outfit', 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-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: 'Outfit', 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, 'Outfit'), 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, 'Outfit'), 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;
}
.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, 'Outfit'), 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, 'Outfit'), 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, 'Outfit'), 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, 'Outfit'), 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 */
.askit-customer-index .gwl-questions-list .askit-items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.askit-customer-index .gwl-questions-list .askit-items > .askit-item {
    padding: 16px 0;
    border-top: 1px solid var(--gwl-account-border);
}
.askit-customer-index .gwl-questions-list .askit-items > .askit-item:first-child {
    border-top: 0;
    padding-top: 0;
}
.askit-customer-index .gwl-questions-list .askit-item-avatar img {
    border-radius: 50%;
}
.askit-customer-index .gwl-questions-list .askit-item-title {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--gwl-account-muted);
}
.askit-customer-index .gwl-questions-list .askit-item-author {
    color: var(--gwl-account-title);
    font-weight: 600;
}
.askit-customer-index .gwl-questions-list .askit-item-status {
    display: inline-block;
    padding: 2px 8px;
    margin-inline-end: 6px;
    border-radius: 4px;
    background: var(--gwl-account-surface);
    color: var(--gwl-account-muted);
    font-size: 11px;
    text-transform: uppercase;
}
.askit-customer-index .gwl-questions-list .askit-item-parent {
    color: var(--gwl-account-blue);
    text-decoration: none;
}
.askit-customer-index .gwl-questions-list .askit-item-timestamp {
    color: var(--gwl-account-muted);
}
.askit-customer-index .gwl-questions-list .askit-item-body {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 22px;
    color: var(--gwl-account-text);
}
.askit-customer-index .gwl-questions-list .askit-item-same {
    margin: 0;
}
.askit-customer-index .gwl-questions-list .askit-item-vote a.action {
    color: var(--gwl-account-blue);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}
.askit-customer-index .gwl-questions-list .askit-item-vote a.action:hover {
    text-decoration: underline;
}
.askit-customer-index .gwl-questions-list .askit-item-vote span {
    font-size: 12px;
    color: var(--gwl-account-muted);
}

/* Expand/collapse answers trigger */
.askit-customer-index .gwl-questions-list .askit-item-actions {
    margin-top: 8px;
}
.askit-customer-index .gwl-questions-list .askit-item-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gwl-account-blue);
    cursor: pointer;
}
.askit-customer-index .gwl-questions-list .askit-item-actions > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.askit-customer-index .gwl-questions-list .askit-item-answers {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
}
.askit-customer-index .gwl-questions-list .askit-item-actions > input[type="checkbox"]:checked ~ .askit-item-answers {
    max-height: none;
    overflow: visible;
    margin-top: 12px;
}
.askit-customer-index .gwl-questions-list .askit-item-answers .askit-item-answer {
    padding: 12px;
    margin-bottom: 8px;
    background: var(--gwl-account-surface);
    border-radius: 6px;
    border-inline-start: 3px solid var(--gwl-account-border);
}

/* ==========================================================================
   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;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}
.askit-customer-index .gwl-questions-list .toolbar .pages {
    display: none !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;
}
.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: contents;
}
.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;
}
.askit-customer-index .gwl-questions-list .toolbar .toolbar-amount {
    order: -2;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    color: var(--gwl-account-muted);
}
.askit-customer-index .gwl-questions-list .toolbar .limiter {
    display: flex !important;
    align-items: center;
    gap: 8px;
    order: -1;
}
.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;
}
/* 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. */
.askit-customer-index .gwl-questions-list .toolbar .pages {
    display: block;
    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, 'Outfit'), 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, 'Outfit'), 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, 'Outfit'), 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, 'Outfit'), 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, 'Outfit'), 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, 'Outfit'), 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, 'Outfit'), 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, 'Outfit'), 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, 'Outfit'), 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.
   Tokens match Shop-Saudiceramics account pages (Outfit, #0A053D titles).
   ========================================================================== */

.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: var(--Typography-Font-1, Outfit), 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: 'Outfit', 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: var(--Typography-Font-1, Outfit), 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: var(--Typography-Font-1, Outfit), 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: var(--Typography-Font-1, Outfit), 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: var(--Typography-Font-1, Outfit), 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;
}

@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 widget (.rating-result stars) is left to the base theme.
   ========================================================================== */
.review-customer-view .page-title-wrapper .page-title,
.review-customer-view .page-title-wrapper h1.page-title {
    font-family: 'Outfit', 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: 'Outfit', 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: 'Outfit', 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: 'Outfit', 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: 'Outfit', 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: 'Outfit', 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: 'Outfit', 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: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #58575F;
}
.review-customer-view .customer-review.view .review-date {
    font-family: 'Outfit', 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: 'Outfit', 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;
    }
}