/* ========================================================================== GWL My Account — Global Shell (Arabic RTL) Breadcrumb, sidebar nav / block-collapsible-nav, mobile drawer, floating Go-Back/Menu buttons, mobile bottom nav, layout-width shell. Shared across every My Account area page. Loaded via: Magento_Customer/layout/customer_account.xml (account-area pages) + directly on the 3 guest auth pages + the 2 standalone CMS pages (Refund, Privacy Policy) that do not include the customer_account handle. ========================================================================== */ /* ========================================================================== 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 — Figma P4 across all My Account pages (2- and 3-level trails) */ .account .breadcrumbs, .cms-refund .breadcrumbs, .cms-privacy-policy-cookie-restriction-mode .breadcrumbs { margin-bottom: 28px !important; padding-bottom: 0 !important; border: 0 !important; border-bottom: 0 !important; background: transparent !important; box-shadow: none !important; } .account .breadcrumbs::before, .account .breadcrumbs::after, .cms-refund .breadcrumbs::before, .cms-refund .breadcrumbs::after, .cms-privacy-policy-cookie-restriction-mode .breadcrumbs::before, .cms-privacy-policy-cookie-restriction-mode .breadcrumbs::after { display: none !important; content: none !important; } .account .breadcrumbs .items, .cms-refund .breadcrumbs .items, .cms-privacy-policy-cookie-restriction-mode .breadcrumbs .items { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; } .account .breadcrumbs .item, .cms-refund .breadcrumbs .item, .cms-privacy-policy-cookie-restriction-mode .breadcrumbs .item { display: inline-flex; align-items: center; margin: 0 !important; padding: 0 !important; float: none !important; background: transparent !important; border: 0 !important; } .account .breadcrumbs .item:not(:last-child)::after, .cms-refund .breadcrumbs .item:not(:last-child)::after, .cms-privacy-policy-cookie-restriction-mode .breadcrumbs .item:not(:last-child)::after { content: '' !important; display: inline-block; flex-shrink: 0; width: 6px; height: 10px; margin-inline: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M0.599609 8.6001L4.59961 4.6001L0.599609 0.600098' stroke='%23838384' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } [dir="rtl"] .account .breadcrumbs .item:not(:last-child)::after, [dir="rtl"] .cms-refund .breadcrumbs .item:not(:last-child)::after, [dir="rtl"] .cms-privacy-policy-cookie-restriction-mode .breadcrumbs .item:not(:last-child)::after { transform: scaleX(-1); } .account .breadcrumbs .item a, .account .breadcrumbs .item:not(:last-child) strong, .cms-refund .breadcrumbs .item a, .cms-refund .breadcrumbs .item:not(:last-child) strong, .cms-privacy-policy-cookie-restriction-mode .breadcrumbs .item a, .cms-privacy-policy-cookie-restriction-mode .breadcrumbs .item:not(:last-child) strong { display: inline !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal !important; font-weight: 300 !important; line-height: 20px !important; color: var(--Main-Tertiary, #444462) !important; text-decoration: none !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; text-transform: none !important; } .account .breadcrumbs .item:last-child strong, .account .breadcrumbs .item:last-child span, .cms-refund .breadcrumbs .item:last-child strong, .cms-refund .breadcrumbs .item:last-child span, .cms-privacy-policy-cookie-restriction-mode .breadcrumbs .item:last-child strong, .cms-privacy-policy-cookie-restriction-mode .breadcrumbs .item:last-child span { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal !important; font-weight: 400 !important; line-height: 20px !important; color: var(--Main-Secondary, #100F1B) !important; } .account .breadcrumbs .item a:hover, .cms-refund .breadcrumbs .item a:hover, .cms-privacy-policy-cookie-restriction-mode .breadcrumbs .item a:hover { color: #160B8B !important; } /* Figma breadcrumb shows "Home" as text, not the site-wide home icon */ .account .breadcrumbs .item.home a:before, .account .breadcrumbs .item.home a:after, .cms-refund .breadcrumbs .item.home a:before, .cms-refund .breadcrumbs .item.home a:after, .cms-privacy-policy-cookie-restriction-mode .breadcrumbs .item.home a:before, .cms-privacy-policy-cookie-restriction-mode .breadcrumbs .item.home a:after { content: none !important; display: none !important; } .account .breadcrumbs .item a: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; } /* -------------------------------------------------------------------- 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)); row-gap: 8px; column-gap: 8px; 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: none !important; border-radius: 6px !important; background: rgba(22, 11, 139, 0.04) !important; text-align: center; font-family: 'Outfit', sans-serif !important; font-size: 12px !important; line-height: 16px !important; font-weight: 400 !important; color: #100F1B !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: 30px; height: 30px; margin: 0 auto; background-color: transparent !important; background-repeat: no-repeat; background-position: center; background-size: contain; -webkit-mask-image: none; mask-image: none; } /* My Account — always first, no distinguishing class of its own */ .nav-sections .customer-menu > .header.links > li:first-child > a:before, .nav-sections .customer-menu > .header.links > li:first-child > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='29' viewBox='0 0 30 29' fill='none'%3E%3Cpath d='M29.1122 26.4413C26.9705 22.7387 23.67 20.0837 19.8183 18.8251C21.7236 17.6909 23.2038 15.9626 24.0318 13.9057C24.8597 11.8488 24.9896 9.57702 24.4014 7.43917C23.8132 5.30133 22.5395 3.41566 20.776 2.07175C19.0124 0.727842 16.8564 0 14.6391 0C12.4218 0 10.2659 0.727842 8.50227 2.07175C6.73869 3.41566 5.46501 5.30133 4.87684 7.43917C4.28867 9.57702 4.41853 11.8488 5.24647 13.9057C6.07441 15.9626 7.55466 17.6909 9.4599 18.8251C5.60818 20.0823 2.30771 22.7373 0.165989 26.4413C0.087448 26.5694 0.0353526 26.7119 0.012776 26.8604C-0.00980051 27.0089 -0.00240085 27.1605 0.0345384 27.3061C0.0714777 27.4517 0.137208 27.5885 0.227852 27.7083C0.318496 27.8281 0.432217 27.9285 0.562305 28.0036C0.692393 28.0788 0.836214 28.1271 0.985281 28.1458C1.13435 28.1644 1.28564 28.153 1.43024 28.1123C1.57483 28.0715 1.7098 28.0022 1.82717 27.9084C1.94455 27.8147 2.04196 27.6984 2.11364 27.5663C4.76302 22.9876 9.44583 20.2538 14.6391 20.2538C19.8324 20.2538 24.5152 22.9876 27.1646 27.5663C27.2363 27.6984 27.3337 27.8147 27.4511 27.9084C27.5684 28.0022 27.7034 28.0715 27.848 28.1123C27.9926 28.153 28.1439 28.1644 28.2929 28.1458C28.442 28.1271 28.5858 28.0788 28.7159 28.0036C28.846 27.9285 28.9597 27.8281 29.0504 27.7083C29.141 27.5885 29.2067 27.4517 29.2437 27.3061C29.2806 27.1605 29.288 27.0089 29.2654 26.8604C29.2429 26.7119 29.1908 26.5694 29.1122 26.4413ZM6.76411 10.1288C6.76411 8.5713 7.22597 7.04875 8.09129 5.75371C8.95661 4.45867 10.1865 3.44931 11.6255 2.85327C13.0644 2.25723 14.6479 2.10128 16.1755 2.40514C17.7031 2.709 19.1062 3.45902 20.2076 4.56036C21.3089 5.6617 22.0589 7.06489 22.3628 8.59249C22.6667 10.1201 22.5107 11.7035 21.9147 13.1425C21.3186 14.5814 20.3093 15.8113 19.0142 16.6767C17.7192 17.542 16.1966 18.0038 14.6391 18.0038C12.5512 18.0016 10.5495 17.1712 9.07311 15.6948C7.59675 14.2185 6.76635 12.2167 6.76411 10.1288Z' fill='%23160B8B'/%3E%3C/svg%3E") !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } /* My Wish List — identified by its knockout scope binding */ .nav-sections .customer-menu > .header.links > li[data-bind*="scope: 'wishlist'"] > a:before, .nav-sections .customer-menu > .header.links > li[data-bind*="scope: 'wishlist'"] > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='30' viewBox='0 0 34 30' fill='none'%3E%3Cpath d='M30.0619 3.54274C29.2958 2.77624 28.3862 2.16821 27.385 1.75336C26.3838 1.33852 25.3107 1.125 24.2269 1.125C23.1432 1.125 22.0701 1.33852 21.0689 1.75336C20.0677 2.16821 19.1581 2.77624 18.3919 3.54274L16.8019 5.13274L15.2119 3.54274C13.6644 1.9952 11.5655 1.1258 9.37694 1.1258C7.18839 1.1258 5.08947 1.9952 3.54194 3.54274C1.9944 5.09028 1.125 7.18919 1.125 9.37774C1.125 11.5663 1.9944 13.6652 3.54194 15.2127L5.13194 16.8027L16.8019 28.4727L28.4719 16.8027L30.0619 15.2127C30.8284 14.4466 31.4365 13.537 31.8513 12.5358C32.2662 11.5346 32.4797 10.4615 32.4797 9.37774C32.4797 8.29401 32.2662 7.22089 31.8513 6.21971C31.4365 5.21852 30.8284 4.30887 30.0619 3.54274Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } /* Send Invitations — identified by its link id */ .nav-sections .customer-menu > .header.links > li:has(> a[id^="invitation-send-link"]) > a:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M6 6H30C31.65 6 33 7.35 33 9V27C33 28.65 31.65 30 30 30H6C4.35 30 3 28.65 3 27V9C3 7.35 4.35 6 6 6Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M33 9L18 19.5L3 9' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } .nav-sections .customer-menu > .header.links > li.icon-orders > a:before, .nav-sections .customer-menu > .header.links > li.icon-orders > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M13.5 32.9998C14.3284 32.9998 15 32.3282 15 31.4998C15 30.6713 14.3284 29.9998 13.5 29.9998C12.6716 29.9998 12 30.6713 12 31.4998C12 32.3282 12.6716 32.9998 13.5 32.9998Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M30 32.9998C30.8284 32.9998 31.5 32.3282 31.5 31.4998C31.5 30.6713 30.8284 29.9998 30 29.9998C29.1716 29.9998 28.5 30.6713 28.5 31.4998C28.5 32.3282 29.1716 32.9998 30 32.9998Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.5 1.50024H7.5L11.52 21.5852C11.6572 22.2758 12.0329 22.8962 12.5813 23.3377C13.1298 23.7792 13.816 24.0137 14.52 24.0002H29.1C29.804 24.0137 30.4902 23.7792 31.0387 23.3377C31.5871 22.8962 31.9628 22.2758 32.1 21.5852L34.5 9.00024H9' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } .nav-sections .customer-menu > .header.links > li.icon-address > a:before, .nav-sections .customer-menu > .header.links > li.icon-address > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='33' viewBox='0 0 27 33' fill='none'%3E%3Cpath d='M25.125 13.3977C25.125 22.9432 13.125 31.125 13.125 31.125C13.125 31.125 1.125 22.9432 1.125 13.3977C1.125 10.1428 2.38928 7.02118 4.63972 4.7196C6.89016 2.41802 9.9424 1.125 13.125 1.125C16.3076 1.125 19.3598 2.41802 21.6103 4.7196C23.8607 7.02118 25.125 10.1428 25.125 13.3977Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } .nav-sections .customer-menu > .header.links > li.icon-info > a:before, .nav-sections .customer-menu > .header.links > li.icon-info > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M18 33C26.2843 33 33 26.2843 33 18C33 9.71573 26.2843 3 18 3C9.71573 3 3 9.71573 3 18C3 26.2843 9.71573 33 18 33Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 24V17' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 12H18.015' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } .nav-sections .customer-menu > .header.links > li.icon-giftcard > a:before, .nav-sections .customer-menu > .header.links > li.icon-giftcard > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M30 18V33H6V18' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M33 10.5002H3V18.0002H33V10.5002Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 33V10.5' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 10.4998H11.25C10.2554 10.4998 9.30161 10.1047 8.59835 9.40141C7.89509 8.69814 7.5 7.74432 7.5 6.74976C7.5 5.75519 7.89509 4.80137 8.59835 4.09811C9.30161 3.39484 10.2554 2.99976 11.25 2.99976C16.5 2.99976 18 10.4998 18 10.4998Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 10.5H24.75C25.7446 10.5 26.6984 10.1049 27.4017 9.40165C28.1049 8.69839 28.5 7.74456 28.5 6.75C28.5 5.75544 28.1049 4.80161 27.4017 4.09835C26.6984 3.39509 25.7446 3 24.75 3C19.5 3 18 10.5 18 10.5Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } .nav-sections .customer-menu > .header.links > li.icon-reward > a:before, .nav-sections .customer-menu > .header.links > li.icon-reward > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='31' viewBox='0 0 33 31' fill='none'%3E%3Cpath d='M16.125 1.125L20.76 10.515L31.125 12.03L23.625 19.335L25.395 29.655L16.125 24.78L6.855 29.655L8.625 19.335L1.125 12.03L11.49 10.515L16.125 1.125Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } .nav-sections .customer-menu > .header.links > li.icon-reviews > a:before, .nav-sections .customer-menu > .header.links > li.icon-reviews > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M28.125 13.875C28.1302 15.8548 27.6676 17.8079 26.775 19.575C25.7166 21.6927 24.0896 23.4738 22.0762 24.719C20.0627 25.9641 17.7424 26.6241 15.375 26.625C13.3952 26.6302 11.4422 26.1676 9.675 25.275L1.125 28.125L3.975 19.575C3.0824 17.8079 2.61984 15.8548 2.625 13.875C2.62592 11.5077 3.28592 9.18732 4.53108 7.17387C5.77624 5.16042 7.55738 3.53339 9.675 2.47504C11.4422 1.58244 13.3952 1.11988 15.375 1.12504H16.125C19.2515 1.29753 22.2046 2.61718 24.4187 4.83133C26.6329 7.04548 27.9525 9.99852 28.125 13.125V13.875Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } .nav-sections .customer-menu > .header.links > li.icon-newsletter > a:before, .nav-sections .customer-menu > .header.links > li.icon-newsletter > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='33' viewBox='0 0 27 33' fill='none'%3E%3Cpath d='M14.625 1.125H4.125C3.32935 1.125 2.56629 1.44107 2.00368 2.00368C1.44107 2.56629 1.125 3.32935 1.125 4.125V28.125C1.125 28.9206 1.44107 29.6837 2.00368 30.2463C2.56629 30.8089 3.32935 31.125 4.125 31.125H22.125C22.9206 31.125 23.6837 30.8089 24.2463 30.2463C24.8089 29.6837 25.125 28.9206 25.125 28.125V11.625L14.625 1.125Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } .nav-sections .customer-menu > .header.links > li.icon-invitations > a:before, .nav-sections .customer-menu > .header.links > li.icon-invitations > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M6 6H30C31.65 6 33 7.35 33 9V27C33 28.65 31.65 30 30 30H6C4.35 30 3 28.65 3 27V9C3 7.35 4.35 6 6 6Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M33 9L18 19.5L3 9' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } .nav-sections .customer-menu > .header.links > li.icon-returns > a:before, .nav-sections .customer-menu > .header.links > li.icon-returns > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M4 18A14 14 0 1 0 6 10' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 4v6h6' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } .nav-sections .customer-menu > .header.links > li.icon-questions > a:before, .nav-sections .customer-menu > .header.links > li.icon-questions > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M18 32.9998C26.2843 32.9998 33 26.284 33 17.9998C33 9.71548 26.2843 2.99976 18 2.99976C9.71573 2.99976 3 9.71548 3 17.9998C3 26.284 9.71573 32.9998 18 32.9998Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.6367 13.5004C13.9894 12.4979 14.6854 11.6525 15.6017 11.1141C16.5179 10.5756 17.5951 10.3788 18.6425 10.5584C19.6899 10.7381 20.6399 11.2827 21.3243 12.0957C22.0087 12.9087 22.3833 13.9376 22.3817 15.0004C22.3817 18.0004 17.8817 19.5004 17.8817 19.5004' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 25.5H18.015' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } .nav-sections .customer-menu > .header.links > li.icon-privacy > a:before, .nav-sections .customer-menu > .header.links > li.icon-privacy > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M28.5 16.5H7.5C5.84315 16.5 4.5 17.8431 4.5 19.5V30C4.5 31.6569 5.84315 33 7.5 33H28.5C30.1569 33 31.5 31.6569 31.5 30V19.5C31.5 17.8431 30.1569 16.5 28.5 16.5Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.5 16.4998V10.4998C10.5 8.51063 11.2902 6.60298 12.6967 5.19646C14.1032 3.78993 16.0109 2.99976 18 2.99976C19.9891 2.99976 21.8968 3.78993 23.3033 5.19646C24.7098 6.60298 25.5 8.51063 25.5 10.4998V16.4998' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } /* Current tile — keep tint, do not recolor SVG via mask */ .nav-sections .customer-menu > .header.links > li.current > strong { background: rgba(22, 11, 139, 0.08) !important; color: #100F1B !important; font-weight: 400; } .nav-sections .customer-menu > .header.links > li.current > strong:before { background-color: transparent !important; } .nav-sections .customer-menu > .header.links > li.icon-support > a:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M7.5 24V18C7.5 15.2152 8.60625 12.5445 10.5754 10.5754C12.5445 8.60625 15.2152 7.5 18 7.5C20.7848 7.5 23.4555 8.60625 25.4246 10.5754C27.3938 12.5445 28.5 15.2152 28.5 18V24' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M28.5 25.5C28.5 26.2956 28.1839 27.0587 27.6213 27.6213C27.0587 28.1839 26.2956 28.5 25.5 28.5H24C23.2044 28.5 22.4413 28.1839 21.8787 27.6213C21.3161 27.0587 21 26.2956 21 25.5V22.5C21 21.7044 21.3161 20.9413 21.8787 20.3787C22.4413 19.8161 23.2044 19.5 24 19.5H28.5V25.5Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.5 25.5C7.5 26.2956 7.81607 27.0587 8.37868 27.6213C8.94129 28.1839 9.70435 28.5 10.5 28.5H12C12.7956 28.5 13.5587 28.1839 14.1213 27.6213C14.6839 27.0587 15 26.2956 15 25.5V22.5C15 21.7044 14.6839 20.9413 14.1213 20.3787C13.5587 19.8161 12.7956 19.5 12 19.5H7.5V25.5Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } .nav-sections .customer-menu > .header.links > li.helpdesk > a:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M7.5 24V18C7.5 15.2152 8.60625 12.5445 10.5754 10.5754C12.5445 8.60625 15.2152 7.5 18 7.5C20.7848 7.5 23.4555 8.60625 25.4246 10.5754C27.3938 12.5445 28.5 15.2152 28.5 18V24' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M28.5 25.5C28.5 26.2956 28.1839 27.0587 27.6213 27.6213C27.0587 28.1839 26.2956 28.5 25.5 28.5H24C23.2044 28.5 22.4413 28.1839 21.8787 27.6213C21.3161 27.0587 21 26.2956 21 25.5V22.5C21 21.7044 21.3161 20.9413 21.8787 20.3787C22.4413 19.8161 23.2044 19.5 24 19.5H28.5V25.5Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.5 25.5C7.5 26.2956 7.81607 27.0587 8.37868 27.6213C8.94129 28.1839 9.70435 28.5 10.5 28.5H12C12.7956 28.5 13.5587 28.1839 14.1213 27.6213C14.6839 27.0587 15 26.2956 15 25.5V22.5C15 21.7044 14.6839 20.9413 14.1213 20.3787C13.5587 19.8161 12.7956 19.5 12 19.5H7.5V25.5Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } /* Sign Out — Figma red logout */ .nav-sections .customer-menu > .header.links > li.authorization-link > a:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M13.5 31.5H7.5C6.70435 31.5 5.94129 31.1839 5.37868 30.6213C4.81607 30.0587 4.5 29.2956 4.5 28.5V7.5C4.5 6.70435 4.81607 5.94129 5.37868 5.37868C5.94129 4.81607 6.70435 4.5 7.5 4.5H13.5' stroke='%23EB001B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 25.5002L31.5 18.0002L24 10.5002' stroke='%23EB001B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M31.5 18H13.5' stroke='%23EB001B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } .nav-sections .customer-menu > .header.links > li.authorization-link > a { color: #EB001B !important; } .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: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal !important; font-weight: 300 !important; line-height: 22px !important; color: var(--Main-Secondary, #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: 500 !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%3Cpath%20d%3D%22M8.75%2011.25C8.75%2011.3983%208.70602%2011.5433%208.6236%2011.6667C8.54119%2011.79%208.42406%2011.8861%208.28701%2011.9429C8.14997%2011.9997%207.99917%2012.0145%207.85368%2011.9856C7.7082%2011.9566%207.57456%2011.8852%207.46967%2011.7803C7.36478%2011.6754%207.29335%2011.5418%207.26441%2011.3963C7.23548%2011.2508%207.25033%2011.1%207.30709%2010.963C7.36386%2010.8259%207.45999%2010.7088%207.58333%2010.6264C7.70666%2010.544%207.85167%2010.5%208%2010.5C8.19892%2010.5%208.38968%2010.579%208.53033%2010.7197C8.67098%2010.8603%208.75%2011.0511%208.75%2011.25ZM8%204.5C6.62125%204.5%205.5%205.50938%205.5%206.75V7C5.5%207.13261%205.55268%207.25979%205.64645%207.35355C5.74022%207.44732%205.86739%207.5%206%207.5C6.13261%207.5%206.25979%207.44732%206.35356%207.35355C6.44732%207.25979%206.5%207.13261%206.5%207V6.75C6.5%206.0625%207.17313%205.5%208%205.5C8.82688%205.5%209.5%206.0625%209.5%206.75C9.5%207.4375%208.82688%208%208%208C7.86739%208%207.74022%208.05268%207.64645%208.14645C7.55268%208.24021%207.5%208.36739%207.5%208.5V9C7.5%209.13261%207.55268%209.25979%207.64645%209.35355C7.74022%209.44732%207.86739%209.5%208%209.5C8.13261%209.5%208.25979%209.44732%208.35356%209.35355C8.44732%209.25979%208.5%209.13261%208.5%209V8.955C9.64%208.74563%2010.5%207.83625%2010.5%206.75C10.5%205.50938%209.37875%204.5%208%204.5ZM14.5%208C14.5%209.28558%2014.1188%2010.5423%2013.4046%2011.6112C12.6903%2012.6801%2011.6752%2013.5132%2010.4874%2014.0052C9.29973%2014.4972%207.99279%2014.6259%206.73192%2014.3751C5.47104%2014.1243%204.31285%2013.5052%203.40381%2012.5962C2.49477%2011.6872%201.8757%2010.529%201.6249%209.26809C1.37409%208.00721%201.50282%206.70028%201.99479%205.51256C2.48676%204.32484%203.31988%203.30968%204.3888%202.59545C5.45772%201.88122%206.71442%201.5%208%201.5C9.72335%201.50182%2011.3756%202.18722%2012.5942%203.40582C13.8128%204.62441%2014.4982%206.27665%2014.5%208ZM13.5%208C13.5%206.9122%2013.1774%205.84883%2012.5731%204.94436C11.9687%204.03989%2011.1098%203.33494%2010.1048%202.91866C9.09977%202.50238%207.9939%202.39346%206.92701%202.60568C5.86011%202.8179%204.8801%203.34172%204.11092%204.11091C3.34173%204.8801%202.8179%205.86011%202.60568%206.927C2.39347%207.9939%202.50238%209.09977%202.91867%2010.1048C3.33495%2011.1098%204.0399%2011.9687%204.94437%2012.5731C5.84884%2013.1774%206.91221%2013.5%208%2013.5C9.45819%2013.4983%2010.8562%2012.9184%2011.8873%2011.8873C12.9184%2010.8562%2013.4983%209.45818%2013.5%208Z%22%20fill%3D%22%23000%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.75%2011.25C8.75%2011.3983%208.70602%2011.5433%208.6236%2011.6667C8.54119%2011.79%208.42406%2011.8861%208.28701%2011.9429C8.14997%2011.9997%207.99917%2012.0145%207.85368%2011.9856C7.7082%2011.9566%207.57456%2011.8852%207.46967%2011.7803C7.36478%2011.6754%207.29335%2011.5418%207.26441%2011.3963C7.23548%2011.2508%207.25033%2011.1%207.30709%2010.963C7.36386%2010.8259%207.45999%2010.7088%207.58333%2010.6264C7.70666%2010.544%207.85167%2010.5%208%2010.5C8.19892%2010.5%208.38968%2010.579%208.53033%2010.7197C8.67098%2010.8603%208.75%2011.0511%208.75%2011.25ZM8%204.5C6.62125%204.5%205.5%205.50938%205.5%206.75V7C5.5%207.13261%205.55268%207.25979%205.64645%207.35355C5.74022%207.44732%205.86739%207.5%206%207.5C6.13261%207.5%206.25979%207.44732%206.35356%207.35355C6.44732%207.25979%206.5%207.13261%206.5%207V6.75C6.5%206.0625%207.17313%205.5%208%205.5C8.82688%205.5%209.5%206.0625%209.5%206.75C9.5%207.4375%208.82688%208%208%208C7.86739%208%207.74022%208.05268%207.64645%208.14645C7.55268%208.24021%207.5%208.36739%207.5%208.5V9C7.5%209.13261%207.55268%209.25979%207.64645%209.35355C7.74022%209.44732%207.86739%209.5%208%209.5C8.13261%209.5%208.25979%209.44732%208.35356%209.35355C8.44732%209.25979%208.5%209.13261%208.5%209V8.955C9.64%208.74563%2010.5%207.83625%2010.5%206.75C10.5%205.50938%209.37875%204.5%208%204.5ZM14.5%208C14.5%209.28558%2014.1188%2010.5423%2013.4046%2011.6112C12.6903%2012.6801%2011.6752%2013.5132%2010.4874%2014.0052C9.29973%2014.4972%207.99279%2014.6259%206.73192%2014.3751C5.47104%2014.1243%204.31285%2013.5052%203.40381%2012.5962C2.49477%2011.6872%201.8757%2010.529%201.6249%209.26809C1.37409%208.00721%201.50282%206.70028%201.99479%205.51256C2.48676%204.32484%203.31988%203.30968%204.3888%202.59545C5.45772%201.88122%206.71442%201.5%208%201.5C9.72335%201.50182%2011.3756%202.18722%2012.5942%203.40582C13.8128%204.62441%2014.4982%206.27665%2014.5%208ZM13.5%208C13.5%206.9122%2013.1774%205.84883%2012.5731%204.94436C11.9687%204.03989%2011.1098%203.33494%2010.1048%202.91866C9.09977%202.50238%207.9939%202.39346%206.92701%202.60568C5.86011%202.8179%204.8801%203.34172%204.11092%204.11091C3.34173%204.8801%202.8179%205.86011%202.60568%206.927C2.39347%207.9939%202.50238%209.09977%202.91867%2010.1048C3.33495%2011.1098%204.0399%2011.9687%204.94437%2012.5731C5.84884%2013.1774%206.91221%2013.5%208%2013.5C9.45819%2013.4983%2010.8562%2012.9184%2011.8873%2011.8873C12.9184%2010.8562%2013.4983%209.45818%2013.5%208Z%22%20fill%3D%22%23000%22%2F%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; } /* -------------------------------------------------------------------- My Account desktop layout — 20px gutter between sidebar & main Replaces theme float widths (23.75% / 76.25%) that left dead space beside the nav before the content column starts. -------------------------------------------------------------------- */ @media only screen and (min-width: 768px) { .account.page-layout-2columns-left .page-main > .columns:not(.columns.top) { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; column-gap: 20px !important; align-items: start; float: none !important; width: 100% !important; } .account.page-layout-2columns-left .page-main > .columns:not(.columns.top)::before, .account.page-layout-2columns-left .page-main > .columns:not(.columns.top)::after { display: none !important; content: none !important; } .account.page-layout-2columns-left .sidebar-main, .account.page-layout-2columns-left .sidebar-additional { float: none !important; width: auto !important; max-width: none !important; padding: 0 !important; -ms-flex-order: unset !important; order: unset !important; } .account.page-layout-2columns-left .column.main { float: none !important; width: auto !important; max-width: none !important; padding: 0 !important; -ms-flex-order: unset !important; order: unset !important; } [dir="rtl"] .account.page-layout-2columns-left .page-main > .columns:not(.columns.top) { grid-template-columns: minmax(0, 1fr) auto !important; } [dir="rtl"] .account.page-layout-2columns-left .sidebar-main { grid-column: 2 !important; grid-row: 1 !important; } [dir="rtl"] .account.page-layout-2columns-left .column.main { grid-column: 1 !important; grid-row: 1 !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)); row-gap: 8px; column-gap: 8px; 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; } /* Mobile card boxes — Figma spec */ .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; align-items: center; gap: 8px; padding: 16px 8px !important; border: none !important; border-radius: 6px !important; background: rgba(22, 11, 139, 0.04) !important; text-align: center; color: #100F1B !important; font-family: 'Outfit', sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 16px !important; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item[class*="icon-"] > a, .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item[class*="icon-"] > strong { display: flex; flex-direction: column; align-items: center; justify-content: center; } .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 { display: block !important; content: "" !important; width: 30px !important; height: 30px !important; background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; -webkit-mask-image: none !important; mask-image: none !important; flex-shrink: 0 !important; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-account > a:before, .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-account > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='29' viewBox='0 0 30 29' fill='none'%3E%3Cpath d='M29.1122 26.4413C26.9705 22.7387 23.67 20.0837 19.8183 18.8251C21.7236 17.6909 23.2038 15.9626 24.0318 13.9057C24.8597 11.8488 24.9896 9.57702 24.4014 7.43917C23.8132 5.30133 22.5395 3.41566 20.776 2.07175C19.0124 0.727842 16.8564 0 14.6391 0C12.4218 0 10.2659 0.727842 8.50227 2.07175C6.73869 3.41566 5.46501 5.30133 4.87684 7.43917C4.28867 9.57702 4.41853 11.8488 5.24647 13.9057C6.07441 15.9626 7.55466 17.6909 9.4599 18.8251C5.60818 20.0823 2.30771 22.7373 0.165989 26.4413C0.087448 26.5694 0.0353526 26.7119 0.012776 26.8604C-0.00980051 27.0089 -0.00240085 27.1605 0.0345384 27.3061C0.0714777 27.4517 0.137208 27.5885 0.227852 27.7083C0.318496 27.8281 0.432217 27.9285 0.562305 28.0036C0.692393 28.0788 0.836214 28.1271 0.985281 28.1458C1.13435 28.1644 1.28564 28.153 1.43024 28.1123C1.57483 28.0715 1.7098 28.0022 1.82717 27.9084C1.94455 27.8147 2.04196 27.6984 2.11364 27.5663C4.76302 22.9876 9.44583 20.2538 14.6391 20.2538C19.8324 20.2538 24.5152 22.9876 27.1646 27.5663C27.2363 27.6984 27.3337 27.8147 27.4511 27.9084C27.5684 28.0022 27.7034 28.0715 27.848 28.1123C27.9926 28.153 28.1439 28.1644 28.2929 28.1458C28.442 28.1271 28.5858 28.0788 28.7159 28.0036C28.846 27.9285 28.9597 27.8281 29.0504 27.7083C29.141 27.5885 29.2067 27.4517 29.2437 27.3061C29.2806 27.1605 29.288 27.0089 29.2654 26.8604C29.2429 26.7119 29.1908 26.5694 29.1122 26.4413ZM6.76411 10.1288C6.76411 8.5713 7.22597 7.04875 8.09129 5.75371C8.95661 4.45867 10.1865 3.44931 11.6255 2.85327C13.0644 2.25723 14.6479 2.10128 16.1755 2.40514C17.7031 2.709 19.1062 3.45902 20.2076 4.56036C21.3089 5.6617 22.0589 7.06489 22.3628 8.59249C22.6667 10.1201 22.5107 11.7035 21.9147 13.1425C21.3186 14.5814 20.3093 15.8113 19.0142 16.6767C17.7192 17.542 16.1966 18.0038 14.6391 18.0038C12.5512 18.0016 10.5495 17.1712 9.07311 15.6948C7.59675 14.2185 6.76635 12.2167 6.76411 10.1288Z' fill='%23160B8B'/%3E%3C/svg%3E") !important; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-orders > a:before, .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-orders > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M13.5 32.9998C14.3284 32.9998 15 32.3282 15 31.4998C15 30.6713 14.3284 29.9998 13.5 29.9998C12.6716 29.9998 12 30.6713 12 31.4998C12 32.3282 12.6716 32.9998 13.5 32.9998Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M30 32.9998C30.8284 32.9998 31.5 32.3282 31.5 31.4998C31.5 30.6713 30.8284 29.9998 30 29.9998C29.1716 29.9998 28.5 30.6713 28.5 31.4998C28.5 32.3282 29.1716 32.9998 30 32.9998Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.5 1.50024H7.5L11.52 21.5852C11.6572 22.2758 12.0329 22.8962 12.5813 23.3377C13.1298 23.7792 13.816 24.0137 14.52 24.0002H29.1C29.804 24.0137 30.4902 23.7792 31.0387 23.3377C31.5871 22.8962 31.9628 22.2758 32.1 21.5852L34.5 9.00024H9' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-wishlist > a:before, .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-wishlist > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='30' viewBox='0 0 34 30' fill='none'%3E%3Cpath d='M30.0619 3.54274C29.2958 2.77624 28.3862 2.16821 27.385 1.75336C26.3838 1.33852 25.3107 1.125 24.2269 1.125C23.1432 1.125 22.0701 1.33852 21.0689 1.75336C20.0677 2.16821 19.1581 2.77624 18.3919 3.54274L16.8019 5.13274L15.2119 3.54274C13.6644 1.9952 11.5655 1.1258 9.37694 1.1258C7.18839 1.1258 5.08947 1.9952 3.54194 3.54274C1.9944 5.09028 1.125 7.18919 1.125 9.37774C1.125 11.5663 1.9944 13.6652 3.54194 15.2127L5.13194 16.8027L16.8019 28.4727L28.4719 16.8027L30.0619 15.2127C30.8284 14.4466 31.4365 13.537 31.8513 12.5358C32.2662 11.5346 32.4797 10.4615 32.4797 9.37774C32.4797 8.29401 32.2662 7.22089 31.8513 6.21971C31.4365 5.21852 30.8284 4.30887 30.0619 3.54274Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-address > a:before, .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-address > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='33' viewBox='0 0 27 33' fill='none'%3E%3Cpath d='M25.125 13.3977C25.125 22.9432 13.125 31.125 13.125 31.125C13.125 31.125 1.125 22.9432 1.125 13.3977C1.125 10.1428 2.38928 7.02118 4.63972 4.7196C6.89016 2.41802 9.9424 1.125 13.125 1.125C16.3076 1.125 19.3598 2.41802 21.6103 4.7196C23.8607 7.02118 25.125 10.1428 25.125 13.3977Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-info > a:before, .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-info > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M18 33C26.2843 33 33 26.2843 33 18C33 9.71573 26.2843 3 18 3C9.71573 3 3 9.71573 3 18C3 26.2843 9.71573 33 18 33Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 24V17' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 12H18.015' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-giftcard > a:before, .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-giftcard > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M30 18V33H6V18' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M33 10.5002H3V18.0002H33V10.5002Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 33V10.5' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 10.4998H11.25C10.2554 10.4998 9.30161 10.1047 8.59835 9.40141C7.89509 8.69814 7.5 7.74432 7.5 6.74976C7.5 5.75519 7.89509 4.80137 8.59835 4.09811C9.30161 3.39484 10.2554 2.99976 11.25 2.99976C16.5 2.99976 18 10.4998 18 10.4998Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 10.5H24.75C25.7446 10.5 26.6984 10.1049 27.4017 9.40165C28.1049 8.69839 28.5 7.74456 28.5 6.75C28.5 5.75544 28.1049 4.80161 27.4017 4.09835C26.6984 3.39509 25.7446 3 24.75 3C19.5 3 18 10.5 18 10.5Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-reward > a:before, .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-reward > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='31' viewBox='0 0 33 31' fill='none'%3E%3Cpath d='M16.125 1.125L20.76 10.515L31.125 12.03L23.625 19.335L25.395 29.655L16.125 24.78L6.855 29.655L8.625 19.335L1.125 12.03L11.49 10.515L16.125 1.125Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-reviews > a:before, .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-reviews > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M28.125 13.875C28.1302 15.8548 27.6676 17.8079 26.775 19.575C25.7166 21.6927 24.0896 23.4738 22.0762 24.719C20.0627 25.9641 17.7424 26.6241 15.375 26.625C13.3952 26.6302 11.4422 26.1676 9.675 25.275L1.125 28.125L3.975 19.575C3.0824 17.8079 2.61984 15.8548 2.625 13.875C2.62592 11.5077 3.28592 9.18732 4.53108 7.17387C5.77624 5.16042 7.55738 3.53339 9.675 2.47504C11.4422 1.58244 13.3952 1.11988 15.375 1.12504H16.125C19.2515 1.29753 22.2046 2.61718 24.4187 4.83133C26.6329 7.04548 27.9525 9.99852 28.125 13.125V13.875Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-newsletter > a:before, .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-newsletter > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='33' viewBox='0 0 27 33' fill='none'%3E%3Cpath d='M14.625 1.125H4.125C3.32935 1.125 2.56629 1.44107 2.00368 2.00368C1.44107 2.56629 1.125 3.32935 1.125 4.125V28.125C1.125 28.9206 1.44107 29.6837 2.00368 30.2463C2.56629 30.8089 3.32935 31.125 4.125 31.125H22.125C22.9206 31.125 23.6837 30.8089 24.2463 30.2463C24.8089 29.6837 25.125 28.9206 25.125 28.125V11.625L14.625 1.125Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-invitations > a:before, .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-invitations > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M6 6H30C31.65 6 33 7.35 33 9V27C33 28.65 31.65 30 30 30H6C4.35 30 3 28.65 3 27V9C3 7.35 4.35 6 6 6Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M33 9L18 19.5L3 9' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-questions > a:before, .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-questions > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M18 32.9998C26.2843 32.9998 33 26.284 33 17.9998C33 9.71548 26.2843 2.99976 18 2.99976C9.71573 2.99976 3 9.71548 3 17.9998C3 26.284 9.71573 32.9998 18 32.9998Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.6367 13.5004C13.9894 12.4979 14.6854 11.6525 15.6017 11.1141C16.5179 10.5756 17.5951 10.3788 18.6425 10.5584C19.6899 10.7381 20.6399 11.2827 21.3243 12.0957C22.0087 12.9087 22.3833 13.9376 22.3817 15.0004C22.3817 18.0004 17.8817 19.5004 17.8817 19.5004' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 25.5H18.015' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-privacy > a:before, .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-privacy > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M28.5 16.5H7.5C5.84315 16.5 4.5 17.8431 4.5 19.5V30C4.5 31.6569 5.84315 33 7.5 33H28.5C30.1569 33 31.5 31.6569 31.5 30V19.5C31.5 17.8431 30.1569 16.5 28.5 16.5Z' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.5 16.4998V10.4998C10.5 8.51063 11.2902 6.60298 12.6967 5.19646C14.1032 3.78993 16.0109 2.99976 18 2.99976C19.9891 2.99976 21.8968 3.78993 23.3033 5.19646C24.7098 6.60298 25.5 8.51063 25.5 10.4998V16.4998' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-logout > a:before, .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-logout > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M13.5 31.5H7.5C6.70435 31.5 5.94129 31.1839 5.37868 30.6213C4.81607 30.0587 4.5 29.2956 4.5 28.5V7.5C4.5 6.70435 4.81607 5.94129 5.37868 5.37868C5.94129 4.81607 6.70435 4.5 7.5 4.5H13.5' stroke='%23EB001B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 25.5002L31.5 18.0002L24 10.5002' stroke='%23EB001B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M31.5 18H13.5' stroke='%23EB001B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-color: transparent !important; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-logout > a { color: #EB001B !important; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-returns > a:before, .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-returns > strong:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M4 18A14 14 0 1 0 6 10' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 4v6h6' stroke='%23160B8B' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } } /* -------------------------------------------------------------------- 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; } } /* -------------------------------------------------------------------- /* ========================================================================== 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); }