/* ========================================================================== 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: #100F1B; --gwl-account-title: #0A053D; --gwl-account-muted: #A19FA8; --gwl-account-border: #E5E8EE; --gwl-account-surface: #F7F9FB; --gwl-account-current-bg: rgba(22, 11, 139, 0.05); --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: 'Outfit', sans-serif !important; font-size: 32px !important; line-height: 40px !important; font-weight: 300 !important; color: #0A053D !important; margin: 0 0 8px !important; } .account .page-title-wrapper .page-title:after { content: none !important; display: none !important; } .account .page-title-wrapper .account-page-subtitle { margin: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 24px !important; color: #0A053D !important; opacity: 0.6; } /* 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; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 24px !important; color: #0A053D !important; opacity: 0.6; } /* -------------------------------------------------------------------- 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; } /* GWL fix: Magento renders the CURRENT page's own tile as a bare Label with no at all (Html\Link\Current::_toHtml()); the icon-X class still lands on the
  • (Gwl_Header NavigationLinks plugin), but without a `> strong` selector here that tile lost its card border/padding/icon entirely — not just the highlight below. Dual-selecting `> a, > strong` throughout this block restores the card for every tile regardless of which one is current. */ .nav-sections .customer-menu > .header.links > li > a, .nav-sections .customer-menu > .header.links > li > strong { 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, .nav-sections .customer-menu > .header.links > li > strong: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"); } /* GWL fix: the 10 rules below are dual-selected (`> a, > strong`) because their blocks extend Html\Link\Current — when the tile IS the current page, Magento renders `` instead of `` (see comment above). The other icon-X rules further down (Send Invitations, My Support Tickets/helpdesk, Sign Out) are left as `> a` only: those blocks never emit a branch, so a `> strong` selector there would be dead code — and per user decision, active-page highlighting is CSS-only and intentionally does not cover those tiles (or My Account / My Wishlist, which have no icon-X class at all). */ .nav-sections .customer-menu > .header.links > li.icon-orders > a:before, .nav-sections .customer-menu > .header.links > li.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"); } .nav-sections .customer-menu > .header.links > li.icon-address > a:before, .nav-sections .customer-menu > .header.links > li.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"); } .nav-sections .customer-menu > .header.links > li.icon-info > a:before, .nav-sections .customer-menu > .header.links > li.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"); } .nav-sections .customer-menu > .header.links > li.icon-giftcard > a:before, .nav-sections .customer-menu > .header.links > li.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"); } .nav-sections .customer-menu > .header.links > li.icon-reward > a:before, .nav-sections .customer-menu > .header.links > li.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"); } .nav-sections .customer-menu > .header.links > li.icon-reviews > a:before, .nav-sections .customer-menu > .header.links > li.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"); } .nav-sections .customer-menu > .header.links > li.icon-newsletter > a:before, .nav-sections .customer-menu > .header.links > li.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"); } .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, .nav-sections .customer-menu > .header.links > li.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"); } .nav-sections .customer-menu > .header.links > li.icon-questions > a:before, .nav-sections .customer-menu > .header.links > li.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"); } .nav-sections .customer-menu > .header.links > li.icon-privacy > a:before, .nav-sections .customer-menu > .header.links > li.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"); } /* ========================================================================== GWL Mobile Account Drawer — current-page highlight Magento's Html\Link\Current::_toHtml() renders the current page's own tile as
  • Label
    • (no ). Reuses the same --gwl-account-current-bg/--gwl-account-blue tokens as the desktop sidebar's own current-page treatment (see ":is(.account-nav, .block-collapsible-nav) ... li.item.current > strong" below) for visual consistency between desktop and mobile. Only 10 of 15 tiles can ever carry .current — the other 5 (My Account, My Wish List, Send Invitations, My Support Tickets, Sign Out) use link blocks that don't extend Link\Current and never receive this class. ========================================================================== */ .nav-sections .customer-menu > .header.links > li.current > strong { background: var(--gwl-account-current-bg); border-color: var(--gwl-account-blue); color: var(--gwl-account-blue) !important; font-weight: 600; } .nav-sections .customer-menu > .header.links > li.current > strong:before { background-color: var(--gwl-account-blue); } .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
  • , 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; } /* ========================================================================== GWL Mobile Account Drawer — Guest state (Sign In / Create an Account) Guest visitors get
  • Sign In
    • and a plain
  • Create an Account
    • as DIRECT children of the cloned #store.links > ul.header.links (customer.phtml's .customer-menu wrapper only renders when Magento\Customer\Block\Account\Customer:: customerLoggedIn() is true — confirmed via vendor/magento/module-customer/ view/frontend/templates/account/customer.phtml). The :not(:has(...)) guard is load-bearing, NOT cosmetic: a live DOM dump (logged-in, mobile) showed Magento *also* renders a second, always-hidden -until-now
  • Sign Out
    • as a DIRECT child of this same #store.links > ul.header.links (from the core top.links "authorization-link" block — separate from the properly-styled red Sign Out TILE inside .customer-menu's own nested list). Without the guard, these rules matched that stray duplicate too and rendered a second, wrongly-styled "Sign Out" button below the icon grid for logged-in users. li.customer-welcome (the .customer-menu wrapper) only exists when logged in, so its absence reliably identifies true guest state. */ .nav-sections #store\.links:not(:has(> .header.links > li.customer-welcome)) > .header.links > li:not(.greet) { display: block; margin: 0 0 12px !important; } .nav-sections #store\.links:not(:has(> .header.links > li.customer-welcome)) > .header.links > li.authorization-link > a, .nav-sections #store\.links:not(:has(> .header.links > li.customer-welcome)) > .header.links > li:not(.authorization-link):not(.greet) > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; border-radius: 8px; font-family: 'Work Sans', sans-serif; font-size: 14px; font-weight: 600; text-decoration: none !important; box-sizing: border-box; } /* Sign In — solid primary button */ .nav-sections #store\.links:not(:has(> .header.links > li.customer-welcome)) > .header.links > li.authorization-link > a { background: var(--gwl-account-blue); color: #fff !important; border: 1px solid var(--gwl-account-blue); } /* Create an Account — secondary outlined button */ .nav-sections #store\.links:not(:has(> .header.links > li.customer-welcome)) > .header.links > li:not(.authorization-link):not(.greet) > a { background: #fff; color: var(--gwl-account-blue) !important; border: 1px solid var(--gwl-account-border); } /* -------------------------------------------------------------------- Sidebar navigation — Figma My Account left nav Icons: stroke SVGs from Figma (mask + background-color tint). Labels: Outfit 300 / 16px / 22px / #100F1B Active: text+icon #160B8B, bg rgba(22,11,139,0.05), radius 8px Dividers: #E7E6EC · Logout: #EB001B -------------------------------------------------------------------- */ .block:is(.account-nav, .block-collapsible-nav) { background: #fff !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; margin-bottom: 24px !important; padding: 8px !important; overflow: hidden; } /* Theme sets .block-collapsible-nav .content { background:#f7f9fb } — force white */ .block:is(.account-nav, .block-collapsible-nav) .content { background: #fff !important; border: none !important; box-shadow: none !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; overflow: visible; } } .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; } .block:is(.account-nav, .block-collapsible-nav) .content .nav.items { margin: 0 !important; padding: 0 !important; list-style: none !important; } :is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item { margin: 0 !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: 12px; margin: 0 !important; padding: 12px 14px !important; border-radius: 8px !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-style: normal !important; font-weight: 300 !important; line-height: 22px !important; color: #100F1B !important; text-decoration: none !important; background: transparent !important; box-sizing: border-box !important; } :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: #838384 !important; -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: rgba(22, 11, 139, 0.03) !important; } :is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.current > strong { background: rgba(22, 11, 139, 0.05) !important; border-radius: 8px !important; color: #160B8B !important; font-weight: 300 !important; } :is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.current > strong:before { background-color: #160B8B !important; } :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; } /* Figma groups + divider #E7E6EC */ :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: 8px !important; padding-bottom: 8px !important; border-bottom: 1px solid #E7E6EC !important; } :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%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M13.3327%2014V12.6667C13.3327%2011.9594%2013.0517%2011.2811%2012.5516%2010.781C12.0515%2010.281%2011.3733%2010%2010.666%2010H5.33268C4.62544%2010%203.94716%2010.281%203.44706%2010.781C2.94697%2011.2811%202.66602%2011.9594%202.66602%2012.6667V14%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8.00065%207.33333C9.47341%207.33333%2010.6673%206.13943%2010.6673%204.66667C10.6673%203.19391%209.47341%202%208.00065%202C6.52789%202%205.33398%203.19391%205.33398%204.66667C5.33398%206.13943%206.52789%207.33333%208.00065%207.33333Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M13.3327%2014V12.6667C13.3327%2011.9594%2013.0517%2011.2811%2012.5516%2010.781C12.0515%2010.281%2011.3733%2010%2010.666%2010H5.33268C4.62544%2010%203.94716%2010.281%203.44706%2010.781C2.94697%2011.2811%202.66602%2011.9594%202.66602%2012.6667V14%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8.00065%207.33333C9.47341%207.33333%2010.6673%206.13943%2010.6673%204.66667C10.6673%203.19391%209.47341%202%208.00065%202C6.52789%202%205.33398%203.19391%205.33398%204.66667C5.33398%206.13943%206.52789%207.33333%208.00065%207.33333Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%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%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url%28%23clip0_1824_7917%29%22%3E%3Cpath%20d%3D%22M6.00065%2014.6666C6.36884%2014.6666%206.66732%2014.3681%206.66732%2013.9999C6.66732%2013.6317%206.36884%2013.3333%206.00065%2013.3333C5.63246%2013.3333%205.33398%2013.6317%205.33398%2013.9999C5.33398%2014.3681%205.63246%2014.6666%206.00065%2014.6666Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13.3327%2014.6666C13.7009%2014.6666%2013.9993%2014.3681%2013.9993%2013.9999C13.9993%2013.6317%2013.7009%2013.3333%2013.3327%2013.3333C12.9645%2013.3333%2012.666%2013.6317%2012.666%2013.9999C12.666%2014.3681%2012.9645%2014.6666%2013.3327%2014.6666Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0.666016%200.666748H3.33268L5.11935%209.59342C5.18031%209.90035%205.34729%2010.1761%205.59105%2010.3723C5.8348%2010.5685%206.13981%2010.6727%206.45268%2010.6667H12.9327C13.2456%2010.6727%2013.5506%2010.5685%2013.7943%2010.3723C14.0381%2010.1761%2014.2051%209.90035%2014.266%209.59342L15.3327%204.00008H3.99935%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1824_7917%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23fff%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url%28%23clip0_1824_7917%29%22%3E%3Cpath%20d%3D%22M6.00065%2014.6666C6.36884%2014.6666%206.66732%2014.3681%206.66732%2013.9999C6.66732%2013.6317%206.36884%2013.3333%206.00065%2013.3333C5.63246%2013.3333%205.33398%2013.6317%205.33398%2013.9999C5.33398%2014.3681%205.63246%2014.6666%206.00065%2014.6666Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13.3327%2014.6666C13.7009%2014.6666%2013.9993%2014.3681%2013.9993%2013.9999C13.9993%2013.6317%2013.7009%2013.3333%2013.3327%2013.3333C12.9645%2013.3333%2012.666%2013.6317%2012.666%2013.9999C12.666%2014.3681%2012.9645%2014.6666%2013.3327%2014.6666Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0.666016%200.666748H3.33268L5.11935%209.59342C5.18031%209.90035%205.34729%2010.1761%205.59105%2010.3723C5.8348%2010.5685%206.13981%2010.6727%206.45268%2010.6667H12.9327C13.2456%2010.6727%2013.5506%2010.5685%2013.7943%2010.3723C14.0381%2010.1761%2014.2051%209.90035%2014.266%209.59342L15.3327%204.00008H3.99935%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1824_7917%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23fff%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%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%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M13.8941%203.07333C13.5536%202.73267%2013.1493%202.46243%2012.7043%202.27805C12.2593%202.09368%2011.7824%201.99878%2011.3007%201.99878C10.8191%201.99878%2010.3421%202.09368%209.89716%202.27805C9.45219%202.46243%209.0479%202.73267%208.7074%203.07333L8.00073%203.78L7.29406%203.07333C6.60627%202.38554%205.67342%201.99914%204.70073%201.99914C3.72804%201.99914%202.79519%202.38554%202.1074%203.07333C1.4196%203.76112%201.0332%204.69397%201.0332%205.66666C1.0332%206.63935%201.4196%207.5722%202.1074%208.26L2.81406%208.96666L8.00073%2014.1533L13.1874%208.96666L13.8941%208.26C14.2347%207.91949%2014.505%207.51521%2014.6893%207.07023C14.8737%206.62526%2014.9686%206.14832%2014.9686%205.66666C14.9686%205.185%2014.8737%204.70807%2014.6893%204.26309C14.505%203.81812%2014.2347%203.41383%2013.8941%203.07333Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M13.8941%203.07333C13.5536%202.73267%2013.1493%202.46243%2012.7043%202.27805C12.2593%202.09368%2011.7824%201.99878%2011.3007%201.99878C10.8191%201.99878%2010.3421%202.09368%209.89716%202.27805C9.45219%202.46243%209.0479%202.73267%208.7074%203.07333L8.00073%203.78L7.29406%203.07333C6.60627%202.38554%205.67342%201.99914%204.70073%201.99914C3.72804%201.99914%202.79519%202.38554%202.1074%203.07333C1.4196%203.76112%201.0332%204.69397%201.0332%205.66666C1.0332%206.63935%201.4196%207.5722%202.1074%208.26L2.81406%208.96666L8.00073%2014.1533L13.1874%208.96666L13.8941%208.26C14.2347%207.91949%2014.505%207.51521%2014.6893%207.07023C14.8737%206.62526%2014.9686%206.14832%2014.9686%205.66666C14.9686%205.185%2014.8737%204.70807%2014.6893%204.26309C14.505%203.81812%2014.2347%203.41383%2013.8941%203.07333Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%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%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M14%206.66675C14%2011.3334%208%2015.3334%208%2015.3334C8%2015.3334%202%2011.3334%202%206.66675C2%205.07545%202.63214%203.54933%203.75736%202.42411C4.88258%201.29889%206.4087%200.666748%208%200.666748C9.5913%200.666748%2011.1174%201.29889%2012.2426%202.42411C13.3679%203.54933%2014%205.07545%2014%206.66675Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%208.66675C9.10457%208.66675%2010%207.77132%2010%206.66675C10%205.56218%209.10457%204.66675%208%204.66675C6.89543%204.66675%206%205.56218%206%206.66675C6%207.77132%206.89543%208.66675%208%208.66675Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M14%206.66675C14%2011.3334%208%2015.3334%208%2015.3334C8%2015.3334%202%2011.3334%202%206.66675C2%205.07545%202.63214%203.54933%203.75736%202.42411C4.88258%201.29889%206.4087%200.666748%208%200.666748C9.5913%200.666748%2011.1174%201.29889%2012.2426%202.42411C13.3679%203.54933%2014%205.07545%2014%206.66675Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%208.66675C9.10457%208.66675%2010%207.77132%2010%206.66675C10%205.56218%209.10457%204.66675%208%204.66675C6.89543%204.66675%206%205.56218%206%206.66675C6%207.77132%206.89543%208.66675%208%208.66675Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%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%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url%28%23clip0_1824_7936%29%22%3E%3Cpath%20d%3D%22M8.00065%2014.6666C11.6825%2014.6666%2014.6673%2011.6818%2014.6673%207.99992C14.6673%204.31802%2011.6825%201.33325%208.00065%201.33325C4.31875%201.33325%201.33398%204.31802%201.33398%207.99992C1.33398%2011.6818%204.31875%2014.6666%208.00065%2014.6666Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%2010.6667V8%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%205.33325H8.00667%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1824_7936%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23fff%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url%28%23clip0_1824_7936%29%22%3E%3Cpath%20d%3D%22M8.00065%2014.6666C11.6825%2014.6666%2014.6673%2011.6818%2014.6673%207.99992C14.6673%204.31802%2011.6825%201.33325%208.00065%201.33325C4.31875%201.33325%201.33398%204.31802%201.33398%207.99992C1.33398%2011.6818%204.31875%2014.6666%208.00065%2014.6666Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%2010.6667V8%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%205.33325H8.00667%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1824_7936%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23fff%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%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%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url%28%23clip0_1824_7949%29%22%3E%3Cpath%20d%3D%22M13.3327%208V14.6667H2.66602V8%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14.6673%204.66675H1.33398V8.00008H14.6673V4.66675Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%2014.6667V4.66675%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8.00065%204.66659H5.00065C4.55862%204.66659%204.1347%204.49099%203.82214%204.17843C3.50958%203.86587%203.33398%203.44195%203.33398%202.99992C3.33398%202.55789%203.50958%202.13397%203.82214%201.82141C4.1347%201.50885%204.55862%201.33325%205.00065%201.33325C7.33398%201.33325%208.00065%204.66659%208.00065%204.66659Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%204.66659H11C11.442%204.66659%2011.866%204.49099%2012.1785%204.17843C12.4911%203.86587%2012.6667%203.44195%2012.6667%202.99992C12.6667%202.55789%2012.4911%202.13397%2012.1785%201.82141C11.866%201.50885%2011.442%201.33325%2011%201.33325C8.66667%201.33325%208%204.66659%208%204.66659Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1824_7949%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23fff%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url%28%23clip0_1824_7949%29%22%3E%3Cpath%20d%3D%22M13.3327%208V14.6667H2.66602V8%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14.6673%204.66675H1.33398V8.00008H14.6673V4.66675Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%2014.6667V4.66675%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8.00065%204.66659H5.00065C4.55862%204.66659%204.1347%204.49099%203.82214%204.17843C3.50958%203.86587%203.33398%203.44195%203.33398%202.99992C3.33398%202.55789%203.50958%202.13397%203.82214%201.82141C4.1347%201.50885%204.55862%201.33325%205.00065%201.33325C7.33398%201.33325%208.00065%204.66659%208.00065%204.66659Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%204.66659H11C11.442%204.66659%2011.866%204.49099%2012.1785%204.17843C12.4911%203.86587%2012.6667%203.44195%2012.6667%202.99992C12.6667%202.55789%2012.4911%202.13397%2012.1785%201.82141C11.866%201.50885%2011.442%201.33325%2011%201.33325C8.66667%201.33325%208%204.66659%208%204.66659Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1824_7949%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23fff%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%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%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M8.00065%201.33325L10.0607%205.50659L14.6673%206.17992L11.334%209.42659L12.1207%2014.0133L8.00065%2011.8466L3.88065%2014.0133L4.66732%209.42659L1.33398%206.17992L5.94065%205.50659L8.00065%201.33325Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M8.00065%201.33325L10.0607%205.50659L14.6673%206.17992L11.334%209.42659L12.1207%2014.0133L8.00065%2011.8466L3.88065%2014.0133L4.66732%209.42659L1.33398%206.17992L5.94065%205.50659L8.00065%201.33325Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%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%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M14%207.66669C14.0023%208.5466%2013.7967%209.41461%2013.4%2010.2C12.9296%2011.1412%2012.2065%2011.9328%2011.3116%2012.4862C10.4168%2013.0396%209.3855%2013.3329%208.33333%2013.3334C7.45342%2013.3356%206.58541%2013.1301%205.8%2012.7334L2%2014L3.26667%2010.2C2.86995%209.41461%202.66437%208.5466%202.66667%207.66669C2.66707%206.61452%202.96041%205.58325%203.51381%204.68839C4.06722%203.79352%204.85884%203.0704%205.8%202.60002C6.58541%202.20331%207.45342%201.99772%208.33333%202.00002H8.66667C10.0562%202.07668%2011.3687%202.66319%2012.3528%203.64726C13.3368%204.63132%2013.9233%205.94379%2014%207.33335V7.66669Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M14%207.66669C14.0023%208.5466%2013.7967%209.41461%2013.4%2010.2C12.9296%2011.1412%2012.2065%2011.9328%2011.3116%2012.4862C10.4168%2013.0396%209.3855%2013.3329%208.33333%2013.3334C7.45342%2013.3356%206.58541%2013.1301%205.8%2012.7334L2%2014L3.26667%2010.2C2.86995%209.41461%202.66437%208.5466%202.66667%207.66669C2.66707%206.61452%202.96041%205.58325%203.51381%204.68839C4.06722%203.79352%204.85884%203.0704%205.8%202.60002C6.58541%202.20331%207.45342%201.99772%208.33333%202.00002H8.66667C10.0562%202.07668%2011.3687%202.66319%2012.3528%203.64726C13.3368%204.63132%2013.9233%205.94379%2014%207.33335V7.66669Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%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%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M8.66602%201.33325H3.99935C3.64573%201.33325%203.30659%201.47373%203.05654%201.72378C2.80649%201.97382%202.66602%202.31296%202.66602%202.66659V13.3333C2.66602%2013.6869%202.80649%2014.026%203.05654%2014.2761C3.30659%2014.5261%203.64573%2014.6666%203.99935%2014.6666H11.9993C12.353%2014.6666%2012.6921%2014.5261%2012.9422%2014.2761C13.1922%2014.026%2013.3327%2013.6869%2013.3327%2013.3333V5.99992L8.66602%201.33325Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8.66602%201.33325V5.99992H13.3327%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M8.66602%201.33325H3.99935C3.64573%201.33325%203.30659%201.47373%203.05654%201.72378C2.80649%201.97382%202.66602%202.31296%202.66602%202.66659V13.3333C2.66602%2013.6869%202.80649%2014.026%203.05654%2014.2761C3.30659%2014.5261%203.64573%2014.6666%203.99935%2014.6666H11.9993C12.353%2014.6666%2012.6921%2014.5261%2012.9422%2014.2761C13.1922%2014.026%2013.3327%2013.6869%2013.3327%2013.3333V5.99992L8.66602%201.33325Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8.66602%201.33325V5.99992H13.3327%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%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%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M2.66732%202.66675H13.334C14.0673%202.66675%2014.6673%203.26675%2014.6673%204.00008V12.0001C14.6673%2012.7334%2014.0673%2013.3334%2013.334%2013.3334H2.66732C1.93398%2013.3334%201.33398%2012.7334%201.33398%2012.0001V4.00008C1.33398%203.26675%201.93398%202.66675%202.66732%202.66675Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14.6673%204L8.00065%208.66667L1.33398%204%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M2.66732%202.66675H13.334C14.0673%202.66675%2014.6673%203.26675%2014.6673%204.00008V12.0001C14.6673%2012.7334%2014.0673%2013.3334%2013.334%2013.3334H2.66732C1.93398%2013.3334%201.33398%2012.7334%201.33398%2012.0001V4.00008C1.33398%203.26675%201.93398%202.66675%202.66732%202.66675Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14.6673%204L8.00065%208.66667L1.33398%204%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%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%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url%28%23clip0_1824_7984%29%22%3E%3Cpath%20d%3D%22M8.00065%2014.6666C11.6825%2014.6666%2014.6673%2011.6818%2014.6673%207.99992C14.6673%204.31802%2011.6825%201.33325%208.00065%201.33325C4.31875%201.33325%201.33398%204.31802%201.33398%207.99992C1.33398%2011.6818%204.31875%2014.6666%208.00065%2014.6666Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6.06055%206.00014C6.21728%205.55458%206.52665%205.17887%206.93385%204.93956C7.34105%204.70024%207.81981%204.61276%208.28533%204.69261C8.75085%204.77246%209.17309%205.01449%209.47727%205.37582C9.78144%205.73716%209.94792%206.19448%209.94721%206.6668C9.94721%208.00014%207.94721%208.6668%207.94721%208.6668%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%2011.3333H8.00667%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1824_7984%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23fff%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url%28%23clip0_1824_7984%29%22%3E%3Cpath%20d%3D%22M8.00065%2014.6666C11.6825%2014.6666%2014.6673%2011.6818%2014.6673%207.99992C14.6673%204.31802%2011.6825%201.33325%208.00065%201.33325C4.31875%201.33325%201.33398%204.31802%201.33398%207.99992C1.33398%2011.6818%204.31875%2014.6666%208.00065%2014.6666Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6.06055%206.00014C6.21728%205.55458%206.52665%205.17887%206.93385%204.93956C7.34105%204.70024%207.81981%204.61276%208.28533%204.69261C8.75085%204.77246%209.17309%205.01449%209.47727%205.37582C9.78144%205.73716%209.94792%206.19448%209.94721%206.6668C9.94721%208.00014%207.94721%208.6668%207.94721%208.6668%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%2011.3333H8.00667%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1824_7984%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23fff%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%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%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M12.6667%207.33325H3.33333C2.59695%207.33325%202%207.93021%202%208.66659V13.3333C2%2014.0696%202.59695%2014.6666%203.33333%2014.6666H12.6667C13.403%2014.6666%2014%2014.0696%2014%2013.3333V8.66659C14%207.93021%2013.403%207.33325%2012.6667%207.33325Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4.66602%207.33325V4.66659C4.66602%203.78253%205.01721%202.93468%205.64233%202.30956C6.26745%201.68444%207.11529%201.33325%207.99935%201.33325C8.8834%201.33325%209.73125%201.68444%2010.3564%202.30956C10.9815%202.93468%2011.3327%203.78253%2011.3327%204.66659V7.33325%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M12.6667%207.33325H3.33333C2.59695%207.33325%202%207.93021%202%208.66659V13.3333C2%2014.0696%202.59695%2014.6666%203.33333%2014.6666H12.6667C13.403%2014.6666%2014%2014.0696%2014%2013.3333V8.66659C14%207.93021%2013.403%207.33325%2012.6667%207.33325Z%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4.66602%207.33325V4.66659C4.66602%203.78253%205.01721%202.93468%205.64233%202.30956C6.26745%201.68444%207.11529%201.33325%207.99935%201.33325C8.8834%201.33325%209.73125%201.68444%2010.3564%202.30956C10.9815%202.93468%2011.3327%203.78253%2011.3327%204.66659V7.33325%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%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%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6%2014H3.33333C2.97971%2014%202.64057%2013.8595%202.39052%2013.6095C2.14048%2013.3594%202%2013.0203%202%2012.6667V3.33333C2%202.97971%202.14048%202.64057%202.39052%202.39052C2.64057%202.14048%202.97971%202%203.33333%202H6%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10.666%2011.3334L13.9993%208.00008L10.666%204.66675%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14%208H6%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6%2014H3.33333C2.97971%2014%202.64057%2013.8595%202.39052%2013.6095C2.14048%2013.3594%202%2013.0203%202%2012.6667V3.33333C2%202.97971%202.14048%202.64057%202.39052%202.39052C2.64057%202.14048%202.97971%202%203.33333%202H6%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10.666%2011.3334L13.9993%208.00008L10.666%204.66675%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14%208H6%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); } /* Keep returns/support glyphs if those links exist (not in Figma screenshot) */ :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-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 — Figma #EB001B */ :is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-logout > a { color: #EB001B !important; background: transparent !important; font-weight: 300 !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: #EB001B !important; } :is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.icon-logout > a:hover { background: rgba(235, 0, 27, 0.05) !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: 4px; padding: 8px 16px; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 500; 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; } /* Same hide, requested separately for the Sign In / Create Account / Forgot Password pages — no bottom-nav collision to avoid here (those pages don't have one), just decluttering the compact single-column auth form layout on mobile. */ :is(.customer-account-login, .customer-account-create, .customer-account-forgotpassword) #hdmx__contact-button, :is(.customer-account-login, .customer-account-create, .customer-account-forgotpassword) 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 Figma My Account (desktop 1816:5400 / mobile 2029:52771) — Outfit tokens matching guest auth pages (#0A053D / #160B8B / #E5E8EE / radius 4). -------------------------------------------------------------------- */ .account .block-dashboard-info, .account .block-dashboard-newsletter, .account .block-dashboard-addresses, .account .block-dashboard-orders { background: #fff; border: 1px solid #E7E6EC; border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: none; } .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: 0 !important; margin-bottom: 16px !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: 'Outfit', sans-serif !important; font-size: 18px !important; font-weight: 500 !important; line-height: 24px !important; color: #100F1B !important; } .account .block-title-actions { display: flex; align-items: center; gap: 8px; 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 { font-family: 'Outfit', sans-serif !important; color: #160B8B !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; text-decoration: underline !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; opacity: 0.85; } /* Figma: "Edit | Change Password" pipe separator */ .account .block-title-actions .action + .action { padding-left: 0; border-left: 0; } .account .block-title-actions .action + .action:before { content: '|'; display: inline-block; margin-inline-end: 8px; color: #E7E6EC; font-weight: 400; } .account .block-dashboard-info .box-content, .account .block-dashboard-newsletter .box-content { font-family: 'Outfit', sans-serif !important; color: #6C698B; font-size: 16px; font-style: normal; font-weight: 300; line-height: 22px; } .account .block-dashboard-info .box-content .gwl-info-name { color: #100F1B; font-size: 16px; font-weight: 400; line-height: 22px; } .account .block-dashboard-info .box-content .gwl-info-meta { color: #6C698B; font-size: 16px; font-weight: 300; line-height: 22px; } /* Figma Address: equal two-column row under title. Magento's clearfix ::before/::after on .block-content become extra grid/flex items and stagger Shipping/Billing — kill them here. */ .account .block-dashboard-addresses .block-content { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 24px !important; width: 100% !important; clear: both !important; } .account .block-dashboard-addresses .block-content::before, .account .block-dashboard-addresses .block-content::after { content: none !important; display: none !important; } .account .column.main .block-dashboard-addresses .block-content .box, .account .block-dashboard-addresses .box { display: block !important; flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; float: none !important; clear: none !important; margin: 0 !important; padding: 0 !important; } .account .column.main .block-dashboard-addresses .block-content .box:nth-child(1), .account .column.main .block-dashboard-addresses .block-content .box:nth-child(2) { float: none !important; clear: none !important; width: auto !important; } .account .block-dashboard-addresses .box-title { display: block !important; margin: 0 0 4px !important; } .account .block-dashboard-addresses .box-title span { font-family: 'Outfit', sans-serif !important; color: #6C698B; font-size: 14px; font-weight: 400; line-height: 20px; } .account .block-dashboard-addresses .box-content { margin-top: 0; font-family: 'Outfit', sans-serif !important; color: #100F1B; font-size: 14px; font-weight: 400; line-height: 20px; text-align: start; } .account .block-dashboard-addresses .box-content address { font-style: normal; font-family: inherit; color: inherit; line-height: inherit; } .account .block-dashboard-addresses .box-content address a, .account .block-dashboard-addresses .box-content address a[href^="tel:"] { color: #100F1B !important; text-decoration: none !important; } @media only screen and (max-width: 767px) { .account .block-dashboard-addresses .block-content { flex-direction: column !important; flex-wrap: wrap !important; gap: 16px !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; font-family: 'Outfit', sans-serif !important; color: #6C698B; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; background: #F5F5F7; border-bottom: 1px solid #E7E6EC; padding: 10px 12px; } .account .block-dashboard-orders table.table-order-items.recent thead th:first-child { border-top-right-radius: 2px; border-top-left-radius: 0; } .account .block-dashboard-orders table.table-order-items.recent thead th:last-child { border-top-left-radius: 2px; border-top-right-radius: 0; } .account .block-dashboard-orders table.table-order-items.recent tbody td { border-top: 1px solid #E7E6EC; padding: 10px 12px; font-family: 'Outfit', sans-serif !important; font-size: 14px; color: #6C698B; font-weight: 400; vertical-align: middle; } .account .block-dashboard-orders table.table-order-items.recent tbody td.col.total, .account .block-dashboard-orders table.table-order-items.recent tbody td.col.total .price { color: #58575F; font-weight: 400; } .account .block-dashboard-orders table.table-order-items.recent .order-number-link { color: #160B8B; text-decoration: underline; font-weight: 400; } .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 { font-family: 'Outfit', sans-serif !important; color: #160B8B; text-decoration: underline; font-size: 13px; font-weight: 400; } .account .block-dashboard-orders table.table-order-items.recent .col.actions .action + .action { margin-left: 12px; } /* Status pills — Figma: 86x28, radius 4px, P4 Bold white */ .account .block-dashboard-orders .order-status-pill, .account .order-status-pill { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 86px; height: 28px; padding: 4px 12px; border-radius: 4px; font-family: 'Outfit', sans-serif !important; font-size: 14px; font-style: normal; font-weight: 500; line-height: 20px; color: #fff; white-space: nowrap; text-align: center; } .account .block-dashboard-orders .order-status-pill.status-success, .account .order-status-pill.status-success { background: #34A853; color: #fff; } .account .block-dashboard-orders .order-status-pill.status-danger, .account .order-status-pill.status-danger { background: #EA4335; color: #fff; } .account .block-dashboard-orders .order-status-pill.status-warning, .account .order-status-pill.status-warning { background: #F59E0B; color: #fff; } .account .block-dashboard-orders .order-status-pill.status-neutral, .account .order-status-pill.status-neutral { background: #8A94A6; color: #fff; } /* -------------------------------------------------------------------- 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) { /* Figma mobile: Recent Orders is a section title + free-standing cards (not one outer bordered wrapper). */ .customer-account-index .block-dashboard-orders { background: transparent; border: 0; border-radius: 0; padding: 0; margin-bottom: 24px; box-shadow: none; } .customer-account-index .block-dashboard-orders .block-title.order { padding-bottom: 16px !important; margin-bottom: 0 !important; } .customer-account-index .block-dashboard-orders .block-title.order > a.action.view { display: none !important; } .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 #E7E6EC; border-radius: 8px; padding: 16px; background: #fff; } .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-family: 'Outfit', sans-serif !important; font-size: 13px; color: var(--gwl-account-text); } .account .gwl-recent-order__id .order-number-link { color: var(--gwl-account-blue); text-decoration: none; font-weight: 500; } .account .gwl-recent-order__reorder { font-family: 'Outfit', sans-serif !important; color: var(--gwl-account-blue); font-size: 13px; font-weight: 500; 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: 64px; min-height: 64px; border-radius: 4px; 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-family: 'Outfit', sans-serif !important; font-size: 14px; font-weight: 600; color: #0A053D; line-height: 20px; } .account .gwl-recent-order__price, .account .gwl-recent-order__price .price { font-family: 'Outfit', sans-serif !important; } .account .gwl-recent-order__price { font-size: 14px; font-weight: 600; color: #0A053D; 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: start; font-family: 'Outfit', sans-serif !important; font-size: 12px; font-weight: 400; line-height: 16px; 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; } /* ========================================================================== GWL Account Pagination — PLP-match restyle (My Orders) Brings this pagination in line with the PLP bottom pager (see saudiceramics.css "GWL PLP Product Listing Changes — bottom pagination (Figma)"): 36x36 bordered squares, solid black square for the active page, "Showing N Per Page" limiter pinned to the left. Colors are hardcoded to match the PLP source literally (#100f1b/#d9d9d9/#ffffff), not tokenized, for 1:1 parity with that block. Not RTL-mirrored — the PLP reference itself uses the same literal padding/background-position in the AR stylesheet as in EN, so this replicates it verbatim. ========================================================================== */ /* Scoped to .sales-order-history (the body class on this page) — not just .block-order-history-card, which My Product Reviews' card also carries (a shared base class between the two templates). Without this scope, these rules leak into Reviews' own top/bottom-split toolbar layout and scramble it. */ .sales-order-history .block-order-history-card { display: flex; flex-flow: row wrap; width: 100%; box-sizing: border-box; } /* pager.phtml wraps everything (.toolbar-amount/.pages/.limiter) in its own
    when getUseContainer() is true (the default) — that div, not its children, was the actual flex item here, so .pages/.limiter stacked as normal block children inside it instead of sharing this row. display:contents removes the wrapper from the box model so its children become direct flex items of the card, honoring the order rules below. */ .sales-order-history .block-order-history-card .order-products-toolbar, .sales-order-history .block-order-history-card .order-products-toolbar .pager { display: contents; } /* Parent theme absolutely-positions .toolbar-amount/.limiter near the page title by default — cancel that so they take their normal place here. */ .sales-order-history .block-order-history-card .toolbar-amount, .sales-order-history .block-order-history-card .limiter { position: static !important; float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; } .sales-order-history .block-order-history-card .toolbar-amount { order: -3; flex: 1 1 0%; min-width: 0; margin-block-end: 16px !important; /* Parent theme's base .order-products-toolbar .toolbar-amount rule sets text-align:center, which visually centers this text inside its grown flex box instead of hugging the row's start edge — override it. */ text-align: start; font-family: 'Work Sans', sans-serif; font-size: 13px; color: var(--gwl-account-muted); } .sales-order-history .block-order-history-card .limiter { order: -2; flex: 0 0 auto; margin: 0 0 16px !important; display: flex !important; align-items: center; gap: 8px; } .sales-order-history .block-order-history-card .limiter-label, .sales-order-history .block-order-history-card .limiter-text { font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; color: #100f1b; } .sales-order-history .block-order-history-card .limiter-options { appearance: none; min-width: 56px; height: 36px; padding: 6px 28px 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23100f1b' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 10px 6px; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600; color: #100f1b; box-shadow: none; cursor: pointer; } .sales-order-history .block-order-history-card .table-wrapper.orders-history, .sales-order-history .block-order-history-card .gwl-recent-orders { order: -1; flex: 1 1 100%; } /* The parent theme absolutely-positions .pages at this breakpoint (for its own default, non-flex pagination layout) — that takes it out of flow entirely and its containing block becomes the card, not this toolbar row, so it renders overflowing off the right edge of the card. Cancel it so .pages is a normal flex item again, on its own full-width row below the table. */ .sales-order-history .block-order-history-card .pages { display: block; order: 1; flex: 1 1 100%; position: static !important; width: 100% !important; max-width: 100% !important; margin: 16px 0 0 !important; } .block-order-history-card .order-products-toolbar .pages-items { display: flex; flex-wrap: wrap; justify-content: flex-end; width: 100%; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; } .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: 36px; height: 36px; padding: 0 10px; border: 1px solid #d9d9d9; border-radius: 4px; background-color: #ffffff; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; color: #100f1b; text-decoration: none; transition: all 0.2s ease; } .block-order-history-card .order-products-toolbar .pages-items a.page:hover, .block-order-history-card .order-products-toolbar .pages-items a.action:hover { border-color: #100f1b; color: #100f1b; } .block-order-history-card .order-products-toolbar .pages-items li.current strong.page { background: #100f1b !important; border-color: #100f1b !important; color: #ffffff !important; font-weight: 600; } /* First/Last — icon-only squares (double chevron). Two template variants are in play across account pages depending on which pager.phtml override resolves (a stock-style copy uses a.page.first/.last; the theme's own Figma-pager copy — see its "gwl-plp-pager__next" class below — uses a.action.first/.last instead) — cover both so this looks right regardless of which one a given page/cache state serves. */ .block-order-history-card .order-products-toolbar .pages-items a.page.first, .block-order-history-card .order-products-toolbar .pages-items a.page.last, .block-order-history-card .order-products-toolbar .pages-items a.action.first, .block-order-history-card .order-products-toolbar .pages-items a.action.last { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; } .block-order-history-card .order-products-toolbar .pages-items a.page.first, .block-order-history-card .order-products-toolbar .pages-items a.action.first { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M6.5 2 2.5 6l4 4M11.5 2 7.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .block-order-history-card .order-products-toolbar .pages-items a.page.last, .block-order-history-card .order-products-toolbar .pages-items a.action.last { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M2.5 2 6.5 6l-4 4M7.5 2 11.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Previous — icon-only square (single chevron) */ .block-order-history-card .order-products-toolbar .pages-items a.action.previous { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M7.5 2 3.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Next — keeps visible text + trailing chevron */ .block-order-history-card .order-products-toolbar .pages-items a.action.next { width: auto; min-width: 0; padding: 0 34px 0 14px; background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2 8.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; } /* The parent theme visually-hides every non-.label span inside .pages .action (an sr-only-style width:1px/height:1px/overflow:hidden clamp, its default icon-only Prev/Next treatment) — undo it just for Next's visible text span, since Prev stays icon-only by design. Every property here has to be reset explicitly; display:inline alone still leaves the clamp in effect. */ .block-order-history-card .order-products-toolbar .pages-items a.action.next span:not(.label) { display: inline !important; position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; margin: 0 !important; } /* The Figma-pager template variant (see comment above the First/Last rule) sidesteps that same clamp itself by using an instead of a for Next's visible text — but an unstyled is italic by default in every browser, and the sitewide PLP rule that normally resets it (".gwl-plp-pager__next-label") is scoped to body.gwl-plp-figma, which account pages don't carry. Reset it here too. */ .block-order-history-card .order-products-toolbar .pages-items .gwl-plp-pager__next-label { display: inline; font-style: normal; } /* -------------------------------------------------------------------- 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 — matching the split used on every other account list page, the top instance shows the item count + "Show N per page" limiter (its own row above the grid); the bottom instance shows only the page numbers (its own row below the grid). Base rules here cover the top instance; the more specific sibling-combinator selector further down (".form-wishlist-items ~ ...") overrides them for the bottom instance. */ .wishlist-index-index .toolbar.wishlist-toolbar .pages { display: none !important; } .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

    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

    , 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; } /* ========================================================================== GWL Account Pagination — PLP-match restyle (Wishlist) Same spec as My Orders above — see that block's comment for the full rationale. The limiter was previously force-hidden; it is now shown, as its own row above the grid (see the top/bottom split comment further up). ========================================================================== */ .wishlist-index-index .toolbar.wishlist-toolbar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; gap: 16px 24px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--gwl-account-border); } /* Belt-and-suspenders alongside justify-content:space-between above: let .toolbar-amount grow to consume all the row's spare width (the same technique My Orders/Address Book use) so the count text hugs the true left edge of the row and pushes the limiter flush right, even if this row's own box ever ends up short of the grid's full width for any reason. */ .wishlist-index-index .toolbar.wishlist-toolbar .toolbar-amount { flex: 1 1 auto; min-width: 0; } .wishlist-index-index .toolbar.wishlist-toolbar .limiter { flex: 0 0 auto; } .wishlist-index-index .form-wishlist-items ~ .toolbar.wishlist-toolbar { justify-content: flex-end; margin-top: 8px; margin-bottom: 0; padding-bottom: 0; padding-top: 16px; border-bottom: 0; border-top: 1px solid var(--gwl-account-border); } .wishlist-index-index .form-wishlist-items ~ .toolbar.wishlist-toolbar .pages { display: block !important; } .wishlist-index-index .form-wishlist-items ~ .toolbar.wishlist-toolbar .toolbar-amount, .wishlist-index-index .form-wishlist-items ~ .toolbar.wishlist-toolbar .limiter { display: none !important; } /* pager.phtml wraps everything in its own
    — see the matching comment on My Orders above for the full rationale. */ .wishlist-index-index .toolbar.wishlist-toolbar .pager { display: contents; } .wishlist-index-index .toolbar.wishlist-toolbar .toolbar-amount { font-family: 'Work Sans', sans-serif; font-size: 13px; color: var(--gwl-account-muted); } .wishlist-index-index .toolbar.wishlist-toolbar .limiter { display: flex !important; align-items: center; gap: 8px; float: none !important; margin: 0 !important; } .wishlist-index-index .toolbar.wishlist-toolbar .limiter-label, .wishlist-index-index .toolbar.wishlist-toolbar .limiter-text { font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; color: #100f1b; } .wishlist-index-index .toolbar.wishlist-toolbar .limiter-options { appearance: none; min-width: 56px; height: 36px; padding: 6px 28px 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23100f1b' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 10px 6px; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600; color: #100f1b; box-shadow: none; cursor: pointer; } /* position:static overrides the parent theme's absolute-positioning of .pages at this breakpoint (see the matching comment on the My Orders pagination above) — without it .pages overflows off the card's right edge instead of shrinking/wrapping inside the toolbar row. */ .wishlist-index-index .toolbar.wishlist-toolbar .pages { display: block; position: static !important; flex: 1 1 auto; min-width: 0; margin: 0; float: none !important; } .wishlist-index-index .toolbar.wishlist-toolbar .pages-items { display: flex; flex-wrap: wrap; justify-content: flex-end; width: 100%; align-items: center; gap: 6px; 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: 36px; height: 36px; padding: 0 10px; border: 1px solid #d9d9d9; border-radius: 4px; background-color: #ffffff; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; color: #100f1b !important; text-decoration: none !important; transition: all 0.2s ease; } .wishlist-index-index .toolbar.wishlist-toolbar .pages li.current strong.page { background: #100f1b !important; border-color: #100f1b !important; color: #ffffff !important; font-weight: 600; } .wishlist-index-index .toolbar.wishlist-toolbar .pages a.page:hover, .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action:hover { border-color: #100f1b; color: #100f1b !important; } /* First/Last — icon-only squares (double chevron). Two template variants are in play across account pages depending on which pager.phtml override resolves (a stock-style copy uses a.page.first/.last; the theme's own Figma-pager copy — see its "gwl-plp-pager__next" class below — uses a.action.first/.last instead) — cover both so this looks right regardless of which one a given page/cache state serves. */ .wishlist-index-index .toolbar.wishlist-toolbar .pages a.page.first, .wishlist-index-index .toolbar.wishlist-toolbar .pages a.page.last, .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action.first, .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action.last { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; } .wishlist-index-index .toolbar.wishlist-toolbar .pages a.page.first, .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action.first { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M6.5 2 2.5 6l4 4M11.5 2 7.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .wishlist-index-index .toolbar.wishlist-toolbar .pages a.page.last, .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action.last { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M2.5 2 6.5 6l-4 4M7.5 2 11.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Previous — icon-only square (single chevron) */ .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action.previous { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M7.5 2 3.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Next — keeps visible text + trailing chevron */ .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action.next { width: auto; min-width: 0; padding: 0 34px 0 14px; background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2 8.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; } .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action.next span:not(.label) { display: inline !important; position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; margin: 0 !important; } /* The Figma-pager template variant (see comment above the First/Last rule) sidesteps that same clamp itself by using an instead of a for Next's visible text — but an unstyled is italic by default in every browser, and the sitewide PLP rule that normally resets it (".gwl-plp-pager__next-label") is scoped to body.gwl-plp-figma, which account pages don't carry. Reset it here too. */ .wishlist-index-index .toolbar.wishlist-toolbar .pages .gwl-plp-pager__next-label { display: inline; font-style: normal; } @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; } /* ========================================================================== GWL Account Pagination — PLP-match restyle (Address Book) Same spec as My Orders/My Returns/My Product Reviews/Ask It above — see My Orders' comments for the full rationale (the .pager wrapper div and the two pager.phtml template variants). Previously toolbar-amount/limiter were force-hidden and the page numbers were completely unstyled. ========================================================================== */ /* grid.phtml only prints the pager ONCE (below the address cards), so there's no separate "top" markup to show/hide the way Wishlist/My Returns/Ask It/Reviews have — instead this uses the same card-level flex-reorder technique as My Orders above (see its comment for the full rationale): .block-content becomes the flex container, the toolbar's wrapper divs dissolve via display:contents, and .toolbar-amount/.pages/ .limiter become direct flex items interleaved with .gwl-addr-cards via `order`, so item count + "Show N per page" limiter render as their own row above the address cards, and the page-number pagination renders as its own row below them. */ .account .gwl-address-extra .block-content { display: flex; flex-flow: row wrap; } .account .gwl-address-extra .customer-addresses-toolbar, .account .gwl-address-extra .customer-addresses-toolbar .pager { display: contents; } .account .gwl-address-extra .toolbar-amount, .account .gwl-address-extra .limiter { position: static !important; float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; } .account .gwl-address-extra .toolbar-amount { order: -3; flex: 1 1 0%; min-width: 0; margin-block-end: 16px !important; /* Parent theme's base .customer-addresses-toolbar .toolbar-amount rule sets text-align:center, which visually centers this text inside its grown flex box instead of hugging the row's start edge — override. */ text-align: start; font-family: 'Work Sans', sans-serif; font-size: 13px; color: var(--gwl-account-muted); } .account .gwl-address-extra .limiter { order: -2; flex: 0 0 auto; margin: 0 0 16px !important; display: flex !important; align-items: center; gap: 8px; } .account .gwl-address-extra .limiter-label, .account .gwl-address-extra .limiter-text { font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; color: #100f1b; } .account .gwl-address-extra .limiter-options { appearance: none; min-width: 56px; height: 36px; padding: 6px 28px 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23100f1b' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 10px 6px; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600; color: #100f1b; box-shadow: none; cursor: pointer; } .account .gwl-address-extra .gwl-addr-cards { order: -1; flex: 1 1 100%; } .account .gwl-address-extra .pages { display: block; order: 1; flex: 1 1 100%; position: static !important; width: 100% !important; max-width: 100% !important; margin: 16px 0 0 !important; } .account .gwl-address-extra .customer-addresses-toolbar .pages-items { display: flex; flex-wrap: wrap; justify-content: flex-end; width: 100%; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; } .account .gwl-address-extra .customer-addresses-toolbar .pages-items li.item { margin: 0 !important; } .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.page, .account .gwl-address-extra .customer-addresses-toolbar .pages-items strong.page, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #d9d9d9; border-radius: 4px; background-color: #ffffff; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; color: #100f1b; text-decoration: none; transition: all 0.2s ease; } .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.page:hover, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action:hover { border-color: #100f1b; color: #100f1b; } .account .gwl-address-extra .customer-addresses-toolbar .pages-items li.current strong.page { background: #100f1b !important; border-color: #100f1b !important; color: #ffffff !important; font-weight: 600; } /* First/Last — icon-only squares (double chevron). Two template variants are in play across account pages depending on which pager.phtml override resolves (a stock-style copy uses a.page.first/.last; the theme's own Figma-pager copy — see its "gwl-plp-pager__next" class below — uses a.action.first/.last instead) — cover both so this looks right regardless of which one a given page/cache state serves. */ .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.page.first, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.page.last, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.first, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.last { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; } .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.page.first, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.first { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M6.5 2 2.5 6l4 4M11.5 2 7.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.page.last, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.last { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M2.5 2 6.5 6l-4 4M7.5 2 11.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Previous — icon-only square (single chevron) */ .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.previous { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M7.5 2 3.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Next — keeps visible text + trailing chevron */ .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.next { width: auto; min-width: 0; padding: 0 34px 0 14px; background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2 8.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; } /* The parent theme visually-hides every non-.label span inside .pages .action (an sr-only-style width:1px/height:1px/overflow:hidden clamp, its default icon-only Prev/Next treatment) — undo it just for Next's visible text span, since Prev stays icon-only by design. Every property here has to be reset explicitly; display:inline alone still leaves the clamp in effect. */ .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.next span:not(.label) { display: inline !important; position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; margin: 0 !important; } /* The Figma-pager template variant (see comment above the First/Last rule) sidesteps that same clamp itself by using an instead of a for Next's visible text — but an unstyled is italic by default in every browser, and the sitewide PLP rule that normally resets it (".gwl-plp-pager__next-label") is scoped to body.gwl-plp-figma, which account pages don't carry. Reset it here too. */ .account .gwl-address-extra .customer-addresses-toolbar .pages-items .gwl-plp-pager__next-label { display: inline; font-style: normal; } /* 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
    after each ; 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; } /* Wishlist sidebar card must not appear on My Account pages */ .account .sidebar-additional .block.block-wishlist { display: none !important; } .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; } /* ========================================================================== GWL Account Pagination — PLP-match restyle (My Product Reviews) No pagination CSS previously existed for this page — added from scratch, same spec as My Orders/My Returns above. list.phtml prints the SAME full pager markup (item count + limiter + page numbers) twice — once in a ".top" toolbar above the table, once in a ".bottom" toolbar below it. Every account list page follows the same split: item count + "Show N per page" limiter as their own row above the list/table; the page-number pagination as its own row below it. Here that means showing count+limiter in ".top" (hide its .pages) and only .pages in ".bottom" (hide its count+limiter). ========================================================================== */ .review-customer-index .gwl-review-list .products-reviews-toolbar.top { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; gap: 16px 24px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--gwl-account-border); } .review-customer-index .gwl-review-list .products-reviews-toolbar .toolbar-amount { flex: 1 1 auto; min-width: 0; /* Parent theme's base .products-reviews-toolbar .toolbar-amount rule sets text-align:center — override so the count hugs the row's start edge. */ text-align: start; } .review-customer-index .gwl-review-list .products-reviews-toolbar .limiter { flex: 0 0 auto; } .review-customer-index .gwl-review-list .products-reviews-toolbar.top .pages { display: none !important; } .review-customer-index .gwl-review-list .products-reviews-toolbar.bottom { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gwl-account-border); } .review-customer-index .gwl-review-list .products-reviews-toolbar.bottom .toolbar-amount, .review-customer-index .gwl-review-list .products-reviews-toolbar.bottom .limiter { display: none !important; } /* pager.phtml/history_pager.phtml wrap everything in their own
    — see the matching comment on My Orders above for the full rationale. */ .review-customer-index .gwl-review-list .products-reviews-toolbar .pager { display: contents; } .review-customer-index .gwl-review-list .products-reviews-toolbar .toolbar-amount, .review-customer-index .gwl-review-list .products-reviews-toolbar .limiter { position: static !important; float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; } .review-customer-index .gwl-review-list .products-reviews-toolbar .toolbar-amount { order: -2; font-family: 'Work Sans', sans-serif; font-size: 13px; color: var(--gwl-account-muted); } .review-customer-index .gwl-review-list .products-reviews-toolbar .limiter { display: flex !important; align-items: center; gap: 8px; order: -1; } .review-customer-index .gwl-review-list .products-reviews-toolbar .limiter-label, .review-customer-index .gwl-review-list .products-reviews-toolbar .limiter-text { font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; color: #100f1b; } .review-customer-index .gwl-review-list .products-reviews-toolbar .limiter-options { appearance: none; min-width: 56px; height: 36px; padding: 6px 28px 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23100f1b' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 10px 6px; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600; color: #100f1b; box-shadow: none; cursor: pointer; } /* position:static overrides the parent theme's absolute-positioning of .pages at this breakpoint (see the matching comment on the My Orders pagination above) — without it .pages overflows off the card's right edge instead of shrinking/wrapping inside the toolbar row. */ .review-customer-index .gwl-review-list .products-reviews-toolbar .pages { display: block; position: static !important; flex: 1 1 auto; min-width: 0; margin: 0; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items { display: flex; flex-wrap: wrap; justify-content: flex-end; width: 100%; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items li.item { margin: 0 !important; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page, .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items strong.page, .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #d9d9d9; border-radius: 4px; background-color: #ffffff; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; color: #100f1b; text-decoration: none; transition: all 0.2s ease; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page:hover, .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action:hover { border-color: #100f1b; color: #100f1b; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items li.current strong.page { background: #100f1b !important; border-color: #100f1b !important; color: #ffffff !important; font-weight: 600; } /* First/Last — icon-only squares (double chevron) */ .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.first, .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.last { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.first { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M6.5 2 2.5 6l4 4M11.5 2 7.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.last { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M2.5 2 6.5 6l-4 4M7.5 2 11.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Previous — icon-only square (single chevron) */ .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action.previous { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M7.5 2 3.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Next — keeps visible text + trailing chevron */ .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action.next { width: auto; min-width: 0; padding: 0 34px 0 14px; background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2 8.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action.next span:not(.label) { display: inline !important; position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; margin: 0 !important; } /* ========================================================================== GWL 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; } /* ========================================================================== GWL Account Pagination — PLP-match restyle (My Returns) Same spec as My Orders above — see that block's comment for the full rationale. list.phtml prints the SAME full pager markup twice — once in a plain (".top", unmodified) toolbar above the list, once in a ".bottom" toolbar below it — matching the split used on every other account list page: item count + "Show N per page" limiter as their own row above the list (.top, shown here), page-number pagination as its own row below it (.bottom, hides count+limiter, shows only .pages). ========================================================================== */ .rma-rma-list .gwl-returns-list .order-products-toolbar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; gap: 16px 24px; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--gwl-account-border); } .rma-rma-list .gwl-returns-list .order-products-toolbar .toolbar-amount { flex: 1 1 auto; min-width: 0; /* Parent theme's base .order-products-toolbar .toolbar-amount rule sets text-align:center — override so the count hugs the row's start edge. */ text-align: start; } .rma-rma-list .gwl-returns-list .order-products-toolbar .limiter { flex: 0 0 auto; } .rma-rma-list .gwl-returns-list .order-products-toolbar .pages { display: none !important; } /* pager.phtml wraps everything in its own
    — see the matching comment on My Orders above for the full rationale. */ .rma-rma-list .gwl-returns-list .order-products-toolbar .pager { display: contents; } .rma-rma-list .gwl-returns-list .order-products-toolbar.bottom { justify-content: flex-end; margin: 16px 0 0; padding: 16px 0 0; border-bottom: 0; border-top: 1px solid var(--gwl-account-border); } .rma-rma-list .gwl-returns-list .order-products-toolbar.bottom .pages { display: block !important; } .rma-rma-list .gwl-returns-list .order-products-toolbar.bottom .toolbar-amount, .rma-rma-list .gwl-returns-list .order-products-toolbar.bottom .limiter { display: none !important; } .rma-rma-list .gwl-returns-list .order-products-toolbar .toolbar-amount, .rma-rma-list .gwl-returns-list .order-products-toolbar .limiter { position: static !important; float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; } .rma-rma-list .gwl-returns-list .order-products-toolbar .toolbar-amount { order: -2; font-family: 'Work Sans', sans-serif; font-size: 13px; color: var(--gwl-account-muted); } .rma-rma-list .gwl-returns-list .order-products-toolbar .limiter { display: flex !important; align-items: center; gap: 8px; order: -1; } .rma-rma-list .gwl-returns-list .order-products-toolbar .limiter-label, .rma-rma-list .gwl-returns-list .order-products-toolbar .limiter-text { font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; color: #100f1b; } .rma-rma-list .gwl-returns-list .order-products-toolbar .limiter-options { appearance: none; min-width: 56px; height: 36px; padding: 6px 28px 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23100f1b' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 10px 6px; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600; color: #100f1b; box-shadow: none; cursor: pointer; } /* position:static overrides the parent theme's absolute-positioning of .pages at this breakpoint (see the matching comment on the My Orders pagination above) — without it .pages overflows off the card's right edge instead of shrinking/wrapping inside the toolbar row. */ .rma-rma-list .gwl-returns-list .order-products-toolbar .pages { display: block; position: static !important; flex: 1 1 auto; min-width: 0; margin: 0; } .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items { display: flex; flex-wrap: wrap; justify-content: flex-end; width: 100%; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; } .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items li.item { margin: 0 !important; } .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.page, .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items strong.page, .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #d9d9d9; border-radius: 4px; background-color: #ffffff; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; color: #100f1b; text-decoration: none; transition: all 0.2s ease; } .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.page:hover, .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action:hover { border-color: #100f1b; color: #100f1b; } .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items li.current strong.page { background: #100f1b !important; border-color: #100f1b !important; color: #ffffff !important; font-weight: 600; } /* First/Last — icon-only squares (double chevron). Two template variants are in play across account pages depending on which pager.phtml override resolves (a stock-style copy uses a.page.first/.last; the theme's own Figma-pager copy — see its "gwl-plp-pager__next" class below — uses a.action.first/.last instead) — cover both so this looks right regardless of which one a given page/cache state serves. */ .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.page.first, .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.page.last, .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.first, .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.last { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; } .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.page.first, .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.first { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M6.5 2 2.5 6l4 4M11.5 2 7.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.page.last, .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.last { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M2.5 2 6.5 6l-4 4M7.5 2 11.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Previous — icon-only square (single chevron) */ .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.previous { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M7.5 2 3.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Next — keeps visible text + trailing chevron */ .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.next { width: auto; min-width: 0; padding: 0 34px 0 14px; background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2 8.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; } .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.next span:not(.label) { display: inline !important; position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; margin: 0 !important; } /* The Figma-pager template variant (see comment above the First/Last rule) sidesteps that same clamp itself by using an instead of a for Next's visible text — but an unstyled is italic by default in every browser, and the sitewide PLP rule that normally resets it (".gwl-plp-pager__next-label") is scoped to body.gwl-plp-figma, which account pages don't carry. Reset it here too. */ .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items .gwl-plp-pager__next-label { display: inline; font-style: normal; } /* ========================================================================== GWL My Support Tickets — Mirasvit Helpdesk (helpdesk-ticket-index / helpdesk-ticket-create). Pure CSS restyle of the module's own markup (.hdmx__tickets / .hdmx__ticket-new etc — no template overrides), reusing the same card/field/button conventions as the rest of My Account. ========================================================================== */ /* Empty state — same illustration/card treatment as Invitations/Questions/Returns */ .helpdesk-ticket-index .hdmx__tickets .gwl-helpdesk-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px 24px; background: #fff; border: 1px solid var(--gwl-account-border); border-radius: 4px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); } .helpdesk-ticket-index .hdmx__tickets .gwl-helpdesk-empty__illustration { margin-bottom: 20px; } .helpdesk-ticket-index .hdmx__tickets .gwl-helpdesk-empty__illustration svg { display: block; } .helpdesk-ticket-index .hdmx__tickets .gwl-helpdesk-empty__text { margin: 0; font-family: 'Work Sans', sans-serif; font-size: 16px; font-weight: 600; color: var(--gwl-account-title); } /* "Create ticket" button — 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); } /* ========================================================================== GWL Account Pagination — PLP-match restyle (My Questions / Ask It) No pagination CSS previously existed for this page — added from scratch, same spec as My Orders/My Returns/My Product Reviews above. listing.phtml prints the SAME full pager markup twice as two identical, unmodified
    elements — the first and last children of .block-content, with the question list in between — so :first-child/ :last-child (not a class) distinguish them. Matching the split used on every other account list page: item count + "Show N per page" limiter as their own row above the list (:first-child), page-number pagination as its own row below it (:last-child, hides count+limiter). ========================================================================== */ .askit-customer-index .gwl-questions-list .toolbar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px 24px; } .askit-customer-index .gwl-questions-list .toolbar .pages { display: none !important; } .askit-customer-index .gwl-questions-list .block-content > .toolbar:last-child { justify-content: flex-end; } .askit-customer-index .gwl-questions-list .block-content > .toolbar:last-child .pages { display: block !important; } .askit-customer-index .gwl-questions-list .block-content > .toolbar:last-child .toolbar-amount, .askit-customer-index .gwl-questions-list .block-content > .toolbar:last-child .limiter { display: none !important; } /* pager.phtml wraps everything in its own
    — see the matching comment on My Orders above for the full rationale. */ .askit-customer-index .gwl-questions-list .toolbar .pager { display: contents; } .askit-customer-index .gwl-questions-list .toolbar .toolbar-amount, .askit-customer-index .gwl-questions-list .toolbar .limiter { position: static !important; float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; } .askit-customer-index .gwl-questions-list .toolbar .toolbar-amount { order: -2; font-family: 'Work Sans', sans-serif; font-size: 13px; color: var(--gwl-account-muted); } .askit-customer-index .gwl-questions-list .toolbar .limiter { display: flex !important; align-items: center; gap: 8px; order: -1; } .askit-customer-index .gwl-questions-list .toolbar .limiter-label, .askit-customer-index .gwl-questions-list .toolbar .limiter-text { font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; color: #100f1b; } .askit-customer-index .gwl-questions-list .toolbar .limiter-options { appearance: none; min-width: 56px; height: 36px; padding: 6px 28px 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23100f1b' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 10px 6px; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600; color: #100f1b; box-shadow: none; cursor: pointer; } /* position:static overrides the parent theme's absolute-positioning of .pages at this breakpoint (see the matching comment on the My Orders pagination above) — without it .pages overflows off the card's right edge instead of shrinking/wrapping inside the toolbar row. */ .askit-customer-index .gwl-questions-list .toolbar .pages { display: block; position: static !important; flex: 1 1 auto; min-width: 0; margin: 0; } .askit-customer-index .gwl-questions-list .toolbar .pages-items { display: flex; flex-wrap: wrap; justify-content: flex-end; width: 100%; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; } .askit-customer-index .gwl-questions-list .toolbar .pages-items li.item { margin: 0 !important; } .askit-customer-index .gwl-questions-list .toolbar .pages-items a.page, .askit-customer-index .gwl-questions-list .toolbar .pages-items strong.page, .askit-customer-index .gwl-questions-list .toolbar .pages-items a.action { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #d9d9d9; border-radius: 4px; background-color: #ffffff; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; color: #100f1b; text-decoration: none; transition: all 0.2s ease; } .askit-customer-index .gwl-questions-list .toolbar .pages-items a.page:hover, .askit-customer-index .gwl-questions-list .toolbar .pages-items a.action:hover { border-color: #100f1b; color: #100f1b; } .askit-customer-index .gwl-questions-list .toolbar .pages-items li.current strong.page { background: #100f1b !important; border-color: #100f1b !important; color: #ffffff !important; font-weight: 600; } /* First/Last — icon-only squares (double chevron). Two template variants are in play across account pages depending on which pager.phtml override resolves (a stock-style copy uses a.page.first/.last; the theme's own Figma-pager copy — see its "gwl-plp-pager__next" class below — uses a.action.first/.last instead) — cover both so this looks right regardless of which one a given page/cache state serves. */ .askit-customer-index .gwl-questions-list .toolbar .pages-items a.page.first, .askit-customer-index .gwl-questions-list .toolbar .pages-items a.page.last, .askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.first, .askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.last { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; } .askit-customer-index .gwl-questions-list .toolbar .pages-items a.page.first, .askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.first { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M6.5 2 2.5 6l4 4M11.5 2 7.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .askit-customer-index .gwl-questions-list .toolbar .pages-items a.page.last, .askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.last { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M2.5 2 6.5 6l-4 4M7.5 2 11.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Previous — icon-only square (single chevron) */ .askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.previous { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M7.5 2 3.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Next — keeps visible text + trailing chevron */ .askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.next { width: auto; min-width: 0; padding: 0 34px 0 14px; background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2 8.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; } .askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.next span:not(.label) { display: inline !important; position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; margin: 0 !important; } /* The Figma-pager template variant (see comment above the First/Last rule) sidesteps that same clamp itself by using an instead of a for Next's visible text — but an unstyled is italic by default in every browser, and the sitewide PLP rule that normally resets it (".gwl-plp-pager__next-label") is scoped to body.gwl-plp-figma, which account pages don't carry. Reset it here too. */ .askit-customer-index .gwl-questions-list .toolbar .pages-items .gwl-plp-pager__next-label { display: inline; font-style: normal; } /* ========================================================================== GWL Privacy Tools — Swissup Gdpr account page (swissup_gdpr-customer-index) ========================================================================== */ .swissup_gdpr-customer-index .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 (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

    …

    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
    , 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: 640px !important; float: none !important; margin: 56px auto 40px !important; padding: 0 !important; text-align: center; } /* Figma Create Account title — Outfit Light 300 / 32px / #0A053D (Dev Mode) */ .customer-account-create .page-title-wrapper .page-title, .customer-account-create .page-title-wrapper .page-title .base, .customer-account-create .page-title-wrapper .page-title span { font-family: 'Outfit', sans-serif !important; font-size: 32px !important; line-height: 40px !important; font-weight: 300 !important; color: #0A053D !important; margin: 0 !important; letter-spacing: 0 !important; } .customer-account-create .page-title-wrapper .page-title:after { content: none !important; } /* Figma subtitle — Outfit Regular 16/#0A053D (cool gray-violet in design; was #7A8FA3 blue-muted which looked off) */ .customer-account-create .page-title-wrapper .account-page-subtitle { margin: 12px 0 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important; color: #0A053D !important; opacity: 0.6; letter-spacing: 0 !important; } .customer-account-create .columns .column.main { width: 100% !important; max-width: 640px !important; float: none !important; margin: 0 auto 72px !important; } /* both fieldsets disappear from the box model — their .field children join the single grid on 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)); /* Figma: 16px row + column gap between fields */ gap: 16px 16px; align-items: start; font-family: 'Outfit', sans-serif; } .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, Terms, Actions. Newsletter + Remember Me stay in the DOM (Magento Persistent / newsletter still work) but are hidden — Figma Create Account only shows Terms. */ .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; } .customer-account-create .form-create-account .field.choice.newsletter, .customer-account-create .form-create-account #remember-me-box { display: none !important; } .customer-account-create .form-create-account .gwl-terms-condition { order: 7; grid-column: 1 / -1; } .customer-account-create .form-create-account .actions-toolbar { order: 8; 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-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #0A053D !important; } /* Field labels (First Name, Password, etc.) — Figma weight 300 (was 500; that is what DevTools showed as not changing) */ .customer-account-create .form-create-account .field > .label > span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #0A053D !important; } .customer-account-create .form-create-account .field > .control { width: 100% !important; float: none !important; } .customer-account-create .form-create-account input.input-text { height: 44px; width: 100%; background: #fff; border: 1px solid #E5E8EE; border-radius: 4px; padding: 0 16px; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; box-sizing: border-box; } /* Figma P4 Regular — Bg-Inset #838384 / weight 300 */ .customer-account-create .form-create-account input.input-text::placeholder { color: #838384 !important; opacity: 1; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; } .customer-account-create .form-create-account input.input-text::-webkit-input-placeholder { color: #838384 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; opacity: 1; } .customer-account-create .form-create-account input.input-text::-moz-placeholder { color: #838384 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; opacity: 1; } .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 (Figma 20×20 SVG in register.phtml) */ .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; /* Center on the 44px input only (not label) — input is first meaningful box in .control */ top: 22px; transform: translateY(-50%); display: flex !important; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; margin: 0; background: none; border: 0; color: #0A053D; cursor: pointer; z-index: 2; line-height: 0; } .customer-account-create .form-create-account .gwl-password-toggle svg { display: block; width: 20px; height: 20px; } .customer-account-create .form-create-account .gwl-password-toggle:hover, .customer-account-create .form-create-account .gwl-password-toggle--visible { color: #0A053D; opacity: 0.75; } /* Figma has no password-strength meter / phone format note under the field. Idle .otp_generatenote used to hold   (~19px) and made Mobile taller than Email — that is why First/Last→Email gap looked different from Email/Mobile→Password. Hide only when empty; OTP JS can still fill it. */ .customer-account-create #password-strength-meter-container, .customer-account-create .profile-notice-phone { display: none !important; } .customer-account-create .form-create-account .otp_generatenote:empty { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; line-height: 0 !important; overflow: hidden !important; } .customer-account-create .password-strength-meter { height: 32px; line-height: 32px; padding: 0 12px; border-radius: 4px; font-family: 'Outfit', sans-serif; font-size: 12px; color: var(--gwl-account-text); } /* Mobile number: single bordered field — flag/dial-code inside the input */ .customer-account-create .form-create-account .field-name-customer_mobile .flag-top-section-with-input { position: relative !important; display: block; width: 100%; height: 44px; box-sizing: border-box; } .customer-account-create .form-create-account .field-name-customer_mobile .custom-flag-main-section { position: absolute !important; inset-inline-start: 1px; top: 1px; bottom: 1px; width: auto !important; height: auto !important; z-index: 2; pointer-events: auto; background: transparent !important; border: 0 !important; box-shadow: none !important; } .customer-account-create .form-create-account .field-name-customer_mobile .custom-flag-main-section .iti__flag-container { top: 0 !important; bottom: 0 !important; height: 100% !important; } .customer-account-create .form-create-account .field-name-customer_mobile .custom-flag-main-section .iti__selected-flag { height: 100% !important; padding: 0 8px 0 12px !important; display: flex !important; align-items: center !important; gap: 6px; background: transparent !important; border: 0 !important; box-shadow: none !important; } .customer-account-create .form-create-account .field-name-customer_mobile .custom-flag-main-section .iti__selected-dial-code { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 1 !important; color: #100F1B !important; margin: 0; padding: 0; display: inline-flex !important; align-items: center !important; } .customer-account-create .form-create-account .field-name-customer_mobile #customer_mobile { height: 44px !important; width: 100% !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-inline-start: 94px !important; padding-inline-end: 16px !important; border: 1px solid var(--gwl-account-border) !important; border-radius: 4px !important; box-sizing: border-box !important; background: #fff !important; } .customer-account-create .form-create-account .field-name-customer_mobile #customer_mobile:focus { border-color: var(--gwl-account-blue) !important; } /* Kill idle OTP spacing under the mobile input so grid row height matches Email */ .customer-account-create .form-create-account .field-name-customer_mobile .send_otp, .customer-account-create .form-create-account .field-name-customer_mobile .resendotp-block, .customer-account-create .form-create-account .field-name-customer_mobile .otp_text:empty { display: none !important; margin: 0 !important; } /* Checkboxes (Terms) — Figma square, darker stroke */ .customer-account-create .form-create-account .field.choice { display: flex !important; align-items: center !important; flex-wrap: wrap; gap: 10px; padding-top: 0; margin-top: 0 !important; } .customer-account-create .form-create-account .field.choice input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important; flex-shrink: 0; position: relative !important; top: 0 !important; margin: 0 !important; padding: 0 !important; width: 18px !important; height: 18px !important; border: 1.5px solid #0A053D !important; border-radius: 4px !important; background-color: #fff !important; background-repeat: no-repeat; background-position: center; background-size: 11px 11px; cursor: pointer; outline: none !important; box-shadow: none !important; } .customer-account-create .form-create-account .field.choice input[type="checkbox"]::after, .customer-account-create .form-create-account .field.choice input[type="checkbox"]::before { content: none !important; } .customer-account-create .form-create-account .field.choice input[type="checkbox"]:checked { background-color: var(--gwl-account-blue) !important; border-color: var(--gwl-account-blue) !important; 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, .customer-account-create .form-create-account .field.choice .label > span { display: inline-flex !important; align-items: center; min-height: 18px; margin: 0 !important; padding: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; } /* keep link inside terms at 400 — overrides span 300 above */ .customer-account-create .form-create-account .field.choice .label > span > a { display: inline !important; font-weight: 400 !important; color: #160B8B !important; text-decoration: underline !important; } .customer-account-create .form-create-account .field.choice div.mage-error { flex: 1 0 100%; margin: 4px 0 0 !important; } /* Figma: "Terms of Services" + "Sign In" always underlined, brand blue */ .customer-account-create .form-create-account .gwl-terms-condition .label a, .customer-account-create .form-create-account #remember-me-box .tooltip.toggle { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-style: normal !important; font-weight: 400 !important; line-height: 20px !important; color: #160B8B !important; text-decoration: underline !important; 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 "Already have an account? Sign In" */ .customer-account-create .form-create-account .actions-toolbar { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; margin: 8px 0 0 !important; width: 100% !important; } .customer-account-create .form-create-account .actions-toolbar .primary { width: 100% !important; float: none !important; margin: 0 !important; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar .primary button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary span, .customer-account-create .form-create-account .actions-toolbar .primary button.action.submit.primary span { font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar .primary button.action.submit.primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; height: 40px !important; min-height: 40px !important; background: #160B8B !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; box-shadow: none !important; cursor: pointer; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary:hover, .customer-account-create .form-create-account .actions-toolbar .primary button.action.submit.primary:hover { background: #221796 !important; } .customer-account-create .form-create-account .actions-toolbar .secondary { float: none !important; margin: 24px auto 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 4px !important; width: auto !important; max-width: 100%; font-family: 'Outfit', sans-serif; font-size: 14px; line-height: 20px; white-space: nowrap; text-align: center; } .customer-account-create .form-create-account .actions-toolbar .action.back { display: inline !important; float: none !important; margin: 0 !important; padding: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-style: normal !important; font-weight: 400 !important; line-height: 20px !important; color: #160B8B !important; text-decoration: underline !important; cursor: pointer; vertical-align: baseline; } .customer-account-create .form-create-account .actions-toolbar .action.back:hover { text-decoration: underline !important; } .customer-account-create .form-create-account .actions-toolbar .action.back span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; color: #160B8B !important; } /* Already have an account? — P4 Regular #100F1B / 300 */ .customer-account-create .form-create-account .actions-toolbar .gwl-signin-prompt { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-style: normal !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; text-align: center; } /* Mobile (<=767px): single column — Figma mobile Create Account */ @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 { margin: 32px auto 28px !important; } .customer-account-create .columns .column.main { margin-bottom: 48px !important; } .customer-account-create .page-title-wrapper .page-title, .customer-account-create .page-title-wrapper .page-title .base, .customer-account-create .page-title-wrapper .page-title span { font-size: 28px !important; line-height: 36px !important; font-weight: 300 !important; color: #0A053D !important; } .customer-account-create .page-title-wrapper .account-page-subtitle { font-size: 14px !important; line-height: 22px !important; margin-top: 8px !important; color: #0A053D !important; opacity: 0.6; } .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 .gwl-terms-condition { grid-column: 1 / -1; } .customer-account-create .form-create-account .actions-toolbar { gap: 0 !important; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar .primary button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary span { font-size: 15px !important; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar .primary button.action.submit.primary { height: 40px !important; min-height: 40px !important; } } /* ===== Figma typography hard-lock (weights) — beat styles-m/l leftovers ===== Critical: Magento wraps "By continuing…" in , and `.field > .label > span { font-weight:500 }` was winning over the label rule. Fields (inputs + placeholders) + By continuing text = 300. Terms / Sign In links stay 400. */ .customer-account-create .form-create-account input.input-text, .customer-account-create .form-create-account input.input-text[type="text"], .customer-account-create .form-create-account input.input-text[type="email"], .customer-account-create .form-create-account input.input-text[type="password"], .customer-account-create .form-create-account input.input-text[type="tel"], .customer-account-create .form-create-account #customer_mobile, .customer-account-create .form-create-account .iti__selected-dial-code { font-weight: 300 !important; } .customer-account-create .form-create-account input.input-text::placeholder, .customer-account-create .form-create-account input.input-text::-webkit-input-placeholder, .customer-account-create .form-create-account input.input-text::-moz-placeholder, .customer-account-create .form-create-account #customer_mobile::placeholder, .customer-account-create .form-create-account #customer_mobile::-webkit-input-placeholder { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #838384 !important; opacity: 1 !important; } /* By continuing text (label + inner span) — NOT the Terms link */ .customer-account-create .form-create-account .field.choice .label, .customer-account-create .form-create-account .field.choice .label > span, .customer-account-create .form-create-account .gwl-terms-condition .label, .customer-account-create .form-create-account .gwl-terms-condition .label > span, .customer-account-create .form-create-account .field.choice.gwl-terms-condition > .label, .customer-account-create .form-create-account .field.choice.gwl-terms-condition > .label > span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; } .customer-account-create .form-create-account .gwl-terms-condition .label a, .customer-account-create .form-create-account .gwl-terms-condition .label a span, .customer-account-create .form-create-account .actions-toolbar .action.back, .customer-account-create .form-create-account .actions-toolbar .action.back span { font-weight: 400 !important; color: #160B8B !important; } .customer-account-create .form-create-account .actions-toolbar .gwl-signin-prompt { font-weight: 300 !important; color: #100F1B !important; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary span, body.customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, body.customer-account-create .form-create-account .actions-toolbar button.action.submit.primary span { font-weight: 400 !important; } /* ========================================================================== 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. Every selector below is scoped to :is(.customer-account-login, .multishipping-checkout-login) — the multishipping checkout's guest login step (Magento_Multishipping's block-authentication popup) renders the exact same Magedelight_SMSProfile login.phtml form (login.phtml doesn't branch on route), just inside different KO-driven wrapper markup (.block-authentication instead of .login-container). Reusing the same rule set here keeps both pages' UI identical without duplicating ~60 rules; wherever the multishipping wrapper's markup doesn't match a given selector (e.g. ".login-container .block", which that page's DOM doesn't have), the rule is simply a no-op there. ========================================================================== */ :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper { width: 100% !important; max-width: 485px !important; float: none !important; margin: 56px auto 40px !important; padding: 0 !important; text-align: center; } /* Figma Sign In title — Outfit Light 300 / 32 / #0A053D (same as Create Account) */ :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title, :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title .base, :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title span { font-family: 'Outfit', sans-serif !important; font-size: 32px !important; line-height: 40px !important; font-weight: 300 !important; color: #0A053D !important; margin: 0 !important; letter-spacing: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title:after { content: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .account-page-subtitle { margin: 12px 0 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important; color: #0A053D !important; opacity: 0.6; letter-spacing: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .columns .column.main { width: 100% !important; max-width: 485px !important; float: none !important; margin: 0 auto 72px !important; } :is(.customer-account-login, .multishipping-checkout-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; } :is(.customer-account-login, .multishipping-checkout-login) .login-container .block { width: 100% !important; float: none !important; clear: both !important; margin: 0 0 16px !important; } :is(.customer-account-login, .multishipping-checkout-login) .login-container .block:last-child { margin-bottom: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-title { display: none !important; } /* Email/Mobile pill toggle */ :is(.customer-account-login, .multishipping-checkout-login) .field.reset_type_login { text-align: center; margin: 0 0 24px !important; } :is(.customer-account-login, .multishipping-checkout-login) .field.reset_type_login > .label { display: none !important; } :is(.customer-account-login, .multishipping-checkout-login) #reset_type_login { display: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .gwl-login-type-toggle { display: inline-flex; gap: 4px; padding: 4px; background: #F7F9FB; border-radius: 4px; } :is(.customer-account-login, .multishipping-checkout-login) .gwl-login-type-btn { min-width: 120px; height: 40px; padding: 0 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: transparent; border: 0; border-radius: 4px; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1 !important; color: #100F1B !important; cursor: pointer; box-sizing: border-box; } :is(.customer-account-login, .multishipping-checkout-login) .gwl-login-type-btn--active { background: #0A053D !important; color: #fff !important; font-weight: 400 !important; } /* fields */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .fieldset.login { margin: 0; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field { margin: 0 0 16px !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field > .label, :is(.customer-account-login, .multishipping-checkout-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-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #0A053D !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field > .label > span, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field .form-field__label > span { display: inline; margin: 0 !important; padding: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #0A053D !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.required .form-field__label:after, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.required > .label:after { content: '*'; color: #F04438; margin-inline-start: 4px; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field > .control, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field .form-field__control { width: 100% !important; float: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login input.input-text, :is(.customer-account-login, .multishipping-checkout-login) .form-login input.form-field__input { height: 44px !important; width: 100%; max-width: 485px; background: #fff; border: 1px solid #E5E8EE !important; border-radius: 4px !important; padding: 0 16px; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; box-sizing: border-box; } :is(.customer-account-login, .multishipping-checkout-login) .form-login input.input-text::placeholder, :is(.customer-account-login, .multishipping-checkout-login) .form-login input.form-field__input::placeholder, :is(.customer-account-login, .multishipping-checkout-login) .form-login input.input-text::-webkit-input-placeholder, :is(.customer-account-login, .multishipping-checkout-login) .form-login input.form-field__input::-webkit-input-placeholder { color: #838384 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; opacity: 1 !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login input.input-text:focus, :is(.customer-account-login, .multishipping-checkout-login) .form-login input.form-field__input:focus { border-color: #160B8B !important; box-shadow: none; outline: none; } /* Mobile number: flag/dial vertically centered in 44px field (input lives inside .custom-flag-main-section — keep wrapper relative, not absolute) */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .control.mobile { position: relative !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .control.mobile .custom-flag-main-section { position: relative !important; display: block !important; width: 100% !important; max-width: 485px; height: 44px !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .control.mobile .iti__flag-container { position: absolute !important; inset-inline-start: 0; top: 0 !important; bottom: 0 !important; height: 100% !important; z-index: 2; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .control.mobile .iti__selected-flag { height: 100% !important; padding: 0 8px 0 12px !important; display: flex !important; align-items: center !important; gap: 6px; background: transparent !important; border: 0 !important; box-shadow: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .control.mobile .iti__selected-dial-code { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 1 !important; color: #100F1B !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .control.mobile .iti__flag { flex-shrink: 0; } :is(.customer-account-login, .multishipping-checkout-login) .form-login #login_mobile { height: 44px !important; width: 100% !important; max-width: 485px; padding-top: 0 !important; padding-bottom: 0 !important; padding-inline-start: 94px !important; padding-inline-end: 16px !important; border: 1px solid #E5E8EE !important; border-radius: 4px !important; box-sizing: border-box !important; line-height: 20px !important; } :is(.customer-account-login, .multishipping-checkout-login) .profile-notice-phone { display: none !important; } /* OTP action buttons */ :is(.customer-account-login, .multishipping-checkout-login) .send_otp_login.action.primary, :is(.customer-account-login, .multishipping-checkout-login) .resendotp.action.primary, :is(.customer-account-login, .multishipping-checkout-login) .verif_otp_login.action.primary, .customer-account-create .send_otp.action.primary, .customer-account-create .resendotp.action.primary, .customer-account-create .verif_otp.action.primary { align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; height: 40px; background: #160B8B !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer; } :is(.customer-account-login, .multishipping-checkout-login) .send_otp_login.action.primary:hover, :is(.customer-account-login, .multishipping-checkout-login) .resendotp.action.primary:hover, :is(.customer-account-login, .multishipping-checkout-login) .verif_otp_login.action.primary:hover, .customer-account-create .send_otp.action.primary:hover, .customer-account-create .resendotp.action.primary:hover, .customer-account-create .verif_otp.action.primary:hover { background: #221796 !important; } :is(.customer-account-create, .customer-account-login) .otp_generatenote { display: block; text-align: center; font-family: 'Outfit', sans-serif; font-size: 13px; color: #A19FA8; } :is(.customer-account-create, .customer-account-login) .resendotp-block { margin-top: 12px; } :is(.customer-account-create, .customer-account-login) .resend-wait { font-family: 'Outfit', sans-serif; font-size: 13px; color: #A19FA8; margin: 0 0 4px; } :is(.customer-account-create, .customer-account-login) .resendlink { margin: 0 0 8px; } :is(.customer-account-create, .customer-account-login) .resendlink button { width: auto; height: auto; background: none !important; border: 0 !important; color: #160B8B !important; font-family: 'Outfit', sans-serif !important; font-size: 13px; font-weight: 400 !important; padding: 0; text-decoration: underline; box-shadow: none !important; cursor: pointer; } :is(.customer-account-create, .customer-account-login) .resend-link-attempt { font-size: 13px; color: #A19FA8; margin: 0 0 8px; } :is(.customer-account-create, .customer-account-login) .field-name-otp .label, :is(.customer-account-create, .customer-account-login) .field-name-otp .label span { margin-top: 8px !important; margin-bottom: 8px !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #0A053D !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field-name-otp #otp { height: 44px !important; width: 100% !important; max-width: 485px; border: 1px solid #E5E8EE !important; border-radius: 4px !important; padding: 0 16px !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; color: #100F1B !important; box-sizing: border-box !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field-name-otp #otp::placeholder { color: #838384 !important; font-weight: 300 !important; } :is(.customer-account-create, .customer-account-login) .otp_text { display: block; font-size: 13px; font-weight: 400; margin-top: 8px; } /* Password eye */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.password .control { position: relative; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.password input.input-text { padding-inline-end: 44px; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-password-toggle { position: absolute; inset-inline-end: 14px; top: 22px; transform: translateY(-50%); display: flex !important; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; margin: 0; background: none; border: 0; color: #100F1B; cursor: pointer; z-index: 2; line-height: 0; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-password-toggle svg { display: block; width: 20px; height: 20px; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-password-toggle:hover, :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-password-toggle--visible { color: #100F1B; opacity: 0.75; } /* Remember Me + Forgot Password */ :is(.customer-account-login, .multishipping-checkout-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: 0 0 24px !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-remember-forgot-row #remember-me-box { margin: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-remember-forgot-row .tooltip.content { white-space: normal; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .action.remind, :is(.customer-account-login, .multishipping-checkout-login) .form-login .action.remind span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; color: #160B8B !important; text-decoration: underline !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .action.remind:hover { text-decoration: underline !important; } /* Checkbox Remember Me */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice { display: flex !important; align-items: center !important; flex-wrap: wrap; gap: 8px; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important; flex-shrink: 0; position: relative !important; top: 0 !important; margin: 0 !important; padding: 0; width: 18px !important; height: 18px !important; border: 1px solid #CECDD8 !important; border-radius: 0 !important; background-color: #FFF !important; background-repeat: no-repeat; background-position: center; background-size: 11px 11px; cursor: pointer; outline: none !important; box-shadow: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice input[type="checkbox"]::after, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice input[type="checkbox"]::before { content: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice input[type="checkbox"]:checked { background-color: #160B8B !important; border-color: #160B8B !important; 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"); } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice .label, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice .label > span { display: inline-flex !important; align-items: center; min-height: 18px; margin: 0 !important; padding: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; } /* Figma Sign In: Remember Me only — hide Magento Persistent "What's this?" */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice .tooltip.toggle, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice .tooltip.content, :is(.customer-account-login, .multishipping-checkout-login) .form-login #remember-me-box .tooltip { display: none !important; } /* Mobile OTP mode: Figma shows phone + CTA only (no Remember / Forgot) */ :is(.customer-account-login, .multishipping-checkout-login) .form-login.gwl-login-mode-mobile .gwl-remember-forgot-row { display: none !important; } /* Sign In / Login using OTP button */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar { display: block; margin: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar .primary { width: 100%; float: none !important; margin: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary, :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary span { font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; height: 40px; background: #160B8B !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; box-shadow: none !important; cursor: pointer; } /* Login using OTP stays disabled until OTP verified (match migrate behavior) */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary:disabled, :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary[disabled] { background: #160B8B !important; color: #fff !important; opacity: 0.45 !important; cursor: not-allowed !important; pointer-events: none; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary:hover:not(:disabled) { background: #221796 !important; } /* Don't have an account? Create Account */ :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer .block-content > p { display: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer .actions-toolbar { display: flex; justify-content: center; margin: 24px 0 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer .actions-toolbar .primary { display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: 4px; float: none !important; margin: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer .gwl-create-account-prompt { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer a.action.create.primary, :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer a.action.create.primary span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; color: #160B8B !important; text-decoration: underline !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer a.action.create.primary:hover { text-decoration: underline !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer a.action.create.primary span { display: inline; } /* Mobile Sign In */ @media (max-width: 767px) { :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper, :is(.customer-account-login, .multishipping-checkout-login) .columns .column.main { max-width: none !important; padding-inline: 16px; } :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper { margin: 32px auto 28px !important; } :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title, :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title .base, :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title span { font-size: 28px !important; line-height: 36px !important; font-weight: 300 !important; color: #0A053D !important; } :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .account-page-subtitle { font-size: 14px !important; line-height: 22px !important; margin-top: 8px !important; color: #0A053D !important; opacity: 0.6; } :is(.customer-account-login, .multishipping-checkout-login) .columns .column.main { margin-bottom: 48px !important; } :is(.customer-account-login, .multishipping-checkout-login) .gwl-login-type-btn { min-width: 0; flex: 1 1 0; } :is(.customer-account-login, .multishipping-checkout-login) .gwl-login-type-toggle { width: 100%; max-width: 100%; box-sizing: border-box; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary { height: 40px !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary, :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary span { font-size: 15px !important; } } /* ===== Figma typography hard-lock (weights) — beat styles-m/l leftovers ===== Critical: Magento wraps "By continuing…" in , and `.field > .label > span { font-weight:500 }` was winning over the label rule. Fields (inputs + placeholders) + By continuing text = 300. Terms / Sign In links stay 400. */ .customer-account-create .form-create-account input.input-text, .customer-account-create .form-create-account input.input-text[type="text"], .customer-account-create .form-create-account input.input-text[type="email"], .customer-account-create .form-create-account input.input-text[type="password"], .customer-account-create .form-create-account input.input-text[type="tel"], .customer-account-create .form-create-account #customer_mobile, .customer-account-create .form-create-account .iti__selected-dial-code { font-weight: 300 !important; } .customer-account-create .form-create-account input.input-text::placeholder, .customer-account-create .form-create-account input.input-text::-webkit-input-placeholder, .customer-account-create .form-create-account input.input-text::-moz-placeholder, .customer-account-create .form-create-account #customer_mobile::placeholder, .customer-account-create .form-create-account #customer_mobile::-webkit-input-placeholder { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #838384 !important; opacity: 1 !important; } /* By continuing text (label + inner span) — NOT the Terms link */ .customer-account-create .form-create-account .field.choice .label, .customer-account-create .form-create-account .field.choice .label > span, .customer-account-create .form-create-account .gwl-terms-condition .label, .customer-account-create .form-create-account .gwl-terms-condition .label > span, .customer-account-create .form-create-account .field.choice.gwl-terms-condition > .label, .customer-account-create .form-create-account .field.choice.gwl-terms-condition > .label > span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; } .customer-account-create .form-create-account .gwl-terms-condition .label a, .customer-account-create .form-create-account .gwl-terms-condition .label a span, .customer-account-create .form-create-account .actions-toolbar .action.back, .customer-account-create .form-create-account .actions-toolbar .action.back span { font-weight: 400 !important; color: #160B8B !important; } .customer-account-create .form-create-account .actions-toolbar .gwl-signin-prompt { font-weight: 300 !important; color: #100F1B !important; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary span, body.customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, body.customer-account-create .form-create-account .actions-toolbar button.action.submit.primary span { font-weight: 400 !important; } /* ========================================================================== GWL Sign In popup — Magento_Customer's "block-authentication" popup, same colors/typography as the full Sign In page above. This popup can be triggered from ANY page (e.g. the guest "Sign In" button in the mobile hamburger's Account tab — see .nav-sections #store\.links earlier in this file), so unlike the full page it can't be scoped to a body class — scoped to .block-authentication itself instead. Its markup is the stock Magento_Customer::account/authentication-popup template, not the Magedelight override the full login page uses: no Email/Mobile toggle or password-visibility eye icon exists here, the Sign In button carries class "secondary" (not "primary"), and the Create Account link carries class "action-register" (not "action create") — so this uses its own selectors rather than broadening the :is(...) list above, to avoid also matching toggle/eye-icon rules with nothing to bind to in this simpler form. The "Proceed as a new customer" heading/benefits list staying hidden and "Create an Account" sitting next to "Forgot Your Password?" is already stock Magento behavior for this modal context — untouched here; only colors/ typography change. */ .block-authentication .block-customer-login .form-login .field { margin: 0 0 20px; } .block-authentication .block-customer-login .form-login .field > .label { display: block; margin: 0 0 8px; font-size: 16px; font-weight: 400; color: var(--gwl-account-title); } .block-authentication .block-customer-login .form-login .field.required > .label:after { color: var(--gwl-account-danger); } .block-authentication .block-customer-login .form-login .field > .control { width: 100%; } .block-authentication .block-customer-login .form-login input.input-text { height: 44px; max-width: 485px; 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; } .block-authentication .block-customer-login .form-login input.input-text:focus { border-color: var(--gwl-account-blue); box-shadow: none; outline: none; } .block-authentication .block-customer-login .form-login .actions-toolbar button.action-login { width: 100%; height: 40px; 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; } .block-authentication .block-customer-login .form-login .actions-toolbar button.action-login:hover { background: #221796 !important; } .block-authentication .block-customer-login .form-login .actions-toolbar .secondary a.action, .block-authentication .block-new-customer .actions-toolbar .primary a.action-register { font-size: 14px; font-weight: 600; color: var(--gwl-account-blue) !important; text-decoration: none; } .block-authentication .block-customer-login .form-login .actions-toolbar .secondary a.action:hover, .block-authentication .block-new-customer .actions-toolbar .primary a.action-register:hover { text-decoration: underline; } /* Mobile (<=767px): tighter side padding — title/subtitle/button tokens live in the earlier Sign In @media block (28/36 title, 48px button). Keep Remember + Forgot on one row (Figma mobile Email). */ @media (max-width: 767px) { :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper, :is(.customer-account-login, .multishipping-checkout-login) .columns .column.main { max-width: none !important; padding-inline: 16px; } :is(.customer-account-login, .multishipping-checkout-login) .gwl-login-type-toggle { width: 100%; } :is(.customer-account-login, .multishipping-checkout-login) .gwl-login-type-btn { flex: 1 1 0; min-width: 0; padding: 0 12px; } } /* ========================================================================== GWL Forgot Password — Figma tokens (match Sign In / Create Account) Outfit + #0A053D / #838384 / #160B8B; inputs 44px; form 485px. Captcha kept (not in Figma) — label/input match other fields. EN + AR. ========================================================================== */ .customer-account-forgotpassword .page-title-wrapper { width: 100% !important; max-width: 485px !important; float: none !important; margin: 56px auto 40px !important; padding: 0 !important; text-align: center; } .customer-account-forgotpassword .page-title-wrapper .page-title, .customer-account-forgotpassword .page-title-wrapper .page-title .base, .customer-account-forgotpassword .page-title-wrapper .page-title span { font-family: 'Outfit', sans-serif !important; font-size: 32px !important; line-height: 40px !important; font-weight: 300 !important; color: #0A053D !important; margin: 0 !important; letter-spacing: 0 !important; } .customer-account-forgotpassword .page-title-wrapper .page-title:after { content: none !important; } .customer-account-forgotpassword .page-title-wrapper .account-page-subtitle { margin: 12px 0 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important; color: #0A053D !important; opacity: 0.6; letter-spacing: 0 !important; } .customer-account-forgotpassword .columns .column.main { width: 100% !important; max-width: 485px !important; float: none !important; margin: 0 auto 72px !important; } .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; } .customer-account-forgotpassword .block-title { display: none !important; } .customer-account-forgotpassword .form.password.forget { background: none !important; padding: 0 !important; border-radius: 0 !important; box-sizing: border-box !important; width: 100% !important; max-width: 485px !important; margin: 0 auto !important; } .customer-account-forgotpassword .form.password.forget .fieldset { margin: 0 !important; } .customer-account-forgotpassword .form.password.forget > .fieldset > .field.note { text-align: center; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; color: #A19FA8 !important; margin: 0 0 16px !important; } .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; } /* Hide Mobile OTP UI until Mobile mode is active (button lives outside clipped .form-field) */ .customer-account-forgotpassword .field.mobile > .field { display: none !important; } .customer-account-forgotpassword .md-forget-password[data-gwl-reset-type="Mobile"] .field.mobile > .field { display: block !important; } .customer-account-forgotpassword .form.password.forget .field { margin: 0 0 16px !important; } .customer-account-forgotpassword .form.password.forget .field > .label, .customer-account-forgotpassword .form.password.forget .field .form-field__label, .customer-account-forgotpassword .form.password.forget .field > .label > span, .customer-account-forgotpassword .form.password.forget .field .form-field__label > span, .customer-account-forgotpassword .form.password.forget .field.captcha > .label, .customer-account-forgotpassword .form.password.forget .field.captcha > .label > span { display: block; float: none !important; width: auto !important; margin: 0 0 8px !important; padding: 0 !important; text-align: start !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #0A053D !important; } .customer-account-forgotpassword .form.password.forget .field > .label > span, .customer-account-forgotpassword .form.password.forget .field .form-field__label > span, .customer-account-forgotpassword .form.password.forget .field.captcha > .label > span { display: inline; margin: 0 !important; } .customer-account-forgotpassword .form.password.forget .field.required .form-field__label:after, .customer-account-forgotpassword .form.password.forget .field.required > .label:after { content: '*'; color: #F04438; margin-inline-start: 4px; } .customer-account-forgotpassword .form.password.forget .field > .control, .customer-account-forgotpassword .form.password.forget .field .form-field__control, .customer-account-forgotpassword .form.password.forget .field.captcha .control.captcha { 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, .customer-account-forgotpassword .form.password.forget .field.captcha input.input-text { height: 44px !important; width: 100%; max-width: 485px; background: #fff; border: 1px solid #E5E8EE !important; border-radius: 4px !important; padding: 0 16px; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; box-sizing: border-box; } .customer-account-forgotpassword .form.password.forget input.input-text::placeholder, .customer-account-forgotpassword .form.password.forget input.form-field__input::placeholder, .customer-account-forgotpassword .form.password.forget input.input-text::-webkit-input-placeholder, .customer-account-forgotpassword .form.password.forget input.form-field__input::-webkit-input-placeholder { color: #838384 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; opacity: 1 !important; } .customer-account-forgotpassword .form.password.forget input.input-text:focus, .customer-account-forgotpassword .form.password.forget input.form-field__input:focus, .customer-account-forgotpassword .form.password.forget .field.captcha input.input-text:focus { border-color: #160B8B !important; box-shadow: none; outline: none; } /* Captcha image row under the styled input */ .customer-account-forgotpassword .form.password.forget .field.captcha .captcha-image { margin-top: 8px; } .customer-account-forgotpassword .form.password.forget .field.captcha .captcha-img { border-radius: 4px; border: 1px solid #E5E8EE; } .customer-account-forgotpassword #password-strength-meter-container { display: none !important; } .customer-account-forgotpassword .form.password.forget button.first-attempt.send_otp_password { align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; height: 40px; margin: 8px 0 0 !important; background: #160B8B !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; 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:empty, .customer-account-forgotpassword .form.password.forget .otp_generatenote:blank { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .customer-account-forgotpassword .form.password.forget .otp_generatenote { display: block; text-align: center; font-family: 'Outfit', sans-serif; font-size: 13px; color: #A19FA8; } .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; } .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 .md-forget-password[data-gwl-fp-step="otp"] .field.captcha.required[role="user_forgotpassword"] { display: none !important; } .customer-account-forgotpassword .gwl-otp-boxes { display: flex; justify-content: center; gap: 10px; margin: 4px 0 40px; } .customer-account-forgotpassword .gwl-otp-box { width: 48px; height: 48px; border: 1px solid #58575F !important; border-radius: 4px !important; background: #FFF; text-align: center; font-family: 'Outfit', sans-serif !important; font-size: 20px !important; font-style: normal !important; font-weight: 400 !important; line-height: 24px !important; letter-spacing: -0.25px !important; color: #100F1B !important; padding: 0; box-sizing: border-box; } .customer-account-forgotpassword .gwl-otp-box:focus { border-color: #160B8B !important; outline: none; box-shadow: none; } .customer-account-forgotpassword .gwl-otp-actions { display: flex; flex-direction: row; align-items: stretch; gap: 24px; } .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 { padding-top: 0 !important; padding-bottom: 0 !important; flex: 1 1 0; display: flex !important; align-items: center; justify-content: center; height: 40px; background: #fff; border: 1px solid #E5E8EE !important; border-radius: 4px !important; box-sizing: border-box; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; color: #160B8B !important; text-decoration: none !important; } .customer-account-forgotpassword .gwl-otp-actions .gwl-fp-mobile-back:hover { text-decoration: none; border-color: #160B8B !important; } .customer-account-forgotpassword button.verif_otp_password { align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; height: 40px; background: #160B8B !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; 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-family: 'Outfit', sans-serif; font-size: 13px; margin-top: 8px; } .customer-account-forgotpassword .resendotp-block { text-align: center; margin-top: 0; } /* Figma: resend copy sits under Confirm OTP + Go Back (keep attempt counter) */ .customer-account-forgotpassword .gwl-fp-resend-meta { margin-top: 24px; text-align: center; } .customer-account-forgotpassword .resend-wait { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; color: #100F1B !important; margin: 0; } .customer-account-forgotpassword .gwl-fp-resend-prefix { color: #100F1B !important; } .customer-account-forgotpassword .gwl-fp-resend-timer { color: #160B8B !important; font-weight: 400 !important; } .customer-account-forgotpassword .resend-wait .time { color: inherit; font-weight: inherit; } .customer-account-forgotpassword .resendlink { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; line-height: 20px !important; } /* Magento .show() sets display:block inline — keep flex layout when visible */ .customer-account-forgotpassword .resendlink[style*="display: block"], .customer-account-forgotpassword .resendlink[style*="display:block"] { display: flex !important; } .customer-account-forgotpassword .resendlink button.send_otp_password { width: auto; height: auto; background: none !important; color: #160B8B !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; padding: 0; margin: 0; border: 0 !important; text-decoration: underline; box-shadow: none !important; cursor: pointer; } .customer-account-forgotpassword .resend-link-attempt { font-family: 'Outfit', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; color: #A19FA8 !important; margin-top: 8px; } .customer-account-forgotpassword .gwl-fp-mobile-back, .customer-account-forgotpassword .gwl-fp-mobile-back-row { display: none; } .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: 24px; } .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; } .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-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #160B8B !important; text-decoration: underline !important; } .customer-account-forgotpassword .gwl-fp-mobile-back:hover { text-decoration: underline !important; } .customer-account-forgotpassword .field.password .form-field__control, .customer-account-forgotpassword .field.confirmation .form-field__control, .customer-account-forgotpassword .field.password .control, .customer-account-forgotpassword .field.confirmation .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; /* Label is outside .control — center on 44px input (Figma / Sign In) */ top: 22px; transform: translateY(-50%); display: flex !important; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; margin: 0; background: none; border: 0; color: #100F1B; cursor: pointer; z-index: 2; line-height: 0; } .customer-account-forgotpassword .gwl-password-toggle svg { display: block; width: 18px; height: 18px; } .customer-account-forgotpassword .gwl-password-toggle:hover, .customer-account-forgotpassword .gwl-password-toggle--visible { color: #100F1B; opacity: 0.75; } .customer-account-forgotpassword .actions-toolbar.reset-pwd { margin: 8px 0 0 !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd:after { display: none !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd .primary { width: 100%; float: none !important; margin: 0 !important; padding: 0 !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd .primary .action, .customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary .action { margin-bottom: 0 !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd button.action.submit.primary, .customer-account-forgotpassword .actions-toolbar.reset-pwd button.action.submit.primary span { font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd button.action.submit.primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; height: 40px; background: #160B8B !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; 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; clear: both !important; display: flex !important; justify-content: center; align-items: center; text-align: center; margin: 24px 0 0 !important; padding: 0 !important; line-height: 20px !important; font-size: 14px !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary .action.back, .customer-account-forgotpassword .form.password.forget .actions-toolbar.reset-pwd > .secondary .action.back { margin: 0 !important; padding: 0 !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary .action.back, .customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary .action.back span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; color: #160B8B !important; text-decoration: underline !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary .action.back:hover { text-decoration: underline !important; } .customer-account-forgotpassword .md-forget-password[data-gwl-fp-step="password"] .actions-toolbar.reset-pwd .secondary { display: none !important; } /* Auth form fields — force 44px height + centered intl dial-code */ :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) input.input-text, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) input.form-field__input, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) .field.captcha input.input-text { height: 44px !important; min-height: 44px !important; box-sizing: border-box !important; } :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) .iti__selected-flag { display: flex !important; align-items: center !important; height: 100% !important; } :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) .iti__selected-dial-code { line-height: 1 !important; display: inline-flex !important; align-items: center !important; } /* Auth CTAs — vertically center label in 40px buttons. Theme .action.primary uses padding:15px 20px which pushes text down. OTP toggle buttons (send_otp*/verif_otp*/resendotp) are excluded from display:inline-flex — Magento JS hides/shows them via inline style. */ :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.action.submit.primary, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.action.login.primary, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) a.gwl-fp-mobile-back, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) .gwl-otp-actions .gwl-fp-mobile-back { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1 !important; box-sizing: border-box !important; vertical-align: middle; } :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.action.submit.primary > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.action.login.primary > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) a.gwl-fp-mobile-back > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) .gwl-otp-actions .gwl-fp-mobile-back > span { line-height: 1 !important; display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } /* OTP buttons: size/type only — do not set display (JS owns visibility) */ :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_login, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_password, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.resendotp, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_login, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_password, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.first-attempt { padding-top: 0 !important; padding-bottom: 0 !important; line-height: 40px !important; box-sizing: border-box !important; text-align: center; } :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_login > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_password > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.resendotp > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_login > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_password > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.first-attempt > span { line-height: 40px !important; margin: 0 !important; padding: 0 !important; } /* OTP/toggle CTAs — center label ONLY when JS has shown them. Never force display on .send_otp* / .verif_otp* / .resendotp — that broke Magento hide/show (Generate OTP appearing on Email + empty Mobile). */ :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_login[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_login[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_password[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_password[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.resendotp[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.resendotp[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_login[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_login[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_password[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_password[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.first-attempt[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.first-attempt[style*="display:block"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; } @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 { margin: 32px auto 28px !important; } .customer-account-forgotpassword .page-title-wrapper .page-title, .customer-account-forgotpassword .page-title-wrapper .page-title .base, .customer-account-forgotpassword .page-title-wrapper .page-title span { font-size: 28px !important; line-height: 36px !important; } .customer-account-forgotpassword .page-title-wrapper .account-page-subtitle { font-size: 14px !important; line-height: 22px !important; margin-top: 8px !important; color: #0A053D !important; opacity: 0.6; } .customer-account-forgotpassword .columns .column.main { margin-bottom: 48px !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd button.action.submit.primary { height: 40px !important; } .customer-account-forgotpassword .gwl-otp-box { width: 44px; height: 44px; font-size: 16px !important; } }