/* ==========================================================================
   GWL My Account Stylesheet (AR/RTL)
   Extracted from saudiceramics-ar.css — contains ALL "My Account" area
   CSS: dashboard, orders, addresses, wishlist, gift card, reward points,
   reviews, newsletter, invitations, helpdesk tickets, RMA/returns,
   Ask It (My Questions), Privacy Tools (GDPR), the RTL sidebar column
   swap, the account-nav / block-collapsible-nav sidebar and mobile
   drawer, the mobile hamburger "Account" tab, and the Refund +
   Privacy-Policy-Cookie-Restriction CMS pages (which share the mobile
   bottom account nav with the account area).
   Loaded via Magento_Theme/layout/default_head_blocks.xml, order="201",
   immediately after saudiceramics-ar.css so its rules retain the same
   cascade position they had when they lived inline in the main file.
   ========================================================================== */
:root {
    --gwl-account-blue: #160B8B;
    --gwl-account-text: #1F2430;
    --gwl-account-title: #111111;
    --gwl-account-muted: #7A8FA3;
    --gwl-account-border: #E5E8EE;
    --gwl-account-surface: #F7F9FB;
    --gwl-account-current-bg: #F0F1FA;
    --gwl-account-danger: #F04438;
}



.account .page-title-wrapper {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    position: static !important;
    margin: 0 0 36px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.account .page-title-wrapper .page-title {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 32px !important;
    line-height: 40px !important;
    font-weight: 700 !important;
    color: var(--gwl-account-text) !important;
    margin: 0 0 4px !important;
}
.account .page-title-wrapper .page-title:after {
    content: none !important;
    display: none !important;
}
.account .page-title-wrapper .account-page-subtitle {
    margin: 0 !important;
    color: var(--gwl-account-muted);
    font-size: 15px;
    line-height: 22px;
}

/* Breadcrumb spacing above the page title on account pages */
.account .breadcrumbs {
    margin-bottom: 28px !important;
}
/* Figma breadcrumb shows "Home" as text, not the site-wide home icon */
.account .breadcrumbs .item.home a {
    font-size: 14px !important;
}
.account .breadcrumbs .item.home a:before {
    content: none !important;
}
.account .breadcrumbs .item.account strong {
    color: var(--gwl-account-title) !important;
    font-weight: 600 !important;
}
.account .page-title-wrapper .account-page-subtitle {
    margin: 0 !important;
    color: var(--gwl-account-muted);
    font-size: 15px;
    line-height: 22px;
}


/* --------------------------------------------------------------------
   Mobile "ACCOUNT" drawer tab — extra My Account destinations appended
   to the shared top.links list (Magento_Theme::layout/default.xml) so
   the drawer covers everything the My Account grid does. That same
   top.links list is also reused, unchanged, for the desktop header's
   "Welcome, X" dropdown (.customer-menu inside .panel.header) —
   gwl-mobile-account-link keeps the new entries out of that copy and
   visible only in the nav-sections (mobile) copy.
   -------------------------------------------------------------------- */
.customer-menu .gwl-mobile-account-link {
    display: none;
}
.nav-sections .customer-menu .gwl-mobile-account-link {
    display: list-item;
}

/* --------------------------------------------------------------------
   Mobile "ACCOUNT" drawer tab — card-grid presentation, matching the
   My Account page's own icon-card grid. Only the link list itself
   changes shape here (still the same top.links block, same items,
   same "Welcome, X!" text above it) — the icon set is the same one
   used by the My Account grid (see "Sidebar navigation" below), keyed
   off the same icon-X classes. Three of the five original items
   (My Account, Send Invitations, My Wish List) come from core/vendor
   Link blocks that don't expose a layout "class" argument, so they're
   targeted structurally instead of via an icon-X class.
   .customer-menu's own ancestors (.customer-welcome li and its parent ul)
   are all zero-width at this viewport — normal for desktop, where
   .customer-menu is position:absolute and doesn't affect their flow
   width, but on mobile it's forced to position:static, so its computed
   width tries to resolve against that zero-width chain. In LTR a static
   block wider than a zero-width parent grows rightward and stays onscreen
   by luck; in RTL it grows leftward from that same anchor and is pushed
   off-screen entirely. Taking it out of flow via absolute positioning,
   anchored to #store.links (the one ancestor already confirmed full-width
   and in-viewport), sidesteps the zero-width chain instead of trying to
   widen every link in it. */
#store\.links {
    position: relative;
}
.nav-sections .customer-menu {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
}
.nav-sections .customer-menu > .header.links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0 14px;
    box-sizing: border-box;
}
.nav-sections .customer-menu > .header.links > li {
    margin: 0 !important;
}
.nav-sections .customer-menu > .header.links > li > a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px !important;
    border: 1px solid var(--gwl-account-border);
    border-radius: 12px;
    text-align: center;
    font-family: 'Work Sans', sans-serif;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: #1a1a1f !important;
    text-decoration: none !important;
}
.nav-sections .customer-menu > .header.links > li .counter {
    display: none;
}
.nav-sections .customer-menu > .header.links > li > a:before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    margin: 0 auto;
    background-color: var(--gwl-account-muted);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
/* My Account — always first, no distinguishing class of its own */
.nav-sections .customer-menu > .header.links > li:first-child > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 8a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm0 1c-2.7 0-5 1.5-5 3.4V14h10v-1.6C13 10.5 10.7 9 8 9zm0-8a2 2 0 1 1-2 2 2 2 0 0 1 2-2zm0 9c2.1 0 4 .9 4 2.4V13H4v-.6C4 10.9 5.9 10 8 10z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 8a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm0 1c-2.7 0-5 1.5-5 3.4V14h10v-1.6C13 10.5 10.7 9 8 9zm0-8a2 2 0 1 1-2 2 2 2 0 0 1 2-2zm0 9c2.1 0 4 .9 4 2.4V13H4v-.6C4 10.9 5.9 10 8 10z'/%3E%3C/svg%3E");
}
/* My Wish List — identified by its knockout scope binding */
.nav-sections .customer-menu > .header.links > li[data-bind*="scope: 'wishlist'"] > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 14.2 1.9 8.1A3.9 3.9 0 1 1 7.4 2.6L8 3.2l.6-.6A3.9 3.9 0 1 1 14.1 8L8 14.2zm-5.4-7a2.9 2.9 0 0 0 0 4.1L8 12.8l5.4-5.5a2.9 2.9 0 1 0-4.1-4.1L8 4.6 6.7 3.3a2.9 2.9 0 0 0-4.1 0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 14.2 1.9 8.1A3.9 3.9 0 1 1 7.4 2.6L8 3.2l.6-.6A3.9 3.9 0 1 1 14.1 8L8 14.2zm-5.4-7a2.9 2.9 0 0 0 0 4.1L8 12.8l5.4-5.5a2.9 2.9 0 1 0-4.1-4.1L8 4.6 6.7 3.3a2.9 2.9 0 0 0-4.1 0z'/%3E%3C/svg%3E");
}
/* Send Invitations — identified by its link id */
.nav-sections .customer-menu > .header.links > li:has(> a[id^="invitation-send-link"]) > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 6.5l7-4 7 4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1' y='6.5' width='14' height='7.5' rx='1' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M1.3 7l6.7 4 6.7-4' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 6.5l7-4 7 4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1' y='6.5' width='14' height='7.5' rx='1' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M1.3 7l6.7 4 6.7-4' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
}
.nav-sections .customer-menu > .header.links > li.icon-orders > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M5.2 4V3.5a3.3 3.3 0 0 1 6.6 0V4h2.4l-.8 9.6H3.6L2.8 4zm1 0h4.6V3.5a2.3 2.3 0 0 0-4.6 0zm-2.3 1 .6 7.6h8L13 5h-1.2v1.7h-1V5h-4.6v1.7h-1V5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M5.2 4V3.5a3.3 3.3 0 0 1 6.6 0V4h2.4l-.8 9.6H3.6L2.8 4zm1 0h4.6V3.5a2.3 2.3 0 0 0-4.6 0zm-2.3 1 .6 7.6h8L13 5h-1.2v1.7h-1V5h-4.6v1.7h-1V5z'/%3E%3C/svg%3E");
}
.nav-sections .customer-menu > .header.links > li.icon-address > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 1a5 5 0 0 0-5 5c0 3.75 5 9 5 9s5-5.25 5-9a5 5 0 0 0-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 1a5 5 0 0 0-5 5c0 3.75 5 9 5 9s5-5.25 5-9a5 5 0 0 0-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E");
}
.nav-sections .customer-menu > .header.links > li.icon-info > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='7.25' y='6.8' width='1.5' height='4.7' rx='0.3' fill='%23000'/%3E%3Ccircle cx='8' cy='4.3' r='0.95' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='7.25' y='6.8' width='1.5' height='4.7' rx='0.3' fill='%23000'/%3E%3Ccircle cx='8' cy='4.3' r='0.95' fill='%23000'/%3E%3C/svg%3E");
}
.nav-sections .customer-menu > .header.links > li.icon-giftcard > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='6.5' width='12' height='7.5' rx='0.5' fill='%23000'/%3E%3Crect x='1.5' y='4.3' width='13' height='2.4' rx='0.4' fill='%23000'/%3E%3Crect x='7.3' y='4.3' width='1.4' height='9.7' fill='%23000'/%3E%3Ccircle cx='6' cy='3' r='1.3' fill='%23000'/%3E%3Ccircle cx='10' cy='3' r='1.3' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='6.5' width='12' height='7.5' rx='0.5' fill='%23000'/%3E%3Crect x='1.5' y='4.3' width='13' height='2.4' rx='0.4' fill='%23000'/%3E%3Crect x='7.3' y='4.3' width='1.4' height='9.7' fill='%23000'/%3E%3Ccircle cx='6' cy='3' r='1.3' fill='%23000'/%3E%3Ccircle cx='10' cy='3' r='1.3' fill='%23000'/%3E%3C/svg%3E");
}
.nav-sections .customer-menu > .header.links > li.icon-reward > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 1.5l1.85 3.9 4.3.6-3.1 3 .75 4.3L8 11.4l-3.8 2 .74-4.3-3.1-3 4.3-.6L8 1.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 1.5l1.85 3.9 4.3.6-3.1 3 .75 4.3L8 11.4l-3.8 2 .74-4.3-3.1-3 4.3-.6L8 1.5z'/%3E%3C/svg%3E");
}
.nav-sections .customer-menu > .header.links > li.icon-reviews > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='2.5' width='13' height='8.5' rx='2' fill='%23000'/%3E%3Cpath fill='%23000' d='M4 11v3l3.2-3H4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='2.5' width='13' height='8.5' rx='2' fill='%23000'/%3E%3Cpath fill='%23000' d='M4 11v3l3.2-3H4z'/%3E%3C/svg%3E");
}
.nav-sections .customer-menu > .header.links > li.icon-newsletter > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='3.5' width='14' height='9' rx='1' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M1.5 4.2l6.5 4.6 6.5-4.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='3.5' width='14' height='9' rx='1' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M1.5 4.2l6.5 4.6 6.5-4.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
}
.nav-sections .customer-menu > .header.links > li.icon-invitations > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 6.5l7-4 7 4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1' y='6.5' width='14' height='7.5' rx='1' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M1.3 7l6.7 4 6.7-4' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 6.5l7-4 7 4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1' y='6.5' width='14' height='7.5' rx='1' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M1.3 7l6.7 4 6.7-4' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
}
.nav-sections .customer-menu > .header.links > li.icon-returns > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M4 5H1.5V2.5L2.9 3.9A6 6 0 1 1 1.6 10l1.4-.6A4.5 4.5 0 1 0 4 5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M4 5H1.5V2.5L2.9 3.9A6 6 0 1 1 1.6 10l1.4-.6A4.5 4.5 0 1 0 4 5z'/%3E%3C/svg%3E");
}
.nav-sections .customer-menu > .header.links > li.icon-questions > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M6 6.3a2 2 0 1 1 3.2 1.6c-.7.5-1.1.9-1.1 1.6' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.3' r='0.9' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M6 6.3a2 2 0 1 1 3.2 1.6c-.7.5-1.1.9-1.1 1.6' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.3' r='0.9' fill='%23000'/%3E%3C/svg%3E");
}
.nav-sections .customer-menu > .header.links > li.icon-privacy > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='3.5' y='7' width='9' height='7' rx='1.2' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='3.5' y='7' width='9' height='7' rx='1.2' fill='%23000'/%3E%3C/svg%3E");
}
.nav-sections .customer-menu > .header.links > li.icon-support > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8a5 5 0 0 1 10 0v3.2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='1.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Crect x='11.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Cpath d='M11.5 11.7v.6a2 2 0 0 1-2 2H8.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='7.2' cy='14.3' r='1' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8a5 5 0 0 1 10 0v3.2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='1.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Crect x='11.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Cpath d='M11.5 11.7v.6a2 2 0 0 1-2 2H8.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='7.2' cy='14.3' r='1' fill='%23000'/%3E%3C/svg%3E");
}
/* My Support Tickets — the Mirasvit Helpdesk top.links block hardcodes
   its own <li class="link helpdesk wishlist">, bypassing the class
   argument other blocks accept, so it's targeted by that class too */
.nav-sections .customer-menu > .header.links > li.helpdesk > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8a5 5 0 0 1 10 0v3.2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='1.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Crect x='11.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Cpath d='M11.5 11.7v.6a2 2 0 0 1-2 2H8.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='7.2' cy='14.3' r='1' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8a5 5 0 0 1 10 0v3.2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='1.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Crect x='11.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Cpath d='M11.5 11.7v.6a2 2 0 0 1-2 2H8.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='7.2' cy='14.3' r='1' fill='%23000'/%3E%3C/svg%3E");
}
/* Sign Out — always red, mirroring the Logout tile on the My Account grid */
.nav-sections .customer-menu > .header.links > li.authorization-link > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 3H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.5 8H14M14 8l-2.3-2.3M14 8l-2.3 2.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 3H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.5 8H14M14 8l-2.3-2.3M14 8l-2.3 2.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-color: #F66560 !important;
}
.nav-sections .customer-menu > .header.links > li.authorization-link > a {
    color: #F66560 !important;
}
/* Sign Out — push to the very last tile, matching the My Account
   sidebar grid where Logout is always last. */
.nav-sections .customer-menu > .header.links > li.authorization-link {
    order: 99;
}

/* --------------------------------------------------------------------
   Sidebar navigation
   Live rendered wrapper: <div class="block block-collapsible-nav"> — the
   blank theme's Magento_Customer/layout/customer_account.xml overrides
   block_css from the module default "account-nav", so selectors cover BOTH
   via :is(). Inside: <ul class="nav items"><li class="nav item icon-X">
   (icon class copied onto the <li> by Gwl_Header NavigationLinks plugin;
   the current item renders <strong> with no class of its own).
   -------------------------------------------------------------------- */
/* Sidebar container: white card on desktop, matching the dashboard/address
   cards elsewhere. Reset back to transparent on mobile since there the
   block collapses to just the "My Account" title bar and the actual menu
   opens in its own bottom-sheet overlay with its own background. */
.block:is(.account-nav, .block-collapsible-nav) {
    background: #fff !important;
    border: 1px solid var(--gwl-account-border) !important;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    margin-bottom: 24px !important;
    padding: 16px !important;
}
@media (max-width: 767px) {
    .block:is(.account-nav, .block-collapsible-nav) {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}
.block:is(.account-nav, .block-collapsible-nav) .title {
    background: transparent !important;
    border: none !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #000000 !important;
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item {
    margin: 0 0 2px !important;
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item > a,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.current > strong {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 11px 14px !important;
    border-radius: 8px;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: #1a1a1f !important;
    text-decoration: none !important;
}
/* Icons are inline SVGs (via mask-image, so they inherit color like the
   header's currentColor SVGs) rather than an icon font — see the per-class
   mask-image rules below. */
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item[class*="icon-"] > a:before,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item[class*="icon-"] > strong:before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    background-color: var(--gwl-account-muted);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item > a:hover {
    background: var(--gwl-account-surface);
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.current > strong {
    background: var(--gwl-account-current-bg) !important;
    border-radius: 8px;
    color: var(--gwl-account-blue) !important;
    font-weight: 600;
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.current > strong:before {
    background-color: var(--gwl-account-blue);
}
/* Hide the delimiter <li>s in favor of a border-bottom on the last item of each group */
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item .delimiter,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.delimiter {
    display: none !important;
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-wishlist,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-giftcard,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-support {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--gwl-account-border) !important;
}

/* icon glyphs, mapped via the class added to each nav link in layout XML —
   SVG mask-image so they inherit color like the header's currentColor icons */
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-account > a:before,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-account > strong:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 8a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm0 1c-2.7 0-5 1.5-5 3.4V14h10v-1.6C13 10.5 10.7 9 8 9zm0-8a2 2 0 1 1-2 2 2 2 0 0 1 2-2zm0 9c2.1 0 4 .9 4 2.4V13H4v-.6C4 10.9 5.9 10 8 10z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 8a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm0 1c-2.7 0-5 1.5-5 3.4V14h10v-1.6C13 10.5 10.7 9 8 9zm0-8a2 2 0 1 1-2 2 2 2 0 0 1 2-2zm0 9c2.1 0 4 .9 4 2.4V13H4v-.6C4 10.9 5.9 10 8 10z'/%3E%3C/svg%3E");
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-orders > a:before,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-orders > strong:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M5.2 4V3.5a3.3 3.3 0 0 1 6.6 0V4h2.4l-.8 9.6H3.6L2.8 4zm1 0h4.6V3.5a2.3 2.3 0 0 0-4.6 0zm-2.3 1 .6 7.6h8L13 5h-1.2v1.7h-1V5h-4.6v1.7h-1V5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M5.2 4V3.5a3.3 3.3 0 0 1 6.6 0V4h2.4l-.8 9.6H3.6L2.8 4zm1 0h4.6V3.5a2.3 2.3 0 0 0-4.6 0zm-2.3 1 .6 7.6h8L13 5h-1.2v1.7h-1V5h-4.6v1.7h-1V5z'/%3E%3C/svg%3E");
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-wishlist > a:before,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-wishlist > strong:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 14.2 1.9 8.1A3.9 3.9 0 1 1 7.4 2.6L8 3.2l.6-.6A3.9 3.9 0 1 1 14.1 8L8 14.2zm-5.4-7a2.9 2.9 0 0 0 0 4.1L8 12.8l5.4-5.5a2.9 2.9 0 1 0-4.1-4.1L8 4.6 6.7 3.3a2.9 2.9 0 0 0-4.1 0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 14.2 1.9 8.1A3.9 3.9 0 1 1 7.4 2.6L8 3.2l.6-.6A3.9 3.9 0 1 1 14.1 8L8 14.2zm-5.4-7a2.9 2.9 0 0 0 0 4.1L8 12.8l5.4-5.5a2.9 2.9 0 1 0-4.1-4.1L8 4.6 6.7 3.3a2.9 2.9 0 0 0-4.1 0z'/%3E%3C/svg%3E");
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-address > a:before,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-address > strong:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 1a5 5 0 0 0-5 5c0 3.75 5 9 5 9s5-5.25 5-9a5 5 0 0 0-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 1a5 5 0 0 0-5 5c0 3.75 5 9 5 9s5-5.25 5-9a5 5 0 0 0-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E");
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-info > a:before,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-info > strong:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='7.25' y='6.8' width='1.5' height='4.7' rx='0.3' fill='%23000'/%3E%3Ccircle cx='8' cy='4.3' r='0.95' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='7.25' y='6.8' width='1.5' height='4.7' rx='0.3' fill='%23000'/%3E%3Ccircle cx='8' cy='4.3' r='0.95' fill='%23000'/%3E%3C/svg%3E");
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-giftcard > a:before,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-giftcard > strong:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='6.5' width='12' height='7.5' rx='0.5' fill='%23000'/%3E%3Crect x='1.5' y='4.3' width='13' height='2.4' rx='0.4' fill='%23000'/%3E%3Crect x='7.3' y='4.3' width='1.4' height='9.7' fill='%23000'/%3E%3Ccircle cx='6' cy='3' r='1.3' fill='%23000'/%3E%3Ccircle cx='10' cy='3' r='1.3' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='6.5' width='12' height='7.5' rx='0.5' fill='%23000'/%3E%3Crect x='1.5' y='4.3' width='13' height='2.4' rx='0.4' fill='%23000'/%3E%3Crect x='7.3' y='4.3' width='1.4' height='9.7' fill='%23000'/%3E%3Ccircle cx='6' cy='3' r='1.3' fill='%23000'/%3E%3Ccircle cx='10' cy='3' r='1.3' fill='%23000'/%3E%3C/svg%3E");
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-reward > a:before,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-reward > strong:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 1.5l1.85 3.9 4.3.6-3.1 3 .75 4.3L8 11.4l-3.8 2 .74-4.3-3.1-3 4.3-.6L8 1.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 1.5l1.85 3.9 4.3.6-3.1 3 .75 4.3L8 11.4l-3.8 2 .74-4.3-3.1-3 4.3-.6L8 1.5z'/%3E%3C/svg%3E");
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-reviews > a:before,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-reviews > strong:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='2.5' width='13' height='8.5' rx='2' fill='%23000'/%3E%3Cpath fill='%23000' d='M4 11v3l3.2-3H4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='2.5' width='13' height='8.5' rx='2' fill='%23000'/%3E%3Cpath fill='%23000' d='M4 11v3l3.2-3H4z'/%3E%3C/svg%3E");
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-newsletter > a:before,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-newsletter > strong:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='3.5' width='14' height='9' rx='1' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M1.5 4.2l6.5 4.6 6.5-4.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='3.5' width='14' height='9' rx='1' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M1.5 4.2l6.5 4.6 6.5-4.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-invitations > a:before,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-invitations > strong:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 6.5l7-4 7 4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1' y='6.5' width='14' height='7.5' rx='1' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M1.3 7l6.7 4 6.7-4' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 6.5l7-4 7 4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1' y='6.5' width='14' height='7.5' rx='1' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M1.3 7l6.7 4 6.7-4' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-returns > a:before,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-returns > strong:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M4 5H1.5V2.5L2.9 3.9A6 6 0 1 1 1.6 10l1.4-.6A4.5 4.5 0 1 0 4 5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M4 5H1.5V2.5L2.9 3.9A6 6 0 1 1 1.6 10l1.4-.6A4.5 4.5 0 1 0 4 5z'/%3E%3C/svg%3E");
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-questions > a:before,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-questions > strong:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M6 6.3a2 2 0 1 1 3.2 1.6c-.7.5-1.1.9-1.1 1.6' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.3' r='0.9' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M6 6.3a2 2 0 1 1 3.2 1.6c-.7.5-1.1.9-1.1 1.6' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.3' r='0.9' fill='%23000'/%3E%3C/svg%3E");
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-privacy > a:before,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-privacy > strong:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='3.5' y='7' width='9' height='7' rx='1.2' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='3.5' y='7' width='9' height='7' rx='1.2' fill='%23000'/%3E%3C/svg%3E");
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-logout > a:before,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-logout > strong:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 3H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.5 8H14M14 8l-2.3-2.3M14 8l-2.3 2.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 3H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.5 8H14M14 8l-2.3-2.3M14 8l-2.3 2.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-support > a:before,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-support > strong:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8a5 5 0 0 1 10 0v3.2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='1.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Crect x='11.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Cpath d='M11.5 11.7v.6a2 2 0 0 1-2 2H8.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='7.2' cy='14.3' r='1' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8a5 5 0 0 1 10 0v3.2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='1.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Crect x='11.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Cpath d='M11.5 11.7v.6a2 2 0 0 1-2 2H8.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='7.2' cy='14.3' r='1' fill='%23000'/%3E%3C/svg%3E");
}

/* Logout — always red */
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-logout > a {
    color: #F66560 !important;
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-logout > a:before,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-logout > strong:before {
    background-color: #F66560 !important;
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-logout > a:hover {
    background: rgba(246, 101, 96, 0.08);
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-wishlist,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-giftcard,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-privacy {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--gwl-account-border) !important;
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-logout > a:before,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-logout > strong:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 3H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.5 8H14M14 8l-2.3-2.3M14 8l-2.3 2.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 3H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.5 8H14M14 8l-2.3-2.3M14 8l-2.3 2.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Logout — always red */
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-logout > a {
    color: #F66560 !important;
}
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-logout > a:before,
:is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-logout > strong:before {
    background-color: #F66560 !important;
}

/* --------------------------------------------------------------------
   Mobile — My Account: expanded collapsible nav becomes a fixed
   bottom-sheet grid overlay. The native `.title` tap already toggles
   `.content`'s `active` class (mage.toggleAdvanced, core Magento) — this
   only restyles that existing expanded state, on every account page
   (dashboard included), so it never overlaps page content underneath it.
   Stops above the bottom nav bar (64px) so that bar — z-index 1100,
   higher than this overlay — stays visible and usable while open.
   -------------------------------------------------------------------- */
.block:is(.account-nav, .block-collapsible-nav) .gwl-account-menu-close {
    display: none;
}
/* Persistent floating "Go Back" trigger — every account page, opens the
   same overlay grid. Hidden while the overlay is already open (the ×
   close button takes over then), and hidden entirely on desktop. */
.gwl-account-go-back {
    display: none;
}
@media (max-width: 767px) {
    .account .gwl-account-go-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        position: fixed;
        left: 16px;
        bottom: 82px;
        z-index: 950;
        background: #fff;
        border: 1.5px solid var(--gwl-account-blue);
        border-radius: 999px;
        padding: 8px 12px 8px 16px;
        font-family: 'Work Sans', sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: var(--gwl-account-blue);
        box-shadow: 0 2px 8px rgba(16, 24, 40, 0.1);
        cursor: pointer;
    }
    .account .gwl-account-go-back__icon {
        width: 14px;
        height: 14px;
        background-color: var(--gwl-account-blue);
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M5.3 2.3a1 1 0 0 0 0 1.4L9.6 8l-4.3 4.3a1 1 0 1 0 1.4 1.4l5-5a1 1 0 0 0 0-1.4l-5-5a1 1 0 0 0-1.4 0z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M5.3 2.3a1 1 0 0 0 0 1.4L9.6 8l-4.3 4.3a1 1 0 1 0 1.4 1.4l5-5a1 1 0 0 0 0-1.4l-5-5a1 1 0 0 0-1.4 0z'/%3E%3C/svg%3E");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }
    .account:has(.block-collapsible-nav .content.active) .gwl-account-go-back {
        display: none;
    }
}
/* Persistent floating "Menu" trigger — opposite side from Go Back —
   opens the same overlay grid. Replaces the native collapsible title
   bar as the way to open the menu, so that title bar is hidden below
   (page title/subtitle are untouched, only the nav's own toggle bar). */
.gwl-account-open-menu {
    display: none;
}
@media (max-width: 767px) {
    .account .gwl-account-open-menu {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        position: fixed;
        right: 16px;
        bottom: 82px;
        z-index: 950;
        background: #fff;
        border: 1.5px solid var(--gwl-account-blue);
        border-radius: 999px;
        padding: 8px 16px;
        font-family: 'Work Sans', sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: var(--gwl-account-blue);
        box-shadow: 0 2px 8px rgba(16, 24, 40, 0.1);
        cursor: pointer;
    }
    .account .gwl-account-open-menu__icon {
        width: 14px;
        height: 14px;
        background-color: var(--gwl-account-blue);
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='6' height='6' rx='1' fill='%23000'/%3E%3Crect x='9' y='1' width='6' height='6' rx='1' fill='%23000'/%3E%3Crect x='1' y='9' width='6' height='6' rx='1' fill='%23000'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1' fill='%23000'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='6' height='6' rx='1' fill='%23000'/%3E%3Crect x='9' y='1' width='6' height='6' rx='1' fill='%23000'/%3E%3Crect x='1' y='9' width='6' height='6' rx='1' fill='%23000'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1' fill='%23000'/%3E%3C/svg%3E");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }
    .account:has(.block-collapsible-nav .content.active) .gwl-account-open-menu {
        display: none;
    }
    /* Hide the native toggle's caret/dropdown indicator and disable its
       click entirely — the floating "Menu" button above replaces it as
       the only way to open the menu. NOTE: the page's own separate H1
       title (.page-title-wrapper .page-title) is already hidden on
       mobile by the base theme (body.account .page-main
       .page-title-wrapper .page-title { display:none }), so this
       `.title strong` text IS the effective visible "My Account" heading
       on mobile — it must stay, only the caret and the click go.
       The native widget's toggle handler is bound to the whole block
       (not scoped to .title), so pointer-events:none on .title alone
       just redirects the click to its parent, which still toggles —
       disable it on the whole block while collapsed instead, then
       restore it once .content.active opens (its bottom-sheet items
       must stay clickable). */
    .block:is(.account-nav, .block-collapsible-nav) {
        pointer-events: none !important;
    }
    .block:is(.account-nav, .block-collapsible-nav) .content.active {
        pointer-events: auto !important;
    }
    .block:is(.account-nav, .block-collapsible-nav) .title {
        cursor: default !important;
    }
    .block:is(.account-nav, .block-collapsible-nav) .title:after {
        display: none !important;
    }
}
/* Floating "Menu" trigger hidden for now (toggle-able — remove this
   rule to bring it back; the trigger markup/logic above is untouched). */
.account .gwl-account-open-menu {
    display: none !important;
}
@media (max-width: 767px) {
    .block:is(.account-nav, .block-collapsible-nav):has(.content.active) {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 70px !important;
        left: 0 !important;
        z-index: 1000;
        background: rgba(17, 17, 17, 0.5) !important;
        margin: 0 !important;
    }
    .block:is(.account-nav, .block-collapsible-nav) .content.active {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 70px !important;
        top: auto !important;
        max-height: 70vh;
        overflow: visible !important;
        background: #fff !important;
        border-radius: 16px 16px 0 0;
        padding: 28px 16px 24px !important;
        box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.12);
    }
    /* Floats above the sheet's top edge, overlapping the dimmed backdrop
       seam — `.content.active` no longer clips overflow (scrolling moved
       to `.nav.items` below) so this isn't cut off. */
    .block:is(.account-nav, .block-collapsible-nav) .content.active .gwl-account-menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: -16px;
        left: 16px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
        background: #fff;
        color: var(--gwl-account-text);
        box-shadow: 0 2px 8px rgba(16, 24, 40, 0.2);
        font-size: 20px;
        line-height: 1;
        padding: 0;
        cursor: pointer;
        z-index: 1;
    }
    .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        max-height: calc(70vh - 52px);
        overflow-y: auto;
    }
    .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item {
        margin: 0 !important;
    }
    .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-wishlist,
    .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-giftcard,
    .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-support {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: 0 !important;
    }
    .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item > a,
    .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.current > strong {
        flex-direction: column;
        gap: 8px;
        padding: 16px 8px !important;
        border: 1px solid var(--gwl-account-border);
        border-radius: 12px;
        text-align: center;
        font-size: 11px;
        line-height: 14px;
    }
    .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item[class*="icon-"] > a:before,
    .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item[class*="icon-"] > strong:before {
        width: 22px;
        height: 22px;
    }
}

/* --------------------------------------------------------------------
   Mobile — My Account: bottom tab bar (Shop / Discovery / Services /
   Cart). Wired into customer_account.xml (every account page) and also
   into cms_page_view_id_refund.xml / cms_page_view_id_privacy-policy-
   cookie-restriction-mode.xml (those two CMS pages specifically) — see
   those layout files for why it's opt-in per page rather than sitewide.
   Hidden by default — only shown below the mobile breakpoint.
   -------------------------------------------------------------------- */
.account .gwl-account-bottom-nav,
.cms-refund .gwl-account-bottom-nav,
.cms-privacy-policy-cookie-restriction-mode .gwl-account-bottom-nav {
    display: none;
}
@media (max-width: 767px) {
    .account .gwl-account-bottom-nav,
    .cms-refund .gwl-account-bottom-nav,
    .cms-privacy-policy-cookie-restriction-mode .gwl-account-bottom-nav {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        background: #fff;
        border-top: 1px solid var(--gwl-account-border);
        box-shadow: 0 -2px 8px rgba(16, 24, 40, 0.06);
    }
    .account .gwl-account-bottom-nav__list,
    .cms-refund .gwl-account-bottom-nav__list,
    .cms-privacy-policy-cookie-restriction-mode .gwl-account-bottom-nav__list {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .account .gwl-account-bottom-nav__item,
    .cms-refund .gwl-account-bottom-nav__item,
    .cms-privacy-policy-cookie-restriction-mode .gwl-account-bottom-nav__item {
        flex: 1 1 0;
    }
    .account .gwl-account-bottom-nav__link,
    .cms-refund .gwl-account-bottom-nav__link,
    .cms-privacy-policy-cookie-restriction-mode .gwl-account-bottom-nav__link {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 8px 4px 10px;
        text-decoration: none;
        color: var(--gwl-account-text);
        font-family: 'Work Sans', sans-serif;
        font-size: 11px;
        font-weight: 500;
    }
    .account .gwl-account-bottom-nav__link svg,
    .cms-refund .gwl-account-bottom-nav__link svg,
    .cms-privacy-policy-cookie-restriction-mode .gwl-account-bottom-nav__link svg {
        width: 20px;
        height: 20px;
    }
    .account .gwl-account-bottom-nav__link--disabled,
    .cms-refund .gwl-account-bottom-nav__link--disabled,
    .cms-privacy-policy-cookie-restriction-mode .gwl-account-bottom-nav__link--disabled {
        color: var(--gwl-account-text);
        opacity: 1;
        pointer-events: none;
        cursor: default;
    }
    .account .gwl-account-bottom-nav__link.is-active,
    .cms-refund .gwl-account-bottom-nav__link.is-active,
    .cms-privacy-policy-cookie-restriction-mode .gwl-account-bottom-nav__link.is-active {
        color: var(--gwl-account-blue);
        font-weight: 600;
    }
    /* Leave room at the bottom of every account page so content isn't
       hidden behind the fixed bar. */
    .account .page-wrapper,
    .account .columns,
    .cms-refund .page-wrapper,
    .cms-privacy-policy-cookie-restriction-mode .page-wrapper {
        padding-bottom: 64px;
    }
    /* Hide (not remove) the Contact Us button and WhatsApp bubble on
       account pages so they don't collide with the new bottom bar. The
       WhatsApp widget has no stable class/id — its fixed-position
       wrapper is targeted via the wa.me link it contains. */
    .account #hdmx__contact-button,
    .account div:has(> a[href*="wa.me"]),
    .cms-refund #hdmx__contact-button,
    .cms-refund div:has(> a[href*="wa.me"]),
    .cms-privacy-policy-cookie-restriction-mode #hdmx__contact-button,
    .cms-privacy-policy-cookie-restriction-mode div:has(> a[href*="wa.me"]) {
        display: none !important;
    }
}

/* --------------------------------------------------------------------
   Mobile — My Account: show the breadcrumb (hidden sitewide below
   768px by the base theme) and give the page title/subtitle a mobile
   pass, on every account page.
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
    .account .breadcrumbs {
        display: block !important;
    }
}
/* --------------------------------------------------------------------
   Dashboard cards — Account Information / Newsletter / Address
   -------------------------------------------------------------------- */
.account .block-dashboard-info,
.account .block-dashboard-newsletter,
.account .block-dashboard-addresses,
.account .block-dashboard-orders {
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.account .block-dashboard-info .block-title,
.account .block-dashboard-newsletter .block-title,
.account .block-dashboard-addresses .block-title,
.account .block-dashboard-orders .block-title.order {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-bottom: 0 !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}
/* Pin the heading flush-left and push the Edit/actions link(s) flush
   right via auto margin — more predictable than space-between here,
   which was rendering headings with inconsistent left offsets across
   these three cards (Newsletter/Address visibly indented vs Account
   Information) despite identical markup and CSS. */
.account .block-dashboard-info .block-title > .block-title-actions,
.account .block-dashboard-newsletter .block-title > .block-title-actions,
.account .block-dashboard-addresses .block-title > .block-title-actions,
.account .block-dashboard-orders .block-title.order > .block-title-actions,
.account .block-dashboard-addresses .block-title > a.action,
.account .block-dashboard-orders .block-title.order > a.action {
    margin-left: auto !important;
}
.account .block-dashboard-info .block-title strong,
.account .block-dashboard-newsletter .block-title strong,
.account .block-dashboard-addresses .block-title strong,
.account .block-dashboard-orders .block-title.order strong {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--gwl-account-title) !important;
}
.account .block-title-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.account .block-title-actions .action,
.account .block-dashboard-addresses .block-title > a.action,
.account .block-dashboard-orders .block-title.order > a.action {
    color: var(--gwl-account-blue) !important;
    font-size: 14px;
    text-decoration: none !important;
}
.account .block-title-actions .action:hover,
.account .block-dashboard-addresses .block-title > a.action:hover,
.account .block-dashboard-orders .block-title.order > a.action:hover {
    text-decoration: underline !important;
}
.account .block-title-actions .action + .action {
    padding-left: 10px;
    border-left: 1px solid var(--gwl-account-border);
}
.account .block-dashboard-info .box-content,
.account .block-dashboard-newsletter .box-content {
    color: var(--gwl-account-text);
    font-size: 14px;
    line-height: 24px;
}

.account .block-dashboard-addresses .block-content {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 16px !important;
}
.account .block-dashboard-addresses .box {
    flex: 1 1 0 !important;
    min-width: 220px !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.account .block-dashboard-addresses .box-title {
    display: block !important;
}
.account .block-dashboard-addresses .box-title span {
    color: var(--gwl-account-muted);
    font-size: 13px;
    font-weight: 400;
}
.account .block-dashboard-addresses .box-content {
    margin-top: 4px;
    color: var(--gwl-account-text);
    font-size: 14px;
    line-height: 20px;
}
.account .block-dashboard-addresses .box-content address {
    font-style: normal;
}

@media only screen and (max-width: 767px) {
    .account .block-dashboard-addresses .block-content {
        flex-direction: column !important;
    }
}

@media only screen and (max-width: 767px) {
    .account .block-dashboard-addresses .block-content {
        flex-direction: column !important;
    }
}

/* --------------------------------------------------------------------
   Recent Orders table
   -------------------------------------------------------------------- */
.account .block-dashboard-orders .table-wrapper.orders-recent,
.account .block-dashboard-orders .table-wrapper.reviews-recent {
    overflow-x: auto;
    border-radius: 8px;
}
.account .block-dashboard-orders table.table-order-items.recent thead th {
    text-align: right;
    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;
}
.account .block-dashboard-orders table.table-order-items.recent thead th:first-child {
    border-top-right-radius: 2px;
}
.account .block-dashboard-orders table.table-order-items.recent thead th:last-child {
    border-top-left-radius: 2px;
}
.account .block-dashboard-orders table.table-order-items.recent tbody td {
    border-top: 1px solid var(--gwl-account-border);
    padding: 10px 12px;
    font-size: 14px;
    color: var(--gwl-account-text);
    vertical-align: middle;
}
.account .block-dashboard-orders table.table-order-items.recent .order-number-link {
    color: var(--gwl-account-blue);
    text-decoration: none;
    font-weight: 500;
}
.account .block-dashboard-orders table.table-order-items.recent .order-number-link:hover {
    text-decoration: underline;
}
.account .block-dashboard-orders table.table-order-items.recent .col.actions {
    text-align: left;
    white-space: nowrap;
}
.account .block-dashboard-orders table.table-order-items.recent .col.actions .action {
    color: var(--gwl-account-blue);
    text-decoration: none;
    font-size: 13px;
}
.account .block-dashboard-orders table.table-order-items.recent .col.actions .action + .action {
    margin-right: 12px;
}
.account .block-dashboard-orders .order-status-pill {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.account .block-dashboard-orders .order-status-pill.status-success { background: #1EA672; }
.account .block-dashboard-orders .order-status-pill.status-danger { background: #F04438; }
.account .block-dashboard-orders .order-status-pill.status-warning { background: #F59E0B; }
.account .block-dashboard-orders .order-status-pill.status-neutral { background: #8A94A6; }

/* --------------------------------------------------------------------
   Recent Orders — mobile card list (per product: image, name, price,
   status, date). Desktop keeps the existing data table unchanged; the
   two are mutually exclusive via the media queries below.
   -------------------------------------------------------------------- */
.account .gwl-recent-orders {
    display: none;
}
@media (max-width: 767px) {
    .account .block-dashboard-orders .table-wrapper.orders-recent,
    .account .block-order-history-card .table-wrapper.orders-history {
        display: none;
    }
    .account .gwl-recent-orders {
        display: block;
    }
    .account .gwl-recent-order {
        border: 1px solid var(--gwl-account-border);
        border-radius: 8px;
        padding: 16px;
    }
    .account .gwl-recent-order + .gwl-recent-order {
        margin-top: 16px;
    }
    .account .gwl-recent-order__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 12px;
        margin-bottom: 12px;
        border-bottom: 1px solid var(--gwl-account-border);
    }
    .account .gwl-recent-order__id {
        font-size: 13px;
        color: var(--gwl-account-muted);
    }
    .account .gwl-recent-order__id .order-number-link {
        color: var(--gwl-account-blue);
        text-decoration: none;
        font-weight: 600;
    }
    .account .gwl-recent-order__reorder {
        color: var(--gwl-account-blue);
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }
    .account .gwl-recent-order__item {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .account .gwl-recent-order__item + .gwl-recent-order__item {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--gwl-account-border);
    }
    .account .gwl-recent-order__row {
        display: flex;
        align-items: stretch;
        gap: 12px;
    }
    .account .gwl-recent-order__image {
        flex: 0 0 auto;
        width: 60px;
        min-height: 60px;
        border-radius: 8px;
        overflow: hidden;
        background: var(--gwl-account-surface);
        display: block;
    }
    .account .gwl-recent-order__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .account .gwl-recent-order__info {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .account .gwl-recent-order__top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
    }
    .account .gwl-recent-order__name {
        font-size: 14px;
        font-weight: 600;
        color: var(--gwl-account-title);
        line-height: 20px;
    }
    /* The site-wide currency-symbol font (.price) doesn't render reliably
       at this size/weight — keep this card's price as plain, readable text. */
    .account .gwl-recent-order__price,
    .account .gwl-recent-order__price .price {
        font-family: 'Work Sans', sans-serif !important;
    }
    .account .gwl-recent-order__price {
        font-size: 14px;
        font-weight: 600;
        color: var(--gwl-account-title);
        white-space: nowrap;
        flex: 0 0 auto;
    }
    .account .gwl-recent-order__info .order-status-pill {
        align-self: flex-start;
    }
    .account .gwl-recent-order__date {
        display: block;
        text-align: end;
        font-size: 12px;
        color: var(--gwl-account-muted);
    }
}


/* --------------------------------------------------------------------
   My Orders History Page Styling (Arabic RTL)
   -------------------------------------------------------------------- */
.sales-order-history .page-title-wrapper {
    margin-bottom: 24px !important;
}
.sales-order-history .page-title-wrapper:after {
    content: "ستوضع جميع طلباتك هنا";
    display: block;
    font-size: 14px;
    color: var(--gwl-account-muted);
    margin-top: 6px;
    font-weight: 400;
    font-family: 'SarFont', sans-serif !important;
}
.block-order-history-card {
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.block-order-history-card .table-wrapper.orders-history {
    margin: 0 !important;
    overflow-x: auto;
}
.block-order-history-card table.table-order-items.history {
    width: 100%;
    border-collapse: collapse;
}
.block-order-history-card table.table-order-items.history thead th {
    text-align: right;
    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: 12px 16px;
}
.block-order-history-card table.table-order-items.history tbody td {
    border-bottom: 1px solid var(--gwl-account-border);
    padding: 16px;
    font-size: 14px;
    color: var(--gwl-account-text);
    vertical-align: middle;
}
.block-order-history-card table.table-order-items.history tbody tr:last-child td {
    border-bottom: none;
}
.block-order-history-card table.table-order-items.history tbody td.id a.order-id-link {
    color: var(--gwl-account-blue) !important;
    font-weight: 600;
    text-decoration: underline !important;
}
.block-order-history-card table.table-order-items.history tbody td.actions a.action.order-reorder,
.block-order-history-card table.table-order-items.history tbody td.actions a.action.order-track {
    color: var(--gwl-account-blue) !important;
    font-weight: 600;
    text-decoration: underline !important;
    margin-left: 12px;
    margin-right: 0;
    display: inline-block;
}
.block-order-history-card table.table-order-items.history tbody td.actions a.action.order-reorder:hover,
.block-order-history-card table.table-order-items.history tbody td.actions a.action.order-track:hover {
    color: #1d2b78 !important;
}

/* Pagination toolbar */
.block-order-history-card .order-products-toolbar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--gwl-account-border);
}
.block-order-history-card .order-products-toolbar .pages {
    display: block;
}
.block-order-history-card .order-products-toolbar .pages-items {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.block-order-history-card .order-products-toolbar .pages-items li.item {
    margin: 0 !important;
}
.block-order-history-card .order-products-toolbar .pages-items a.page,
.block-order-history-card .order-products-toolbar .pages-items strong.page,
.block-order-history-card .order-products-toolbar .pages-items a.action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gwl-account-text);
    text-decoration: none;
    transition: all 0.2s ease;
}
.block-order-history-card .order-products-toolbar .pages-items a.page:hover,
.block-order-history-card .order-products-toolbar .pages-items a.action:hover {
    background: var(--gwl-account-surface);
    color: var(--gwl-account-blue);
}
.block-order-history-card .order-products-toolbar .pages-items li.current strong.page {
    background: var(--gwl-account-current-bg);
    color: var(--gwl-account-blue) !important;
    font-weight: 600;
}

/* --------------------------------------------------------------------
   RTL column swap — My Account pages only
   Theme desktop CSS floats .sidebar-main left / .column.main right
   (LTR 2columns-left); mirror them so the nav sits on the RIGHT per
   the Arabic mockup.
   -------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
    .account.page-layout-2columns-left .column.main {
        float: left !important;
    }
    .account.page-layout-2columns-left .sidebar-main,
    .account.page-layout-2columns-left .sidebar-additional {
        float: right !important;
        padding-left: 20px !important;
        padding-right: 0 !important;
    }
}

/* ==========================================================================
   GWL Wishlist — Figma card grid (wishlist_index_index)
   Uses CSS logical properties (inline-start/end) so the identical rules
   serve both the LTR and RTL themes.
   ========================================================================== */
.wishlist-index-index .form-wishlist-items > .actions-toolbar {
    display: none !important;
}
/* view.phtml prints the pager above and below the grid; keep only the bottom one */
.wishlist-index-index .toolbar.wishlist-toolbar {
    display: none;
}
.wishlist-index-index .form-wishlist-items ~ .toolbar.wishlist-toolbar {
    display: block;
    margin-top: 8px;
}

.wishlist-index-index .products-grid.wishlist .product-items {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 20px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.wishlist-index-index .products-grid.wishlist li.product-item {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
}
/* Cards in the same row have uneven content above the comment field
   (title wraps to 1–3 lines, dims line is optional, old-price is
   optional) — stretch each card to the grid row's full height and pin
   the comment + qty/cart block to the bottom so it always lines up
   across a row regardless of what's above it. */
.wishlist-index-index .products-grid.wishlist .product-item-info {
    position: relative;
    width: auto !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.wishlist-index-index .products-grid.wishlist .comment-box {
    margin-top: auto !important;
}

/* media block: photo + badges + remove X */
.wishlist-index-index .gwl-wl-media {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f5f6;
    aspect-ratio: 4 / 3;
}
.wishlist-index-index .gwl-wl-media .prolabels-wrapper {
    display: block;
    width: 100%;
    height: 100%;
}
.wishlist-index-index .gwl-wl-media .product-item-photo {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    height: 100%;
}
/* Stock Luma mobile CSS caps .product-image-container at max-width:80px on
   the wishlist grid — override so the Figma card photo fills the tile. */
.wishlist-index-index .gwl-wl-media .product-image-container,
.wishlist-index-index .gwl-wl-media .product-image-wrapper {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
}
.wishlist-index-index .gwl-wl-media img.product-image-photo {
    display: block;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
.wishlist-index-index .gwl-wl-badges {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    display: flex;
    gap: 6px;
    /* stock .product-image-wrapper sets z-index:1 — stay above it */
    z-index: 2;
}
.wishlist-index-index .gwl-wl-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    color: #fff;
}
.wishlist-index-index .gwl-wl-badge--new { background: #2EC175; }
.wishlist-index-index .gwl-wl-badge--off { background: var(--gwl-account-blue); }
.wishlist-index-index .gwl-wl-badge--stock { background: #6d7178; }
.wishlist-index-index .gwl-wl-remove {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #1a1a1f !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    /* stock .product-image-wrapper sets z-index:1 — stay above it */
    z-index: 2;
}
.wishlist-index-index .gwl-wl-remove:hover {
    background: #fff;
}

/* title row: name + pencil */
.wishlist-index-index .gwl-wl-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
}
.wishlist-index-index .gwl-wl-title-row .product-item-name {
    margin: 0 !important;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}
.wishlist-index-index .gwl-wl-title-row .product-item-link {
    color: #1a1a1f !important;
    text-decoration: none !important;
}
.wishlist-index-index .gwl-wl-title-row .product-item-link:hover {
    text-decoration: underline !important;
}
.wishlist-index-index .gwl-wl-edit {
    flex: 0 0 auto;
    color: #1a1a1f !important;
    line-height: 1;
    padding-top: 3px;
}
.wishlist-index-index .gwl-wl-dims {
    margin: 2px 0 0 !important;
    font-size: 12px;
    line-height: 18px;
    color: var(--gwl-account-muted);
}

/* price */
.wishlist-index-index .products-grid.wishlist .price-box {
    margin: 8px 0 10px !important;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
/* tile/area-priced products render special+old price inside this extra
   <p> wrapper instead of as direct .price-box children — make it a flex
   row too so both prices stay on one line at card width. */
.wishlist-index-index .products-grid.wishlist .price-box .price-as-configured {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 !important;
}
.wishlist-index-index .products-grid.wishlist .price-box .price {
    font-size: 12px;
    font-weight: 700;
    color: #1a1a1f;
}
.wishlist-index-index .products-grid.wishlist .price-box .old-price .price {
    font-weight: 400;
    color: var(--gwl-account-muted);
    text-decoration: line-through;
}
.wishlist-index-index .products-grid.wishlist .price-box .symbol,
.wishlist-index-index .products-grid.wishlist .price-box .new-symbol {
    font-size: 100% !important;
    font-weight: 400 !important;
}

/* comment */
.wishlist-index-index .comment-box .label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.wishlist-index-index textarea.product-item-comment {
    width: 100%;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 10px 12px;
    background: #F7F9FB;
    border: 1px solid var(--gwl-account-border);
    border-radius: 4px;
    font-size: 13px;
    line-height: 18px;
    resize: none;
    overflow: hidden;
}
.wishlist-index-index textarea.product-item-comment::placeholder {
    color: var(--gwl-account-muted);
}

/* qty stepper + add to cart */
/* Stock Luma mobile CSS (styles-m.css, max-width:768px) floats .box-tocart
   and hides .field.qty on the wishlist grid — override both so the Figma
   card's stepper + button row renders full-width on mobile. */
.wishlist-index-index .box-tocart {
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
}
.wishlist-index-index .gwl-wl-qty {
    display: block !important;
    flex: 0 0 auto !important;
}
/* .gwl-wl-tocart-row is a <fieldset class="fieldset ...">, and the base
   theme's .fieldset{display:table} was winning over this (no !important),
   so the qty stepper and Add to Cart button rendered as separate table
   rows stacked on top of each other instead of side by side. */
.wishlist-index-index .gwl-wl-tocart-row {
    display: flex !important;
    align-items: stretch;
    gap: 10px;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    min-inline-size: auto;
}
.wishlist-index-index .gwl-wl-qty {
    margin: 0 !important;
}
.wishlist-index-index .gwl-wl-qty > .label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.wishlist-index-index .gwl-wl-stepper {
    display: flex;
    align-items: stretch;
    height: 40px;
    border: 1px solid var(--gwl-account-border);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}
.wishlist-index-index .gwl-qty-btn {
    width: 30px;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #1a1a1f !important;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.wishlist-index-index .gwl-qty-btn:disabled {
    color: #b9bec7 !important;
    cursor: default;
}
.wishlist-index-index .gwl-wl-stepper input.qty {
    width: 34px;
    height: auto !important;
    border: 0 !important;
    background: #fff !important;
    text-align: center;
    font-size: 13px;
    padding: 0 !important;
    -moz-appearance: textfield;
    appearance: textfield;
}
.wishlist-index-index .gwl-wl-stepper input.qty::-webkit-outer-spin-button,
.wishlist-index-index .gwl-wl-stepper input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.wishlist-index-index .gwl-wl-stepper input.qty:disabled {
    color: #b9bec7;
}
.wishlist-index-index .gwl-wl-tocart-row .product-item-actions {
    flex: 1;
    margin: 0 !important;
    display: flex;
}
.wishlist-index-index .gwl-wl-tocart-row .actions-primary {
    display: flex;
    flex: 1;
}
.wishlist-index-index .gwl-wl-tocart-row button.action.tocart.primary {
    flex: 1;
    height: 40px;
    background: var(--gwl-account-blue) !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    padding: 0 10px !important;
    box-shadow: none !important;
    cursor: pointer;
}
.wishlist-index-index .gwl-wl-tocart-row button.action.tocart.primary:hover:not(:disabled) {
    background: #221796 !important;
}
.wishlist-index-index .gwl-wl-tocart-row button.action.tocart.primary:disabled {
    background: #c7cbd4 !important;
    color: #fff !important;
    cursor: not-allowed;
    opacity: 1 !important;
}

/* pager */
.wishlist-index-index .toolbar.wishlist-toolbar .toolbar-amount,
.wishlist-index-index .toolbar.wishlist-toolbar .limiter {
    display: none !important;
}
.wishlist-index-index .toolbar.wishlist-toolbar .pages {
    display: flex;
    justify-content: center;
    margin: 20px 0 0;
    float: none !important;
}
.wishlist-index-index .toolbar.wishlist-toolbar .pages-items {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.wishlist-index-index .toolbar.wishlist-toolbar .pages-items li.item {
    margin: 0 !important;
}
.wishlist-index-index .toolbar.wishlist-toolbar .pages a.page,
.wishlist-index-index .toolbar.wishlist-toolbar .pages strong.page,
.wishlist-index-index .toolbar.wishlist-toolbar .pages a.action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 4px;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--gwl-account-text) !important;
    text-decoration: none !important;
}
.wishlist-index-index .toolbar.wishlist-toolbar .pages li.current strong.page {
    background: var(--gwl-account-current-bg);
    color: var(--gwl-account-blue) !important;
    font-weight: 600;
}
.wishlist-index-index .toolbar.wishlist-toolbar .pages a.page:hover,
.wishlist-index-index .toolbar.wishlist-toolbar .pages a.action:hover {
    background: var(--gwl-account-surface);
}

@media only screen and (max-width: 1023px) {
    .wishlist-index-index .products-grid.wishlist .product-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.wishlist-index-index .gwl-wl-tocart-row .gwl-wl-cart-icon {
    display: none;
}
@media only screen and (max-width: 639px) {
    .wishlist-index-index .products-grid.wishlist .product-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 12px;
    }
    .wishlist-index-index .gwl-wl-tocart-row {
        gap: 8px;
    }
    .wishlist-index-index .gwl-wl-tocart-row button.action.tocart.primary span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    .wishlist-index-index .gwl-wl-tocart-row button.action.tocart.primary {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
    }
    .wishlist-index-index .gwl-wl-tocart-row .gwl-wl-cart-icon {
        display: block;
    }
}

/* ==========================================================================
   GWL Address Book — Figma "Address File" page (customer_address_index)
   The default-addresses card reuses .block-dashboard-addresses styles;
   below are the additional-addresses card + table. Logical properties so
   the identical rules serve both LTR and RTL themes.
   ========================================================================== */
/* No outer card here — the Figma "Other Saved Addresses" heading sits
   free above the list, and each .gwl-addr-card below is its own bordered
   card, so this wrapper shouldn't nest them inside a third outer box. */
.account .gwl-address-extra {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 12px;
    box-shadow: none !important;
}
.account .gwl-address-extra .block-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0 !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}
.account .gwl-address-extra .block-title strong {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--gwl-account-title) !important;
}
.account .gwl-address-extra .block-title .action.add {
    color: var(--gwl-account-blue) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline !important;
}
.account .gwl-address-extra .table-wrapper.additional-addresses {
    overflow-x: auto;
    border: 0;
    margin: 0;
}
.account .gwl-address-extra table.table-additional-addresses-items 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;
}
.account .gwl-address-extra table.table-additional-addresses-items tbody td {
    border-top: 1px solid var(--gwl-account-border);
    border-bottom: 0;
    padding: 12px;
    font-size: 13px;
    color: var(--gwl-account-text);
    vertical-align: middle;
}
.account .gwl-address-extra tbody tr:first-child td {
    border-top: 0;
}
.account .gwl-address-extra .gwl-truncate {
    display: inline-block;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}
.account .gwl-address-extra .col.actions {
    white-space: nowrap;
    text-align: end;
}
.account .gwl-address-extra .gwl-addr-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gwl-account-blue) !important;
    text-decoration: none !important;
    padding: 2px 4px;
}
.account .gwl-address-extra .gwl-addr-action + .gwl-addr-action {
    margin-inline-start: 8px;
    padding-inline-start: 12px;
    border-inline-start: 1px solid var(--gwl-account-border);
}
.account .gwl-address-extra .gwl-addr-empty {
    margin: 4px 0 0;
    color: var(--gwl-account-muted);
    font-size: 13px;
}
.account .gwl-address-extra .customer-addresses-toolbar {
    margin-top: 12px;
}
.account .gwl-address-extra .customer-addresses-toolbar .toolbar-amount,
.account .gwl-address-extra .customer-addresses-toolbar .limiter {
    display: none !important;
}
/* the grid template no longer prints the Add/Back toolbar, but keep any
   theme-injected one hidden on this page */
.customer-address-index .column.main > .actions-toolbar {
    display: none !important;
}

/* ==========================================================================
   GWL Address Book — Figma "Address File" default cards
   Default Shipping and Default Billing are now two separate bordered
   cards (address/book.phtml), each with its own Edit link, stacked full
   width — replaces the old shared single-Edit two-column box layout.
   ========================================================================== */
/* .gwl-addr-default still carries .block-dashboard-addresses (shared with
   the account dashboard summary cards), which wraps it in its own big
   bordered/padded card — strip that here so only the two .box cards below
   show a border, instead of nesting them inside a third outer card. */
.customer-address-index .gwl-addr-default {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 20px !important;
}
.customer-address-index .gwl-addr-default .box {
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 2px;
    padding: 16px 20px !important;
    margin: 0 0 12px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    flex: none !important;
    min-width: 0 !important;
}
.customer-address-index .gwl-addr-default .box:last-child {
    margin-bottom: 0 !important;
}
.customer-address-index .gwl-addr-default .box-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.customer-address-index .gwl-addr-default .box-title-row .box-title {
    display: block !important;
}
.customer-address-index .gwl-addr-default .box-title-row .box-title span {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--gwl-account-title) !important;
}
.customer-address-index .gwl-addr-default .box-title-row .action.edit {
    flex: 0 0 auto;
    color: var(--gwl-account-blue) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline !important;
}
.customer-address-index .gwl-addr-default .box-content {
    margin-top: 0 !important;
    color: var(--gwl-account-text);
    font-size: 14px;
    line-height: 22px;
}
.customer-address-index .gwl-addr-default .box-content address {
    font-style: normal;
}
/* the core address formatter renders the phone as a tel: link, which
   otherwise inherits the theme's red anchor color — keep it plain text */
.customer-address-index .gwl-addr-default .box-content address a[href^="tel:"] {
    color: inherit !important;
    text-decoration: none !important;
}

/* ==========================================================================
   GWL Address Book — Figma "Additional addresses" cards
   Replaces the old data table (which only degraded to a horizontally
   scrolling table on mobile) with a stacked card per address: name +
   edit/delete icons, a combined address line, and the phone number.
   ========================================================================== */
.customer-address-index .gwl-addr-cards {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.customer-address-index .gwl-addr-card {
    border: 1px solid var(--gwl-account-border);
    border-radius: 4px;
    padding: 14px 16px;
    margin: 0 0 10px !important;
}
.customer-address-index .gwl-addr-card:last-child {
    margin-bottom: 0 !important;
}
.customer-address-index .gwl-addr-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.customer-address-index .gwl-addr-card__name {
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--gwl-account-title);
}
.customer-address-index .gwl-addr-card__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.customer-address-index .gwl-addr-card__lines,
.customer-address-index .gwl-addr-card__phone {
    margin: 6px 0 0 !important;
    font-size: 13px;
    line-height: 20px;
    color: var(--gwl-account-text);
}

/* ==========================================================================
   GWL Account Edit — Figma "Edit Account Information" (customer_account_edit)
   Pure CSS restyle: the form's fieldsets become cards, fields flow in a
   2-column grid ordered per the mockup. Logical properties for LTR + RTL.
   ========================================================================== */
.customer-account-edit .form-edit-account {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
}
.customer-account-edit .form-edit-account .fieldset {
    box-sizing: border-box !important;
    width: 100% !important;
    float: none !important;
    margin: 0 0 12px !important;
    padding: 16px 20px !important;
    background: #fff;
    border: 1px solid var(--gwl-account-border) !important;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    letter-spacing: normal;
}
.customer-account-edit .form-edit-account .fieldset > .legend {
    /* floating the legend turns it into a real grid/flow item (otherwise
       Chrome renders it on the fieldset border and skips a grid cell) */
    float: inline-start !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: 'Work Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--gwl-account-title) !important;
}
/* the stock template emits <br> after each </legend>; as a grid item it
   silently eats the first cell and shifts every field by one */
.customer-account-edit .form-edit-account .fieldset > br {
    display: none;
}
/* additional_info is a wrapper fieldset — SMSProfile's "Additional
   Information" card is NESTED inside it, so strip the wrapper's chrome
   instead of hiding it */
.customer-account-edit .form-edit-account .fieldset.additional_info {
    background: none;
    border: 0 !important;
    box-shadow: none;
    padding: 0 !important;
    margin: 0 !important;
}
/* "* Required Fields" note */
.customer-account-edit .form-edit-account .fieldset:after {
    margin-top: 10px;
    font-size: 12px;
    color: var(--gwl-account-muted);
}

/* 2-column grids, ordered per the mockup */
.customer-account-edit .form-edit-account .fieldset.info,
.customer-account-edit .form-edit-account .fieldset.password {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    align-items: start;
}
.customer-account-edit .form-edit-account .fieldset.info > .legend,
.customer-account-edit .form-edit-account .fieldset.password > .legend {
    grid-column: 1 / -1;
}
.customer-account-edit .fieldset.info > .field-name-firstname { order: 1; }
.customer-account-edit .fieldset.info > .field-name-lastname { order: 2; }
.customer-account-edit .fieldset.info > .field.choice:has(#change-password) { order: 3; }
.customer-account-edit .fieldset.info > .field.choice:has(#change-email) { order: 4; }
.customer-account-edit .fieldset.info > .field-customer_mobile { order: 5; }
.customer-account-edit .fieldset.info > .field-vat_number { order: 6; }
.customer-account-edit .fieldset.info > .field.choice:has(#assistance_allowed_checkbox) {
    order: 7;
    grid-column: 1 / -1;
}

/* fields: label above input */
.customer-account-edit .form-edit-account .field {
    margin: 0 !important;
}
.customer-account-edit .form-edit-account .field > .label {
    display: block;
    float: none !important;
    width: auto !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    text-align: start !important;
    font-size: 13px;
    font-weight: 500;
    color: var(--gwl-account-text);
}
.customer-account-edit .form-edit-account .field > .control {
    width: 100% !important;
    float: none !important;
}
.customer-account-edit .form-edit-account input.input-text {
    height: 40px;
    width: 100%;
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 4px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--gwl-account-text);
}
.customer-account-edit .form-edit-account input.input-text:focus {
    border-color: var(--gwl-account-blue);
    box-shadow: none;
}

/* checkbox rows (update email / update password / remote assistance)
   Custom-drawn checkbox (appearance:none + painted checkmark) instead of the
   native control — native checkboxes render with inconsistent internal
   padding/box metrics across OS/browser combos (confirmed: correct in our
   own testing, but visibly off-center on at least one real Windows/Chrome
   setup) that flex align-items:center alone can't fully correct. */
.customer-account-edit .form-edit-account .field.choice {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    padding-top: 4px;
}
.customer-account-edit .form-edit-account .field.choice input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    flex-shrink: 0;
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--gwl-account-border);
    border-radius: 3px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
    cursor: pointer;
}
/* suppress the base theme's own ::after checkmark (anchored via position:absolute
   on this element) — we paint our own checkmark via :checked background-image */
.customer-account-edit .form-edit-account .field.choice input[type="checkbox"]::after {
    content: none !important;
}
.customer-account-edit .form-edit-account .field.choice input[type="checkbox"]:checked {
    background-color: var(--gwl-account-blue);
    border-color: var(--gwl-account-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.2 4.3 6.5 11 2.8 7.3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.customer-account-edit .form-edit-account .field.choice .label {
    display: inline-flex !important;
    align-items: center;
    min-height: 15px;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px;
    line-height: normal;
    color: var(--gwl-account-text);
}

/* SMSProfile "Additional Information" card */
.customer-account-edit .fieldset.create.account .field.customer_mobile {
    max-width: 420px;
}
.customer-account-edit .fieldset.create.account .otp_generatenote {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--gwl-account-muted);
}
.customer-account-edit .fieldset.create.account button.send_otp_edit {
    margin-top: 12px !important;
    height: 36px;
    padding: 0 18px !important;
    background: #fff !important;
    border: 1px solid var(--gwl-account-blue) !important;
    border-radius: 4px !important;
    color: var(--gwl-account-blue) !important;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none !important;
}

/* Save */
.customer-account-edit .form-edit-account + .actions-toolbar,
.customer-account-edit .form-edit-account .actions-toolbar {
    margin: 0 0 24px !important;
    display: flex;
    justify-content: flex-end;
}
.customer-account-edit .actions-toolbar .primary {
    float: none !important;
    margin: 0 !important;
}
.customer-account-edit .actions-toolbar button.action.save.primary {
    height: 38px;
    padding: 0 26px !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;
}
.customer-account-edit .actions-toolbar button.action.save.primary:hover {
    background: #221796 !important;
}
.customer-account-edit .actions-toolbar .secondary {
    display: none !important;
}

/* ==========================================================================
   GWL Address Edit/Add — Figma "My Account" design (customer_address_form)
   Pure CSS restyle of the Webkul map-address form: fieldsets become cards,
   the Address fieldset flows in a 2-column grid (Lat/Lng, City/Region,
   Zip/Country paired; Map + Street + VAT + messages/checkboxes full width).
   Logical properties for LTR + RTL.
   ========================================================================== */
.customer-address-form .form-address-edit {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
}
.customer-address-form .form-address-edit .fieldset {
    width: 100% !important;
    float: none !important;
    margin: 0 0 12px !important;
    padding: 16px 20px !important;
    background: #fff;
    border: 1px solid var(--gwl-account-border) !important;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    letter-spacing: normal;
}
.customer-address-form .form-address-edit .fieldset > .legend {
    float: inline-start !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: 'Work Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--gwl-account-title) !important;
}
.customer-address-form .form-address-edit .fieldset > br {
    display: none;
}
.customer-address-form .form-address-edit .fieldset:after {
    margin-top: 10px;
    font-size: 12px;
    color: var(--gwl-account-muted);
}

/* 2-column grid for both fieldsets */
.customer-address-form .form-address-edit .fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    align-items: start;
}
.customer-address-form .form-address-edit .fieldset > .legend {
    grid-column: 1 / -1;
}

/* Fieldset ordering — the AR theme's own edit.phtml groups Lat/Lng/Map under
   "Contact Information" (not "Address") and adds a KSA "National Address"
   field, so the order values differ from the EN template's arrangement. */
.customer-address-form .field.street { order: 1; grid-column: 1 / -1; }
.customer-address-form .field.national-address { order: 2; }
.customer-address-form .field.taxvat { order: 3; }
.customer-address-form .field.city { order: 4; }
.customer-address-form .field.region { order: 5; }
.customer-address-form .field.zip { order: 6; }
.customer-address-form .field.country { order: 7; }
.customer-address-form .fieldset .message.info { order: 8; grid-column: 1 / -1; }
.customer-address-form .field.choice.set { order: 9; grid-column: 1 / -1; }

.customer-address-form .field-name-firstname { order: 1; }
.customer-address-form .field-name-lastname { order: 2; }
.customer-address-form .field.company { order: 3; }
.customer-address-form .field.telephone { order: 4; }
.customer-address-form .field.fax { order: 5; }
.customer-address-form .field.required:has(#latitude) { order: 6; }
.customer-address-form .field.required:has(#longitude) { order: 7; }
.customer-address-form .mapContainer { order: 8; grid-column: 1 / -1; }

/* fields: label above input */
.customer-address-form .form-address-edit .field {
    margin: 0 !important;
}
.customer-address-form .form-address-edit .field > .label {
    display: block;
    float: none !important;
    width: auto !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    text-align: start !important;
    font-size: 13px;
    font-weight: 500;
    color: var(--gwl-account-text);
}
.customer-address-form .form-address-edit .field > .control {
    width: 100% !important;
    float: none !important;
}
.customer-address-form .form-address-edit input.input-text,
.customer-address-form .form-address-edit select {
    height: 40px;
    width: 100%;
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 4px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--gwl-account-text);
    box-sizing: border-box;
}
.customer-address-form .form-address-edit input.input-text:focus,
.customer-address-form .form-address-edit select:focus {
    border-color: var(--gwl-account-blue);
    box-shadow: none;
}
/* Lat/Lng + street: readonly, map-driven — muted look overrides the JS-injected inline style */
.customer-address-form .form-address-edit input.input-text[readonly] {
    background-color: #f2f4f7 !important;
    color: var(--gwl-account-muted) !important;
    cursor: not-allowed !important;
}

/* street: nested additional lines */
.customer-address-form .field.street .nested {
    margin-top: 10px;
}
.customer-address-form .field.street .field.additional {
    margin-top: 10px !important;
}
.customer-address-form .gwl-street-tooltip {
    margin-inline-start: 8px;
}

/* map */
.customer-address-form .mapContainer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 220px !important;
    border: 1px solid var(--gwl-account-border);
    border-radius: 4px;
    overflow: hidden;
}

/* region: select + plain-text fallback input share one cell */
.customer-address-form .field.region .control {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* info messages ("It's a default billing/shipping address") */
.customer-address-form .fieldset .message.info {
    margin: 0 !important;
    padding: 10px 14px !important;
    background: #f2f4f7;
    border: 0;
    border-radius: 4px;
    font-size: 13px;
    color: var(--gwl-account-text);
}
.customer-address-form .fieldset .message.info:before {
    display: none;
}

/* default billing/shipping checkboxes */
.customer-address-form .field.choice.set {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    padding-top: 4px;
    margin: 0 !important;
}
.customer-address-form .field.choice.set input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    flex-shrink: 0;
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--gwl-account-border);
    border-radius: 3px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
    cursor: pointer;
}
/* suppress the base theme's own ::after checkmark (anchored via position:absolute
   on this element) — we paint our own checkmark via :checked background-image */
.customer-address-form .field.choice.set input[type="checkbox"]::after {
    content: none !important;
}
.customer-address-form .field.choice.set input[type="checkbox"]:checked {
    background-color: var(--gwl-account-blue);
    border-color: var(--gwl-account-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.2 4.3 6.5 11 2.8 7.3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.customer-address-form .field.choice.set .label {
    display: inline-flex !important;
    align-items: center;
    min-height: 15px;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px;
    line-height: normal;
    color: var(--gwl-account-text);
}

/* Save / Go back */
.customer-address-form .form-address-edit .actions-toolbar {
    float: none !important;
    width: 100%;
    margin: 0 0 24px !important;
    display: flex;
    justify-content: flex-end;
}
.customer-address-form .actions-toolbar .primary {
    float: none !important;
    margin: 0 !important;
}
.customer-address-form .actions-toolbar button.action.save.primary {
    height: 38px;
    padding: 0 26px !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;
}
.customer-address-form .actions-toolbar button.action.save.primary:hover {
    background: #221796 !important;
}
.customer-address-form .actions-toolbar .secondary {
    display: none !important;
}

/* ==========================================================================
   GWL Layout Width Changes — Figma shared content shell
   Align header / breadcrumbs / page-main inner content to 1440px + 40px gutter.
   Footer chrome is full viewport; footer inner content stays on the same 1440 shell.
   ========================================================================== */
/* .sidebar-additional is float:left / clear:left in the base theme, which
   only clears past .sidebar-main (the account nav) — not past .column.main
   (float:right). On pages where the main column is taller than the nav
   (e.g. My Product Reviews / My Returns with several rows of data), the
   browser squeezes this block into whatever narrow gap is left beside the
   still-taller right float instead of dropping fully below it, wrapping
   "My Wish List" onto several lines. clear:both makes it drop below
   whichever column is taller, matching every other page. */
.account .sidebar-additional {
    clear: both !important;
}
.account .sidebar-additional .block.block-wishlist {
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 2px;
    padding: 16px 20px;
    margin: 0 0 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.account .sidebar-additional .block.block-wishlist .block-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    border-bottom: 0 !important;
    padding-bottom: 10px !important;
    margin-bottom: 14px !important;
}
.account .sidebar-additional .block.block-wishlist .block-title strong {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--gwl-account-title) !important;
    white-space: nowrap;
}
.account .sidebar-additional .block.block-wishlist .gwl-wl-count {
    font-size: 13px;
    font-weight: 400;
    color: var(--gwl-account-muted);
    white-space: nowrap;
}
.account .sidebar-additional .block.block-wishlist .subtitle {
    display: none !important;
}
.account .sidebar-additional .block.block-wishlist .product-items {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.account .sidebar-additional .block.block-wishlist .product-item {
    margin: 0 0 16px !important;
    padding: 0 !important;
}
.account .sidebar-additional .block.block-wishlist .product-item:last-child {
    margin-bottom: 0 !important;
}
.account .sidebar-additional .block.block-wishlist .product-item-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.account .sidebar-additional .block.block-wishlist .product-item-photo {
    flex: 0 0 auto;
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f5f6;
}
.account .sidebar-additional .block.block-wishlist .product-item-photo .product-image-container,
.account .sidebar-additional .block.block-wishlist .product-item-photo .product-image-wrapper {
    width: 100% !important;
    height: 100% !important;
}
.account .sidebar-additional .block.block-wishlist .product-item-photo img.product-image-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.account .sidebar-additional .block.block-wishlist .product-item-details {
    flex: 1;
    min-width: 0;
}
.account .sidebar-additional .block.block-wishlist .product-item-name {
    display: block;
    margin: 0 0 4px !important;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
}
.account .sidebar-additional .block.block-wishlist .product-item-link {
    color: var(--gwl-account-title) !important;
    text-decoration: none !important;
}
.account .sidebar-additional .block.block-wishlist .product-item-link:hover {
    text-decoration: underline !important;
}
.account .sidebar-additional .block.block-wishlist .price-box {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0 !important;
}
.account .sidebar-additional .block.block-wishlist .price-box .price {
    font-size: 13px;
    font-weight: 700;
    color: var(--gwl-account-text);
}
.account .sidebar-additional .block.block-wishlist .price-box .old-price .price {
    font-weight: 400;
    color: var(--gwl-account-muted);
    text-decoration: line-through;
}
/* Add to Cart / Remove aren't in the mockup card */
.account .sidebar-additional .block.block-wishlist .product-item-actions {
    display: none !important;
}
.account .sidebar-additional .block.block-wishlist .actions-toolbar {
    margin: 4px 0 0 !important;
    padding-top: 12px;
    border-top: 1px solid var(--gwl-account-border);
}
.account .sidebar-additional .block.block-wishlist .actions-toolbar .primary {
    float: none !important;
    margin: 0 !important;
}
.account .sidebar-additional .block.block-wishlist a.action.details {
    color: #F66560 !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
}
.account .sidebar-additional .block.block-wishlist a.action.details:hover {
    text-decoration: underline !important;
}
.account .sidebar-additional .block.block-wishlist .empty {
    margin: 0;
    font-size: 13px;
    color: var(--gwl-account-muted);
}

/* ==========================================================================
   GWL Gift Card — Figma "Gift Voucher" page (magento_giftcardaccount_customer_index)
   ========================================================================== */
.magento_giftcardaccount-customer-index .gwl-giftcard {
    max-width: 520px;
}
.magento_giftcardaccount-customer-index .gwl-giftcard .block-title {
    border-bottom: 0 !important;
    padding-bottom: 10px !important;
    margin-bottom: 14px !important;
}
.magento_giftcardaccount-customer-index .gwl-giftcard .block-title strong {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--gwl-account-title) !important;
}
.magento_giftcardaccount-customer-index .gwl-giftcard .fieldset {
    margin: 0 !important;
    letter-spacing: normal;
}
.magento_giftcardaccount-customer-index .gwl-giftcard .field.giftcard {
    margin: 0 !important;
}
.magento_giftcardaccount-customer-index .gwl-giftcard .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_giftcardaccount-customer-index .gwl-giftcard .field > .label span {
    font-weight: inherit !important;
    color: inherit !important;
}
.magento_giftcardaccount-customer-index .gwl-giftcard .field.required > .label:after {
    content: '*';
    color: #F04438;
    margin-inline-start: 2px;
}
.magento_giftcardaccount-customer-index .gwl-giftcard .field > .control {
    width: 100% !important;
    float: none !important;
}
.magento_giftcardaccount-customer-index .gwl-giftcard input.input-text {
    height: 40px;
    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);
}
.magento_giftcardaccount-customer-index .gwl-giftcard input.input-text::placeholder {
    color: var(--gwl-account-muted);
}
.magento_giftcardaccount-customer-index .gwl-giftcard input.input-text:focus {
    border-color: var(--gwl-account-blue);
    box-shadow: none;
}
.magento_giftcardaccount-customer-index .gwl-giftcard .actions-toolbar {
    margin: 18px 0 0 !important;
}
.magento_giftcardaccount-customer-index .gwl-giftcard .actions-toolbar > .primary,
.magento_giftcardaccount-customer-index .gwl-giftcard .actions-toolbar > .secondary {
    float: none !important;
    display: inline-block;
    margin: 0 8px 0 0 !important;
}
.magento_giftcardaccount-customer-index .gwl-giftcard button.action {
    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_giftcardaccount-customer-index .gwl-giftcard button.action:hover {
    background: #221796 !important;
}
.magento_giftcardaccount-customer-index .gwl-giftcard #giftcard-balance-lookup.giftcard.ballance:not(:empty) {
    margin-bottom: 14px;
}

/* ==========================================================================
   GWL Reward Points — Figma "Reward Points" page (magento_reward-customer-info)
   ========================================================================== */

/* Balance banner */
.magento_reward-customer-info .gwl-reward-balance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg, #160B8B 0%, #2417B8 55%, #3B2FE0 100%);
    border-radius: 12px;
    padding: 28px 32px;
    margin-bottom: 24px;
    color: #fff;
}
.magento_reward-customer-info .gwl-reward-balance__left {
    display: flex;
    align-items: center;
    gap: 18px;
}
.magento_reward-customer-info .gwl-reward-balance__icon {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
}
.magento_reward-customer-info .gwl-reward-balance__main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.magento_reward-customer-info .gwl-reward-balance__label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}
.magento_reward-customer-info .gwl-reward-balance__value {
    font-family: 'Work Sans', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.magento_reward-customer-info .gwl-reward-balance__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    text-align: end;
}
.magento_reward-customer-info .gwl-reward-balance__rate {
    display: flex;
    align-items: center;
    gap: 10px;
}
.magento_reward-customer-info .gwl-reward-balance__pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.magento_reward-customer-info .gwl-reward-balance__eq {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}
.magento_reward-customer-info .gwl-reward-balance__note {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 320px;
}
.magento_reward-customer-info .gwl-reward-balance__note--warn {
    color: #FDE68A;
}

/* Figma mobile card: icon + rate pills share the top row, then the label
   and the big point value stack below, all start-aligned — a different
   grouping than the desktop left/right columns, so the wrappers are
   flattened (display:contents) and their children re-placed onto a grid. */
@media only screen and (max-width: 767px) {
    .magento_reward-customer-info .gwl-reward-balance {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icon rate"
            "label label"
            "value value"
            "note note";
        justify-content: normal;
        align-items: center;
        gap: 10px 14px;
        text-align: start;
        padding: 24px;
    }
    .magento_reward-customer-info .gwl-reward-balance__left,
    .magento_reward-customer-info .gwl-reward-balance__main,
    .magento_reward-customer-info .gwl-reward-balance__right {
        display: contents;
    }
    .magento_reward-customer-info .gwl-reward-balance__icon {
        grid-area: icon;
        width: 48px;
        height: 48px;
    }
    .magento_reward-customer-info .gwl-reward-balance__label {
        grid-area: label;
        margin-top: 4px;
    }
    .magento_reward-customer-info .gwl-reward-balance__value {
        grid-area: value;
        font-size: 36px;
    }
    .magento_reward-customer-info .gwl-reward-balance__rate {
        grid-area: rate;
        justify-self: end;
    }
    .magento_reward-customer-info .gwl-reward-balance__note,
    .magento_reward-customer-info .gwl-reward-balance__note--warn {
        grid-area: note;
        max-width: none;
        text-align: start;
    }
}

/* Transaction history list */
.magento_reward-customer-info .gwl-reward-history {
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 8px;
    padding: 8px 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.magento_reward-customer-info .gwl-reward-history__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.magento_reward-customer-info .gwl-reward-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--gwl-account-border);
}
.magento_reward-customer-info .gwl-reward-row:last-child {
    border-bottom: 0;
}
.magento_reward-customer-info .gwl-reward-row__icon {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.magento_reward-customer-info .gwl-reward-row__icon:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    background-color: #fff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.magento_reward-customer-info .gwl-reward-row--added .gwl-reward-row__icon { background: #F59E0B; }
.magento_reward-customer-info .gwl-reward-row--added .gwl-reward-row__icon:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 2a1 1 0 0 1 1 1v4h4a1 1 0 1 1 0 2H9v4a1 1 0 1 1-2 0V9H3a1 1 0 1 1 0-2h4V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 2a1 1 0 0 1 1 1v4h4a1 1 0 1 1 0 2H9v4a1 1 0 1 1-2 0V9H3a1 1 0 1 1 0-2h4V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}
.magento_reward-customer-info .gwl-reward-row--redeemed .gwl-reward-row__icon { background: #2EC175; }
.magento_reward-customer-info .gwl-reward-row--redeemed .gwl-reward-row__icon:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
}
.magento_reward-customer-info .gwl-reward-row--pending .gwl-reward-row__icon { background: #F04438; }
.magento_reward-customer-info .gwl-reward-row--pending .gwl-reward-row__icon:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='7.25' y='6.8' width='1.5' height='4.7' rx='0.3' fill='%23000'/%3E%3Ccircle cx='8' cy='4.3' r='0.95' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='7.25' y='6.8' width='1.5' height='4.7' rx='0.3' fill='%23000'/%3E%3C/svg%3E");
}
.magento_reward-customer-info .gwl-reward-row__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.magento_reward-customer-info .gwl-reward-row__points {
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--gwl-account-title);
}
.magento_reward-customer-info .gwl-reward-row__meta {
    font-size: 12px;
    color: var(--gwl-account-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.magento_reward-customer-info .gwl-reward-row__end {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: end;
}
.magento_reward-customer-info .gwl-reward-row__amount {
    font-size: 13px;
    font-weight: 500;
    color: var(--gwl-account-text);
}

@media only screen and (max-width: 600px) {
    .magento_reward-customer-info .gwl-reward-row__meta {
        white-space: normal;
    }
}

/* Email Notification Settings card */
.magento_reward-customer-info .gwl-reward-settings .fieldset {
    margin: 0 !important;
}
.magento_reward-customer-info .gwl-reward-settings .field.choice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}
.magento_reward-customer-info .gwl-reward-settings .field.choice input[type="checkbox"] {
    margin: 0;
    width: 15px;
    height: 15px;
    accent-color: var(--gwl-account-blue);
}
.magento_reward-customer-info .gwl-reward-settings .field.choice .label {
    margin: 0 !important;
    font-size: 13px;
    color: var(--gwl-account-text);
}
.magento_reward-customer-info .gwl-reward-settings .actions-toolbar {
    margin: 18px 0 0 !important;
}
.magento_reward-customer-info .gwl-reward-settings .actions-toolbar > .primary {
    float: none !important;
}
.magento_reward-customer-info .gwl-reward-settings button.action.save {
    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_reward-customer-info .gwl-reward-settings button.action.save:hover {
    background: #221796 !important;
}
.review-customer-index .gwl-review-list table.table-reviews tbody td {
    border-top: 1px solid var(--gwl-account-border);
    padding: 10px 12px;
    font-size: 14px;
    color: var(--gwl-account-text);
    vertical-align: middle;
}
.review-customer-index .gwl-review-list table.table-reviews .product-name a {
    color: var(--gwl-account-blue);
    text-decoration: none;
    font-weight: 500;
}
.review-customer-index .gwl-review-list table.table-reviews .product-name a:hover {
    text-decoration: underline;
}
.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 {
    color: var(--gwl-account-blue);
    text-decoration: none;
    font-size: 13px;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar {
    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;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar.top {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gwl-account-border);
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.review-customer-index .gwl-review-list .products-reviews-toolbar.top .pages {
    display: none !important;
}

/* ==========================================================================
   GWL Newsletter Subscriptions — Figma "Newsletter Subscriptions" page
   (newsletter-manage-index)
   ========================================================================== */
.newsletter-manage-index .gwl-newsletter-settings {
    max-width: 620px;
}
.newsletter-manage-index .gwl-newsletter-settings .fieldset {
    margin: 0 !important;
}
.newsletter-manage-index .gwl-newsletter-settings .field.choice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}
.newsletter-manage-index .gwl-newsletter-settings .field.choice input[type="checkbox"] {
    margin: 0;
    width: 15px;
    height: 15px;
    accent-color: var(--gwl-account-blue);
}
.newsletter-manage-index .gwl-newsletter-settings .field.choice .label {
    margin: 0 !important;
    font-size: 13px;
    color: var(--gwl-account-text);
}
.newsletter-manage-index .gwl-newsletter-settings .actions-toolbar {
    margin: 18px 0 0 !important;
    display: flex;
    justify-content: flex-start;
}
.newsletter-manage-index .gwl-newsletter-settings .actions-toolbar > .primary {
    float: none !important;
}
.newsletter-manage-index .gwl-newsletter-settings button.action.save {
    height: 40px;
    padding: 0 28px !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;
}
.newsletter-manage-index .gwl-newsletter-settings button.action.save:hover {
    background: #221796 !important;
}

/* ==========================================================================
   GWL My Invitations — Figma "Invitations" page (magento_invitation-index-index)
   ========================================================================== */

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

/* 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: 20px;
}
.magento_invitation-index-index .gwl-invitation-actions .action.send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 24px;
    background: var(--gwl-account-blue);
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.magento_invitation-index-index .gwl-invitation-actions .action.send:hover {
    background: #221796;
    color: #fff;
}

/* ==========================================================================
   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;
}

/* Pagination toolbar — same spec as the Recent Orders card */
.rma-rma-list .gwl-returns-list .order-products-toolbar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gwl-account-border);
}
.rma-rma-list .gwl-returns-list .order-products-toolbar.bottom {
    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 .pages {
    display: block;
}
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items {
    display: flex;
    align-items: center;
    gap: 8px;
    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: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gwl-account-text);
    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 {
    background: var(--gwl-account-surface);
    color: var(--gwl-account-blue);
}
.rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items li.current strong.page {
    background: var(--gwl-account-current-bg);
    color: var(--gwl-account-blue) !important;
    font-weight: 600;
}

/* ==========================================================================
   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 — sits below the card, not inside it */
.helpdesk-ticket-index .gwl-helpdesk-actions {
    margin-top: 20px;
}
.helpdesk-ticket-index .gwl-helpdesk-actions .create-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none !important;
    position: static !important;
    margin-top: 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-actions .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;
    }
}

/* 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 My Questions — Swissup Askit account page (askit-customer-index)
   ========================================================================== */

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

/* 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);
}

/* Pager toolbar */
.askit-customer-index .gwl-questions-list .toolbar {
    display: flex;
    justify-content: center;
}

/* ==========================================================================
   GWL Privacy Tools — Swissup Gdpr account page (swissup_gdpr-customer-index)
   ========================================================================== */
.swissup_gdpr-customer-index .gwl-privacy-card .block-content p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 22px;
    color: var(--gwl-account-text);
}
.swissup_gdpr-customer-index .gwl-privacy-card .block-content p:last-child {
    margin-bottom: 0;
}
.swissup_gdpr-customer-index .gwl-privacy-card .grouped-consents {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
.swissup_gdpr-customer-index .gwl-privacy-card .consent-form-title {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gwl-account-title);
}
.swissup_gdpr-customer-index .gwl-privacy-card .list-consents {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}
.swissup_gdpr-customer-index .gwl-privacy-card .list-consents li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--gwl-account-text);
}
.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 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 24px;
    background: var(--gwl-account-danger);
    border: 0;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.swissup_gdpr-customer-index .gwl-privacy-danger button.gwl-privacy-danger-btn:hover {
    background: #d13c30;
}

/* ==========================================================================
   GWL Privacy Policy page (cms-privacy-policy-cookie-restriction-mode)
   UI-ONLY restyle — no content was removed or hidden; every existing
   section (Returns, Refunds, Cancellation, Warranty, Store Collection,
   Shipping & Delivery, Ajeer Installation, Express Delivery, campaign T&Cs,
   Cashback Program, and Privacy Policy) stays fully visible, in its
   original order and wording. The handful of section-question lines were
   wrapped in <strong> (verified byte-for-byte identical otherwise) so
   they can be styled as headings here.
   ========================================================================== */

/* Breadcrumb, title, and content all get the exact same max-width/padding
   spec, applied at the same nesting depth relative to their own parent —
   .page-main's own native responsive padding is neutralized here so it
   can't stack with this and throw the breadcrumb (a sibling of .page-main,
   so it never inherited that native padding to begin with) out of sync
   with the title/content (both nested inside .page-main). Verified via
   getComputedStyle() that all three now share an identical left edge. */
.cms-privacy-policy-cookie-restriction-mode .page-main {
    max-width: none !important;
    padding: 0 !important;
}

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

/* Breadcrumb — "Home > Privacy Policy" */
.cms-privacy-policy-cookie-restriction-mode .breadcrumbs {
    display: block !important;
    margin-top: 24px !important;
    margin-bottom: 20px !important;
}
.cms-privacy-policy-cookie-restriction-mode .breadcrumbs .item.home a {
    font-size: 14px !important;
}
.cms-privacy-policy-cookie-restriction-mode .breadcrumbs .item.home a:before {
    content: none !important;
}
.cms-privacy-policy-cookie-restriction-mode .breadcrumbs strong {
    color: var(--gwl-account-title) !important;
    font-weight: 600 !important;
}

/* Page title */
.cms-privacy-policy-cookie-restriction-mode .page-title-wrapper {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
}
.cms-privacy-policy-cookie-restriction-mode .page-title-wrapper .page-title {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 32px !important;
    line-height: 40px !important;
    font-weight: 700 !important;
    color: var(--gwl-account-text) !important;
    margin: 0 !important;
}
.cms-privacy-policy-cookie-restriction-mode .page-title-wrapper .page-title:after {
    content: none !important;
}

/* Content column */
.cms-privacy-policy-cookie-restriction-mode .column.main {
    padding-bottom: 60px;
    float: none;
    width: 100%;
}
.cms-privacy-policy-cookie-restriction-mode .column.main p {
    margin: 0 0 16px;
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: var(--gwl-account-muted);
}
.cms-privacy-policy-cookie-restriction-mode .column.main p:empty {
    display: none;
}
.cms-privacy-policy-cookie-restriction-mode .column.main ul,
.cms-privacy-policy-cookie-restriction-mode .column.main ol {
    margin: 0 0 16px;
    padding-inline-start: 20px;
}
.cms-privacy-policy-cookie-restriction-mode .column.main li {
    font-size: 14px;
    line-height: 24px;
    color: var(--gwl-account-muted);
}
.cms-privacy-policy-cookie-restriction-mode .column.main a {
    color: var(--gwl-account-blue);
    text-decoration: underline;
}

/* Section-question headings — the <p><strong>…</strong></p> lines. A divider
   sits above each one to visually separate Q&A groups, matching the mockup;
   the very first heading in the flow skips its own top divider/spacing. */
.cms-privacy-policy-cookie-restriction-mode .column.main p:has(> strong:only-child) {
    margin: 28px 0 12px;
    padding-top: 24px;
    border-top: 1px solid var(--gwl-account-border);
    font-size: 17px;
    line-height: 26px;
    font-weight: 600;
    color: var(--gwl-account-title);
}
.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 p:has(> strong:only-child) strong {
    font-weight: 600;
}

/* ==========================================================================
   GWL Refund page (cms-refund)
   ========================================================================== */

/* Breadcrumb, title, and content share one alignment spec — same fix as
   the Privacy Policy page (.page-main's native padding neutralized so it
   can't double up with this, since .breadcrumbs is a sibling of .page-main
   while .page-title-wrapper/.column.main sit inside it). */
.cms-refund .page-main {
    max-width: none !important;
    padding: 0 !important;
}
.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;
}

/* Breadcrumb — "Home > Refund" */
.cms-refund .breadcrumbs {
    display: block !important;
    margin-top: 24px !important;
    margin-bottom: 20px !important;
}
.cms-refund .breadcrumbs .item.home a {
    font-size: 14px !important;
}
.cms-refund .breadcrumbs .item.home a:before {
    content: none !important;
}
.cms-refund .breadcrumbs strong {
    color: var(--gwl-account-title) !important;
    font-weight: 600 !important;
}

/* Page title */
.cms-refund .page-title-wrapper {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
}
.cms-refund .page-title-wrapper .page-title {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 32px !important;
    line-height: 40px !important;
    font-weight: 700 !important;
    color: var(--gwl-account-text) !important;
    margin: 0 !important;
}
.cms-refund .page-title-wrapper .page-title:after {
    content: none !important;
}

/* Content column */
.cms-refund .column.main {
    padding-bottom: 60px;
    float: none;
    width: 100%;
}
.cms-refund .column.main > p {
    margin: 0 0 16px;
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: var(--gwl-account-muted);
}
.cms-refund .column.main h3 {
    margin: 28px 0 12px;
    padding-top: 24px;
    border-top: 1px solid var(--gwl-account-border);
    font-family: 'Work Sans', sans-serif;
    font-size: 17px;
    line-height: 26px;
    font-weight: 600;
    color: var(--gwl-account-title);
}
.cms-refund .column.main h3:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.cms-refund .column.main ul {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
.cms-refund .column.main ul li {
    position: relative;
    margin: 0 0 10px;
    padding-inline-start: 18px;
    font-size: 14px;
    line-height: 24px;
    color: var(--gwl-account-muted);
}
.cms-refund .column.main ul li:before {
    content: '\2022';
    position: absolute;
    inset-inline-start: 4px;
    color: var(--gwl-account-blue);
    font-weight: 700;
}
.cms-refund .column.main ul li strong {
    color: var(--gwl-account-title);
    font-weight: 600;
}
.cms-refund .column.main a {
    color: var(--gwl-account-blue);
    text-decoration: underline;
}

/* ==========================================================================
   GWL My Orders — mobile pager (<=991px) — RTL mirror of saudiceramics.css
   Matches the desktop layout exactly: "Items X to Y of Z total" and the
   "Show N per page" limiter share one row above the order table/cards;
   the page-number pagination stays below the table/cards, same as desktop
   (there it's the parent theme's own CSS that absolutely-positions just
   .toolbar-amount/.limiter over the gap below the page title, leaving
   .pages in its normal place after the table).

   .order-products-toolbar and .pager are both plain wrapper divs with no
   styling of their own — display:contents unwraps them so their contents
   (.toolbar-amount, .pages, .limiter) become direct flex items of
   .block-order-history-card, sitting alongside .table-wrapper/
   .gwl-recent-orders, and can be freely reordered independently of each
   other via `order`. */
@media (max-width: 991px) {
    .sales-order-history .block-order-history-card {
        display: flex !important;
        flex-flow: row wrap !important;
    }
    .sales-order-history .block-order-history-card .order-products-toolbar,
    .sales-order-history .block-order-history-card .order-products-toolbar .pager {
        display: contents !important;
    }
    .sales-order-history .block-order-history-card .toolbar-amount {
        order: -3 !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        float: none !important;
        position: static !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        margin-block-end: 16px !important;
    }
    .sales-order-history .block-order-history-card .limiter {
        order: -2 !important;
        flex: 0 0 auto !important;
        float: none !important;
        position: static !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 0 16px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .sales-order-history .block-order-history-card .limiter-options {
        flex: 0 0 auto;
    }
    .sales-order-history .block-order-history-card .table-wrapper.orders-history,
    .sales-order-history .block-order-history-card .gwl-recent-orders {
        order: -1 !important;
        flex: 1 1 100% !important;
    }
    .sales-order-history .block-order-history-card .pages {
        order: 1 !important;
        flex: 1 1 100% !important;
        float: none !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 16px 0 0 !important;
    }
    /* The page-number list has no flex-wrap, so with several pages
       (1 2 3 4 5 → 15) it overflows past the card's right edge instead of
       fitting within it — wrap it onto as many rows as needed instead. */
    .sales-order-history .block-order-history-card .order-products-toolbar {
        justify-content: center !important;
        padding-inline: 0 !important;
    }
    .sales-order-history .block-order-history-card .pages-items {
        flex-wrap: wrap !important;
        justify-content: center !important;
        row-gap: 8px !important;
    }
    /* The parent theme pins .pages-item-previous/-next to the edges with
       position:absolute (a desktop trick to keep the arrows flush left/
       right while the numbers sit between them) — that takes them out of
       flow entirely, so they don't reserve space and the wrapped page
       numbers land on top of them instead of flowing around them. Make
       them normal flex items like every other page number instead. */
    .sales-order-history .block-order-history-card .pages-item-previous,
    .sales-order-history .block-order-history-card .pages-item-next {
        position: static !important;
    }
}

/* ==========================================================================
   GWL Create Account — Figma "My Account" design (customer_account_create)
   Pure CSS restyle of the stock Magento_Customer register.phtml. Same
   technique already used on customer_account_edit / customer_address_form:
   `display:contents` on both fieldsets promotes every .field to a direct
   child of one CSS Grid on the <form>, so First/Last, Email/Mobile and
   Password/Confirm can be paired side-by-side across the two fieldsets
   without touching the template or the two-fieldset markup Magento/
   Magedelight_SMSProfile/newsletter/remember-me functionality relies on.
   Desktop 2-column grid, mobile (<=767px) single column. EN + AR.
   ========================================================================== */
.customer-account-create .page-title-wrapper {
    width: 100% !important;
    max-width: 720px !important;
    float: none !important;
    margin: 64px auto 32px !important;
    padding: 0 !important;
    text-align: center;
}
.customer-account-create .page-title-wrapper .page-title {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 34px !important;
    line-height: 42px !important;
    font-weight: 700 !important;
    color: var(--gwl-account-title) !important;
    margin: 0 !important;
}
.customer-account-create .page-title-wrapper .page-title:after {
    content: none !important;
}
/* subtitle — .account-page-subtitle's own styling is scoped to body.account,
   which this guest page doesn't carry, so it needs its own rule here */
.customer-account-create .page-title-wrapper .account-page-subtitle {
    margin: 8px 0 0 !important;
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--gwl-account-muted);
}

.customer-account-create .columns .column.main {
    width: 100% !important;
    max-width: 720px !important;
    float: none !important;
    margin: 0 auto !important;
}

/* both fieldsets disappear from the box model — their .field children join
   the single grid on <form> below, keeping fieldset/legend semantics and
   the OTP/newsletter/remember-me scripts untouched in the DOM */
.customer-account-create .form-create-account {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px 24px;
    align-items: start;
}
.customer-account-create .form-create-account .fieldset.create.info,
.customer-account-create .form-create-account .fieldset.create.account,
.customer-account-create .form-create-account .fieldset.additional_info {
    display: contents;
}
.customer-account-create .form-create-account .fieldset > .legend,
.customer-account-create .form-create-account .fieldset > br {
    display: none !important;
}
.customer-account-create .form-create-account .fieldset:after {
    display: none !important;
}

/* row order: First/Last, Email/Mobile, Password/Confirm, then full-width
   Newsletter, Remember Me, Actions */
.customer-account-create .form-create-account .field-name-firstname { order: 1; grid-column: span 3; }
.customer-account-create .form-create-account .field-name-lastname { order: 2; grid-column: span 3; }
.customer-account-create .form-create-account .fieldset.create.account > .field.required:not(.password):not(.confirmation):not(.choice) { order: 3; grid-column: span 3; }
.customer-account-create .form-create-account .field-name-customer_mobile { order: 4; grid-column: span 3; }
.customer-account-create .form-create-account .field.password { order: 5; grid-column: span 3; }
.customer-account-create .form-create-account .field.confirmation { order: 6; grid-column: span 3; }
/* Newsletter / Remember Me share one row (half-width each), Terms &
   Conditions gets its own full-width row below, desktop */
.customer-account-create .form-create-account .field.choice.newsletter {
    order: 7;
    grid-column: span 3;
}
.customer-account-create .form-create-account #remember-me-box {
    order: 8;
    grid-column: span 3;
}
.customer-account-create .form-create-account .gwl-terms-condition {
    order: 9;
    grid-column: 1 / -1;
}
.customer-account-create .form-create-account .actions-toolbar {
    order: 10;
    grid-column: 1 / -1;
}

/* fields: label above input, Figma spacing/type */
.customer-account-create .form-create-account .field {
    margin: 0 !important;
}
.customer-account-create .form-create-account .field > .label {
    display: block;
    float: none !important;
    width: auto !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    text-align: start !important;
    font-size: 16px;
    font-weight: 400;
    color: var(--gwl-account-title);
}
.customer-account-create .form-create-account .field > .control {
    width: 100% !important;
    float: none !important;
}
.customer-account-create .form-create-account input.input-text {
    height: 48px;
    width: 100%;
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 6px;
    padding: 0 16px;
    font-size: 14px;
    color: var(--gwl-account-text);
    box-sizing: border-box;
}
.customer-account-create .form-create-account input.input-text:focus {
    border-color: var(--gwl-account-blue);
    box-shadow: none;
    outline: none;
}
/* Password / Confirm Password show-hide eye icon (see the
   .gwl-password-toggle button + script added in the Magedelight_SMSProfile
   register.phtml override) */
.customer-account-create .form-create-account .field.password .control,
.customer-account-create .form-create-account .field.confirmation .control {
    position: relative;
}
.customer-account-create .form-create-account .field.password input.input-text,
.customer-account-create .form-create-account .field.confirmation input.input-text {
    padding-inline-end: 44px;
}
.customer-account-create .form-create-account .gwl-password-toggle {
    position: absolute;
    inset-inline-end: 14px;
    top: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--gwl-account-muted);
    cursor: pointer;
}
.customer-account-create .form-create-account .gwl-password-toggle:hover,
.customer-account-create .form-create-account .gwl-password-toggle--visible {
    color: var(--gwl-account-title);
}
/* the flag/dial-code prefix's own left offset for #customer_mobile (inline
   <style> emitted by the phtml, higher specificity via its ID selector) is
   left untouched on purpose — only height/border/radius are added here */
.customer-account-create #password-strength-meter-container {
    margin-top: 8px;
}
.customer-account-create .password-strength-meter {
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    border-radius: 4px;
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    color: var(--gwl-account-text);
}

/* Checkboxes (Newsletter / Remember Me) — custom-painted, same technique as
   customer_account_edit / customer_address_form */
.customer-account-create .form-create-account .field.choice {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
}
.customer-account-create .form-create-account .field.choice input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    flex-shrink: 0;
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--gwl-account-border);
    border-radius: 4px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
    cursor: pointer;
}
.customer-account-create .form-create-account .field.choice input[type="checkbox"]::after {
    content: none !important;
}
.customer-account-create .form-create-account .field.choice input[type="checkbox"]:checked {
    background-color: var(--gwl-account-blue);
    border-color: var(--gwl-account-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.2 4.3 6.5 11 2.8 7.3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.customer-account-create .form-create-account .field.choice .label {
    display: inline-flex !important;
    align-items: center;
    min-height: 18px;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: var(--gwl-account-text);
}
/* validation error — same red/size Magento uses for every other field on
   this form (div.mage-error, styles-m.css); the difference is that
   .field.choice is a flex row (checkbox + label), so without a forced
   100% flex-basis the error tries to sit *beside* the label instead of
   dropping to its own line below it like it does under a plain input.
   Tag-qualified ("div.mage-error") on purpose — jQuery Validate also puts
   the "mage-error" class on the checkbox <input> itself (for the red
   border), and that must NOT get flex-basis:100% or it renders as a
   huge blank stretched box. */
.customer-account-create .form-create-account .field.choice div.mage-error {
    flex: 1 0 100%;
    margin: 4px 0 0 !important;
}
/* "Terms of Services" link + Remember Me's "What's this?" toggle — both
   matched to the "Create Account" link's look (color, weight, underline
   only on hover) rather than "Sign In"'s (always-underlined). "Terms of
   Services" was inheriting the site's default anchor color (a red/
   orange); "What's this?" (a <strong>) was a dark navy, bold by default,
   from the base theme — neither is var(--gwl-account-blue). */
.customer-account-create .form-create-account .gwl-terms-condition .label a,
.customer-account-create .form-create-account #remember-me-box .tooltip.toggle {
    font-size: 14px;
    font-weight: 600;
    color: var(--gwl-account-blue) !important;
    text-decoration: none;
    cursor: pointer;
}
.customer-account-create .form-create-account .gwl-terms-condition .label a:hover,
.customer-account-create .form-create-account #remember-me-box .tooltip.toggle:hover {
    text-decoration: underline;
}

/* Actions: full-width primary button, centered secondary link */
.customer-account-create .form-create-account .actions-toolbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 12px 0 0 !important;
}
.customer-account-create .form-create-account .actions-toolbar .primary {
    width: 100%;
    float: none !important;
    margin: 0 !important;
}
.customer-account-create .form-create-account .actions-toolbar button.action.submit.primary {
    width: 100%;
    height: 52px;
    background: var(--gwl-account-blue) !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    box-shadow: none !important;
    cursor: pointer;
}
.customer-account-create .form-create-account .actions-toolbar button.action.submit.primary:hover {
    background: #221796 !important;
}
.customer-account-create .form-create-account .actions-toolbar .secondary {
    float: none !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    font-size: 14px;
    white-space: nowrap;
}
/* the base theme hides ".actions-toolbar > .secondary .action.back"
   sitewide (styles-m.css) — un-hide it just on this page; the link now
   reads "Sign In" (see the register.phtml override), not "Back".
   Matched to the "Create Account"/"Terms of Services"/"What's this?"
   look (weight 600, underline only on hover) instead of always-underlined. */
.customer-account-create .form-create-account .actions-toolbar .action.back {
    display: inline !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--gwl-account-blue) !important;
    text-decoration: none;
    cursor: pointer;
}
.customer-account-create .form-create-account .actions-toolbar .action.back:hover {
    text-decoration: underline;
}
.customer-account-create .form-create-account .actions-toolbar .gwl-signin-prompt {
    color: var(--gwl-account-text);
}

/* Mobile (<=767px): single column, tighter side padding */
@media (max-width: 767px) {
    .customer-account-create .page-title-wrapper,
    .customer-account-create .columns .column.main {
        max-width: none !important;
        padding-inline: 16px;
    }
    .customer-account-create .page-title-wrapper .page-title {
        font-size: 26px !important;
        line-height: 32px !important;
    }
    .customer-account-create .page-title-wrapper .account-page-subtitle {
        font-size: 14px;
        line-height: 20px;
    }
    .customer-account-create .form-create-account {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .customer-account-create .form-create-account .field-name-firstname,
    .customer-account-create .form-create-account .field-name-lastname,
    .customer-account-create .form-create-account .fieldset.create.account > .field.required:not(.password):not(.confirmation):not(.choice),
    .customer-account-create .form-create-account .field-name-customer_mobile,
    .customer-account-create .form-create-account .field.password,
    .customer-account-create .form-create-account .field.confirmation,
    .customer-account-create .form-create-account .field.choice.newsletter,
    .customer-account-create .form-create-account #remember-me-box,
    .customer-account-create .form-create-account .gwl-terms-condition {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   GWL Sign In — Figma "Sign In to Your Account" design (customer_account_login)
   Same approach as the Create Account page: title/subtitle via layout XML
   (page.main.title + a child block), pill-style Email/Mobile toggle and a
   per-field password eye icon via a theme override of
   Magedelight_SMSProfile::login.phtml (the template this page actually
   renders — see that file's own header comment), everything else pure CSS.
   Single centered column (720px), stacking the stock 2-column float layout
   (.login-container .block at 48%/float) down to one. Desktop + mobile
   (<=767px). EN + AR.
   ========================================================================== */
.customer-account-login .page-title-wrapper {
    width: 100% !important;
    max-width: 720px !important;
    float: none !important;
    margin: 64px auto 32px !important;
    padding: 0 !important;
    text-align: center;
}
.customer-account-login .page-title-wrapper .page-title {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 34px !important;
    line-height: 42px !important;
    font-weight: 700 !important;
    color: var(--gwl-account-title) !important;
    margin: 0 !important;
}
.customer-account-login .page-title-wrapper .page-title:after {
    content: none !important;
}
/* subtitle — .account-page-subtitle's own styling is scoped to body.account,
   which this guest page doesn't carry, so it needs its own rule here (same
   as the Create Account page) */
.customer-account-login .page-title-wrapper .account-page-subtitle {
    margin: 8px 0 0 !important;
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--gwl-account-muted);
}

.customer-account-login .columns .column.main {
    width: 100% !important;
    max-width: 720px !important;
    float: none !important;
    margin: 0 auto !important;
}

/* the stock theme floats block-customer-login / block-new-customer side by
   side at 48% width each (styles-l.css) and gives .login-container itself
   the shared auth-form card chrome (background/padding/max-width — the
   same rule the Create Account page's .form-create-account neutralizes);
   collapse both to one full-width centered column instead */
.customer-account-login .login-container {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
}
.customer-account-login .login-container .block {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 0 28px !important;
}
.customer-account-login .login-container .block:last-child {
    margin-bottom: 0 !important;
}
.customer-account-login .block-title {
    display: none !important;
}

/* Email/Mobile pill toggle — hides the stock <select>, which stays the
   real source of truth (see the login.phtml override's script: the
   buttons set its value and fire "change", they don't duplicate the
   show/hide logic that already lives in profile-phone-validation.js) */
.customer-account-login .field.reset_type_login {
    text-align: center;
}
.customer-account-login .field.reset_type_login > .label {
    display: none !important;
}
.customer-account-login #reset_type_login {
    display: none !important;
}
.customer-account-login .gwl-login-type-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--gwl-account-surface);
    border-radius: 8px;
}
.customer-account-login .gwl-login-type-btn {
    min-width: 120px;
    height: 40px;
    padding: 0 24px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--gwl-account-text);
    cursor: pointer;
}
.customer-account-login .gwl-login-type-btn--active {
    background: var(--gwl-account-title);
    color: #fff;
}

/* fields: label above input, same spacing/type as Create Account */
.customer-account-login .form-login .field {
    margin: 0 0 20px !important;
}
.customer-account-login .form-login .field > .label,
.customer-account-login .form-login .field .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: 16px;
    font-weight: 400;
    color: var(--gwl-account-title);
}
/* the base theme's required-field "*" is
   ".fieldset > .field.required > .label:after" (direct child) — the
   Email Address / Phone Number labels don't qualify since they're
   nested one level deeper, inside .control.email/.control.mobile (see
   the login.phtml override), so it needs its own rule here */
.customer-account-login .form-login .field.required .form-field__label:after {
    content: '*';
    color: var(--gwl-account-danger);
    margin-inline-start: 4px;
}
.customer-account-login .form-login .field > .control,
.customer-account-login .form-login .field .form-field__control {
    width: 100% !important;
    float: none !important;
}
.customer-account-login .form-login input.input-text,
.customer-account-login .form-login input.form-field__input {
    height: 48px;
    width: 100%;
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 6px;
    padding: 0 16px;
    font-size: 14px;
    color: var(--gwl-account-text);
    box-sizing: border-box;
}
.customer-account-login .form-login input.input-text:focus,
.customer-account-login .form-login input.form-field__input:focus {
    border-color: var(--gwl-account-blue);
    box-shadow: none;
    outline: none;
}
/* the flag/dial-code prefix's own left offset for #login_mobile (inline
   <style> emitted by the phtml, higher specificity via its ID selector) is
   left untouched on purpose — only height/border/radius are added above */

/* Password show/hide eye icon — same technique as the Create Account page */
.customer-account-login .form-login .field.password .control {
    position: relative;
}
.customer-account-login .form-login .field.password input.input-text {
    padding-inline-end: 44px;
}
.customer-account-login .form-login .gwl-password-toggle {
    position: absolute;
    inset-inline-end: 14px;
    top: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--gwl-account-muted);
    cursor: pointer;
}
.customer-account-login .form-login .gwl-password-toggle:hover,
.customer-account-login .form-login .gwl-password-toggle--visible {
    color: var(--gwl-account-title);
}

/* Remember Me + Forgot Password on one row */
.customer-account-login .form-login .gwl-remember-forgot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 12px;
    margin: 4px 0 24px;
}
.customer-account-login .form-login .gwl-remember-forgot-row #remember-me-box {
    margin: 0 !important;
}
/* the row's own "white-space: nowrap" (keeps "Remember Me What's this?" /
   "Forgot Your Password?" from internally soft-wrapping) is inherited, so
   without resetting it here the Remember Me tooltip popup — normally a
   several-line block of wrapped text — also gets forced onto one long
   line and overflows past its own box's right edge on hover */
.customer-account-login .form-login .gwl-remember-forgot-row .tooltip.content {
    white-space: normal;
}
.customer-account-login .form-login .action.remind {
    font-size: 14px;
    font-weight: 600;
    color: var(--gwl-account-blue);
    text-decoration: none;
}
.customer-account-login .form-login .action.remind:hover {
    text-decoration: underline;
}

/* Checkbox (Remember Me) — custom-painted, same technique as Create Account */
.customer-account-login .form-login .field.choice {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 8px;
}
.customer-account-login .form-login .field.choice input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    flex-shrink: 0;
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--gwl-account-border);
    border-radius: 4px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
    cursor: pointer;
}
.customer-account-login .form-login .field.choice input[type="checkbox"]::after {
    content: none !important;
}
.customer-account-login .form-login .field.choice input[type="checkbox"]:checked {
    background-color: var(--gwl-account-blue);
    border-color: var(--gwl-account-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.2 4.3 6.5 11 2.8 7.3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.customer-account-login .form-login .field.choice .label {
    display: inline-flex !important;
    align-items: center;
    min-height: 18px;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: var(--gwl-account-text);
}
/* matched to the "Create Account" link's look (color, weight, underline
   only on hover) — was a dark navy, bold by default, from the base theme */
.customer-account-login .form-login .field.choice .tooltip.toggle {
    font-size: 14px;
    font-weight: 600;
    color: var(--gwl-account-blue) !important;
    text-decoration: none;
    cursor: pointer;
}
.customer-account-login .form-login .field.choice .tooltip.toggle:hover {
    text-decoration: underline;
}

/* Sign In button */
.customer-account-login .form-login .actions-toolbar {
    display: block;
    margin: 0 !important;
}
.customer-account-login .form-login .actions-toolbar .primary {
    width: 100%;
    float: none !important;
    margin: 0 !important;
}
.customer-account-login .form-login .actions-toolbar button.action.login.primary {
    width: 100%;
    height: 52px;
    background: var(--gwl-account-blue) !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    box-shadow: none !important;
    cursor: pointer;
}
.customer-account-login .form-login .actions-toolbar button.action.login.primary:hover {
    background: #221796 !important;
}

/* "New Customers" block -> "Don't have an account? Create Account" */
.customer-account-login .block-new-customer .block-content > p {
    display: none !important;
}
.customer-account-login .block-new-customer .actions-toolbar {
    display: flex;
    justify-content: center;
    margin: 0 !important;
}
.customer-account-login .block-new-customer .actions-toolbar .primary {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 6px;
    float: none !important;
    margin: 0 !important;
}
.customer-account-login .block-new-customer .gwl-create-account-prompt {
    font-size: 14px;
    color: var(--gwl-account-text);
}
/* the base theme has its own
   ".login-container .block-new-customer .actions-toolbar > .primary .create"
   rule (color:#f66560, a red) at higher specificity (5 classes vs. this
   rule's 4 classes + element) — needs !important to actually win */
.customer-account-login .block-new-customer a.action.create.primary {
    font-size: 14px;
    font-weight: 600;
    color: var(--gwl-account-blue) !important;
    text-decoration: none;
}
.customer-account-login .block-new-customer a.action.create.primary:hover {
    text-decoration: underline;
}
.customer-account-login .block-new-customer a.action.create.primary span {
    display: inline;
}

/* Mobile (<=767px): tighter side padding, narrower pill buttons */
@media (max-width: 767px) {
    .customer-account-login .page-title-wrapper,
    .customer-account-login .columns .column.main {
        max-width: none !important;
        padding-inline: 16px;
    }
    .customer-account-login .page-title-wrapper .page-title {
        font-size: 26px !important;
        line-height: 32px !important;
    }
    .customer-account-login .page-title-wrapper .account-page-subtitle {
        font-size: 14px;
        line-height: 20px;
    }
    .customer-account-login .gwl-login-type-toggle {
        width: 100%;
    }
    .customer-account-login .form-login .gwl-remember-forgot-row {
        flex-direction: column;
        align-items: flex-start;
        white-space: normal;
        gap: 12px;
    }
    .customer-account-login .gwl-login-type-btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 12px;
    }
}
/* ==========================================================================
   GWL Forgot Password — Figma "Forgot Password" / "Update Password" design
   (customer_account_forgotpassword). Mobile-OTP path only — see the header
   comment in Magedelight_SMSProfile::forgotpassword.phtml for why the
   Email path stays the plain single-field form. Same page-title-wrapper
   treatment as Create Account / Sign In, same field/button look as Sign
   In. EN + AR.
   ========================================================================== */
.customer-account-forgotpassword .page-title-wrapper {
    width: 100% !important;
    max-width: 720px !important;
    float: none !important;
    margin: 64px auto 32px !important;
    padding: 0 !important;
    text-align: center;
}
.customer-account-forgotpassword .page-title-wrapper .page-title {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 34px !important;
    line-height: 42px !important;
    font-weight: 700 !important;
    color: var(--gwl-account-title) !important;
    margin: 0 !important;
}
.customer-account-forgotpassword .page-title-wrapper .page-title:after {
    content: none !important;
}
.customer-account-forgotpassword .page-title-wrapper .account-page-subtitle {
    margin: 8px 0 0 !important;
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--gwl-account-muted);
}

.customer-account-forgotpassword .columns .column.main {
    width: 100% !important;
    max-width: 720px !important;
    float: none !important;
    margin: 0 auto !important;
}

/* collapse the stock auth-form card chrome to one full-width column, same
   as Sign In */
.customer-account-forgotpassword .login-container {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
}
.customer-account-forgotpassword .login-container .block {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
}
/* this template's own internal heading — the outer H1 (page-title-wrapper
   above) is the only visible title now */
.customer-account-forgotpassword .block-title {
    display: none !important;
}

/* the base theme's shared auth-card rule
   (".form.password.forget, .form.create.account, .login-container, ...")
   paints a gray card (background/padding/radius) behind this exact form
   element — .login-container above only neutralizes the outer wrapper,
   this is the separate target inside that same rule's selector list */
.customer-account-forgotpassword .form.password.forget {
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

.customer-account-forgotpassword .form.password.forget .fieldset {
    margin: 0 !important;
}
.customer-account-forgotpassword .form.password.forget > .fieldset > .field.note {
    text-align: center;
    color: var(--gwl-account-muted);
    margin: 0 0 20px !important;
}

/* #reset_type stays the real source of truth
   profile-phone-validation.js's own #reset_type change handler branches
   on — the visible "Email Address / Phone Number" field
   (.gwl-fp-identifier) drives it via typed-content detection (see the
   forgotpassword.phtml override's script), same technique the Sign In
   page's pill toggle uses on click. The two real fields it mirrors into,
   #email_address and #mobile_number, are hidden below — visually hidden,
   not display:none, so their own data-validate rules and
   .validation('isValid') checks (.send_otp_password's click handler)
   keep working exactly as if they were still visible. */
.customer-account-forgotpassword #reset_type {
    display: none !important;
}
.customer-account-forgotpassword .field.email,
.customer-account-forgotpassword .field.mobile > .form-field,
.customer-account-forgotpassword .field.mobile > .profile-notice-phone {
    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;
    white-space: nowrap !important;
    border: 0 !important;
}

/* fields: label above input, same spacing/type as Create Account / Sign In */
.customer-account-forgotpassword .form.password.forget .field {
    margin: 0 0 20px !important;
}
.customer-account-forgotpassword .form.password.forget .field > .label,
.customer-account-forgotpassword .form.password.forget .field .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: 16px;
    font-weight: 400;
    color: var(--gwl-account-title);
}
.customer-account-forgotpassword .form.password.forget .field.required .form-field__label:after {
    content: '*';
    color: var(--gwl-account-danger);
    margin-inline-start: 4px;
}
.customer-account-forgotpassword .form.password.forget .field > .control,
.customer-account-forgotpassword .form.password.forget .field .form-field__control {
    width: 100% !important;
    float: none !important;
}
.customer-account-forgotpassword .form.password.forget input.input-text,
.customer-account-forgotpassword .form.password.forget input.form-field__input {
    height: 48px;
    width: 100%;
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 6px;
    padding: 0 16px;
    font-size: 14px;
    color: var(--gwl-account-text);
    box-sizing: border-box;
}
.customer-account-forgotpassword .form.password.forget input.input-text:focus,
.customer-account-forgotpassword .form.password.forget input.form-field__input:focus {
    border-color: var(--gwl-account-blue);
    box-shadow: none;
    outline: none;
}

/* "Send OTP" button — full width, same primary look as the Sign In
   button. Scoped to .first-attempt (the initial button's own class,
   per the phtml markup) rather than the shared .send_otp_password class,
   since the "Resend OTP" button below re-uses that same class with a
   deliberately different, small link-style look */
.customer-account-forgotpassword .form.password.forget button.first-attempt.send_otp_password {
    width: 100%;
    height: 52px;
    margin: 4px 0 0 !important;
    background: var(--gwl-account-blue) !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    box-shadow: none !important;
    cursor: pointer;
}
.customer-account-forgotpassword .form.password.forget button.first-attempt.send_otp_password:hover {
    background: #221796 !important;
}
.customer-account-forgotpassword .form.password.forget .otp_generatenote {
    display: block;
    text-align: center;
    font-size: 13px;
    color: var(--gwl-account-muted);
}

/* visually-hidden helper for the real #otp field's label and input — kept
   in the DOM for validation/JS, replaced on screen by the 6-box UI */
.customer-account-forgotpassword .gwl-sr-only,
.customer-account-forgotpassword .gwl-otp-real {
    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;
    white-space: nowrap !important;
    border: 0 !important;
}
.customer-account-forgotpassword .field-name-otp {
    text-align: center;
}
/* once past step 1, hide the "Email Address / Phone Number" field itself
   (its mirrored value in #email_address / #mobile_number is untouched)
   so the OTP and password steps match the mockup, which doesn't show it
   alongside the OTP boxes or the new-password fields */
.customer-account-forgotpassword .md-forget-password[data-gwl-fp-step="otp"] .gwl-fp-identifier,
.customer-account-forgotpassword .md-forget-password[data-gwl-fp-step="password"] .gwl-fp-identifier {
    display: none !important;
}
.customer-account-forgotpassword .gwl-otp-boxes {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 4px 0 20px;
}
.customer-account-forgotpassword .gwl-otp-box {
    width: 48px;
    height: 52px;
    border: 1px solid var(--gwl-account-border);
    border-radius: 6px;
    background: #fff;
    text-align: center;
    font-family: 'Work Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--gwl-account-text);
    padding: 0;
    box-sizing: border-box;
}
.customer-account-forgotpassword .gwl-otp-box:focus {
    border-color: var(--gwl-account-blue);
    outline: none;
    box-shadow: none;
}
/* "Confirm OTP" + "Go back" side by side, equal width — matches the
   mockup's OTP step (unlike the step 1 row copy of Go back, which stays
   a plain text link) */
.customer-account-forgotpassword .gwl-otp-actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
}
.customer-account-forgotpassword .gwl-otp-actions button.verif_otp_password {
    flex: 1 1 0;
    width: auto;
}
.customer-account-forgotpassword .gwl-otp-actions .gwl-fp-mobile-back {
    flex: 1 1 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 52px;
    background: #fff;
    border: 1px solid var(--gwl-account-border);
    border-radius: 6px;
    box-sizing: border-box;
}
.customer-account-forgotpassword .gwl-otp-actions .gwl-fp-mobile-back:hover {
    text-decoration: none;
    border-color: var(--gwl-account-blue);
}
.customer-account-forgotpassword button.verif_otp_password {
    width: 100%;
    height: 52px;
    background: var(--gwl-account-blue) !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    box-shadow: none !important;
    cursor: pointer;
}
.customer-account-forgotpassword button.verif_otp_password:hover {
    background: #221796 !important;
}
.customer-account-forgotpassword .otp_text {
    display: block;
    text-align: center;
    font-size: 13px;
    margin-top: 8px;
}

/* Resend row — "Didn't receive OTP? Resend in 00:16 secs" on one line;
   data-gwl-prefix carries the (translated) leading phrase, set in the
   phtml, so this stays pure decoration on top of the module's own
   Resend In:/Seconds copy */
.customer-account-forgotpassword .resendotp-block {
    text-align: center;
    margin-top: 12px;
}
.customer-account-forgotpassword .resend-wait {
    font-size: 13px;
    color: var(--gwl-account-muted);
    margin: 0;
}
.customer-account-forgotpassword .resend-wait:before {
    content: attr(data-gwl-prefix) ' ';
}
.customer-account-forgotpassword .resendlink button.send_otp_password {
    width: auto;
    height: auto;
    background: none !important;
    color: var(--gwl-account-blue) !important;
    font-size: 13px;
    font-weight: 600;
    padding: 0;
    text-decoration: underline;
}
.customer-account-forgotpassword .resend-link-attempt {
    font-size: 13px;
    color: var(--gwl-account-muted);
    margin-top: 4px;
}

/* standalone Go back links (Mobile flow only) — hidden by default, shown
   only while Mobile is selected and before the password step; the Email
   flow's own Go back (inside .actions-toolbar.reset-pwd) is untouched */
.customer-account-forgotpassword .gwl-fp-mobile-back,
.customer-account-forgotpassword .gwl-fp-mobile-back-row {
    display: none;
}
/* row copy (below the mobile field's "Send OTP" button) — step 1 only.
   Both the row's own display AND the shared .gwl-fp-mobile-back class's
   display need un-hiding here — the base rule above hides that class
   directly, so making the row block-level alone isn't enough */
.customer-account-forgotpassword .md-forget-password[data-gwl-reset-type="Mobile"][data-gwl-fp-step="start"] .gwl-fp-mobile-back-row {
    display: block;
    text-align: center;
    margin-top: 8px;
}
.customer-account-forgotpassword .md-forget-password[data-gwl-reset-type="Mobile"][data-gwl-fp-step="start"] .gwl-fp-mobile-back-row .gwl-fp-mobile-back {
    display: inline-block;
}
/* OTP-block copy (next to "Confirm OTP") — step 2 only, so the two never
   show at once */
.customer-account-forgotpassword .md-forget-password[data-gwl-reset-type="Mobile"][data-gwl-fp-step="otp"] .field-name-otp .gwl-fp-mobile-back {
    display: inline-block;
}
.customer-account-forgotpassword .gwl-fp-mobile-back {
    font-size: 14px;
    font-weight: 600;
    color: var(--gwl-account-blue);
    text-decoration: none;
}
.customer-account-forgotpassword .gwl-fp-mobile-back:hover {
    text-decoration: underline;
}

/* Password show/hide eye icon — same technique as Create Account / Sign In */
.customer-account-forgotpassword .field.password .form-field__control,
.customer-account-forgotpassword .field.confirmation .form-field__control {
    position: relative;
}
.customer-account-forgotpassword .field.password input.input-text,
.customer-account-forgotpassword .field.confirmation input.input-text {
    padding-inline-end: 44px;
}
.customer-account-forgotpassword .gwl-password-toggle {
    position: absolute;
    inset-inline-end: 14px;
    top: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--gwl-account-muted);
    cursor: pointer;
}
.customer-account-forgotpassword .gwl-password-toggle:hover,
.customer-account-forgotpassword .gwl-password-toggle--visible {
    color: var(--gwl-account-title);
}

/* actions-toolbar (Email flow's "Send Email", Mobile flow's "Update
   Password" once OTP is verified) + its "Go back" — the module's own
   #reset_type change handler and .verif_otp_password success handler
   already show/hide this whole block for the Mobile flow's earlier steps */
.customer-account-forgotpassword .actions-toolbar.reset-pwd {
    margin: 4px 0 0 !important;
}
.customer-account-forgotpassword .actions-toolbar.reset-pwd .primary {
    width: 100%;
    float: none !important;
    margin: 0 !important;
}
.customer-account-forgotpassword .actions-toolbar.reset-pwd button.action.submit.primary {
    width: 100%;
    height: 52px;
    background: var(--gwl-account-blue) !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    box-shadow: none !important;
    cursor: pointer;
}
.customer-account-forgotpassword .actions-toolbar.reset-pwd button.action.submit.primary:hover {
    background: #221796 !important;
}
.customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary {
    width: 100%;
    float: none !important;
    text-align: center;
    margin: 12px 0 0 !important;
}
.customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary .action.back {
    font-size: 14px;
    font-weight: 600;
    color: var(--gwl-account-blue) !important;
    text-decoration: none;
}
.customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary .action.back:hover {
    text-decoration: underline;
}
/* Mobile flow, password step only (data-gwl-fp-step is never set to
   "password" outside that flow, so the Email flow's own Go back here is
   untouched) — matches the mockup's "Update Password" screen, which has
   no Go back link */
.customer-account-forgotpassword .md-forget-password[data-gwl-fp-step="password"] .actions-toolbar.reset-pwd .secondary {
    display: none !important;
}

/* Mobile (<=767px): tighter side padding, narrower pill buttons */
@media (max-width: 767px) {
    .customer-account-forgotpassword .page-title-wrapper,
    .customer-account-forgotpassword .columns .column.main {
        max-width: none !important;
        padding-inline: 16px;
    }
    .customer-account-forgotpassword .page-title-wrapper .page-title {
        font-size: 26px !important;
        line-height: 32px !important;
    }
    .customer-account-forgotpassword .page-title-wrapper .account-page-subtitle {
        font-size: 14px;
        line-height: 20px;
    }
    .customer-account-forgotpassword .gwl-otp-box {
        width: 44px;
        height: 48px;
        font-size: 18px;
    }
}