/* ========================================================================== 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)); gap: 10px; list-style: none; margin: 0; padding: 0 14px; box-sizing: border-box; } .nav-sections .customer-menu > .header.links > li { margin: 0 !important; } /* GWL fix: Magento renders the CURRENT page's own tile as a bare Label with no at all (Html\Link\Current::_toHtml()); the icon-X class still lands on the
  • (Gwl_Header NavigationLinks plugin), but without a `> strong` selector here that tile lost its card border/padding/icon entirely — not just the highlight below. Dual-selecting `> a, > strong` throughout this block restores the card for every tile regardless of which one is current. */ .nav-sections .customer-menu > .header.links > li > a, .nav-sections .customer-menu > .header.links > li > strong { display: flex !important; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px !important; border: 1px solid var(--gwl-account-border); border-radius: 12px; text-align: center; font-family: 'Work Sans', sans-serif; font-size: 11px; line-height: 14px; font-weight: 500; color: #1a1a1f !important; text-decoration: none !important; } .nav-sections .customer-menu > .header.links > li .counter { display: none; } .nav-sections .customer-menu > .header.links > li > a:before, .nav-sections .customer-menu > .header.links > li > strong:before { content: ''; display: block; width: 22px; height: 22px; margin: 0 auto; background-color: var(--gwl-account-muted); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* My Account — always first, no distinguishing class of its own */ .nav-sections .customer-menu > .header.links > li:first-child > a:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 8a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm0 1c-2.7 0-5 1.5-5 3.4V14h10v-1.6C13 10.5 10.7 9 8 9zm0-8a2 2 0 1 1-2 2 2 2 0 0 1 2-2zm0 9c2.1 0 4 .9 4 2.4V13H4v-.6C4 10.9 5.9 10 8 10z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 8a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm0 1c-2.7 0-5 1.5-5 3.4V14h10v-1.6C13 10.5 10.7 9 8 9zm0-8a2 2 0 1 1-2 2 2 2 0 0 1 2-2zm0 9c2.1 0 4 .9 4 2.4V13H4v-.6C4 10.9 5.9 10 8 10z'/%3E%3C/svg%3E"); } /* My Wish List — identified by its knockout scope binding */ .nav-sections .customer-menu > .header.links > li[data-bind*="scope: 'wishlist'"] > a:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 14.2 1.9 8.1A3.9 3.9 0 1 1 7.4 2.6L8 3.2l.6-.6A3.9 3.9 0 1 1 14.1 8L8 14.2zm-5.4-7a2.9 2.9 0 0 0 0 4.1L8 12.8l5.4-5.5a2.9 2.9 0 1 0-4.1-4.1L8 4.6 6.7 3.3a2.9 2.9 0 0 0-4.1 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 14.2 1.9 8.1A3.9 3.9 0 1 1 7.4 2.6L8 3.2l.6-.6A3.9 3.9 0 1 1 14.1 8L8 14.2zm-5.4-7a2.9 2.9 0 0 0 0 4.1L8 12.8l5.4-5.5a2.9 2.9 0 1 0-4.1-4.1L8 4.6 6.7 3.3a2.9 2.9 0 0 0-4.1 0z'/%3E%3C/svg%3E"); } /* Send Invitations — identified by its link id */ .nav-sections .customer-menu > .header.links > li:has(> a[id^="invitation-send-link"]) > a:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 6.5l7-4 7 4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1' y='6.5' width='14' height='7.5' rx='1' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M1.3 7l6.7 4 6.7-4' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 6.5l7-4 7 4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1' y='6.5' width='14' height='7.5' rx='1' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M1.3 7l6.7 4 6.7-4' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E"); } /* GWL fix: the 10 rules below are dual-selected (`> a, > strong`) because their blocks extend Html\Link\Current — when the tile IS the current page, Magento renders `` instead of `` (see comment above). The other icon-X rules further down (Send Invitations, My Support Tickets/helpdesk, Sign Out) are left as `> a` only: those blocks never emit a branch, so a `> strong` selector there would be dead code — and per user decision, active-page highlighting is CSS-only and intentionally does not cover those tiles (or My Account / My Wishlist, which have no icon-X class at all). */ .nav-sections .customer-menu > .header.links > li.icon-orders > a:before, .nav-sections .customer-menu > .header.links > li.icon-orders > strong:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M5.2 4V3.5a3.3 3.3 0 0 1 6.6 0V4h2.4l-.8 9.6H3.6L2.8 4zm1 0h4.6V3.5a2.3 2.3 0 0 0-4.6 0zm-2.3 1 .6 7.6h8L13 5h-1.2v1.7h-1V5h-4.6v1.7h-1V5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M5.2 4V3.5a3.3 3.3 0 0 1 6.6 0V4h2.4l-.8 9.6H3.6L2.8 4zm1 0h4.6V3.5a2.3 2.3 0 0 0-4.6 0zm-2.3 1 .6 7.6h8L13 5h-1.2v1.7h-1V5h-4.6v1.7h-1V5z'/%3E%3C/svg%3E"); } .nav-sections .customer-menu > .header.links > li.icon-address > a:before, .nav-sections .customer-menu > .header.links > li.icon-address > strong:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 1a5 5 0 0 0-5 5c0 3.75 5 9 5 9s5-5.25 5-9a5 5 0 0 0-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 1a5 5 0 0 0-5 5c0 3.75 5 9 5 9s5-5.25 5-9a5 5 0 0 0-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E"); } .nav-sections .customer-menu > .header.links > li.icon-info > a:before, .nav-sections .customer-menu > .header.links > li.icon-info > strong:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='7.25' y='6.8' width='1.5' height='4.7' rx='0.3' fill='%23000'/%3E%3Ccircle cx='8' cy='4.3' r='0.95' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='7.25' y='6.8' width='1.5' height='4.7' rx='0.3' fill='%23000'/%3E%3Ccircle cx='8' cy='4.3' r='0.95' fill='%23000'/%3E%3C/svg%3E"); } .nav-sections .customer-menu > .header.links > li.icon-giftcard > a:before, .nav-sections .customer-menu > .header.links > li.icon-giftcard > strong:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='6.5' width='12' height='7.5' rx='0.5' fill='%23000'/%3E%3Crect x='1.5' y='4.3' width='13' height='2.4' rx='0.4' fill='%23000'/%3E%3Crect x='7.3' y='4.3' width='1.4' height='9.7' fill='%23000'/%3E%3Ccircle cx='6' cy='3' r='1.3' fill='%23000'/%3E%3Ccircle cx='10' cy='3' r='1.3' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='6.5' width='12' height='7.5' rx='0.5' fill='%23000'/%3E%3Crect x='1.5' y='4.3' width='13' height='2.4' rx='0.4' fill='%23000'/%3E%3Crect x='7.3' y='4.3' width='1.4' height='9.7' fill='%23000'/%3E%3Ccircle cx='6' cy='3' r='1.3' fill='%23000'/%3E%3Ccircle cx='10' cy='3' r='1.3' fill='%23000'/%3E%3C/svg%3E"); } .nav-sections .customer-menu > .header.links > li.icon-reward > a:before, .nav-sections .customer-menu > .header.links > li.icon-reward > strong:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 1.5l1.85 3.9 4.3.6-3.1 3 .75 4.3L8 11.4l-3.8 2 .74-4.3-3.1-3 4.3-.6L8 1.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 1.5l1.85 3.9 4.3.6-3.1 3 .75 4.3L8 11.4l-3.8 2 .74-4.3-3.1-3 4.3-.6L8 1.5z'/%3E%3C/svg%3E"); } .nav-sections .customer-menu > .header.links > li.icon-reviews > a:before, .nav-sections .customer-menu > .header.links > li.icon-reviews > strong:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='2.5' width='13' height='8.5' rx='2' fill='%23000'/%3E%3Cpath fill='%23000' d='M4 11v3l3.2-3H4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='2.5' width='13' height='8.5' rx='2' fill='%23000'/%3E%3Cpath fill='%23000' d='M4 11v3l3.2-3H4z'/%3E%3C/svg%3E"); } .nav-sections .customer-menu > .header.links > li.icon-newsletter > a:before, .nav-sections .customer-menu > .header.links > li.icon-newsletter > strong:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='3.5' width='14' height='9' rx='1' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M1.5 4.2l6.5 4.6 6.5-4.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='3.5' width='14' height='9' rx='1' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M1.5 4.2l6.5 4.6 6.5-4.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E"); } .nav-sections .customer-menu > .header.links > li.icon-invitations > a:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 6.5l7-4 7 4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1' y='6.5' width='14' height='7.5' rx='1' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M1.3 7l6.7 4 6.7-4' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 6.5l7-4 7 4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1' y='6.5' width='14' height='7.5' rx='1' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M1.3 7l6.7 4 6.7-4' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E"); } .nav-sections .customer-menu > .header.links > li.icon-returns > a:before, .nav-sections .customer-menu > .header.links > li.icon-returns > strong:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M4 5H1.5V2.5L2.9 3.9A6 6 0 1 1 1.6 10l1.4-.6A4.5 4.5 0 1 0 4 5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M4 5H1.5V2.5L2.9 3.9A6 6 0 1 1 1.6 10l1.4-.6A4.5 4.5 0 1 0 4 5z'/%3E%3C/svg%3E"); } .nav-sections .customer-menu > .header.links > li.icon-questions > a:before, .nav-sections .customer-menu > .header.links > li.icon-questions > strong:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%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"); } .nav-sections .customer-menu > .header.links > li.icon-privacy > a:before, .nav-sections .customer-menu > .header.links > li.icon-privacy > strong:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='3.5' y='7' width='9' height='7' rx='1.2' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='3.5' y='7' width='9' height='7' rx='1.2' fill='%23000'/%3E%3C/svg%3E"); } /* ========================================================================== GWL Mobile Account Drawer — current-page highlight Magento's Html\Link\Current::_toHtml() renders the current page's own tile as
  • Label
    • (no ). Reuses the same --gwl-account-current-bg/--gwl-account-blue tokens as the desktop sidebar's own current-page treatment (see ":is(.account-nav, .block-collapsible-nav) ... li.item.current > strong" below) for visual consistency between desktop and mobile. Only 10 of 15 tiles can ever carry .current — the other 5 (My Account, My Wish List, Send Invitations, My Support Tickets, Sign Out) use link blocks that don't extend Link\Current and never receive this class. ========================================================================== */ .nav-sections .customer-menu > .header.links > li.current > strong { background: var(--gwl-account-current-bg); border-color: var(--gwl-account-blue); color: var(--gwl-account-blue) !important; font-weight: 600; } .nav-sections .customer-menu > .header.links > li.current > strong:before { background-color: var(--gwl-account-blue); } .nav-sections .customer-menu > .header.links > li.icon-support > a:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8a5 5 0 0 1 10 0v3.2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='1.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Crect x='11.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Cpath d='M11.5 11.7v.6a2 2 0 0 1-2 2H8.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='7.2' cy='14.3' r='1' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8a5 5 0 0 1 10 0v3.2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='1.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Crect x='11.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Cpath d='M11.5 11.7v.6a2 2 0 0 1-2 2H8.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='7.2' cy='14.3' r='1' fill='%23000'/%3E%3C/svg%3E"); } /* My Support Tickets — the Mirasvit Helpdesk top.links block hardcodes its own
  • , bypassing the class argument other blocks accept, so it's targeted by that class too */ .nav-sections .customer-menu > .header.links > li.helpdesk > a:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8a5 5 0 0 1 10 0v3.2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='1.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Crect x='11.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Cpath d='M11.5 11.7v.6a2 2 0 0 1-2 2H8.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='7.2' cy='14.3' r='1' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8a5 5 0 0 1 10 0v3.2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Crect x='1.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Crect x='11.5' y='7.5' width='3' height='4.2' rx='1' fill='%23000'/%3E%3Cpath d='M11.5 11.7v.6a2 2 0 0 1-2 2H8.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='7.2' cy='14.3' r='1' fill='%23000'/%3E%3C/svg%3E"); } /* Sign Out — always red, mirroring the Logout tile on the My Account grid */ .nav-sections .customer-menu > .header.links > li.authorization-link > a:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 3H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.5 8H14M14 8l-2.3-2.3M14 8l-2.3 2.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 3H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.5 8H14M14 8l-2.3-2.3M14 8l-2.3 2.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-color: #F66560 !important; } .nav-sections .customer-menu > .header.links > li.authorization-link > a { color: #F66560 !important; } /* Sign Out — push to the very last tile, matching the My Account sidebar grid where Logout is always last. */ .nav-sections .customer-menu > .header.links > li.authorization-link { order: 99; } /* ========================================================================== GWL Mobile Account Drawer — Guest state (Sign In / Create an Account) Guest visitors get
  • Sign In
    • and a plain
  • Create an Account
    • as DIRECT children of the cloned #store.links > ul.header.links (customer.phtml's .customer-menu wrapper only renders when Magento\Customer\Block\Account\Customer:: customerLoggedIn() is true — confirmed via vendor/magento/module-customer/ view/frontend/templates/account/customer.phtml). The :not(:has(...)) guard is load-bearing, NOT cosmetic: a live DOM dump (logged-in, mobile) showed Magento *also* renders a second, always-hidden -until-now
  • Sign Out
    • as a DIRECT child of this same #store.links > ul.header.links (from the core top.links "authorization-link" block — separate from the properly-styled red Sign Out TILE inside .customer-menu's own nested list). Without the guard, these rules matched that stray duplicate too and rendered a second, wrongly-styled "Sign Out" button below the icon grid for logged-in users. li.customer-welcome (the .customer-menu wrapper) only exists when logged in, so its absence reliably identifies true guest state. */ .nav-sections #store\.links:not(:has(> .header.links > li.customer-welcome)) > .header.links > li:not(.greet) { display: block; margin: 0 0 12px !important; } .nav-sections #store\.links:not(:has(> .header.links > li.customer-welcome)) > .header.links > li.authorization-link > a, .nav-sections #store\.links:not(:has(> .header.links > li.customer-welcome)) > .header.links > li:not(.authorization-link):not(.greet) > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; border-radius: 8px; font-family: 'Work Sans', sans-serif; font-size: 14px; font-weight: 600; text-decoration: none !important; box-sizing: border-box; } /* Sign In — solid primary button */ .nav-sections #store\.links:not(:has(> .header.links > li.customer-welcome)) > .header.links > li.authorization-link > a { background: var(--gwl-account-blue); color: #fff !important; border: 1px solid var(--gwl-account-blue); } /* Create an Account — secondary outlined button */ .nav-sections #store\.links:not(:has(> .header.links > li.customer-welcome)) > .header.links > li:not(.authorization-link):not(.greet) > a { background: #fff; color: var(--gwl-account-blue) !important; border: 1px solid var(--gwl-account-border); } /* -------------------------------------------------------------------- Sidebar navigation — Figma My Account left nav Icons: stroke SVGs from Figma (mask + background-color tint). Labels: Outfit 300 / 16px / 22px / #100F1B Active: text+icon #160B8B, bg rgba(22,11,139,0.05), radius 8px Dividers: #E7E6EC · Logout: #EB001B -------------------------------------------------------------------- */ .block:is(.account-nav, .block-collapsible-nav) { background: #fff !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; margin-bottom: 24px !important; padding: 8px !important; overflow: hidden; } /* Theme sets .block-collapsible-nav .content { background:#f7f9fb } — force white */ .block:is(.account-nav, .block-collapsible-nav) .content { background: #fff !important; border: none !important; box-shadow: none !important; } @media (max-width: 767px) { .block:is(.account-nav, .block-collapsible-nav) { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; overflow: visible; } } .block:is(.account-nav, .block-collapsible-nav) .title { background: transparent !important; border: none !important; letter-spacing: 0 !important; text-transform: none !important; color: #000000 !important; } .block:is(.account-nav, .block-collapsible-nav) .content .nav.items { margin: 0 !important; padding: 0 !important; list-style: none !important; } :is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item { margin: 0 !important; } :is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item > a, :is(.account-nav, .block-collapsible-nav) .content .nav.items > li.item.current > strong { display: flex !important; align-items: center; gap: 12px; margin: 0 !important; padding: 12px 14px !important; border-radius: 8px !important; font-family: 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)); gap: 12px; max-height: calc(70vh - 52px); overflow-y: auto; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item { margin: 0 !important; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-wishlist, .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-giftcard, .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.icon-support { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: 0 !important; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item > a, .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item.current > strong { flex-direction: column; gap: 8px; padding: 16px 8px !important; border: 1px solid var(--gwl-account-border); border-radius: 12px; text-align: center; font-size: 11px; line-height: 14px; } .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item[class*="icon-"] > a:before, .block:is(.account-nav, .block-collapsible-nav) .content.active .nav.items > li.item[class*="icon-"] > strong:before { width: 22px; height: 22px; } } /* -------------------------------------------------------------------- Mobile — My Account: bottom tab bar (Shop / Discovery / Services / Cart). Wired into customer_account.xml (every account page) and also into cms_page_view_id_refund.xml / cms_page_view_id_privacy-policy- cookie-restriction-mode.xml (those two CMS pages specifically) — see those layout files for why it's opt-in per page rather than sitewide. Hidden by default — only shown below the mobile breakpoint. -------------------------------------------------------------------- */ .account .gwl-account-bottom-nav, .cms-refund .gwl-account-bottom-nav, .cms-privacy-policy-cookie-restriction-mode .gwl-account-bottom-nav { display: none; } @media (max-width: 767px) { .account .gwl-account-bottom-nav, .cms-refund .gwl-account-bottom-nav, .cms-privacy-policy-cookie-restriction-mode .gwl-account-bottom-nav { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; background: #fff; border-top: 1px solid var(--gwl-account-border); box-shadow: 0 -2px 8px rgba(16, 24, 40, 0.06); } .account .gwl-account-bottom-nav__list, .cms-refund .gwl-account-bottom-nav__list, .cms-privacy-policy-cookie-restriction-mode .gwl-account-bottom-nav__list { display: flex; margin: 0; padding: 0; list-style: none; } .account .gwl-account-bottom-nav__item, .cms-refund .gwl-account-bottom-nav__item, .cms-privacy-policy-cookie-restriction-mode .gwl-account-bottom-nav__item { flex: 1 1 0; } .account .gwl-account-bottom-nav__link, .cms-refund .gwl-account-bottom-nav__link, .cms-privacy-policy-cookie-restriction-mode .gwl-account-bottom-nav__link { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 10px; text-decoration: none; color: var(--gwl-account-text); font-family: 'Work Sans', sans-serif; font-size: 11px; font-weight: 500; } .account .gwl-account-bottom-nav__link svg, .cms-refund .gwl-account-bottom-nav__link svg, .cms-privacy-policy-cookie-restriction-mode .gwl-account-bottom-nav__link svg { width: 20px; height: 20px; } .account .gwl-account-bottom-nav__link--disabled, .cms-refund .gwl-account-bottom-nav__link--disabled, .cms-privacy-policy-cookie-restriction-mode .gwl-account-bottom-nav__link--disabled { color: var(--gwl-account-text); opacity: 1; pointer-events: none; cursor: default; } .account .gwl-account-bottom-nav__link.is-active, .cms-refund .gwl-account-bottom-nav__link.is-active, .cms-privacy-policy-cookie-restriction-mode .gwl-account-bottom-nav__link.is-active { color: var(--gwl-account-blue); font-weight: 600; } /* Leave room at the bottom of every account page so content isn't hidden behind the fixed bar. */ .account .page-wrapper, .account .columns, .cms-refund .page-wrapper, .cms-privacy-policy-cookie-restriction-mode .page-wrapper { padding-bottom: 64px; } /* Hide (not remove) the Contact Us button and WhatsApp bubble on account pages so they don't collide with the new bottom bar. The WhatsApp widget has no stable class/id — its fixed-position wrapper is targeted via the wa.me link it contains. */ .account #hdmx__contact-button, .account div:has(> a[href*="wa.me"]), .cms-refund #hdmx__contact-button, .cms-refund div:has(> a[href*="wa.me"]), .cms-privacy-policy-cookie-restriction-mode #hdmx__contact-button, .cms-privacy-policy-cookie-restriction-mode div:has(> a[href*="wa.me"]) { display: none !important; } /* Same hide, requested separately for the Sign In / Create Account / Forgot Password pages — no bottom-nav collision to avoid here (those pages don't have one), just decluttering the compact single-column auth form layout on mobile. */ :is(.customer-account-login, .customer-account-create, .customer-account-forgotpassword) #hdmx__contact-button, :is(.customer-account-login, .customer-account-create, .customer-account-forgotpassword) div:has(> a[href*="wa.me"]) { display: none !important; } } /* -------------------------------------------------------------------- Mobile — My Account: show the breadcrumb (hidden sitewide below 768px by the base theme) and give the page title/subtitle a mobile pass, on every account page. -------------------------------------------------------------------- */ @media (max-width: 767px) { .account .breadcrumbs { display: block !important; } } /* -------------------------------------------------------------------- Dashboard cards — Account Information / Newsletter / Address Figma My Account (desktop 1816:5400 / mobile 2029:52771) — Outfit tokens matching guest auth pages (#0A053D / #160B8B / #E5E8EE / radius 4). -------------------------------------------------------------------- */ .account .column.main .block.block-dashboard-info, .account .column.main .block.block-dashboard-newsletter, .account .column.main .block.block-dashboard-addresses, .account .column.main .block.block-dashboard-orders { display: flex !important; flex-direction: column !important; gap: 16px !important; background: #fff; border: 1px solid #E7E6EC; border-radius: 8px; padding: 24px; margin-bottom: 16px; box-shadow: none; } /* Beat Luma .abs-account-title (.column.main .block:not(.widget) .block-title adds ~20px margin-bottom + ~10px padding-bottom on top of flex gap). */ .account .column.main .block.block-dashboard-info .block-title, .account .column.main .block.block-dashboard-newsletter .block-title, .account .column.main .block.block-dashboard-addresses .block-title, .account .column.main .block.block-dashboard-orders .block-title.order { display: flex !important; align-items: center !important; justify-content: flex-start !important; border-bottom: 0 !important; padding: 0 !important; margin: 0 !important; } .account .column.main .block.block-dashboard-info .block-title::before, .account .column.main .block.block-dashboard-info .block-title::after, .account .column.main .block.block-dashboard-newsletter .block-title::before, .account .column.main .block.block-dashboard-newsletter .block-title::after, .account .column.main .block.block-dashboard-addresses .block-title::before, .account .column.main .block.block-dashboard-addresses .block-title::after, .account .column.main .block.block-dashboard-orders .block-title.order::before, .account .column.main .block.block-dashboard-orders .block-title.order::after { content: none !important; display: none !important; } .account .column.main .block.block-dashboard-info .block-content, .account .column.main .block.block-dashboard-newsletter .block-content, .account .column.main .block.block-dashboard-addresses .block-content, .account .column.main .block.block-dashboard-orders .block-content { margin: 0 !important; padding: 0 !important; } .account .column.main .block.block-dashboard-info .block-content::before, .account .column.main .block.block-dashboard-info .block-content::after, .account .column.main .block.block-dashboard-newsletter .block-content::before, .account .column.main .block.block-dashboard-newsletter .block-content::after, .account .column.main .block.block-dashboard-addresses .block-content::before, .account .column.main .block.block-dashboard-addresses .block-content::after, .account .column.main .block.block-dashboard-orders .block-content::before, .account .column.main .block.block-dashboard-orders .block-content::after { content: none !important; display: none !important; } .account .block-dashboard-info .block-title > .block-title-actions, .account .block-dashboard-newsletter .block-title > .block-title-actions, .account .block-dashboard-addresses .block-title > .block-title-actions, .account .block-dashboard-orders .block-title.order > .block-title-actions, .account .block-dashboard-addresses .block-title > a.action, .account .block-dashboard-orders .block-title.order > a.action { margin-inline-start: auto !important; margin-left: 0 !important; } .account .column.main .block.block-dashboard-info .block-title strong, .account .column.main .block.block-dashboard-newsletter .block-title strong, .account .column.main .block.block-dashboard-addresses .block-title strong, .account .column.main .block.block-dashboard-orders .block-title.order strong { margin: 0 !important; padding: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 18px !important; font-weight: 500 !important; line-height: 24px !important; color: #100F1B !important; } .account .block-title-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .account .block-title-actions .action, .account .block-dashboard-addresses .block-title > a.action, .account .block-dashboard-orders .block-title.order > a.action { font-family: 'Outfit', sans-serif !important; color: #160B8B !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; text-decoration: underline !important; } .account .block-title-actions .action:hover, .account .block-dashboard-addresses .block-title > a.action:hover, .account .block-dashboard-orders .block-title.order > a.action:hover { text-decoration: underline !important; opacity: 0.85; } /* Figma: "Edit | Change Password" divider */ .account .block-title-actions .action + .action { padding-inline-start: 0; padding-left: 0; border-inline-start: 0; border-left: 0; } .account .block-title-actions .action + .action:before { content: ''; display: inline-block; width: 1px; height: 16px; margin-inline-end: 8px; background: #C3C1CB; vertical-align: middle; } .account .column.main .block.block-dashboard-info .box-content, .account .column.main .block.block-dashboard-newsletter .box-content { margin: 0 !important; padding: 0 !important; font-family: 'Outfit', sans-serif !important; color: #6C698B; font-size: 16px; font-style: normal; font-weight: 300; line-height: 22px; } .account .block-dashboard-info .box-content .gwl-info-name { color: #100F1B; font-size: 16px; font-weight: 400; line-height: 22px; } .account .block-dashboard-info .box-content .gwl-info-meta { color: #6C698B; font-size: 16px; font-weight: 300; line-height: 22px; } /* Figma Address: equal two-column row under title. Magento's clearfix ::before/::after on .block-content become extra grid/flex items and stagger Shipping/Billing — kill them here. */ .account .block-dashboard-addresses .block-content { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 24px !important; width: 100% !important; clear: both !important; } .account .block-dashboard-addresses .block-content::before, .account .block-dashboard-addresses .block-content::after { content: none !important; display: none !important; } .account .column.main .block-dashboard-addresses .block-content .box, .account .block-dashboard-addresses .box { display: block !important; flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; float: none !important; clear: none !important; margin: 0 !important; padding: 0 !important; } .account .column.main .block-dashboard-addresses .block-content .box:nth-child(1), .account .column.main .block-dashboard-addresses .block-content .box:nth-child(2) { float: none !important; clear: none !important; width: auto !important; } .account .block-dashboard-addresses .box-title { display: block !important; margin: 0 0 4px !important; } .account .block-dashboard-addresses .box-title span { font-family: 'Outfit', sans-serif !important; color: #6C698B; font-size: 14px; font-weight: 400; line-height: 20px; } .account .block-dashboard-addresses .box-content { margin-top: 0; font-family: 'Outfit', sans-serif !important; color: #100F1B; font-size: 14px; font-weight: 400; line-height: 20px; text-align: start; } .account .block-dashboard-addresses .box-content address { font-style: normal; font-family: inherit; color: inherit; line-height: inherit; } .account .block-dashboard-addresses .box-content address a, .account .block-dashboard-addresses .box-content address a[href^="tel:"] { color: #100F1B !important; text-decoration: none !important; } @media only screen and (max-width: 767px) { .account .block-dashboard-addresses .block-content { flex-direction: column !important; flex-wrap: wrap !important; gap: 16px !important; } } /* -------------------------------------------------------------------- Recent Orders table -------------------------------------------------------------------- */ .account .column.main .block.block-dashboard-orders .table-wrapper.orders-recent, .account .column.main .block.block-dashboard-orders .table-wrapper.reviews-recent, .account .block-dashboard-orders .table-wrapper.orders-recent, .account .block-dashboard-orders .table-wrapper.reviews-recent { overflow-x: auto; border-radius: 4px; } .account .column.main .block.block-dashboard-orders table.table-order-items.recent { table-layout: fixed; width: 100%; border-collapse: collapse; } .account .column.main .block.block-dashboard-orders table.table-order-items.recent thead th, .account .block-dashboard-orders table.table-order-items.recent thead th { text-align: right; font-family: 'Outfit', sans-serif !important; color: #6C698B; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; background: #F5F5F7; border-bottom: 1px solid #E7E6EC; padding: 10px 12px; } .account .column.main .block.block-dashboard-orders table.table-order-items.recent thead th:first-child, .account .block-dashboard-orders table.table-order-items.recent thead th:first-child { border-top-right-radius: 2px; border-top-left-radius: 0; } .account .column.main .block.block-dashboard-orders table.table-order-items.recent thead th:last-child, .account .block-dashboard-orders table.table-order-items.recent thead th:last-child { border-top-left-radius: 2px; border-top-right-radius: 0; } .account .column.main .block.block-dashboard-orders table.table-order-items.recent tbody tr { height: 48px; max-height: 48px; } .account .column.main .block.block-dashboard-orders table.table-order-items.recent tbody td, .account .block-dashboard-orders table.table-order-items.recent tbody td { height: 48px; max-height: 48px; box-sizing: border-box; border-top: 1px solid #E7E6EC; padding: 0 12px; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; vertical-align: middle; color: var(--Main-Secondary-Text, #58575F); } .account .column.main .block.block-dashboard-orders table.table-order-items.recent tbody td.col.date, .account .column.main .block.block-dashboard-orders table.table-order-items.recent tbody td.col.shipping, .account .block-dashboard-orders table.table-order-items.recent tbody td.col.date, .account .block-dashboard-orders table.table-order-items.recent tbody td.col.shipping { color: var(--Main-Text-Color, #100F1B) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account .column.main .block.block-dashboard-orders table.table-order-items.recent tbody td.col.shipping, .account .block-dashboard-orders table.table-order-items.recent tbody td.col.shipping { max-width: 0; } .account .column.main .block.block-dashboard-orders table.table-order-items.recent tbody td.col.total, .account .column.main .block.block-dashboard-orders table.table-order-items.recent tbody td.col.total .price, .account .block-dashboard-orders table.table-order-items.recent tbody td.col.total, .account .block-dashboard-orders table.table-order-items.recent tbody td.col.total .price { color: var(--Main-Secondary-Text, #58575F) !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; } .account .column.main .block.block-dashboard-orders table.table-order-items.recent .order-number-link, .account .block-dashboard-orders table.table-order-items.recent .order-number-link { color: #160B8B !important; text-decoration: underline; font-weight: 400; font-size: 14px; line-height: 20px; } .account .column.main .block.block-dashboard-orders table.table-order-items.recent .order-number-link:hover, .account .block-dashboard-orders table.table-order-items.recent .order-number-link:hover { text-decoration: underline; } .account .column.main .block.block-dashboard-orders table.table-order-items.recent .col.actions, .account .block-dashboard-orders table.table-order-items.recent .col.actions { text-align: left; white-space: nowrap; } .account .column.main .block.block-dashboard-orders table.table-order-items.recent .col.actions .action, .account .block-dashboard-orders table.table-order-items.recent .col.actions .action { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; color: #160B8B !important; text-decoration: underline; font-size: 14px; font-weight: 400; line-height: 20px; } .account .column.main .block.block-dashboard-orders table.table-order-items.recent .col.actions .action + .action, .account .block-dashboard-orders table.table-order-items.recent .col.actions .action + .action { margin-inline-start: 12px; margin-left: 0; } /* Status pills — Figma: 86x28, radius 4px, P4 Bold white */ .account .block-dashboard-orders .order-status-pill, .account .order-status-pill { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 86px; height: 28px; padding: 4px 12px; border-radius: 4px; font-family: 'Outfit', sans-serif !important; font-size: 14px; font-style: normal; font-weight: 500; line-height: 20px; color: #fff; white-space: nowrap; text-align: center; } .account .block-dashboard-orders .order-status-pill.status-success, .account .order-status-pill.status-success { background: #34A853; color: #fff; } .account .block-dashboard-orders .order-status-pill.status-danger, .account .order-status-pill.status-danger { background: #EA4335; color: #fff; } .account .block-dashboard-orders .order-status-pill.status-warning, .account .order-status-pill.status-warning { background: #F59E0B; color: #fff; } .account .block-dashboard-orders .order-status-pill.status-neutral, .account .order-status-pill.status-neutral { background: #8A94A6; color: #fff; } /* -------------------------------------------------------------------- Recent Orders — mobile card list (per product: image, name, price, status, date). Desktop keeps the existing data table unchanged; the two are mutually exclusive via the media queries below. -------------------------------------------------------------------- */ .account .gwl-recent-orders { display: none; } @media (max-width: 767px) { /* Figma mobile: Recent Orders is a section title + free-standing cards (not one outer bordered wrapper). */ .customer-account-index .block-dashboard-orders { background: transparent; border: 0; border-radius: 0; padding: 0; margin-bottom: 16px; box-shadow: none; } .customer-account-index .block-dashboard-orders .block-title.order { padding-bottom: 0 !important; margin-bottom: 0 !important; } .customer-account-index .block-dashboard-orders .block-title.order > a.action.view { display: none !important; } .account .block-dashboard-orders .table-wrapper.orders-recent, .account .block-order-history-card .table-wrapper.orders-history { display: none; } .account .gwl-recent-orders { display: block; } .account .gwl-recent-order { border: 1px solid #E7E6EC; border-radius: 8px; padding: 16px; background: #fff; } .account .gwl-recent-order + .gwl-recent-order { margin-top: 8px; } .account .gwl-recent-order__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; /* border-bottom: 1px solid var(--gwl-account-border); */ } .account .gwl-recent-order__id { font-family: 'Outfit', sans-serif !important; font-size: 13px; color: #100F1B; } .account .gwl-recent-order__id .order-number-link { color: #160B8B !important; text-decoration: underline !important; font-weight: 400; } .account .gwl-recent-order__reorder, .account .gwl-recent-order__reorder span { font-family: 'Outfit', sans-serif !important; color: #160B8B !important; font-size: 13px; font-weight: 400; text-decoration: underline !important; white-space: nowrap; } .account .gwl-recent-order__item + .gwl-recent-order__item { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gwl-account-border); } .account .gwl-recent-order__row { display: flex; align-items: flex-start; gap: 12px; } .account .gwl-recent-order__image { flex: 0 0 auto; width: 102px; height: 102px; border-radius: 4px; overflow: hidden; background: var(--gwl-account-surface); display: block; } .account .gwl-recent-order__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .account .gwl-recent-order__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .account .gwl-recent-order__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; } .account .gwl-recent-order__name { flex: 1 1 auto; min-width: 0; font-family: 'Outfit', sans-serif !important; font-size: 14px; font-weight: 500; color: #100F1B !important; line-height: 20px; } .account .gwl-recent-order__price, .account .gwl-recent-order__price .price, .account .gwl-recent-order__price .price-wrapper { font-family: 'Outfit', sans-serif !important; color: #100F1B !important; } .account .gwl-recent-order__price { font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; flex: 0 0 auto; } .account .gwl-recent-order__price .price { font-size: 14px !important; font-weight: 500 !important; } .account .gwl-recent-order__info .order-status-pill { align-self: flex-start; width: auto; min-width: 86px; height: auto; min-height: 28px; padding: 4px 12px; } .account .gwl-recent-order__info .order-status-pill.status-success { background: #E6F4EA; color: #137333; } .account .gwl-recent-order__info .order-status-pill.status-danger { background: #FCEAE8; color: #C5221F; } .account .gwl-recent-order__info .order-status-pill.status-warning { background: #FEF3E2; color: #B45309; } .account .gwl-recent-order__info .order-status-pill.status-neutral { background: #F0F1F3; color: #58575F; } .account .gwl-recent-order__date { display: block; width: 100%; text-align: start; font-family: 'Outfit', sans-serif !important; font-size: 12px; font-weight: 400; line-height: 16px; color: #100F1B !important; } /* My Orders mobile — Figma 2133:27271: free-standing cards, no outer shell */ .sales-order-history .gwl-order-history-shell .block-order-history-card { background: transparent; border: 0; border-radius: 0; padding: 0; margin-bottom: 0; box-shadow: none; } .sales-order-history .gwl-order-history-shell .toolbar-amount { flex: 1 1 100% !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 500 !important; line-height: 20px !important; color: #100F1B !important; margin: 0 0 16px !important; } .sales-order-history .gwl-order-history-shell .limiter { display: none !important; } .sales-order-history .gwl-recent-order__id { color: #100F1B; font-weight: 400; } /* Argento parent .orders-history-wrapper adds padding-top: 44px for its legacy absolute toolbar — drops an extra gap between title and list. */ .sales-order-history .orders-history-wrapper { padding-top: 0 !important; position: static !important; } .sales-order-history .orders-history-wrapper .toolbar { position: static !important; } .sales-order-history .orders-history-wrapper .toolbar .toolbar-amount, .sales-order-history .orders-history-wrapper .toolbar .limiter { position: static !important; top: auto !important; } body.sales-order-history.account .page-main { padding-top: 0 !important; position: static !important; } body.sales-order-history.account .columns { padding-top: 0 !important; margin-top: 0 !important; } body.sales-order-history.account .columns.top, body.sales-order-history.account .columns.top .page-title-wrapper { margin-top: 0 !important; padding-top: 0 !important; } body.sales-order-history.account .sidebar-main { display: none !important; } body.sales-order-history.account .sidebar-main .block-collapsible-nav, body.sales-order-history.account .sidebar-main .account-nav { position: static !important; margin: 0 !important; padding: 0 !important; } .sales-order-history .page-title-wrapper { margin-bottom: 16px !important; } body.sales-order-history.account .breadcrumbs { margin-bottom: 8px !important; } } /* -------------------------------------------------------------------- My Orders History Page Styling (Arabic RTL) -------------------------------------------------------------------- */ .sales-order-history .breadcrumbs { margin-bottom: 30px !important; } .sales-order-history .page-title-wrapper { margin-bottom: 24px !important; } /* Argento sales_order_history.xml wraps content in .orders-history-wrapper with padding-top (@indent__xl = 44px mobile) for legacy toolbar layout. */ .sales-order-history .orders-history-wrapper { padding-top: 0 !important; position: static !important; } .sales-order-history .orders-history-wrapper .toolbar { position: static !important; } .sales-order-history .orders-history-wrapper .toolbar .toolbar-amount, .sales-order-history .orders-history-wrapper .toolbar .limiter { position: static !important; top: auto !important; } .sales-order-history .page-title-wrapper .page-title, .sales-order-history .page-title-wrapper .page-title .base, .sales-order-history .page-title-wrapper .page-title span, .sales-order-history .page-title-wrapper h1.page-title { font-family: 'Outfit', sans-serif !important; font-size: 32px !important; font-style: normal !important; font-weight: 300 !important; line-height: 40px !important; letter-spacing: -1px !important; color: #0A053D !important; margin: 0 0 8px !important; text-transform: none !important; } .sales-order-history .page-title-wrapper:after { content: "ستوضع جميع طلباتك هنا"; display: block; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-style: normal !important; font-weight: 300 !important; line-height: 20px !important; color: #6C698B !important; margin-top: 0 !important; } /* Mobile: page title is in columns.top — hide the duplicate sidebar nav heading. */ @media (max-width: 768px) { body.sales-order-history.account .block-collapsible-nav .title, body.sales-order-history.account .account-nav .title, body.sales-order-history.account .sidebar-main .block-collapsible-nav .title, body.sales-order-history.account .sidebar-main .account-nav .title { display: none !important; } body.sales-order-history.account .page-main .page-title-wrapper .page-title { display: block !important; } } .sales-order-history .block-order-history-card { background: #fff; border: 1px solid #E7E6EC; border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: none; } .sales-order-history .block-order-history-card .table-wrapper.orders-history { margin: 0 !important; overflow-x: auto; border-radius: 8px; } .sales-order-history .block-order-history-card table.table-order-items.history { width: 100%; border-collapse: collapse; } .sales-order-history .block-order-history-card table.table-order-items.history thead th { text-align: right; font-family: 'Outfit', sans-serif !important; color: #6C698B; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; background: #F5F5F7; border-bottom: 1px solid #E7E6EC; padding: 10px 12px; vertical-align: middle; } .sales-order-history .block-order-history-card table.table-order-items.history tbody td { border-top: 1px solid #E7E6EC; padding: 10px 12px; font-family: 'Outfit', sans-serif !important; font-size: 14px; color: #6C698B; font-weight: 400; vertical-align: middle; } .sales-order-history .block-order-history-card table.table-order-items.history tbody td.col.date { color: #100F1B !important; } .sales-order-history .block-order-history-card table.table-order-items.history tbody tr:last-child td { border-bottom: none; } .sales-order-history .block-order-history-card table.table-order-items.history tbody td.col.total, .sales-order-history .block-order-history-card table.table-order-items.history tbody td.col.total .price { color: #58575F; font-weight: 400; } .sales-order-history .block-order-history-card table.table-order-items.history tbody td.id a.order-id-link, .sales-order-history .block-order-history-card table.table-order-items.history tbody td.id a.order-number-link { color: #160B8B !important; font-weight: 400; text-decoration: underline !important; } .sales-order-history .block-order-history-card table.table-order-items.history tbody td.id a.order-id-link:hover, .sales-order-history .block-order-history-card table.table-order-items.history tbody td.id a.order-number-link:hover { color: #160B8B !important; text-decoration: underline !important; } .sales-order-history .block-order-history-card table.table-order-items.history tbody td.col.actions { text-align: left; white-space: nowrap; } .sales-order-history .block-order-history-card table.table-order-items.history tbody td.col.actions a.action.order-reorder, .sales-order-history .block-order-history-card table.table-order-items.history tbody td.col.actions a.action.order-track, .sales-order-history .block-order-history-card table.table-order-items.history tbody td.actions a.action.order-reorder, .sales-order-history .block-order-history-card table.table-order-items.history tbody td.actions a.action.order-track { font-family: 'Outfit', sans-serif !important; color: #160B8B !important; font-weight: 400 !important; font-size: 14px; line-height: 20px; text-decoration: underline !important; margin-inline-start: 12px; margin-inline-end: 0; display: inline-block; } .sales-order-history .block-order-history-card table.table-order-items.history tbody td.col.actions a.action.order-reorder span, .sales-order-history .block-order-history-card table.table-order-items.history tbody td.col.actions a.action.order-track span, .sales-order-history .block-order-history-card table.table-order-items.history tbody td.actions a.action.order-reorder span, .sales-order-history .block-order-history-card table.table-order-items.history tbody td.actions a.action.order-track span { color: #160B8B !important; font-weight: 400 !important; } .sales-order-history .block-order-history-card table.table-order-items.history tbody td.col.actions a.action.order-reorder:hover, .sales-order-history .block-order-history-card table.table-order-items.history tbody td.col.actions a.action.order-track:hover, .sales-order-history .block-order-history-card table.table-order-items.history tbody td.actions a.action.order-reorder:hover, .sales-order-history .block-order-history-card table.table-order-items.history tbody td.actions a.action.order-track:hover, .sales-order-history .block-order-history-card table.table-order-items.history tbody td.col.actions a.action.order-reorder:visited, .sales-order-history .block-order-history-card table.table-order-items.history tbody td.col.actions a.action.order-track:visited { color: #160B8B !important; opacity: 0.85; } /* Shared order-history card shell (Reviews etc.) */ .block-order-history-card { background: #fff; border: 1px solid var(--gwl-account-border); border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); } .block-order-history-card .table-wrapper.orders-history { margin: 0 !important; overflow-x: auto; } .block-order-history-card table.table-order-items.history { width: 100%; border-collapse: collapse; } .block-order-history-card table.table-order-items.history thead th { text-align: right; color: var(--gwl-account-muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--gwl-account-surface); border-bottom: 1px solid var(--gwl-account-border); padding: 12px 16px; } .block-order-history-card table.table-order-items.history tbody td { border-bottom: 1px solid var(--gwl-account-border); padding: 16px; font-size: 14px; color: var(--gwl-account-text); vertical-align: middle; } .block-order-history-card table.table-order-items.history tbody tr:last-child td { border-bottom: none; } .block-order-history-card table.table-order-items.history tbody td.id a.order-id-link { color: var(--gwl-account-blue) !important; font-weight: 600; text-decoration: underline !important; } .block-order-history-card table.table-order-items.history tbody td.actions a.action.order-reorder, .block-order-history-card table.table-order-items.history tbody td.actions a.action.order-track { color: #160B8B !important; font-weight: 400; text-decoration: underline !important; margin-inline-start: 12px; margin-inline-end: 0; display: inline-block; } .block-order-history-card table.table-order-items.history tbody td.actions a.action.order-reorder:hover, .block-order-history-card table.table-order-items.history tbody td.actions a.action.order-track:hover { color: #160B8B !important; } /* ========================================================================== GWL Account Pagination — PLP-match restyle (My Orders) Brings this pagination in line with the PLP bottom pager (see saudiceramics.css "GWL PLP Product Listing Changes — bottom pagination (Figma)"): 36x36 bordered squares, solid black square for the active page, "Showing N Per Page" limiter pinned to the left. Colors are hardcoded to match the PLP source literally (#100f1b/#d9d9d9/#ffffff), not tokenized, for 1:1 parity with that block. Not RTL-mirrored — the PLP reference itself uses the same literal padding/background-position in the AR stylesheet as in EN, so this replicates it verbatim. ========================================================================== */ /* Scoped to .sales-order-history (the body class on this page) — not just .block-order-history-card, which My Product Reviews' card also carries (a shared base class between the two templates). Without this scope, these rules leak into Reviews' own top/bottom-split toolbar layout and scramble it. */ .sales-order-history .gwl-order-history-shell { display: flex; flex-flow: row wrap; width: 100%; box-sizing: border-box; } /* pager.phtml wraps everything (.toolbar-amount/.pages/.limiter) in its own
    when getUseContainer() is true (the default) — that div, not its children, was the actual flex item here, so .pages/.limiter stacked as normal block children inside it instead of sharing this row. display:contents removes the wrapper from the box model so its children become direct flex items of the shell, honoring the order rules below. */ .sales-order-history .gwl-order-history-shell .order-products-toolbar, .sales-order-history .gwl-order-history-shell .order-products-toolbar .pager { display: contents; } /* Parent theme absolutely-positions .toolbar-amount/.limiter near the page title by default — cancel that so they take their normal place here. */ .sales-order-history .gwl-order-history-shell .toolbar-amount, .sales-order-history .gwl-order-history-shell .limiter { position: static !important; float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; } .sales-order-history .gwl-order-history-shell .toolbar-amount { order: -3; flex: 1 1 0%; min-width: 0; margin-block-end: 16px !important; text-align: start; font-family: 'Outfit', sans-serif !important; font-size: 16px; line-height: 20px; color: #100F1B; font-weight: 500; } .sales-order-history .gwl-order-history-shell .limiter { order: -2; flex: 0 0 auto; margin: 0 0 16px !important; display: flex !important; align-items: center; gap: 8px; } .sales-order-history .gwl-order-history-shell .limiter-label, .sales-order-history .gwl-order-history-shell .limiter-text { font-family: 'Outfit', sans-serif !important; font-size: 14px; font-weight: 400; line-height: 20px; color: #100F1B; } .sales-order-history .gwl-order-history-shell .limiter-options { appearance: none; min-width: 56px; height: 36px; padding: 6px 28px 6px 12px; border: 1px solid #E7E6EC; border-radius: 4px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23100F1B' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 10px 6px; font-family: 'Outfit', sans-serif !important; font-size: 14px; font-weight: 500; color: #100F1B; box-shadow: none !important; cursor: pointer; } .sales-order-history .gwl-order-history-shell .block-order-history-card { order: 0; flex: 1 1 100%; width: 100%; box-sizing: border-box; } /* The parent theme absolutely-positions .pages at this breakpoint (for its own default, non-flex pagination layout) — that takes it out of flow entirely and its containing block becomes the card, not this toolbar row, so it renders overflowing off the right edge of the card. Cancel it so .pages is a normal flex item again, on its own full-width row below the table. */ .sales-order-history .gwl-order-history-shell .pages { display: block; order: 1; flex: 1 1 100%; position: static !important; width: 100% !important; max-width: 100% !important; margin: 16px 0 0 !important; } .sales-order-history .gwl-order-history-shell .pages .pages-label { display: none !important; } /* My Orders pagination — pager lives in .gwl-order-history-shell, not inside .block-order-history-card, so scope all Figma pager rules to the shell. */ .sales-order-history .gwl-order-history-shell .pages-items { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; width: 100%; gap: 6px; list-style: none; padding: 0; margin: 0; } .sales-order-history .gwl-order-history-shell .pages-items li.item { display: inline-flex !important; margin: 0 !important; padding: 0 !important; float: none !important; position: static !important; } .sales-order-history .gwl-order-history-shell .pages-items a.page, .sales-order-history .gwl-order-history-shell .pages-items strong.page, .sales-order-history .gwl-order-history-shell .pages-items a.action { display: inline-flex !important; align-items: center; justify-content: center; min-width: 32px; width: 32px; height: 32px; padding: 0; border: 1px solid #CECDD8; border-radius: 4px; background-color: #ffffff; box-shadow: none; font-family: 'Outfit', sans-serif !important; font-size: 14px; font-weight: 500; line-height: 20px; color: #100F1B; text-decoration: none; box-sizing: border-box; transition: border-color 0.2s ease, color 0.2s ease; } .sales-order-history .gwl-order-history-shell .pages-items a.page:hover, .sales-order-history .gwl-order-history-shell .pages-items a.action:hover { border-color: #100F1B; color: #100F1B; } .sales-order-history .gwl-order-history-shell .pages-items li.current strong.page { background: #100F1B !important; border-color: #100F1B !important; color: #ffffff !important; font-weight: 500 !important; } /* Figma: « … » icon buttons (action.first/last only — not numbered page links) */ .sales-order-history .gwl-order-history-shell .pages-items a.action.first, .sales-order-history .gwl-order-history-shell .pages-items a.action.last { min-width: 32px; width: 32px; height: 32px; padding: 0; font-size: 0 !important; line-height: 0 !important; color: transparent !important; background-color: #ffffff !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 14px 12px !important; } .sales-order-history .gwl-order-history-shell .pages-items a.action.first { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M6.5 2 2.5 6l4 4M11.5 2 7.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .sales-order-history .gwl-order-history-shell .pages-items a.action.last { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M2.5 2 6.5 6l-4 4M7.5 2 11.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* Figma My Orders: no single-chevron Previous — only « first */ .sales-order-history .gwl-order-history-shell .pages-item-previous { display: none !important; } /* Next — visible text + trailing chevron (RTL: chevron on inline-start) */ .sales-order-history .gwl-order-history-shell .pages-items a.action.next, .sales-order-history .gwl-order-history-shell .pages-items a.link.next, .sales-order-history .gwl-order-history-shell .pages-items .gwl-plp-pager__next { width: auto !important; min-width: 0 !important; height: 32px !important; padding: 0 12px 0 30px !important; font-size: 14px !important; line-height: 20px !important; font-weight: 500 !important; font-style: normal !important; color: #100F1B !important; background-color: #ffffff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M7.5 2 3.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: left 12px center !important; background-size: 12px 12px !important; } .sales-order-history .gwl-order-history-shell .pages-items .gwl-plp-pager__next-label { display: inline !important; position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; border: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; font-style: normal !important; line-height: 20px !important; color: #100F1B !important; visibility: visible !important; opacity: 1 !important; } .sales-order-history .gwl-order-history-shell .pages-items a.page .label, .sales-order-history .gwl-order-history-shell .pages-items a.action .label { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; border: 0 !important; } .sales-order-history .gwl-order-history-shell .pages-items a.action.first::before, .sales-order-history .gwl-order-history-shell .pages-items a.action.first::after, .sales-order-history .gwl-order-history-shell .pages-items a.action.last::before, .sales-order-history .gwl-order-history-shell .pages-items a.action.last::after, .sales-order-history .gwl-order-history-shell .pages-items a.action.next::before, .sales-order-history .gwl-order-history-shell .pages-items a.action.next::after { content: none !important; display: none !important; } .block-order-history-card .order-products-toolbar .pages-items { display: flex; flex-wrap: wrap; justify-content: flex-end; width: 100%; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; } .block-order-history-card .order-products-toolbar .pages-items li.item { margin: 0 !important; } .block-order-history-card .order-products-toolbar .pages-items a.page, .block-order-history-card .order-products-toolbar .pages-items strong.page, .block-order-history-card .order-products-toolbar .pages-items a.action { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #E7E6EC; border-radius: 4px; background-color: #ffffff; font-family: 'Outfit', sans-serif !important; font-size: 14px; font-weight: 500; line-height: 20px; color: #100F1B; text-decoration: none; transition: all 0.2s ease; } .block-order-history-card .order-products-toolbar .pages-items a.page:hover, .block-order-history-card .order-products-toolbar .pages-items a.action:hover { border-color: #160B8B; color: #160B8B; } .block-order-history-card .order-products-toolbar .pages-items li.current strong.page { background: #100f1b !important; border-color: #100f1b !important; color: #ffffff !important; font-weight: 600; } /* First/Last — icon-only squares (double chevron). Only action.first/.last — numbered page links also carry .page.first/.last and must keep visible text. */ .block-order-history-card .order-products-toolbar .pages-items a.action.first, .block-order-history-card .order-products-toolbar .pages-items a.action.last { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; } .block-order-history-card .order-products-toolbar .pages-items a.action.first { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M6.5 2 2.5 6l4 4M11.5 2 7.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .block-order-history-card .order-products-toolbar .pages-items a.action.last { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M2.5 2 6.5 6l-4 4M7.5 2 11.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Previous — icon-only square (single chevron) */ .block-order-history-card .order-products-toolbar .pages-items a.action.previous { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M7.5 2 3.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Next — keeps visible text + trailing chevron */ .block-order-history-card .order-products-toolbar .pages-items a.action.next { width: auto; min-width: 0; padding: 0 34px 0 14px; background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2 8.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; } .block-order-history-card .order-products-toolbar .pages-items a.action.next span:not(.label) { display: inline !important; position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; margin: 0 !important; } .block-order-history-card .order-products-toolbar .pages-items .gwl-plp-pager__next-label { display: inline; font-style: normal; } /* -------------------------------------------------------------------- My Wishlist Page — Figma header, mobile spacing, typography -------------------------------------------------------------------- */ @media (max-width: 768px) { body.wishlist-index-index.account .page-main { padding-top: 0 !important; position: static !important; } body.wishlist-index-index.account .columns { padding-top: 0 !important; margin-top: 0 !important; } body.wishlist-index-index.account .columns.top, body.wishlist-index-index.account .columns.top .page-title-wrapper { margin-top: 0 !important; padding-top: 0 !important; } body.wishlist-index-index.account .sidebar-main { display: none !important; } body.wishlist-index-index.account .sidebar-main .block-collapsible-nav, body.wishlist-index-index.account .sidebar-main .account-nav { position: static !important; margin: 0 !important; padding: 0 !important; } .wishlist-index-index .page-title-wrapper { margin-bottom: 16px !important; } body.wishlist-index-index.account .breadcrumbs { margin-bottom: 8px !important; } body.wishlist-index-index.account .block-collapsible-nav .title, body.wishlist-index-index.account .account-nav .title, body.wishlist-index-index.account .sidebar-main .block-collapsible-nav .title, body.wishlist-index-index.account .sidebar-main .account-nav .title { display: none !important; } body.wishlist-index-index.account .page-main .page-title-wrapper .page-title { display: block !important; } /* Mobile Figma: count/limiter row hidden — pagination only below grid */ .wishlist-index-index .toolbar.wishlist-toolbar { display: none !important; } .wishlist-index-index .form-wishlist-items ~ .toolbar.wishlist-toolbar { display: flex !important; justify-content: center !important; border-top: 0 !important; padding-top: 8px !important; margin-top: 16px !important; } .wishlist-index-index .form-wishlist-items ~ .toolbar.wishlist-toolbar .pages-items { justify-content: center !important; } .wishlist-index-index .gwl-wl-media { height: auto; aspect-ratio: 305 / 323; } } .wishlist-index-index .breadcrumbs { margin-bottom: 30px !important; } .wishlist-index-index .page-title-wrapper { margin-bottom: 24px !important; } .wishlist-index-index .page-title-wrapper .page-title, .wishlist-index-index .page-title-wrapper .page-title .base, .wishlist-index-index .page-title-wrapper .page-title span, .wishlist-index-index .page-title-wrapper h1.page-title { font-family: 'Outfit', sans-serif !important; font-size: 32px !important; font-style: normal !important; font-weight: 300 !important; line-height: 40px !important; letter-spacing: -1px !important; color: #0A053D !important; margin: 0 0 8px !important; text-transform: none !important; } .wishlist-index-index .page-title-wrapper .account-page-subtitle { font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 300 !important; line-height: 20px !important; color: #6C698B !important; opacity: 1 !important; margin: 0 !important; } /* ========================================================================== GWL Wishlist — Figma card grid (wishlist_index_index) Uses CSS logical properties (inline-start/end) so the identical rules serve both the LTR and RTL themes. ========================================================================== */ .wishlist-index-index .form-wishlist-items > .actions-toolbar { display: none !important; } /* view.phtml prints the pager above and below the grid — matching the split used on every other account list page, the top instance shows the item count + "Show N per page" limiter (its own row above the grid); the bottom instance shows only the page numbers (its own row below the grid). Base rules here cover the top instance; the more specific sibling-combinator selector further down (".form-wishlist-items ~ ...") overrides them for the bottom instance. */ .wishlist-index-index .toolbar.wishlist-toolbar .pages { display: none !important; } .wishlist-index-index .products-grid.wishlist .product-items { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 10px; list-style: none !important; padding: 0 !important; margin: 0 !important; } .wishlist-index-index .products-grid.wishlist li.product-item { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; height: 100%; } /* Cards in the same row have uneven content above the comment field (title wraps to 1–3 lines, dims line is optional, old-price is optional) — stretch each card to the grid row's full height and pin the comment + qty/cart block to the bottom so it always lines up across a row regardless of what's above it. */ .wishlist-index-index .products-grid.wishlist .product-item-info { position: relative; width: auto !important; height: 100%; display: flex; flex-direction: column; } /* Flatten the inner wrapper so comment + qty/cart are direct flex children */ .wishlist-index-index .products-grid.wishlist .product-item-inner { display: contents; } .wishlist-index-index .products-grid.wishlist .product-item-tooltip { display: none !important; } .wishlist-index-index .products-grid.wishlist .comment-box { margin-top: auto !important; margin-bottom: 0 !important; } .wishlist-index-index .products-grid.wishlist .comment-box .field, .wishlist-index-index .products-grid.wishlist .comment-box .control { margin: 0 !important; padding: 0 !important; } /* media block: photo + badges + remove X — Figma 305×323 */ .wishlist-index-index .gwl-wl-media { position: relative; width: 100%; max-width: 305px; height: 323px; border-radius: 8px; overflow: hidden; background: #f5f5f6; aspect-ratio: 305 / 323; } .wishlist-index-index .gwl-wl-media .prolabels-wrapper { display: block; width: 100%; height: 100%; } /* Swissup ProLabels injects NEW / discount badges via JS on the product photo (same as PLP). Wishlist uses .gwl-wl-badges for Figma pills only — hide ProLabels here or they stack on top-left/right over our badges + X. */ .wishlist-index-index .gwl-wl-media .prolabels-wrapper > .prolabel, .wishlist-index-index .gwl-wl-media .prolabels-wrapper .prolabel, .wishlist-index-index .gwl-wl-media .prolabel, .wishlist-index-index .gwl-wl-media .prolabels, .wishlist-index-index .gwl-wl-media [data-role="prolabels"], .wishlist-index-index .products-grid.wishlist .prolabel { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .wishlist-index-index .gwl-wl-media .product-item-photo { display: block !important; float: none !important; margin: 0 !important; padding: 0 !important; width: 100%; height: 100%; } /* Stock Luma mobile CSS caps .product-image-container at max-width:80px on the wishlist grid — override so the Figma card photo fills the tile. */ .wishlist-index-index .gwl-wl-media .product-image-container, .wishlist-index-index .gwl-wl-media .product-image-wrapper { display: block; width: 100% !important; max-width: none !important; height: 100% !important; } .wishlist-index-index .gwl-wl-media img.product-image-photo { display: block; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; } .wishlist-index-index .gwl-wl-badges { position: absolute; top: 30px; inset-inline-start: 10px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; max-width: calc(100% - 46px); z-index: 3; pointer-events: none; } .wishlist-index-index .gwl-wl-badge { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 4px 10px; border-radius: 4px; font-family: 'Outfit', sans-serif !important; font-size: 14px; font-style: normal; font-weight: 500; line-height: 20px; color: #fff; white-space: nowrap; } .wishlist-index-index .gwl-wl-badge--new { background: #34A853; border: 1px solid #34A853; color: #fff; } .wishlist-index-index .gwl-wl-badge--off { background: #E8E8FF; color: #100F1B; border: 0; } .wishlist-index-index .gwl-wl-badge--stock { background: #606A72; color: #FFF; } .wishlist-index-index .gwl-wl-remove { position: absolute; top: 30px; inset-inline-end: 10px; width: 26px; height: 26px; border-radius: 50%; background: #fff !important; color: #100F1B !important; display: flex; align-items: center; justify-content: center; text-decoration: none !important; box-shadow: 0 1px 4px rgba(16, 15, 27, 0.12); z-index: 4; } .wishlist-index-index .gwl-wl-remove:hover { background: #fff !important; } .wishlist-index-index .gwl-wl-remove svg { stroke: #100F1B; } /* title row: name + pencil */ .wishlist-index-index .gwl-wl-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 16px; } .wishlist-index-index .gwl-wl-title-row .product-item-name { margin: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 20px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.25px; } .wishlist-index-index .gwl-wl-title-row .product-item-link { color: #100F1B !important; text-decoration: none !important; } .wishlist-index-index .gwl-wl-title-row .product-item-link:hover { text-decoration: underline !important; } .wishlist-index-index .gwl-wl-edit { flex: 0 0 16px; display: inline-flex; align-items: flex-start; justify-content: center; width: 16px; height: 16px; margin-top: 4px; padding: 0; color: #100F1B !important; line-height: 1; text-decoration: none !important; } .wishlist-index-index .gwl-wl-edit svg { display: block; width: 16px; height: 16px; flex: 0 0 16px; } .wishlist-index-index .gwl-wl-dims { margin: 4px 0 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 18px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.25px; color: rgba(16, 15, 27, 0.70); } /* price — Figma: 850.00 SAR active + 1,610.00 SAR struck side by side */ .wishlist-index-index .products-grid.wishlist .price-box { float: none !important; clear: both; width: 100%; text-align: start; } .wishlist-index-index .products-grid.wishlist .price-box, .wishlist-index-index .products-grid.wishlist .price-box .price-as-configured { margin: 12px 0 16px !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: baseline; gap: 8px; text-transform: none; } /* Hide legacy SAR glyph spans — price.phtml outputs plain "38.30 SAR" text */ .wishlist-index-index .products-grid.wishlist .price-box .symbol, .wishlist-index-index .products-grid.wishlist .price-box .new-symbol { display: none !important; float: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; } .wishlist-index-index .products-grid.wishlist .price-box .price-as-configured { margin: 0 !important; } .wishlist-index-index .products-grid.wishlist .price-box .price-label { display: none !important; } .wishlist-index-index .products-grid.wishlist .price-box .special-price, .wishlist-index-index .products-grid.wishlist .price-box .old-price, .wishlist-index-index .products-grid.wishlist .price-box .regular-price, .wishlist-index-index .products-grid.wishlist .price-box > .minimal-price, .wishlist-index-index .products-grid.wishlist .price-box > .price-container { display: inline-flex !important; align-items: baseline; margin: 0 !important; float: none !important; } .wishlist-index-index .products-grid.wishlist .price-box .special-price { order: 1; } .wishlist-index-index .products-grid.wishlist .price-box .old-price { order: 2; text-decoration: line-through; } .wishlist-index-index .products-grid.wishlist .price-box .price-container, .wishlist-index-index .products-grid.wishlist .price-box .price-wrapper { display: inline !important; float: none !important; font-size: inherit !important; } /* Active price — override Argento #2F2E7E / weight 600 */ .wishlist-index-index .products-grid.wishlist .price-box [data-price-type="finalPrice"] .price, .wishlist-index-index .products-grid.wishlist .price-box .special-price .price, .wishlist-index-index .products-grid.wishlist .price-box .special-price .symbol, .wishlist-index-index .products-grid.wishlist .price-box .special-price .new-symbol, .wishlist-index-index .products-grid.wishlist .price-box > .regular-price .price, .wishlist-index-index .products-grid.wishlist .price-box > .regular-price .symbol, .wishlist-index-index .products-grid.wishlist .price-box > .price-container .price, .wishlist-index-index .products-grid.wishlist .price-box > .price-container .symbol, .wishlist-index-index .products-grid.wishlist .price-box .price-as-configured .special-price .price, .wishlist-index-index .products-grid.wishlist .price-box .price-as-configured .special-price .symbol { font-family: 'Outfit', sans-serif !important; font-size: 18px !important; font-style: normal; font-weight: 500 !important; line-height: 18px !important; color: #100F1B !important; text-transform: none; text-decoration: none !important; } /* Figma currency — amount then SAR (see price.phtml) */ .wishlist-index-index .products-grid.wishlist .price-box .price, .wishlist-index-index .products-grid.wishlist .price-box .gwl-wl-price-sar { font-family: 'Outfit', sans-serif !important; float: none !important; display: inline !important; font-variant-ligatures: none; white-space: nowrap; } /* Strikethrough / old price */ .wishlist-index-index .products-grid.wishlist .price-box .old-price, .wishlist-index-index .products-grid.wishlist .price-box .old-price .price, .wishlist-index-index .products-grid.wishlist .price-box .old-price .symbol, .wishlist-index-index .products-grid.wishlist .price-box .old-price .new-symbol, .wishlist-index-index .products-grid.wishlist .price-box .price-as-configured .old-price .price, .wishlist-index-index .products-grid.wishlist .price-box .price-as-configured .old-price .symbol { font-family: 'Outfit', sans-serif !important; font-size: 18px !important; font-style: normal; font-weight: 300 !important; line-height: 18px !important; color: #58575F !important; text-decoration-line: line-through; text-transform: none; } /* comment */ .wishlist-index-index .comment-box .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .wishlist-index-index .products-grid.wishlist textarea.product-item-comment, .wishlist-index-index .products-grid.wishlist .product-item-comment, .wishlist-index-index textarea.product-item-comment { width: 100%; height: 42px !important; min-height: 42px !important; margin: 0 0 12px !important; padding: 12px !important; background: #F5F5F7; border: 1px solid #E7E6EC; border-radius: 4px; font-family: 'Outfit', sans-serif !important; font-size: 14px; font-style: normal; font-weight: 400; line-height: 18px; color: #100F1B; resize: none; overflow: hidden; box-sizing: border-box; display: block; } .wishlist-index-index textarea.product-item-comment::placeholder { color: rgba(16, 15, 27, 0.50); } /* qty stepper + add to cart */ /* Stock Luma mobile CSS (styles-m.css, max-width:768px) floats .box-tocart and hides .field.qty on the wishlist grid — override both so the Figma card's stepper + button row renders full-width on mobile. */ .wishlist-index-index .box-tocart { float: none !important; margin: 0 !important; width: 100% !important; } .wishlist-index-index .gwl-wl-qty { display: block !important; flex: 0 0 auto !important; } /* .gwl-wl-tocart-row is a
    , and the base theme's .fieldset{display:table} was winning over this (no !important), so the qty stepper and Add to Cart button rendered as separate table rows stacked on top of each other instead of side by side. */ .wishlist-index-index .gwl-wl-tocart-row { display: flex !important; align-items: stretch; gap: 10px; margin: 10px 0 0 !important; padding: 0 !important; border: 0 !important; min-inline-size: auto; } .wishlist-index-index .gwl-wl-qty { margin: 0 !important; } .wishlist-index-index .gwl-wl-qty > .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .wishlist-index-index .gwl-wl-stepper { display: flex; align-items: stretch; height: 40px; border: 1px solid #E7E6EC; border-radius: 4px; overflow: hidden; background: #fff; } .wishlist-index-index .gwl-wl-stepper .gwl-qty-btn:first-of-type { border-inline-end: 1px solid #E7E6EC; } .wishlist-index-index .gwl-wl-stepper input.qty { width: 34px; height: auto !important; border: 0 !important; border-inline-end: 1px solid #E7E6EC !important; background: #fff !important; text-align: center; font-family: 'Outfit', sans-serif !important; font-size: 14px; font-weight: 400; line-height: 20px; padding: 0 !important; -moz-appearance: textfield; appearance: textfield; } .wishlist-index-index .gwl-qty-btn { width: 30px; border: 0 !important; border-radius: 0 !important; background: #fff !important; color: #100F1B !important; font-family: 'Outfit', sans-serif !important; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } .wishlist-index-index .gwl-qty-btn:disabled { color: #A19FA8 !important; cursor: not-allowed; background: #fff !important; } .wishlist-index-index .gwl-wl-stepper input.qty::-webkit-outer-spin-button, .wishlist-index-index .gwl-wl-stepper input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .wishlist-index-index .gwl-wl-stepper input.qty:disabled { color: #A19FA8; cursor: not-allowed; background: #fff !important; } .wishlist-index-index .gwl-wl-tocart-row .product-item-actions { flex: 1; margin: 0 !important; display: flex; } .wishlist-index-index .gwl-wl-tocart-row .actions-primary { display: flex; flex: 1; } .wishlist-index-index .gwl-wl-tocart-row button.action.tocart.primary { flex: 1; height: 40px; background: #160B8B !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; font-family: 'Outfit', sans-serif !important; font-size: 14px; font-style: normal; font-weight: 500; line-height: 20px; padding: 0 10px !important; box-shadow: none !important; cursor: pointer; } .wishlist-index-index .gwl-wl-tocart-row button.action.tocart.primary:hover:not(:disabled) { background: #221796 !important; } .wishlist-index-index .gwl-wl-tocart-row button.action.tocart.primary:disabled { background: #CECDD8 !important; color: #fff !important; cursor: not-allowed; opacity: 1 !important; } /* Out-of-stock card — Figma: badge on image, enabled comment, muted stepper + gray Add to Cart */ .wishlist-index-index .gwl-wl-item--oos .gwl-wl-media .product-item-photo, .wishlist-index-index .gwl-wl-item--oos .gwl-wl-media img.product-image-photo { opacity: 0.55; } .wishlist-index-index .gwl-wl-item--oos .gwl-wl-stepper { border-color: #E7E6EC; background: #fff; } .wishlist-index-index .gwl-wl-item--oos .gwl-wl-stepper .gwl-qty-btn:first-of-type, .wishlist-index-index .gwl-wl-item--oos .gwl-wl-stepper input.qty { border-color: #E7E6EC !important; } .wishlist-index-index .gwl-wl-item--oos .gwl-qty-btn:disabled, .wishlist-index-index .gwl-wl-item--oos .gwl-wl-stepper input.qty:disabled { color: #A19FA8 !important; } .wishlist-index-index .gwl-wl-item--oos .gwl-wl-tocart-row button.action.tocart.primary:disabled { background: #CECDD8 !important; color: #fff !important; } /* ========================================================================== GWL Account Pagination — PLP-match restyle (Wishlist) Same spec as My Orders above — see that block's comment for the full rationale. The limiter was previously force-hidden; it is now shown, as its own row above the grid (see the top/bottom split comment further up). ========================================================================== */ .wishlist-index-index .toolbar.wishlist-toolbar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; gap: 16px 24px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #E7E6EC; } /* Belt-and-suspenders alongside justify-content:space-between above: let .toolbar-amount grow to consume all the row's spare width (the same technique My Orders/Address Book use) so the count text hugs the true left edge of the row and pushes the limiter flush right, even if this row's own box ever ends up short of the grid's full width for any reason. */ .wishlist-index-index .toolbar.wishlist-toolbar .toolbar-amount { flex: 1 1 auto; min-width: 0; } .wishlist-index-index .toolbar.wishlist-toolbar .limiter { flex: 0 0 auto; } .wishlist-index-index .form-wishlist-items ~ .toolbar.wishlist-toolbar { justify-content: center; margin-top: 35px; margin-bottom: 0; padding-bottom: 0; padding-top: 16px; border-bottom: 0; /* border-top: 1px solid #E7E6EC; */ } .wishlist-index-index .form-wishlist-items ~ .toolbar.wishlist-toolbar .pages { display: block !important; } .wishlist-index-index .form-wishlist-items ~ .toolbar.wishlist-toolbar .pages-items { justify-content: center !important; } .wishlist-index-index .form-wishlist-items ~ .toolbar.wishlist-toolbar .toolbar-amount, .wishlist-index-index .form-wishlist-items ~ .toolbar.wishlist-toolbar .limiter { display: none !important; } /* pager.phtml wraps everything in its own
    — see the matching comment on My Orders above for the full rationale. */ .wishlist-index-index .toolbar.wishlist-toolbar .pager { display: contents; } .wishlist-index-index .toolbar.wishlist-toolbar .toolbar-amount { font-family: 'Outfit', sans-serif !important; font-size: 16px; font-weight: 500; line-height: 20px; color: #100F1B; } .wishlist-index-index .toolbar.wishlist-toolbar .limiter { display: flex !important; align-items: center; gap: 8px; float: none !important; margin: 0 !important; } .wishlist-index-index .toolbar.wishlist-toolbar .limiter-label, .wishlist-index-index .toolbar.wishlist-toolbar .limiter-text { font-family: 'Outfit', sans-serif !important; font-size: 13px; font-weight: 500; color: #100f1b; } .wishlist-index-index .toolbar.wishlist-toolbar .limiter-options { appearance: none; min-width: 56px; height: 36px; padding: 6px 28px 6px 12px; border: 1px solid #CECDD8; border-radius: 4px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23100f1b' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 10px 6px; font-family: 'Outfit', sans-serif !important; font-size: 13px; font-weight: 600; color: #100f1b; box-shadow: none !important; cursor: pointer; } .wishlist-index-index .toolbar.wishlist-toolbar .pages { display: block; position: static !important; flex: 1 1 auto; min-width: 0; margin: 0; float: none !important; } .wishlist-index-index .toolbar.wishlist-toolbar .pages .pages-label { display: none !important; } .wishlist-index-index .toolbar.wishlist-toolbar .pages-items { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; width: 100%; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .wishlist-index-index .toolbar.wishlist-toolbar .pages-items li.item { display: inline-flex !important; margin: 0 !important; padding: 0 !important; float: none !important; position: static !important; } .wishlist-index-index .toolbar.wishlist-toolbar .pages a.page, .wishlist-index-index .toolbar.wishlist-toolbar .pages strong.page, .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action { display: inline-flex !important; align-items: center; justify-content: center; min-width: 32px; width: 32px; height: 32px; padding: 0; border: 1px solid #CECDD8; border-radius: 4px; background-color: #ffffff; box-shadow: none; font-family: 'Outfit', sans-serif !important; font-size: 14px; font-weight: 500; line-height: 20px; color: #100F1B !important; text-decoration: none !important; box-sizing: border-box; transition: border-color 0.2s ease, color 0.2s ease; } .wishlist-index-index .toolbar.wishlist-toolbar .pages li.current strong.page { background: #100F1B !important; border-color: #100F1B !important; color: #ffffff !important; font-weight: 500 !important; } .wishlist-index-index .toolbar.wishlist-toolbar .pages a.page:hover, .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action:hover { border-color: #100F1B; color: #100F1B !important; } /* Figma: « … » icon buttons (action.first/last only — not numbered page links) */ .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action.first, .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action.last { min-width: 32px; width: 32px; height: 32px; padding: 0; font-size: 0 !important; line-height: 0 !important; color: transparent !important; background-color: #ffffff !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 14px 12px !important; } .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action.first { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M6.5 2 2.5 6l4 4M11.5 2 7.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action.last { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M2.5 2 6.5 6l-4 4M7.5 2 11.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* Figma: no single-chevron Previous — only « first */ .wishlist-index-index .toolbar.wishlist-toolbar .pages-item-previous { display: none !important; } /* Next — visible text + trailing chevron */ .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action.next, .wishlist-index-index .toolbar.wishlist-toolbar .pages a.link.next, .wishlist-index-index .toolbar.wishlist-toolbar .pages .gwl-plp-pager__next { width: auto !important; min-width: 0 !important; height: 32px !important; padding: 0 30px 0 12px !important; font-size: 14px !important; line-height: 20px !important; font-weight: 500 !important; font-style: normal !important; color: #100F1B !important; background-color: #ffffff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2 8.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 12px 12px !important; } .wishlist-index-index .toolbar.wishlist-toolbar .pages .gwl-plp-pager__next-label { display: inline !important; position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; border: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; font-style: normal !important; line-height: 20px !important; color: #100F1B !important; visibility: visible !important; opacity: 1 !important; } .wishlist-index-index .toolbar.wishlist-toolbar .pages a.page .label, .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action .label { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; border: 0 !important; } .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action.first::before, .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action.first::after, .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action.last::before, .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action.last::after, .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action.next::before, .wishlist-index-index .toolbar.wishlist-toolbar .pages a.action.next::after { content: none !important; display: none !important; } @media only screen and (max-width: 1023px) { .wishlist-index-index .products-grid.wishlist .product-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Figma mobile 2-col: qty stepper fills row, square cart-icon button */ .wishlist-index-index .gwl-wl-media { max-width: none; height: auto; aspect-ratio: 305 / 323; } .wishlist-index-index .gwl-wl-badges { top: 10px; inset-inline-start: 8px; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px; max-width: calc(100% - 40px); } .wishlist-index-index .gwl-wl-badge { font-size: 12px; line-height: 16px; padding: 3px 8px; } .wishlist-index-index .gwl-wl-remove { top: 10px; inset-inline-end: 8px; } .wishlist-index-index .gwl-wl-tocart-row { gap: 8px; } .wishlist-index-index .gwl-wl-tocart-row .gwl-wl-qty { flex: 1 1 auto !important; min-width: 0; } .wishlist-index-index .gwl-wl-stepper { width: 100%; } .wishlist-index-index .gwl-wl-tocart-row .product-item-actions, .wishlist-index-index .gwl-wl-tocart-row .actions-primary { flex: 0 0 auto; } .wishlist-index-index .gwl-wl-tocart-row button.action.tocart.primary { flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; } .wishlist-index-index .gwl-wl-tocart-row button.action.tocart.primary span { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; margin: -1px !important; padding: 0 !important; border: 0 !important; } .wishlist-index-index .gwl-wl-tocart-row .gwl-wl-cart-icon { display: block !important; } .wishlist-index-index .products-grid.wishlist .price-box, .wishlist-index-index .products-grid.wishlist .price-box .price-as-configured { flex-wrap: nowrap; gap: 6px; } /* Figma mobile card text — title 16, dims 12, price 14 */ .wishlist-index-index .gwl-wl-title-row .product-item-name { font-size: 16px; line-height: 20px; } .wishlist-index-index .gwl-wl-dims { font-size: 12px; line-height: 16px; } .wishlist-index-index .products-grid.wishlist .price-box [data-price-type="finalPrice"] .price, .wishlist-index-index .products-grid.wishlist .price-box .special-price .price, .wishlist-index-index .products-grid.wishlist .price-box .special-price .symbol, .wishlist-index-index .products-grid.wishlist .price-box .special-price .new-symbol, .wishlist-index-index .products-grid.wishlist .price-box > .regular-price .price, .wishlist-index-index .products-grid.wishlist .price-box > .regular-price .symbol, .wishlist-index-index .products-grid.wishlist .price-box > .price-container .price, .wishlist-index-index .products-grid.wishlist .price-box > .price-container .symbol, .wishlist-index-index .products-grid.wishlist .price-box .price-as-configured .special-price .price, .wishlist-index-index .products-grid.wishlist .price-box .price-as-configured .special-price .symbol, .wishlist-index-index .products-grid.wishlist .price-box .gwl-wl-price-sar, .wishlist-index-index .products-grid.wishlist .price-box .old-price, .wishlist-index-index .products-grid.wishlist .price-box .old-price .price, .wishlist-index-index .products-grid.wishlist .price-box .old-price .symbol, .wishlist-index-index .products-grid.wishlist .price-box .old-price .new-symbol, .wishlist-index-index .products-grid.wishlist .price-box .price-as-configured .old-price .price, .wishlist-index-index .products-grid.wishlist .price-box .price-as-configured .old-price .symbol { font-size: 14px !important; line-height: 14px !important; } } .wishlist-index-index .gwl-wl-tocart-row .gwl-wl-cart-icon { display: none; } @media only screen and (max-width: 639px) { .wishlist-index-index .products-grid.wishlist .product-items { gap: 20px 12px; } } /* ========================================================================== GWL Address Book — Figma "Address File" (customer_address_index) Desktop: single default card (2 cols) + data table for additional addresses. Mobile: stacked default cards + address cards. Outfit typography. ========================================================================== */ /* Desktop / mobile layout toggles */ .customer-address-index .gwl-addr-default--mobile, .customer-address-index .gwl-addr-cards--mobile, .customer-address-index .gwl-addr-extra-title--mobile { display: none !important; } .customer-address-index .gwl-addr-default--desktop, .customer-address-index .gwl-addr-table-wrap--desktop, .customer-address-index .gwl-addr-extra-title--desktop { display: block; } /* Page header — match Wishlist / My Orders */ .customer-address-index .breadcrumbs { margin-bottom: 30px !important; } .customer-address-index .page-title-wrapper { margin-bottom: 24px !important; } .customer-address-index .page-title-wrapper .page-title, .customer-address-index .page-title-wrapper .page-title .base, .customer-address-index .page-title-wrapper .page-title span, .customer-address-index .page-title-wrapper h1.page-title { font-family: 'Outfit', sans-serif !important; font-size: 32px !important; font-weight: 300 !important; line-height: 40px !important; letter-spacing: -0.25px; color: #0A053D !important; } .customer-address-index .page-title-wrapper .account-page-subtitle { font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 24px !important; color: #6C698B !important; opacity: 1 !important; } .customer-address-index .column.main > .actions-toolbar { display: none !important; } /* ---- Default addresses ---- */ .customer-address-index .gwl-addr-default { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; margin-bottom: 16px !important; } /* Desktop: one bordered card, two columns */ .customer-address-index .gwl-addr-default-card { background: #fff; border: 1px solid var(--Main-Secondary-Shades-Secondary-Shade-200, #E7E6EC); border-radius: 8px; padding: 24px; } .customer-address-index .gwl-addr-default-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .customer-address-index .gwl-addr-default-card__title { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 18px !important; font-style: normal; font-weight: 500 !important; line-height: 24px !important; color: var(--Main-Text-Color, #100F1B) !important; } .customer-address-index .gwl-addr-default-card__head .action.edit, .customer-address-index .gwl-addr-default .box-title-row .action.edit { flex: 0 0 auto; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 400 !important; line-height: 20px !important; color: var(--Main-Button-Primary, #160B8B) !important; text-decoration-line: underline !important; } .customer-address-index .gwl-addr-default-card__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .customer-address-index .gwl-addr-default-col__label { display: block; margin-bottom: 8px; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 300 !important; line-height: 22px !important; color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important; } .customer-address-index .gwl-addr-default--mobile .box-title-row .box-title span { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 500 !important; line-height: 20px !important; color: var(--Main-Text-Color, #100F1B) !important; } .customer-address-index .gwl-addr-default-col__content, .customer-address-index .gwl-addr-default .box-content { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 400 !important; line-height: 22px !important; color: var(--Main-Text-Color, #100F1B) !important; } .customer-address-index .gwl-addr-default-col__content address, .customer-address-index .gwl-addr-default .box-content address { font-style: normal; margin: 0; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; } .customer-address-index .gwl-addr-default address a[href^="tel:"], .customer-address-index .gwl-addr-default-col__content address a[href^="tel:"] { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 400 !important; line-height: 22px !important; color: var(--color-red-46, #EB001B) !important; text-decoration: none !important; } /* Mobile: separate bordered cards */ .customer-address-index .gwl-addr-default--mobile .box { background: #fff; border: 1px solid var(--Main-Secondary-Shades-Secondary-Shade-200, #E7E6EC); border-radius: 8px; padding: 16px !important; margin: 0 0 12px !important; box-shadow: none !important; flex: none !important; min-width: 0 !important; } .customer-address-index .gwl-addr-default--mobile .box:last-child { margin-bottom: 0 !important; } .customer-address-index .gwl-addr-default--mobile .box-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .customer-address-index .gwl-addr-default--mobile .box-title-row .box-title { margin: 0; } /* ---- Additional addresses section — outer bordered panel ---- */ .account .gwl-address-extra { background: #fff !important; border: 1px solid var(--Main-Secondary-Shades-Secondary-Shade-200, #E7E6EC) !important; border-radius: 8px !important; padding: 24px !important; margin: 0 0 12px !important; box-shadow: none !important; box-sizing: border-box; } .account .gwl-address-extra .block-title { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 0 !important; padding: 0 0 20px !important; margin: 0 !important; } .account .gwl-address-extra .block-title strong { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 18px !important; font-style: normal; font-weight: 500 !important; line-height: 24px !important; color: var(--Main-Text-Color, #100F1B) !important; } .account .gwl-address-extra .block-title .action.add { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 400 !important; line-height: 20px !important; color: var(--Main-Button-Primary, #160B8B) !important; text-decoration-line: underline !important; white-space: nowrap; } .account .gwl-address-extra .gwl-addr-empty { margin: 4px 0 0; font-family: 'Outfit', sans-serif; font-size: 14px; color: #6C698B; } /* Desktop table — inside outer panel, no double border */ .account .gwl-address-extra .gwl-addr-table-wrap { overflow-x: auto; border: 0; border-radius: 0; background: transparent; } .account .gwl-address-extra table.table-additional-addresses-items { width: 100%; border-collapse: collapse; margin: 0; table-layout: fixed; } .account .gwl-address-extra table.table-additional-addresses-items .table-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .account .gwl-address-extra table.table-additional-addresses-items thead th { text-align: start; font-family: 'Outfit', sans-serif !important; font-size: 12px !important; font-weight: 500 !important; line-height: 16px !important; letter-spacing: 0.04em; text-transform: uppercase; color: #6C698B !important; background: #F5F5F7; border-bottom: 1px solid #E7E6EC; padding: 12px 16px; white-space: nowrap; } .account .gwl-address-extra table.table-additional-addresses-items tbody td { border-top: 1px solid #E7E6EC; height: 48px; max-height: 48px; padding: 0 16px; box-sizing: border-box; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 400 !important; line-height: 20px !important; vertical-align: middle; } /* P4 Medium — primary columns */ .account .gwl-address-extra table.table-additional-addresses-items tbody td.col.firstname, .account .gwl-address-extra table.table-additional-addresses-items tbody td.col.lastname, .account .gwl-address-extra table.table-additional-addresses-items tbody td.col.streetaddress { color: var(--Main-Text-Color, #100F1B) !important; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account .gwl-address-extra table.table-additional-addresses-items tbody td.col.streetaddress { max-width: 220px; } /* P4 Medium — secondary columns */ .account .gwl-address-extra table.table-additional-addresses-items tbody td.col.city, .account .gwl-address-extra table.table-additional-addresses-items tbody td.col.state, .account .gwl-address-extra table.table-additional-addresses-items tbody td.col.phone { color: var(--Main-Secondary-Text, #58575F) !important; } .account .gwl-address-extra tbody tr:first-child td { border-top: 0; } .account .gwl-address-extra .gwl-truncate { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account .gwl-address-extra .col.actions { white-space: nowrap; text-align: end; width: 72px; } .account .gwl-address-extra .gwl-addr-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--Main-Button-Primary, #160B8B) !important; text-decoration: none !important; padding: 0; vertical-align: middle; } .account .gwl-address-extra .gwl-addr-action svg { display: block; width: 20px; height: 20px; } .account .gwl-address-extra .gwl-addr-action + .gwl-addr-action { margin-inline-start: 8px; } /* Mobile address cards */ .customer-address-index .gwl-addr-cards { list-style: none !important; margin: 0 !important; padding: 0 !important; } .customer-address-index .gwl-addr-card { border: 1px solid var(--Main-Secondary-Shades-Secondary-Shade-200, #E7E6EC); border-radius: 8px; padding: 16px; margin: 0 0 12px !important; background: #fff; } .customer-address-index .gwl-addr-card:last-child { margin-bottom: 0 !important; } .customer-address-index .gwl-addr-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .customer-address-index .gwl-addr-card__name { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 500 !important; line-height: 20px !important; color: var(--Main-Text-Color, #100F1B) !important; } .customer-address-index .gwl-addr-card__actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0; } .customer-address-index .gwl-addr-card__actions .gwl-addr-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: var(--Main-Button-Primary, #160B8B) !important; text-decoration: none !important; } .customer-address-index .gwl-addr-card__actions .gwl-addr-action svg { display: block; width: 20px; height: 20px; } .customer-address-index .gwl-addr-card__actions .gwl-addr-action + .gwl-addr-action { margin-inline-start: 8px; padding-inline-start: 8px; border-inline-start: 1px solid #C3C1CB; } .customer-address-index .gwl-addr-card__lines { margin: 8px 0 0 !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 300 !important; line-height: 20px !important; color: var(--Main-Text-Color, #100F1B) !important; } .customer-address-index .gwl-addr-card__phone { margin: 8px 0 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 400 !important; line-height: 20px !important; color: var(--Main-Text-Color, #100F1B) !important; } /* Pagination — flex reorder + My Orders Figma spec */ .account .gwl-address-extra .block-content { display: flex; flex-flow: row wrap; } .account .gwl-address-extra .customer-addresses-toolbar, .account .gwl-address-extra .customer-addresses-toolbar .pager { display: contents; } .account .gwl-address-extra .toolbar-amount, .account .gwl-address-extra .limiter { position: static !important; float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; } .account .gwl-address-extra .toolbar-amount { order: -3; flex: 1 1 0%; min-width: 0; margin-block-end: 16px !important; text-align: start; font-family: 'Outfit', sans-serif !important; font-size: 14px; color: #6C698B; } .account .gwl-address-extra .limiter { order: -2; flex: 0 0 auto; margin: 0 0 16px !important; display: flex !important; align-items: center; gap: 8px; } .account .gwl-address-extra .limiter-label, .account .gwl-address-extra .limiter-text { font-family: 'Outfit', sans-serif !important; font-size: 14px; font-weight: 400; color: #100F1B; } .account .gwl-address-extra .limiter-options { appearance: none; min-width: 56px; height: 36px; padding: 6px 28px 6px 12px; border: 1px solid #E7E6EC; border-radius: 4px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23100f1b' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 10px 6px; font-family: 'Outfit', sans-serif !important; font-size: 14px; font-weight: 500; color: #100F1B; box-shadow: none !important; cursor: pointer; } .account .gwl-address-extra .gwl-addr-table-wrap, .account .gwl-address-extra .gwl-addr-cards { order: -1; flex: 1 1 100%; } .account .gwl-address-extra .pages { display: block; order: 1; flex: 1 1 100%; position: static !important; width: 100% !important; max-width: 100% !important; margin: 16px 0 0 !important; float: none !important; clear: both !important; } .account .gwl-address-extra .pages .pages-label { display: none !important; } .account .gwl-address-extra .customer-addresses-toolbar .pages-items { display: inline-flex !important; flex-wrap: wrap; justify-content: flex-end; align-items: center !important; width: 100%; gap: 6px; list-style: none; padding: 0; margin: 0; } .account .gwl-address-extra .customer-addresses-toolbar .pages-items li.item, .account .gwl-address-extra .customer-addresses-toolbar .pages-items li.pages-item-next, .account .gwl-address-extra .customer-addresses-toolbar .pages-items li.pages-item-last, .account .gwl-address-extra .customer-addresses-toolbar .pages-items li.pages-item-first, .account .gwl-address-extra .customer-addresses-toolbar .pages-items li.pages-item-previous, .account .gwl-address-extra .customer-addresses-toolbar .pages-items li.current { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; float: none !important; position: static !important; vertical-align: middle !important; } .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.page, .account .gwl-address-extra .customer-addresses-toolbar .pages-items strong.page, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 32px; width: 32px; height: 32px !important; padding: 0 !important; border: 1px solid #CECDD8; border-radius: 4px; background-color: #ffffff !important; box-shadow: none !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; color: #100F1B !important; text-decoration: none !important; box-sizing: border-box !important; float: none !important; vertical-align: middle !important; } .account .gwl-address-extra .customer-addresses-toolbar .pages-items li.current strong.page { background: #100F1B !important; border-color: #100F1B !important; color: #ffffff !important; font-weight: 500 !important; } /* « » icon-only squares */ .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.first, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.last, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.page.first, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.page.last { min-width: 32px !important; width: 32px !important; height: 32px !important; padding: 0 !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; background-color: #ffffff !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 14px 12px !important; } .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.first, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.page.first { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M6.5 2 2.5 6l4 4M11.5 2 7.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.last, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.page.last { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M2.5 2 6.5 6l-4 4M7.5 2 11.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.previous, .account .gwl-address-extra .customer-addresses-toolbar .pages-item-previous { display: none !important; } /* Next — text + chevron, same 32px row height */ .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.next, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.link.next, .account .gwl-address-extra .customer-addresses-toolbar .pages-items .gwl-plp-pager__next { width: auto !important; min-width: 0 !important; height: 32px !important; padding: 0 30px 0 12px !important; font-size: 14px !important; line-height: 20px !important; font-weight: 500 !important; font-style: normal !important; color: #100F1B !important; background-color: #ffffff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2 8.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 12px 12px !important; } .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.next span:not(.label), .account .gwl-address-extra .customer-addresses-toolbar .pages-items .gwl-plp-pager__next-label { display: inline !important; position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; font-style: normal !important; line-height: 20px !important; color: #100F1B !important; visibility: visible !important; opacity: 1 !important; } .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.page .label, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action .label, .account .gwl-address-extra .customer-addresses-toolbar .pages-items strong.page .label { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; border: 0 !important; } .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.first::before, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.first::after, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.last::before, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.last::after, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.next::before, .account .gwl-address-extra .customer-addresses-toolbar .pages-items a.action.next::after { content: none !important; display: none !important; } @media (max-width: 768px) { body.customer-address-index.account .page-main { padding-top: 0 !important; position: static !important; } body.customer-address-index.account .columns { padding-top: 0 !important; margin-top: 0 !important; } body.customer-address-index.account .columns.top, body.customer-address-index.account .columns.top .page-title-wrapper { margin-top: 0 !important; padding-top: 0 !important; } body.customer-address-index.account .sidebar-main { display: none !important; } body.customer-address-index.account .block-collapsible-nav .title, body.customer-address-index.account .account-nav .title, body.customer-address-index.account .sidebar-main .block-collapsible-nav .title, body.customer-address-index.account .sidebar-main .account-nav .title { display: none !important; } .customer-address-index .page-title-wrapper { margin-bottom: 16px !important; } body.customer-address-index.account .breadcrumbs { margin-bottom: 8px !important; } body.customer-address-index.account .page-main .page-title-wrapper .page-title { display: block !important; font-size: 24px !important; line-height: 32px !important; } body.customer-address-index.account .page-title-wrapper .account-page-subtitle { font-size: 14px !important; line-height: 20px !important; } .customer-address-index .gwl-addr-default--desktop, .customer-address-index .gwl-addr-table-wrap--desktop, .customer-address-index .gwl-addr-extra-title--desktop { display: none !important; } .customer-address-index .gwl-addr-default--mobile, .customer-address-index .gwl-addr-cards--mobile, .customer-address-index .gwl-addr-extra-title--mobile { display: block !important; } .account .gwl-address-extra { border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: transparent !important; } .account .gwl-address-extra .block-title { padding-bottom: 16px !important; } .account .gwl-address-extra .block-title strong { font-size: 16px !important; font-weight: 500 !important; line-height: 20px !important; color: var(--Main-Text-Color, #100F1B) !important; } .customer-address-index .gwl-addr-default--mobile .box-content, .customer-address-index .gwl-addr-default--mobile .box-content address { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 400 !important; line-height: 20px !important; letter-spacing: -0.15px; color: var(--Main-Secondary-Text, #58575F) !important; } .customer-address-index .gwl-addr-default--mobile .box-content address a[href^="tel:"] { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 400 !important; line-height: 20px !important; color: var(--Main-Text-Color, #100F1B) !important; text-decoration: none !important; } .customer-address-index .gwl-addr-default--mobile .box-title-row .action.edit { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 400 !important; line-height: 20px !important; color: var(--Main-Button-Primary, #160B8B) !important; text-decoration-line: underline !important; } .account .gwl-address-extra .toolbar-amount, .account .gwl-address-extra .limiter { display: none !important; } .account .gwl-address-extra .customer-addresses-toolbar .pages-items { justify-content: center !important; } } /* ========================================================================== GWL Account Edit — Figma "Edit Account Information" (customer_account_edit) Typography, color, spacing, and dimensions only — stock templates and all fields/toggles/OTP behaviour stay untouched. Logical properties for LTR+RTL. Desktop: node 1816-9715 · Mobile: node 2029-57811 ========================================================================== */ /* Page header — match Address File / Wishlist / My Orders */ .customer-account-edit .breadcrumbs { margin-bottom: 30px !important; } .customer-account-edit .page-title-wrapper { margin-bottom: 24px !important; } .customer-account-edit .page-title-wrapper .page-title, .customer-account-edit .page-title-wrapper .page-title .base, .customer-account-edit .page-title-wrapper .page-title span, .customer-account-edit .page-title-wrapper h1.page-title { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 32px !important; font-style: normal; font-weight: 300 !important; line-height: 40px !important; letter-spacing: -0.25px; color: var(--Blue-blue-10, #0A053D) !important; } .customer-account-edit .page-title-wrapper .account-page-subtitle { margin: 8px 0 0 !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 400 !important; line-height: 24px !important; color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important; opacity: 1 !important; } .customer-account-edit .form-edit-account { width: 100% !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; } /* Card shells */ .customer-account-edit .form-edit-account .fieldset.info, .customer-account-edit .form-edit-account .fieldset.password, .customer-account-edit .form-edit-account .fieldset.create.account { box-sizing: border-box !important; width: 100% !important; float: none !important; margin: 0 0 16px !important; padding: 24px !important; background: var(--Sub-White, #FFF); border: 1px solid var(--Main-Secondary-Shades-Secondary-Shade-200, #E7E6EC) !important; border-radius: 8px; box-shadow: none !important; letter-spacing: normal; overflow: visible !important; } .customer-account-edit .form-edit-account .fieldset > .legend { float: inline-start !important; width: 100% !important; margin: 0 0 20px !important; padding: 0 !important; border: 0 !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 18px !important; font-style: normal; font-weight: 500 !important; line-height: 24px !important; color: var(--Main-Text-Color, #100F1B) !important; } .customer-account-edit .form-edit-account .fieldset > br { display: none; } .customer-account-edit .form-edit-account .fieldset.additional_info { background: none; border: 0 !important; box-shadow: none; padding: 0 !important; margin: 0 !important; width: 100% !important; float: none !important; } .customer-account-edit .form-edit-account .fieldset.additional_info:after, .customer-account-edit .form-edit-account .fieldset.info:after, .customer-account-edit .form-edit-account .fieldset.password:after, .customer-account-edit .form-edit-account .fieldset.create.account:after { content: none !important; display: none !important; } /* 2-column grids — field order unchanged (stock DOM) */ .customer-account-edit .form-edit-account .fieldset.info, .customer-account-edit .form-edit-account .fieldset.password { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } .customer-account-edit .form-edit-account .fieldset.info > .legend, .customer-account-edit .form-edit-account .fieldset.password > .legend { grid-column: 1 / -1; margin-bottom: 4px !important; } .customer-account-edit .fieldset.info > .field-name-firstname { order: 1; } .customer-account-edit .fieldset.info > .field-name-lastname { order: 2; } .customer-account-edit .fieldset.info > .field.choice:has(#change-password) { order: 3; } .customer-account-edit .fieldset.info > .field.choice:has(#change-email) { order: 4; } .customer-account-edit .fieldset.info > .field-customer_mobile { order: 5; } .customer-account-edit .fieldset.info > .field-vat_number, .customer-account-edit .fieldset.info > .field.taxvat { order: 6; } .customer-account-edit .fieldset.info > .field.choice:has(#assistance_allowed_checkbox) { order: 7; } /* Fields — Figma P4 / input tokens */ .customer-account-edit .form-edit-account .field { margin: 0 !important; } .customer-account-edit .form-edit-account .field > .label { display: block; float: none !important; width: auto !important; margin: 0 0 8px !important; padding: 0 !important; text-align: start !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 300 !important; line-height: 20px !important; color: var(--Blue-blue-10, #0A053D) !important; } .customer-account-edit .form-edit-account .field > .label > span { display: inline !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; color: inherit !important; } .customer-account-edit .form-edit-account .field.required > .label:after, .customer-account-edit .form-edit-account .field._required > .label:after { content: '*'; display: inline !important; color: #EB001B !important; margin-inline-start: 2px; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 300 !important; line-height: 20px !important; vertical-align: baseline; } .customer-account-edit .form-edit-account .field > .control { width: 100% !important; float: none !important; } .customer-account-edit .form-edit-account input.input-text, .customer-account-edit .form-edit-account select { height: 44px !important; min-height: 44px !important; width: 100%; box-sizing: border-box; background: var(--Sub-White, #FFF); border: 1px solid var(--Main-Secondary-Shades-Secondary-Shade-300, #CECDD8); border-radius: 4px; padding: 0 16px; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 300 !important; line-height: 20px !important; color: var(--Main-Text-Color, #100F1B) !important; } .customer-account-edit .form-edit-account input.input-text:focus, .customer-account-edit .form-edit-account select:focus { border-color: var(--Main-Button-Primary, #160B8B); box-shadow: none; outline: none; } /* Checkbox rows — custom-drawn for cross-browser alignment */ .customer-account-edit .form-edit-account .field.choice { display: flex !important; align-items: center !important; gap: 8px; padding-top: 4px; } .customer-account-edit .form-edit-account .field.choice input[type="checkbox"] { -webkit-appearance: none; appearance: none; box-sizing: border-box; flex-shrink: 0; position: relative !important; top: 0 !important; margin: 0 !important; padding: 0; width: 16px; height: 16px; border: 1px solid var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B); border-radius: 2px; background: var(--Sub-White, #FFF); background-repeat: no-repeat; background-position: center; background-size: 10px 10px; cursor: pointer; } .customer-account-edit .form-edit-account .field.choice input[type="checkbox"]::after { content: none !important; } .customer-account-edit .form-edit-account .field.choice input[type="checkbox"]:checked { background-color: var(--Main-Button-Primary, #160B8B); border-color: var(--Main-Button-Primary, #160B8B); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.2 4.3 6.5 11 2.8 7.3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .customer-account-edit .form-edit-account .field.choice .label, .customer-account-edit .form-edit-account .field.choice .label > span { display: inline-flex !important; align-items: center; flex: 1 1 auto; min-width: 0; min-height: 16px; margin: 0 !important; padding: 0 !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 300 !important; line-height: 20px !important; color: var(--Main-Secondary, #100F1B) !important; } /* Allow remote shopping assistance — Figma Questions help icon (#160B8B) */ .customer-account-edit .form-edit-account .field.choice:has(#assistance_allowed_checkbox) { overflow: visible !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px; } .customer-account-edit .form-edit-account .field.choice:has(#assistance_allowed_checkbox) .label, .customer-account-edit .form-edit-account .field.choice:has(#assistance_allowed_checkbox) .label > span { display: inline !important; flex: 0 1 auto !important; width: auto !important; white-space: normal; } .customer-account-edit .form-edit-account .field.choice:has(#assistance_allowed_checkbox) .field-tooltip.toggle { display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; position: relative !important; top: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; vertical-align: middle; z-index: 1; } .customer-account-edit .form-edit-account .field.choice:has(#assistance_allowed_checkbox) .field-tooltip.toggle._active { z-index: 200 !important; } .customer-account-edit .form-edit-account .field.choice:has(#assistance_allowed_checkbox) .field-tooltip.toggle #tooltip-label { border: 0 !important; clip: rect(0, 0, 0, 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .customer-account-edit .form-edit-account .field.choice:has(#assistance_allowed_checkbox) .field-tooltip-action.action-help { display: inline-block !important; width: 16px !important; height: 16px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; background-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%23160B8B%22%2F%3E%3C%2Fsvg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 16px 16px !important; cursor: pointer; flex-shrink: 0; line-height: 16px !important; font-size: 0 !important; overflow: visible !important; position: relative !important; z-index: 2; } .customer-account-edit .form-edit-account .field.choice:has(#assistance_allowed_checkbox) .field-tooltip-action.action-help:before, .customer-account-edit .form-edit-account .field.choice:has(#assistance_allowed_checkbox) .field-tooltip-action.action-help:after { content: none !important; display: none !important; } .customer-account-edit .form-edit-account .field.choice:has(#assistance_allowed_checkbox) .field-tooltip-content { display: none; position: absolute; z-index: 201 !important; background: var(--Sub-White, #FFF) !important; border: 1px solid var(--Main-Secondary-Shades-Secondary-Shade-200, #E7E6EC) !important; border-radius: 4px !important; padding: 12px !important; width: 270px !important; max-width: min(270px, calc(100vw - 32px)) !important; box-sizing: border-box !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: var(--Main-Text-Color, #100F1B) !important; text-transform: none !important; word-wrap: break-word; inset-inline-start: 38px; top: -9px; } .customer-account-edit .form-edit-account .field.choice:has(#assistance_allowed_checkbox) .field-tooltip-content:before, .customer-account-edit .form-edit-account .field.choice:has(#assistance_allowed_checkbox) .field-tooltip-content:after { content: none !important; display: none !important; } .customer-account-edit .form-edit-account .field.choice:has(#assistance_allowed_checkbox) .field-tooltip.toggle._active .field-tooltip-content, .customer-account-edit .form-edit-account .field.choice:has(#assistance_allowed_checkbox) .field-tooltip-action.action-help._active + .field-tooltip-content, .customer-account-edit .form-edit-account .field.choice:has(#assistance_allowed_checkbox) .field-tooltip.toggle:focus-within .field-tooltip-content { display: block !important; } @media (max-width: 768px) { .customer-account-edit .form-edit-account .field.choice:has(#assistance_allowed_checkbox) .field-tooltip-content { inset-inline-start: auto !important; inset-inline-end: -10px !important; top: 28px !important; } } /* Format hint — e.g. "98xxxxxx" (P5 Regular) */ .customer-account-edit .form-edit-account .profile-notice-phone, .customer-account-edit .form-edit-account .otp_generatenote, .customer-account-edit .fieldset.info .profile-notice-phone { display: block; margin-top: 6px; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 12px !important; font-style: normal; font-weight: 300 !important; line-height: 18px !important; color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important; } /* Additional Information — Figma last card (label + format row, Save in card) */ .customer-account-edit .form-edit-account .fieldset.additional_info { margin-bottom: 0 !important; } .customer-account-edit .form-edit-account .fieldset.create.account { display: block !important; width: 100% !important; margin-bottom: 0 !important; padding-bottom: 72px !important; position: relative; } .customer-account-edit .form-edit-account .fieldset.create.account > .legend { margin-bottom: 20px !important; } .customer-account-edit .fieldset.create.account .field.customer_mobile { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; row-gap: 8px; width: 50% !important; max-width: 50% !important; margin: 0 !important; } .customer-account-edit .fieldset.create.account .field.customer_mobile > .label { grid-column: 1; grid-row: 1; margin: 0 !important; align-self: end; } .customer-account-edit .fieldset.create.account .field.customer_mobile > .control { display: contents; } .customer-account-edit .fieldset.create.account .field.customer_mobile .profile-notice-phone { grid-column: 2; grid-row: 1; align-self: end; justify-self: end; margin: 0 !important; text-align: end; white-space: nowrap; } .customer-account-edit .fieldset.create.account .field.customer_mobile > .control > input[type="hidden"] { display: none !important; } .customer-account-edit .fieldset.create.account .field.customer_mobile > .control > .iti, .customer-account-edit .fieldset.create.account .field.customer_mobile > .control > input.input-text, .customer-account-edit .fieldset.create.account .field.customer_mobile #customer_mobile_attr { grid-column: 1 / -1; grid-row: 2; width: 100% !important; max-width: none !important; box-sizing: border-box; } .customer-account-edit .fieldset.create.account .field.customer_mobile > .control > .iti { display: block !important; } .customer-account-edit .fieldset.create.account .field.customer_mobile > .control > .iti input, .customer-account-edit .fieldset.create.account .field.customer_mobile > .control > .iti .input-text { width: 100% !important; box-sizing: border-box; } .customer-account-edit .fieldset.create.account .field.customer_mobile > .field { display: none !important; } .customer-account-edit .fieldset.create.account button.send_otp_edit { display: none !important; } /* Save — sits inside Additional Information card footer (Figma) */ .customer-account-edit .form-edit-account + .actions-toolbar, .customer-account-edit .form-edit-account .actions-toolbar { margin: -56px 0 24px !important; padding: 0 24px !important; display: flex; align-items: center; justify-content: flex-end; gap: 12px; position: relative; z-index: 1; box-sizing: border-box; } .customer-account-edit .actions-toolbar .primary { float: none !important; margin: 0 !important; } .customer-account-edit .actions-toolbar button.action.save.primary, .customer-account-edit .actions-toolbar button.action.save.primary span { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 500 !important; line-height: 20px !important; } .customer-account-edit .actions-toolbar button.action.save.primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 99px !important; min-width: 99px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; background: var(--Main-Primary, #160B8B) !important; border: 0 !important; border-radius: 4px !important; color: var(--Sub-White, #FFF) !important; box-shadow: none !important; cursor: pointer; } .customer-account-edit .actions-toolbar button.action.save.primary:hover { background: #221796 !important; } .customer-account-edit .actions-toolbar .secondary { display: none !important; } @media (max-width: 768px) { body.customer-account-edit.account .page-main { padding-top: 0 !important; position: static !important; } body.customer-account-edit.account .columns { padding-top: 0 !important; margin-top: 0 !important; } body.customer-account-edit.account .columns.top, body.customer-account-edit.account .columns.top .page-title-wrapper { margin-top: 0 !important; padding-top: 0 !important; } body.customer-account-edit.account .sidebar-main { display: none !important; } body.customer-account-edit.account .sidebar-main .block-collapsible-nav .title, body.customer-account-edit.account .sidebar-main .account-nav .title { display: none !important; } .customer-account-edit .page-title-wrapper { margin-bottom: 16px !important; } body.customer-account-edit.account .breadcrumbs { margin-bottom: 8px !important; } body.customer-account-edit.account .page-main .page-title-wrapper .page-title, body.customer-account-edit.account .page-title-wrapper h1.page-title { display: block !important; font-size: 24px !important; line-height: 32px !important; } body.customer-account-edit.account .page-title-wrapper .account-page-subtitle { font-size: 14px !important; line-height: 20px !important; } .customer-account-edit .form-edit-account .fieldset.info, .customer-account-edit .form-edit-account .fieldset.password, .customer-account-edit .form-edit-account .fieldset.create.account { padding: 16px !important; margin-bottom: 12px !important; } .customer-account-edit .form-edit-account .fieldset.create.account { padding: 16px 16px 64px !important; margin-bottom: 0 !important; } .customer-account-edit .fieldset.create.account .field.customer_mobile { width: 100% !important; max-width: none !important; } .customer-account-edit .form-edit-account .fieldset.info, .customer-account-edit .form-edit-account .fieldset.password { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .customer-account-edit .form-edit-account .fieldset.info > .field, .customer-account-edit .form-edit-account .fieldset.password > .field { min-width: 0; } .customer-account-edit .fieldset.info > .field.choice:has(#assistance_allowed_checkbox) { grid-column: 1 / -1; } /* Hide floating account nav "Go Back" — form uses inline Save / Go back row */ body.customer-account-edit.account .gwl-account-go-back { display: none !important; } .customer-account-edit .form-edit-account + .actions-toolbar, .customer-account-edit .form-edit-account .actions-toolbar { margin: -48px 0 16px !important; padding: 0 16px !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; flex-wrap: nowrap !important; gap: 12px !important; overflow: visible !important; } .customer-account-edit .actions-toolbar .secondary { display: block !important; float: none !important; margin: 0 !important; flex: 0 1 auto; min-width: 0; } .customer-account-edit .actions-toolbar .primary { flex: 0 0 auto; } .customer-account-edit .actions-toolbar .action.back { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; height: 40px !important; min-height: 40px !important; padding: 0 16px 0 12px !important; background: var(--Sub-White, #FFF) !important; border: 1px solid var(--Main-Button-Primary, #160B8B) !important; border-radius: 4px !important; color: var(--Main-Button-Primary, #160B8B) !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 400 !important; line-height: 20px !important; text-decoration: none !important; box-shadow: none !important; white-space: nowrap !important; box-sizing: border-box !important; } .customer-account-edit .actions-toolbar .action.back::before { content: ''; display: inline-block; width: 14px; height: 14px; flex: 0 0 auto; background-color: var(--Main-Button-Primary, #160B8B); -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='M10.7 2.3a1 1 0 0 1 0 1.4L6.4 8l4.3 4.3a1 1 0 1 1-1.4 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 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='M10.7 2.3a1 1 0 0 1 0 1.4L6.4 8l4.3 4.3a1 1 0 1 1-1.4 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 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; } html[dir="rtl"] .customer-account-edit .actions-toolbar .action.back { padding: 0 12px 0 16px !important; } html[dir="rtl"] .customer-account-edit .actions-toolbar .action.back::before { transform: scaleX(-1); } .customer-account-edit .actions-toolbar .action.back span { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; color: inherit !important; } } /* ========================================================================== GWL Address Edit/Add — Figma "My Account" design (customer_address_form) Pure CSS restyle of the Webkul map-address form: fieldsets become cards, the Address fieldset flows in a 2-column grid (Lat/Lng, City/Region, Zip/Country paired; Map + Street + VAT + messages/checkboxes full width). Logical properties for LTR + RTL. ========================================================================== */ .customer-address-form .form-address-edit { width: 100% !important; max-width: none !important; float: none !important; } .customer-address-form .form-address-edit .fieldset { width: 100% !important; float: none !important; margin: 0 0 12px !important; padding: 16px 20px !important; background: #fff; border: 1px solid var(--gwl-account-border) !important; border-radius: 2px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); letter-spacing: normal; } .customer-address-form .form-address-edit .fieldset > .legend { float: inline-start !important; width: 100% !important; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; font-family: 'Work Sans', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; color: var(--gwl-account-title) !important; } .customer-address-form .form-address-edit .fieldset > br { display: none; } .customer-address-form .form-address-edit .fieldset:after { margin-top: 10px; font-size: 12px; color: var(--gwl-account-muted); } /* 2-column grid for both fieldsets */ .customer-address-form .form-address-edit .fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; align-items: start; } .customer-address-form .form-address-edit .fieldset > .legend { grid-column: 1 / -1; } /* Fieldset ordering — the AR theme's own edit.phtml groups Lat/Lng/Map under "Contact Information" (not "Address") and adds a KSA "National Address" field, so the order values differ from the EN template's arrangement. */ .customer-address-form .field.street { order: 1; grid-column: 1 / -1; } .customer-address-form .field.national-address { order: 2; } .customer-address-form .field.taxvat { order: 3; } .customer-address-form .field.city { order: 4; } .customer-address-form .field.region { order: 5; } .customer-address-form .field.zip { order: 6; } .customer-address-form .field.country { order: 7; } .customer-address-form .fieldset .message.info { order: 8; grid-column: 1 / -1; } .customer-address-form .field.choice.set { order: 9; grid-column: 1 / -1; } .customer-address-form .field-name-firstname { order: 1; } .customer-address-form .field-name-lastname { order: 2; } .customer-address-form .field.company { order: 3; } .customer-address-form .field.telephone { order: 4; } .customer-address-form .field.fax { order: 5; } .customer-address-form .field.required:has(#latitude) { order: 6; } .customer-address-form .field.required:has(#longitude) { order: 7; } .customer-address-form .mapContainer { order: 8; grid-column: 1 / -1; } /* fields: label above input */ .customer-address-form .form-address-edit .field { margin: 0 !important; } .customer-address-form .form-address-edit .field > .label { display: block; float: none !important; width: auto !important; margin: 0 0 6px !important; padding: 0 !important; text-align: start !important; font-size: 13px; font-weight: 500; color: var(--gwl-account-text); } .customer-address-form .form-address-edit .field > .control { width: 100% !important; float: none !important; } .customer-address-form .form-address-edit input.input-text, .customer-address-form .form-address-edit select { height: 40px; width: 100%; background: #fff; border: 1px solid var(--gwl-account-border); border-radius: 4px; padding: 0 12px; font-size: 13px; color: var(--gwl-account-text); box-sizing: border-box; } .customer-address-form .form-address-edit input.input-text:focus, .customer-address-form .form-address-edit select:focus { border-color: var(--gwl-account-blue); box-shadow: none; } /* Lat/Lng + street: readonly, map-driven — muted look overrides the JS-injected inline style */ .customer-address-form .form-address-edit input.input-text[readonly] { background-color: #f2f4f7 !important; color: var(--gwl-account-muted) !important; cursor: not-allowed !important; } /* street: nested additional lines */ .customer-address-form .field.street .nested { margin-top: 10px; } .customer-address-form .field.street .field.additional { margin-top: 10px !important; } .customer-address-form .gwl-street-tooltip { margin-inline-start: 8px; } /* map */ .customer-address-form .mapContainer { margin-top: 0 !important; margin-bottom: 0 !important; height: 220px !important; border: 1px solid var(--gwl-account-border); border-radius: 4px; overflow: hidden; } /* region: select + plain-text fallback input share one cell */ .customer-address-form .field.region .control { display: flex; flex-direction: column; gap: 8px; } /* info messages ("It's a default billing/shipping address") */ .customer-address-form .fieldset .message.info { margin: 0 !important; padding: 10px 14px !important; background: #f2f4f7; border: 0; border-radius: 4px; font-size: 13px; color: var(--gwl-account-text); } .customer-address-form .fieldset .message.info:before { display: none; } /* default billing/shipping checkboxes */ .customer-address-form .field.choice.set { display: flex !important; align-items: center !important; gap: 8px; padding-top: 4px; margin: 0 !important; } .customer-address-form .field.choice.set input[type="checkbox"] { -webkit-appearance: none; appearance: none; box-sizing: border-box; flex-shrink: 0; position: relative !important; top: 0 !important; margin: 0 !important; padding: 0; width: 15px; height: 15px; border: 1.5px solid var(--gwl-account-border); border-radius: 3px; background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: 10px 10px; cursor: pointer; } /* suppress the base theme's own ::after checkmark (anchored via position:absolute on this element) — we paint our own checkmark via :checked background-image */ .customer-address-form .field.choice.set input[type="checkbox"]::after { content: none !important; } .customer-address-form .field.choice.set input[type="checkbox"]:checked { background-color: var(--gwl-account-blue); border-color: var(--gwl-account-blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.2 4.3 6.5 11 2.8 7.3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .customer-address-form .field.choice.set .label { display: inline-flex !important; align-items: center; min-height: 15px; margin: 0 !important; padding: 0 !important; font-size: 13px; line-height: normal; color: var(--gwl-account-text); } /* Save / Go back */ .customer-address-form .form-address-edit .actions-toolbar { float: none !important; width: 100%; margin: 0 0 24px !important; display: flex; justify-content: flex-end; } .customer-address-form .actions-toolbar .primary { float: none !important; margin: 0 !important; } .customer-address-form .actions-toolbar button.action.save.primary { height: 38px; padding: 0 26px !important; background: var(--gwl-account-blue) !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; font-size: 13px; font-weight: 600; box-shadow: none !important; cursor: pointer; } .customer-address-form .actions-toolbar button.action.save.primary:hover { background: #221796 !important; } .customer-address-form .actions-toolbar .secondary { display: none !important; } /* ========================================================================== GWL Layout Width Changes — Figma shared content shell Align header / breadcrumbs / page-main inner content to 1440px + 40px gutter. Footer chrome is full viewport; footer inner content stays on the same 1440 shell. ========================================================================== */ /* .sidebar-additional is float:left / clear:left in the base theme, which only clears past .sidebar-main (the account nav) — not past .column.main (float:right). On pages where the main column is taller than the nav (e.g. My Product Reviews / My Returns with several rows of data), the browser squeezes this block into whatever narrow gap is left beside the still-taller right float instead of dropping fully below it, wrapping "My Wish List" onto several lines. clear:both makes it drop below whichever column is taller, matching every other page. */ .account .sidebar-additional { clear: both !important; } /* Wishlist sidebar card must not appear on My Account pages */ .account .sidebar-additional .block.block-wishlist { display: none !important; } .account .sidebar-additional .block.block-wishlist .block-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; border-bottom: 0 !important; padding-bottom: 10px !important; margin-bottom: 14px !important; } .account .sidebar-additional .block.block-wishlist .block-title strong { font-family: 'Work Sans', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; color: var(--gwl-account-title) !important; white-space: nowrap; } .account .sidebar-additional .block.block-wishlist .gwl-wl-count { font-size: 13px; font-weight: 400; color: var(--gwl-account-muted); white-space: nowrap; } .account .sidebar-additional .block.block-wishlist .subtitle { display: none !important; } .account .sidebar-additional .block.block-wishlist .product-items { list-style: none !important; margin: 0 !important; padding: 0 !important; } .account .sidebar-additional .block.block-wishlist .product-item { margin: 0 0 16px !important; padding: 0 !important; } .account .sidebar-additional .block.block-wishlist .product-item:last-child { margin-bottom: 0 !important; } .account .sidebar-additional .block.block-wishlist .product-item-info { display: flex; align-items: flex-start; gap: 12px; } .account .sidebar-additional .block.block-wishlist .product-item-photo { flex: 0 0 auto; display: block; width: 56px; height: 56px; border-radius: 4px; overflow: hidden; background: #f5f5f6; } .account .sidebar-additional .block.block-wishlist .product-item-photo .product-image-container, .account .sidebar-additional .block.block-wishlist .product-item-photo .product-image-wrapper { width: 100% !important; height: 100% !important; } .account .sidebar-additional .block.block-wishlist .product-item-photo img.product-image-photo { width: 100%; height: 100%; object-fit: cover; } .account .sidebar-additional .block.block-wishlist .product-item-details { flex: 1; min-width: 0; } .account .sidebar-additional .block.block-wishlist .product-item-name { display: block; margin: 0 0 4px !important; font-size: 13px; line-height: 18px; font-weight: 500; } .account .sidebar-additional .block.block-wishlist .product-item-link { color: var(--gwl-account-title) !important; text-decoration: none !important; } .account .sidebar-additional .block.block-wishlist .product-item-link:hover { text-decoration: underline !important; } .account .sidebar-additional .block.block-wishlist .price-box { display: flex; align-items: baseline; gap: 6px; margin: 0 !important; } .account .sidebar-additional .block.block-wishlist .price-box .price { font-size: 13px; font-weight: 700; color: var(--gwl-account-text); } .account .sidebar-additional .block.block-wishlist .price-box .old-price .price { font-weight: 400; color: var(--gwl-account-muted); text-decoration: line-through; } /* Add to Cart / Remove aren't in the mockup card */ .account .sidebar-additional .block.block-wishlist .product-item-actions { display: none !important; } .account .sidebar-additional .block.block-wishlist .actions-toolbar { margin: 4px 0 0 !important; padding-top: 12px; border-top: 1px solid var(--gwl-account-border); } .account .sidebar-additional .block.block-wishlist .actions-toolbar .primary { float: none !important; margin: 0 !important; } .account .sidebar-additional .block.block-wishlist a.action.details { color: #F66560 !important; font-size: 13px; font-weight: 600; text-decoration: none !important; } .account .sidebar-additional .block.block-wishlist a.action.details:hover { text-decoration: underline !important; } .account .sidebar-additional .block.block-wishlist .empty { margin: 0; font-size: 13px; color: var(--gwl-account-muted); } /* ========================================================================== GWL Gift Card — Figma "Gift Voucher" page (magento_giftcardaccount_customer_index) ========================================================================== */ .magento_giftcardaccount-customer-index .gwl-giftcard { max-width: 100%; display: flex !important; flex-direction: column !important; gap: 32px !important; } .account.magento_giftcardaccount-customer-index .block-dashboard-info.gwl-giftcard .block-title { margin: 0 !important; padding: 0 !important; border-bottom: 0 !important; } .magento_giftcardaccount-customer-index .gwl-giftcard .block-title { border-bottom: 0 !important; padding: 0 !important; margin: 0 !important; } .magento_giftcardaccount-customer-index .gwl-giftcard .block-title strong { display: block; margin: 0 !important; padding: 0 !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 24px !important; font-style: normal; font-weight: 300 !important; line-height: 24px !important; letter-spacing: -0.56px !important; color: var(--Blue-blue-10, #0A053D) !important; } .magento_giftcardaccount-customer-index .gwl-giftcard .block-content, .magento_giftcardaccount-customer-index .gwl-giftcard .form-giftcard-redeem, .magento_giftcardaccount-customer-index .gwl-giftcard .fieldset { margin: 0 !important; padding: 0 !important; letter-spacing: normal; max-width: none !important; width: 100% !important; } .magento_giftcardaccount-customer-index .gwl-giftcard #giftcard-balance-lookup:empty { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; } .magento_giftcardaccount-customer-index .gwl-giftcard .field.giftcard { margin: 0 !important; max-width: 434px; width: 100%; } .magento_giftcardaccount-customer-index .gwl-giftcard .field > .label { display: block; float: none !important; width: auto !important; margin: 0 0 8px !important; padding: 0 !important; text-align: start !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 300 !important; line-height: 20px !important; color: var(--Blue-blue-10, #0A053D) !important; } .magento_giftcardaccount-customer-index .gwl-giftcard .field > .label > span { display: inline !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; color: inherit !important; } .magento_giftcardaccount-customer-index .gwl-giftcard .field.required > .label:after { content: '*'; display: inline !important; color: #EB001B !important; margin-inline-start: 2px; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; vertical-align: baseline; } .magento_giftcardaccount-customer-index .gwl-giftcard .field > .control { width: 100% !important; max-width: 434px !important; float: none !important; margin: 0 !important; padding: 0 !important; } .magento_giftcardaccount-customer-index .gwl-giftcard input.input-text { box-sizing: border-box; height: 44px !important; min-height: 44px !important; width: 100%; max-width: 434px; background: var(--Sub-White, #FFF) !important; border: 1px solid var(--Main-Secondary-Shades-Secondary-Shade-300, #CECDD8) !important; border-radius: 4px !important; padding: 0 16px; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 300 !important; line-height: 20px !important; color: var(--Main-Text-Color, #100F1B) !important; } .magento_giftcardaccount-customer-index .gwl-giftcard input.input-text::placeholder { color: var(--Main-Secondary-Shades-Secondary-Shade-400, #9D9BB1) !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 300 !important; line-height: 20px !important; } .magento_giftcardaccount-customer-index .gwl-giftcard input.input-text:focus { border-color: var(--Main-Primary, #160B8B) !important; box-shadow: none !important; outline: none; } .magento_giftcardaccount-customer-index .gwl-giftcard .actions-toolbar { margin: 24px 0 0 !important; padding: 0 !important; width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; text-align: start !important; float: none !important; clear: both !important; gap: 12px; box-sizing: border-box; } .magento_giftcardaccount-customer-index .gwl-giftcard .actions-toolbar:before, .magento_giftcardaccount-customer-index .gwl-giftcard .actions-toolbar:after { content: none !important; display: none !important; } .magento_giftcardaccount-customer-index .gwl-giftcard .actions-toolbar > .primary, .magento_giftcardaccount-customer-index .gwl-giftcard .actions-toolbar > .secondary { float: none !important; display: block !important; margin: 0 !important; padding: 0 !important; width: auto !important; text-align: start !important; } .magento_giftcardaccount-customer-index .gwl-giftcard .actions-toolbar .action { float: none !important; margin: 0 !important; } .magento_giftcardaccount-customer-index .gwl-giftcard button.action, .magento_giftcardaccount-customer-index .gwl-giftcard button.action span { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 400 !important; line-height: 16px !important; text-align: center; } .magento_giftcardaccount-customer-index .gwl-giftcard button.action { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 231px !important; max-width: 100% !important; height: 40px !important; min-height: 40px !important; padding: 0 12px !important; background: var(--Main-Primary, #160B8B) !important; border: 0 !important; border-radius: 4px !important; color: var(--Sub-White, #FFF) !important; box-shadow: none !important; cursor: pointer; } .magento_giftcardaccount-customer-index .gwl-giftcard button.action:hover { background: #221796 !important; } .magento_giftcardaccount-customer-index .gwl-giftcard #giftcard-balance-lookup.giftcard.ballance:not(:empty) { margin-bottom: 16px; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: var(--Main-Text-Color, #100F1B) !important; } /* ========================================================================== GWL Reward Points — Figma "Reward Points" page (magento_reward-customer-info) ========================================================================== */ .magento_reward-customer-info .page-title-wrapper .account-page-subtitle { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 24px !important; color: #6C698B !important; opacity: 1 !important; } /* Balance banner */ .magento_reward-customer-info .gwl-reward-balance { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; box-sizing: border-box; min-height: 172px; padding: 32px; margin-bottom: 24px; border: 1px solid var(--Main-Secondary-Shades-Secondary-Shade-200, #E7E6EC); border-radius: 8px; background: linear-gradient(274deg, #100F1B 18.86%, #160B8B 72.31%); color: var(--Main-Colors-Background-Colors-Bg-Subtle, #F5F5F7); overflow: hidden; } .magento_reward-customer-info .gwl-reward-balance::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: url('../images/reward-balance-grid.svg') center / 100% 100% no-repeat; opacity: 0.55; pointer-events: none; } .magento_reward-customer-info .gwl-reward-balance__left, .magento_reward-customer-info .gwl-reward-balance__right { position: relative; z-index: 1; } .magento_reward-customer-info .gwl-reward-balance__left { display: flex; align-items: center; gap: 24px; } .magento_reward-customer-info .gwl-reward-balance__icon { width: 80px; height: 80px; flex: 0 0 auto; object-fit: contain; } .magento_reward-customer-info .gwl-reward-balance__main { display: flex; flex-direction: column; gap: 8px; } .magento_reward-customer-info .gwl-reward-balance__label { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif; font-size: 18px; font-style: normal; font-weight: 500; line-height: 24px; color: var(--Main-Colors-Background-Colors-Bg-Subtle, #F5F5F7); } .magento_reward-customer-info .gwl-reward-balance__value { display: block; margin: 0; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif; font-size: 72px; font-style: normal; font-weight: 300; line-height: 56px; letter-spacing: -0.5px; color: var(--Main-Colors-Background-Colors-Bg-Subtle, #F5F5F7); } .magento_reward-customer-info .gwl-reward-balance__right { display: flex; flex-direction: column; align-items: flex-end; gap: 38px; text-align: end; } .magento_reward-customer-info .gwl-reward-balance__rate { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .magento_reward-customer-info .gwl-reward-balance__pill { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 6px 16px; border-radius: 100px; border: 2px solid rgba(255, 207, 42, 0.60); background: rgba(255, 207, 42, 0.20); font-family: var(--Typography-Font-1, 'Outfit'), sans-serif; font-size: 16px; font-style: normal; font-weight: 500; line-height: 22px; color: var(--Sub-White, #FFF); text-align: center; white-space: nowrap; } .magento_reward-customer-info .gwl-reward-balance__eq { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif; font-size: 16px; font-weight: 500; line-height: 22px; color: var(--Sub-White, #FFF); } .magento_reward-customer-info .gwl-reward-balance__note { margin: 0; max-width: 360px; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif; font-size: 14px; font-style: normal; font-weight: 300; line-height: 20px; color: var(--Main-Colors-Background-Colors-Bg-Subtle, #F5F5F7); } .magento_reward-customer-info .gwl-reward-balance__note--warn { color: #FFCF2A; } /* Transaction history list — Figma cards */ .magento_reward-customer-info .gwl-reward-history { margin-bottom: 24px; } .magento_reward-customer-info .gwl-reward-history__title { display: none; margin: 0 0 16px; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif; font-size: 18px; font-style: normal; font-weight: 500; line-height: 24px; color: var(--Main-Text-Color, #100F1B); } .magento_reward-customer-info .gwl-reward-history__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; background: transparent; border: 0; box-shadow: none; } .magento_reward-customer-info .gwl-reward-history__list > li, .magento_reward-customer-info .gwl-reward-row { margin: 0 !important; } .magento_reward-customer-info .gwl-reward-row { display: flex; align-items: center; gap: 16px; box-sizing: border-box; padding: 20px; border-radius: 6px; border: 1px solid var(--Main-Secondary-Shades-Secondary-Shade-200, #E7E6EC); background: var(--Main-Secondary-Shades-Secondary-Shade-100, #F5F5F7); } .magento_reward-customer-info .gwl-reward-row__icon { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 258.064px; border: 1px solid var(--Main-Secondary-Shades-Secondary-Shade-200, #E7E6EC); background-color: var(--Main-Secondary-Shades-Secondary-Shade-100, #F5F5F7); background-position: calc(100% - 6.286px) 7.724px; background-size: 75.158% 75.158%; background-repeat: no-repeat; display: block; box-sizing: border-box; } .magento_reward-customer-info .gwl-reward-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .magento_reward-customer-info .gwl-reward-row__points { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif; font-size: 18px; font-style: normal; font-weight: 500; line-height: 24px; color: #100F1B; } .magento_reward-customer-info .gwl-reward-row__meta { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif; font-size: 14px; font-style: normal; font-weight: 300; line-height: 20px; color: var(--Main-Secondary-Text, #58575F); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .magento_reward-customer-info .gwl-reward-row__end { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: end; } .magento_reward-customer-info .gwl-reward-row__status { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 4px 12px; border-radius: 4px; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif; font-size: 14px; font-style: normal; font-weight: 500; line-height: 20px; color: var(--Sub-White, #FFF); white-space: nowrap; } .magento_reward-customer-info .gwl-reward-row--added .gwl-reward-row__status { background: var(--color-orange-49, #FBA900); color: #100F1B; } .magento_reward-customer-info .gwl-reward-row--redeemed .gwl-reward-row__status { background: var(--color-spring-green-43, #34A853); } .magento_reward-customer-info .gwl-reward-row--pending .gwl-reward-row__status { background: var(--color-red-56, #EA4335); } .magento_reward-customer-info .gwl-reward-row__amount { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif; font-size: 14px; font-style: normal; font-weight: 500; line-height: 20px; color: var(--Main-Tertiary, #444462); } .magento_reward-customer-info .gwl-reward-row__amount .price { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; } /* Email Notification Settings card */ .magento_reward-customer-info .gwl-reward-settings { max-width: 100%; display: flex !important; flex-direction: column !important; gap: 24px !important; background: #fff; border: 1px solid var(--Main-Secondary-Shades-Secondary-Shade-200, #E7E6EC); border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: none; } .account.magento_reward-customer-info .block-dashboard-info.gwl-reward-settings .block-title, .magento_reward-customer-info .gwl-reward-settings .block-title { margin: 0 !important; padding: 0 !important; border-bottom: 0 !important; } .magento_reward-customer-info .gwl-reward-settings .block-title strong { display: block; margin: 0 !important; padding: 0 !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 18px !important; font-style: normal; font-weight: 500 !important; line-height: 24px !important; color: var(--Main-Text-Color, #100F1B) !important; } .magento_reward-customer-info .gwl-reward-settings .block-content, .magento_reward-customer-info .gwl-reward-settings .form.reward-settings, .magento_reward-customer-info .gwl-reward-settings .fieldset { margin: 0 !important; padding: 0 !important; letter-spacing: normal; width: 100% !important; } .magento_reward-customer-info .gwl-reward-settings .form.reward-settings { display: flex !important; flex-direction: column !important; gap: 24px !important; } .magento_reward-customer-info .gwl-reward-settings .fieldset { display: flex !important; flex-direction: column !important; gap: 24px !important; } .magento_reward-customer-info .gwl-reward-settings .field.choice { display: flex !important; align-items: center !important; gap: 8px; margin: 0 !important; padding: 0 !important; } .magento_reward-customer-info .gwl-reward-settings .field.choice input[type="checkbox"] { -webkit-appearance: none; appearance: none; box-sizing: border-box; flex-shrink: 0; position: relative !important; top: 0 !important; margin: 0 !important; padding: 0; width: 16px; height: 16px; border: 1px solid var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B); border-radius: 2px; background: var(--Sub-White, #FFF); background-repeat: no-repeat; background-position: center; background-size: 10px 10px; cursor: pointer; } .magento_reward-customer-info .gwl-reward-settings .field.choice input[type="checkbox"]::after { content: none !important; } .magento_reward-customer-info .gwl-reward-settings .field.choice input[type="checkbox"]:checked { background-color: var(--Main-Button-Primary, #160B8B); border-color: var(--Main-Button-Primary, #160B8B); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.2 4.3 6.5 11 2.8 7.3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .magento_reward-customer-info .gwl-reward-settings .field.choice .label, .magento_reward-customer-info .gwl-reward-settings .field.choice .label > span { display: inline-flex !important; align-items: center; flex: 1 1 auto; min-width: 0; min-height: 16px; margin: 0 !important; padding: 0 !important; float: none !important; width: auto !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 300 !important; line-height: 20px !important; color: var(--Main-Secondary, #100F1B) !important; } .magento_reward-customer-info .gwl-reward-settings .actions-toolbar { margin: 0 !important; padding: 0 !important; width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; text-align: start !important; float: none !important; clear: both !important; gap: 12px; box-sizing: border-box; } .magento_reward-customer-info .gwl-reward-settings .actions-toolbar:before, .magento_reward-customer-info .gwl-reward-settings .actions-toolbar:after { content: none !important; display: none !important; } .magento_reward-customer-info .gwl-reward-settings .actions-toolbar > .primary { float: none !important; display: flex !important; justify-content: flex-start !important; align-items: center !important; margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; text-align: start !important; } .magento_reward-customer-info .gwl-reward-settings .actions-toolbar .action { float: none !important; margin: 0 !important; } .magento_reward-customer-info .gwl-reward-settings button.action.save, .magento_reward-customer-info .gwl-reward-settings button.action.save span { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 400 !important; line-height: 16px !important; text-align: center; } .magento_reward-customer-info .gwl-reward-settings button.action.save { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 100% !important; max-width: 249px !important; height: 40px !important; min-height: 40px !important; padding: 0 16px !important; background: var(--Main-Primary, #160B8B) !important; border: 0 !important; border-radius: 4px !important; color: var(--Sub-White, #FFF) !important; box-shadow: none !important; cursor: pointer; } .magento_reward-customer-info .gwl-reward-settings button.action.save:hover { background: #221796 !important; } /* Figma mobile: balance card grid + stacked history cards */ @media only screen and (max-width: 767px) { body.magento_reward-customer-info.account .block-collapsible-nav .title, body.magento_reward-customer-info.account .account-nav .title, body.magento_reward-customer-info.account .sidebar-main .block-collapsible-nav .title, body.magento_reward-customer-info.account .sidebar-main .account-nav .title { display: none !important; } .magento_reward-customer-info .page-title-wrapper { margin-bottom: 24px !important; } body.magento_reward-customer-info.account .breadcrumbs { margin-bottom: 8px !important; } body.magento_reward-customer-info.account .page-main .page-title-wrapper .page-title, body.magento_reward-customer-info.account .page-title-wrapper h1.page-title, body.magento_reward-customer-info.account .page-title-wrapper .page-title .base, body.magento_reward-customer-info.account .page-title-wrapper .page-title span { display: block !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 32px !important; font-style: normal; font-weight: 300 !important; line-height: 40px !important; letter-spacing: -1px !important; color: var(--Blue-blue-10, #0A053D) !important; } body.magento_reward-customer-info.account .page-title-wrapper .account-page-subtitle { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 300 !important; line-height: 20px !important; color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important; opacity: 1 !important; } .magento_reward-customer-info .gwl-reward-balance { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon rate" "label label" "value value" "note note"; justify-content: normal; align-items: center; gap: 12px 16px; min-height: 0; text-align: start; padding: 24px 16px; margin-bottom: 16px; border-radius: 8px !important; border: 1px solid var(--Main-Secondary-Shades-Secondary-Shade-200, #E7E6EC) !important; background: linear-gradient(274deg, #100F1B 18.86%, #160B8B 72.31%) !important; overflow: hidden; } .magento_reward-customer-info .gwl-reward-balance::before { opacity: 0.4; } .magento_reward-customer-info .gwl-reward-balance__left, .magento_reward-customer-info .gwl-reward-balance__main, .magento_reward-customer-info .gwl-reward-balance__right { display: contents; } .magento_reward-customer-info .gwl-reward-balance__icon { grid-area: icon; width: 56px; height: 56px; } .magento_reward-customer-info .gwl-reward-balance__label { grid-area: label; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif; font-size: 16px !important; font-style: normal; font-weight: 500; line-height: 24px; color: var(--Main-Colors-Background-Colors-Bg-Subtle, #F5F5F7); } .magento_reward-customer-info .gwl-reward-balance__value { grid-area: value; font-size: 56px; line-height: 48px; } .magento_reward-customer-info .gwl-reward-balance__rate { grid-area: rate; justify-self: end; gap: 6px; } .magento_reward-customer-info .gwl-reward-balance__pill { padding: 4px 10px; font-size: 12px !important; font-weight: 500; line-height: 16px; } .magento_reward-customer-info .gwl-reward-balance__eq { font-size: 12px; line-height: 16px; } .magento_reward-customer-info .gwl-reward-balance__note, .magento_reward-customer-info .gwl-reward-balance__note--warn { grid-area: note; max-width: none; text-align: start; } .magento_reward-customer-info .gwl-reward-history { margin-bottom: 16px; } .magento_reward-customer-info .gwl-reward-history__title { display: block; } .magento_reward-customer-info .gwl-reward-row__icon { width: 30px; height: 30px; background-position: calc(100% - 3.5px) 4.3px; background-size: 75.158% 75.158%; } .magento_reward-customer-info .gwl-reward-row__points { font-size: 16px; font-weight: 500; line-height: 24px; color: #100F1B; } .magento_reward-customer-info .gwl-reward-row__meta { font-size: 12px; font-weight: 300; line-height: 20px; color: var(--Main-Secondary-Text, #58575F); white-space: normal; } .magento_reward-customer-info .gwl-reward-row__status { padding: 2px 8px; font-size: 12px; font-weight: 500; line-height: 16px; } .magento_reward-customer-info .gwl-reward-row--added .gwl-reward-row__status { color: var(--Main-Text-Color, #100F1B); } .magento_reward-customer-info .gwl-reward-settings { padding: 16px; gap: 24px !important; margin-bottom: 16px; } .magento_reward-customer-info .gwl-reward-settings .actions-toolbar { justify-content: flex-start !important; text-align: start !important; } .magento_reward-customer-info .gwl-reward-settings .actions-toolbar > .primary { justify-content: flex-start !important; text-align: start !important; } .magento_reward-customer-info .gwl-reward-settings button.action.save { max-width: 249px !important; width: 100% !important; } } /* ========================================================================== GWL My Product Reviews — Figma (review-customer-index) ========================================================================== */ .review-customer-index .page-title-wrapper .page-title, .review-customer-index .page-title-wrapper .page-title .base, .review-customer-index .page-title-wrapper .page-title span, .review-customer-index .page-title-wrapper h1.page-title { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 32px !important; font-weight: 300 !important; line-height: 40px !important; letter-spacing: -0.25px; color: var(--Blue-blue-10, #0A053D) !important; } .review-customer-index .page-title-wrapper .account-page-subtitle { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 24px !important; color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important; opacity: 1 !important; } .review-customer-index .gwl-review-empty { background: #fff; border: 1px solid #E7E6EC; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 24px; padding: 24px; margin-bottom: 24px; box-shadow: none; } .review-customer-index .gwl-review-empty__illustration { margin: 0; line-height: 0; } .review-customer-index .gwl-review-empty__illustration img { display: block; width: 156px; height: auto; max-width: 100%; } .review-customer-index .gwl-review-empty__text { margin: 0; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 20px !important; font-style: normal; font-weight: 400 !important; line-height: 26px !important; color: var(--Blue-blue-10, #0A053D) !important; } .review-customer-index .gwl-review-list.block-order-history-card { background: #fff; border: 1px solid #E7E6EC; border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: none; } .review-customer-index .gwl-review-list .table-wrapper.orders-history { margin: 0 !important; overflow-x: auto; border-radius: 8px; } .review-customer-index .gwl-review-list table.table-reviews { width: 100%; border-collapse: collapse; } .review-customer-index .gwl-review-list table.table-reviews thead th { text-align: start; font-family: 'Outfit', sans-serif !important; color: #6C698B; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; background: #F5F5F7; border-bottom: 1px solid #E7E6EC; padding: 10px 12px; vertical-align: middle; } .review-customer-index .gwl-review-list table.table-reviews tbody td { border-top: 1px solid #E7E6EC; padding: 10px 12px; font-family: 'Outfit', sans-serif !important; font-size: 14px; color: #6C698B; font-weight: 400; vertical-align: middle; } .review-customer-index .gwl-review-list table.table-reviews tbody td.col.date { color: #100F1B !important; white-space: nowrap; } .review-customer-index .gwl-review-list table.table-reviews tbody tr:last-child td { border-bottom: none; } .review-customer-index .gwl-review-list table.table-reviews .product-name a { color: #160B8B !important; font-weight: 400; text-decoration: underline !important; } .review-customer-index .gwl-review-list table.table-reviews .product-name a:hover { color: #160B8B !important; opacity: 0.85; } .review-customer-index .gwl-review-list table.table-reviews .col.description { color: #6C698B; max-width: 320px; word-break: break-word; } .review-customer-index .gwl-review-list table.table-reviews .col.summary .rating-summary { margin: 0; } .review-customer-index .gwl-review-list table.table-reviews .col.summary .rating-summary .label { display: none !important; } .review-customer-index .gwl-review-list table.table-reviews .col.actions { text-align: end; white-space: nowrap; } .review-customer-index .gwl-review-list table.table-reviews .col.actions .action, .review-customer-index .gwl-review-list table.table-reviews .col.actions .action span { font-family: 'Outfit', sans-serif !important; color: #160B8B !important; font-weight: 400 !important; font-size: 14px; line-height: 20px; text-decoration: underline !important; } .review-customer-index .gwl-review-list table.table-reviews .col.actions .action:hover { opacity: 0.85; } @media (max-width: 767px) { body.review-customer-index.account .block-collapsible-nav .title, body.review-customer-index.account .account-nav .title, body.review-customer-index.account .sidebar-main .block-collapsible-nav .title, body.review-customer-index.account .sidebar-main .account-nav .title { display: none !important; } .review-customer-index .page-title-wrapper { margin-bottom: 24px !important; } body.review-customer-index.account .breadcrumbs { margin-bottom: 8px !important; } body.review-customer-index.account .page-main .page-title-wrapper .page-title, body.review-customer-index.account .page-title-wrapper h1.page-title, body.review-customer-index.account .page-title-wrapper .page-title .base, body.review-customer-index.account .page-title-wrapper .page-title span { display: block !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 32px !important; font-style: normal; font-weight: 300 !important; line-height: 40px !important; letter-spacing: -1px !important; color: var(--Blue-blue-10, #0A053D) !important; } body.review-customer-index.account .page-title-wrapper .account-page-subtitle { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 300 !important; line-height: 20px !important; color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important; opacity: 1 !important; } .review-customer-index .gwl-review-list.block-order-history-card { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; } .review-customer-index .gwl-review-list .products-reviews-toolbar.top { margin-bottom: 12px; padding-bottom: 12px; } .review-customer-index .gwl-review-list .products-reviews-toolbar.bottom { margin-top: 12px; padding-top: 12px; } .review-customer-index .gwl-review-empty__text { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 400 !important; line-height: 20px !important; color: var(--Blue-blue-10, #0A053D) !important; } .review-customer-index .gwl-review-list .gwl-review-card__info { gap: 8px; } .review-customer-index .gwl-review-list .gwl-review-card__product { font-family: 'Outfit', sans-serif !important; font-size: 14px; font-weight: 600; color: #100F1B; word-break: break-word; } .review-customer-index .gwl-review-list .gwl-review-card__product a { color: #160B8B !important; text-decoration: underline !important; font-weight: 400; } .review-customer-index .gwl-review-list .gwl-review-card__rating { margin: 0; } .review-customer-index .gwl-review-list .gwl-review-card__rating .label { display: none !important; } .review-customer-index .gwl-review-list .gwl-review-card__description { font-family: 'Outfit', sans-serif !important; font-size: 13px; color: #6C698B; line-height: 20px; } } /* ========================================================================== GWL Account Pagination — PLP-match restyle (My Product Reviews) No pagination CSS previously existed for this page — added from scratch, same spec as My Orders/My Returns above. list.phtml prints the SAME full pager markup (item count + limiter + page numbers) twice — once in a ".top" toolbar above the table, once in a ".bottom" toolbar below it. Every account list page follows the same split: item count + "Show N per page" limiter as their own row directly above the list/table; the page-number pagination as its own row below it. Here that means showing count+limiter in ".top" (hide its .pages) and only .pages in ".bottom" (hide its count+limiter). ========================================================================== */ .review-customer-index .gwl-review-list .products-reviews-toolbar.top { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; gap: 16px 24px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--gwl-account-border); } .review-customer-index .gwl-review-list .products-reviews-toolbar .toolbar-amount { flex: 1 1 auto; min-width: 0; /* Parent theme's base .products-reviews-toolbar .toolbar-amount rule sets text-align:center — override so the count hugs the row's start edge. */ text-align: start; } .review-customer-index .gwl-review-list .products-reviews-toolbar .limiter { flex: 0 0 auto; } .review-customer-index .gwl-review-list .products-reviews-toolbar.top .pages { display: none !important; } .review-customer-index .gwl-review-list .products-reviews-toolbar.bottom { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gwl-account-border); } .review-customer-index .gwl-review-list .products-reviews-toolbar.bottom .toolbar-amount, .review-customer-index .gwl-review-list .products-reviews-toolbar.bottom .limiter { display: none !important; } /* pager.phtml/history_pager.phtml wrap everything in their own
    — see the matching comment on My Orders above for the full rationale. */ .review-customer-index .gwl-review-list .products-reviews-toolbar .pager { display: contents; } .review-customer-index .gwl-review-list .products-reviews-toolbar .toolbar-amount, .review-customer-index .gwl-review-list .products-reviews-toolbar .limiter { position: static !important; float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; } .review-customer-index .gwl-review-list .products-reviews-toolbar .toolbar-amount { order: -2; font-family: 'Outfit', sans-serif !important; font-size: 13px; color: var(--gwl-account-muted); } .review-customer-index .gwl-review-list .products-reviews-toolbar .limiter { display: flex !important; align-items: center; gap: 8px; order: -1; } .review-customer-index .gwl-review-list .products-reviews-toolbar .limiter-label, .review-customer-index .gwl-review-list .products-reviews-toolbar .limiter-text { font-family: 'Outfit', sans-serif !important; font-size: 13px; font-weight: 500; color: #100f1b; } .review-customer-index .gwl-review-list .products-reviews-toolbar .limiter-options { appearance: none; min-width: 56px; height: 36px; padding: 6px 28px 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23100f1b' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 10px 6px; font-family: 'Outfit', sans-serif !important; font-size: 13px; font-weight: 600; color: #100f1b; box-shadow: none !important; cursor: pointer; } /* position:static overrides the parent theme's absolute-positioning of .pages at this breakpoint (see the matching comment on the My Orders pagination above) — without it .pages overflows off the card's right edge instead of shrinking/wrapping inside the toolbar row. */ .review-customer-index .gwl-review-list .products-reviews-toolbar .pages { display: block; position: static !important; flex: 1 1 auto; min-width: 0; margin: 0; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items { display: flex; flex-wrap: wrap; justify-content: flex-end; width: 100%; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items li.item { margin: 0 !important; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page, .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items strong.page, .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #d9d9d9; border-radius: 4px; background-color: #ffffff; font-family: 'Outfit', sans-serif !important; font-size: 13px; font-weight: 500; color: #100f1b; text-decoration: none; transition: all 0.2s ease; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page:hover, .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action:hover { border-color: #100f1b; color: #100f1b; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items li.current strong.page { background: #100f1b !important; border-color: #100f1b !important; color: #ffffff !important; font-weight: 600; } /* First/Last — icon-only squares (double chevron) */ .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.first, .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.last { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.first { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M6.5 2 2.5 6l4 4M11.5 2 7.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.last { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M2.5 2 6.5 6l-4 4M7.5 2 11.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Previous — icon-only square (single chevron) */ .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action.previous { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M7.5 2 3.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Next — keeps visible text + trailing chevron */ .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action.next { width: auto; min-width: 0; padding: 0 34px 0 14px; background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2 8.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action.next span:not(.label) { display: inline !important; position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; margin: 0 !important; } cursor: pointer; } /* position:static overrides the parent theme's absolute-positioning of .pages at this breakpoint (see the matching comment on the My Orders pagination above) — without it .pages overflows off the card's right edge instead of shrinking/wrapping inside the toolbar row. */ .review-customer-index .gwl-review-list .products-reviews-toolbar .pages { display: block; position: static !important; flex: 1 1 auto; min-width: 0; margin: 0; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items { display: flex; flex-wrap: wrap; justify-content: flex-end; width: 100%; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items li.item { margin: 0 !important; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page, .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items strong.page, .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #d9d9d9; border-radius: 4px; background-color: #ffffff; font-family: 'Outfit', sans-serif !important; font-size: 13px; font-weight: 500; color: #100f1b; text-decoration: none; transition: all 0.2s ease; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page:hover, .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action:hover { border-color: #100f1b; color: #100f1b; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items li.current strong.page { background: #100f1b !important; border-color: #100f1b !important; color: #ffffff !important; font-weight: 600; } /* First/Last — icon-only squares (double chevron) */ .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.first, .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.last { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.first { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M6.5 2 2.5 6l4 4M11.5 2 7.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.page.last { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M2.5 2 6.5 6l-4 4M7.5 2 11.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Previous — icon-only square (single chevron) */ .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action.previous { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M7.5 2 3.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Next — keeps visible text + trailing chevron */ .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action.next { width: auto; min-width: 0; padding: 0 34px 0 14px; background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2 8.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; } .review-customer-index .gwl-review-list .products-reviews-toolbar .pages-items a.action.next span:not(.label) { display: inline !important; position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; margin: 0 !important; } /* ========================================================================== /* ========================================================================== GWL Newsletter Subscriptions — Figma "Newsletter Subscriptions" page (newsletter-manage-index) ========================================================================== */ .newsletter-manage-index .page-title-wrapper .page-title, .newsletter-manage-index .page-title-wrapper .page-title .base, .newsletter-manage-index .page-title-wrapper .page-title span, .newsletter-manage-index .page-title-wrapper h1.page-title { font-family: 'Outfit', sans-serif !important; font-size: 32px !important; font-weight: 300 !important; line-height: 40px !important; letter-spacing: -0.25px; color: #0A053D !important; } .newsletter-manage-index .page-title-wrapper .account-page-subtitle { font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 24px !important; color: #6C698B !important; opacity: 1 !important; } .newsletter-manage-index .gwl-newsletter-settings { max-width: 100%; display: flex !important; flex-direction: column !important; gap: 16px !important; background: #fff; border: 1px solid #E7E6EC; border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: none; } .account.newsletter-manage-index .block-dashboard-info.gwl-newsletter-settings .block-title, .newsletter-manage-index .gwl-newsletter-settings .block-title { margin: 0 !important; padding: 0 !important; border-bottom: 0 !important; } .newsletter-manage-index .gwl-newsletter-settings .block-title strong { display: block; margin: 0 !important; padding: 0 !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 18px !important; font-style: normal; font-weight: 500 !important; line-height: 24px !important; color: var(--Main-Text-Color, #100F1B) !important; } .newsletter-manage-index .gwl-newsletter-settings .block-content, .newsletter-manage-index .gwl-newsletter-settings .form-newsletter-manage, .newsletter-manage-index .gwl-newsletter-settings .fieldset { margin: 0 !important; padding: 0 !important; letter-spacing: normal; width: 100% !important; } .newsletter-manage-index .gwl-newsletter-settings .field.choice { display: flex !important; align-items: center !important; gap: 8px; margin: 0 !important; padding: 0 !important; } .newsletter-manage-index .gwl-newsletter-settings .field.choice input[type="checkbox"] { -webkit-appearance: none; appearance: none; box-sizing: border-box; flex-shrink: 0; position: relative !important; top: 0 !important; margin: 0 !important; padding: 0; width: 16px; height: 16px; border: 1px solid var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B); border-radius: 2px; background: var(--Sub-White, #FFF); background-repeat: no-repeat; background-position: center; background-size: 10px 10px; cursor: pointer; } .newsletter-manage-index .gwl-newsletter-settings .field.choice input[type="checkbox"]::after { content: none !important; } .newsletter-manage-index .gwl-newsletter-settings .field.choice input[type="checkbox"]:checked { background-color: var(--Main-Button-Primary, #160B8B); border-color: var(--Main-Button-Primary, #160B8B); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.2 4.3 6.5 11 2.8 7.3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .newsletter-manage-index .gwl-newsletter-settings .field.choice .label, .newsletter-manage-index .gwl-newsletter-settings .field.choice .label > span { display: inline-flex !important; align-items: center; flex: 1 1 auto; min-width: 0; min-height: 16px; margin: 0 !important; padding: 0 !important; float: none !important; width: auto !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px !important; font-style: normal; font-weight: 300 !important; line-height: 20px !important; color: var(--Main-Secondary, #100F1B) !important; } .newsletter-manage-index .gwl-newsletter-settings .actions-toolbar { margin: 24px 0 0 !important; padding: 0 !important; width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; text-align: end !important; float: none !important; clear: both !important; gap: 12px; box-sizing: border-box; } .newsletter-manage-index .gwl-newsletter-settings .actions-toolbar:before, .newsletter-manage-index .gwl-newsletter-settings .actions-toolbar:after { content: none !important; display: none !important; } .newsletter-manage-index .gwl-newsletter-settings .actions-toolbar > .primary { float: none !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; margin: 0 0 0 auto !important; margin-inline-start: auto !important; padding: 0 !important; width: auto !important; max-width: none !important; text-align: end !important; } .newsletter-manage-index .gwl-newsletter-settings .actions-toolbar .action { float: none !important; margin: 0 !important; } .newsletter-manage-index .gwl-newsletter-settings button.action.save, .newsletter-manage-index .gwl-newsletter-settings button.action.save span { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 400 !important; line-height: 16px !important; text-align: center; } .newsletter-manage-index .gwl-newsletter-settings button.action.save { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 100px !important; max-width: 100px !important; height: 40px !important; min-height: 40px !important; padding: 0 8px !important; background: var(--Main-Primary, #160B8B) !important; border: 0 !important; border-radius: 4px !important; color: var(--Sub-White, #FFF) !important; box-shadow: none !important; cursor: pointer; } .newsletter-manage-index .gwl-newsletter-settings button.action.save:hover { background: #221796 !important; } @media (max-width: 767px) { body.newsletter-manage-index.account .block-collapsible-nav .title, body.newsletter-manage-index.account .account-nav .title, body.newsletter-manage-index.account .sidebar-main .block-collapsible-nav .title, body.newsletter-manage-index.account .sidebar-main .account-nav .title { display: none !important; } .newsletter-manage-index .page-title-wrapper { margin-bottom: 24px !important; } body.newsletter-manage-index.account .breadcrumbs { margin-bottom: 8px !important; } body.newsletter-manage-index.account .page-main .page-title-wrapper .page-title, body.newsletter-manage-index.account .page-title-wrapper h1.page-title, body.newsletter-manage-index.account .page-title-wrapper .page-title .base, body.newsletter-manage-index.account .page-title-wrapper .page-title span { display: block !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 32px !important; font-style: normal; font-weight: 300 !important; line-height: 40px !important; letter-spacing: -1px !important; color: var(--Blue-blue-10, #0A053D) !important; } body.newsletter-manage-index.account .page-title-wrapper .account-page-subtitle { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 300 !important; line-height: 20px !important; color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important; opacity: 1 !important; } .newsletter-manage-index .gwl-newsletter-settings { padding: 16px !important; gap: 16px !important; margin-bottom: 16px !important; } .account.newsletter-manage-index .block-dashboard-info.gwl-newsletter-settings .block-title, .newsletter-manage-index .gwl-newsletter-settings .block-title { margin-bottom: 0 !important; } .newsletter-manage-index .gwl-newsletter-settings .form-newsletter-manage { display: flex !important; flex-direction: column !important; gap: 16px !important; } .newsletter-manage-index .gwl-newsletter-settings .actions-toolbar { margin: 8px 0 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; text-align: start !important; width: 100% !important; } .newsletter-manage-index .gwl-newsletter-settings .actions-toolbar > .primary { float: none !important; display: flex !important; justify-content: flex-start !important; align-items: center !important; margin: 0 !important; margin-inline-start: 0 !important; width: auto !important; max-width: none !important; text-align: start !important; } .newsletter-manage-index .gwl-newsletter-settings button.action.save { width: 100px !important; max-width: 100px !important; flex: 0 0 auto !important; } } /* ========================================================================== GWL My Invitations — Figma "Invitations" page (magento_invitation-index-index) ========================================================================== */ .magento_invitation-index-index .page-title-wrapper .page-title, .magento_invitation-index-index .page-title-wrapper .page-title .base, .magento_invitation-index-index .page-title-wrapper .page-title span, .magento_invitation-index-index .page-title-wrapper h1.page-title { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 32px !important; font-weight: 300 !important; line-height: 40px !important; letter-spacing: -0.25px; color: var(--Blue-blue-10, #0A053D) !important; } .magento_invitation-index-index .page-title-wrapper .account-page-subtitle { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 24px !important; color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important; opacity: 1 !important; } /* Empty-state card */ .magento_invitation-index-index .gwl-invitation-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 24px; padding: 24px; margin-bottom: 0; box-shadow: none; } .magento_invitation-index-index .gwl-invitation-empty__illustration { margin: 0; line-height: 0; } .magento_invitation-index-index .gwl-invitation-empty__illustration img { display: block; width: 145px; height: auto; max-width: 100%; } .magento_invitation-index-index .gwl-invitation-empty__text { margin: 0; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 20px !important; font-style: normal; font-weight: 400 !important; line-height: 26px !important; color: var(--Blue-blue-10, #0A053D) !important; } /* Populated invitation list (reuses the dashboard-orders table look) */ .magento_invitation-index-index .gwl-invitation-list .table-wrapper.invitations { overflow-x: auto; border-radius: 8px; } .magento_invitation-index-index .gwl-invitation-list table.table-invitations thead th { text-align: start; color: var(--gwl-account-muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--gwl-account-surface); border-bottom: 1px solid var(--gwl-account-border); padding: 10px 12px; } .magento_invitation-index-index .gwl-invitation-list table.table-invitations tbody td { border-top: 1px solid var(--gwl-account-border); padding: 10px 12px; font-size: 14px; color: var(--gwl-account-text); vertical-align: middle; } /* "Send an Invitation" button — sits below the card, not inside it */ .magento_invitation-index-index .gwl-invitation-actions { margin-top: 24px; } .magento_invitation-index-index .gwl-invitation-actions .action.send, .magento_invitation-index-index .gwl-invitation-actions .action.send span { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 400 !important; line-height: 16px !important; text-align: center; color: var(--Sub-White, #FFF) !important; } .magento_invitation-index-index .gwl-invitation-actions .action.send { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; max-width: 206px; width: 100%; height: 40px; min-height: 40px; padding: 0 16px; background: var(--Main-Primary, #160B8B) !important; border: 0; border-radius: 4px; text-decoration: none; cursor: pointer; } .magento_invitation-index-index .gwl-invitation-actions .action.send:hover { background: #221796 !important; color: var(--Sub-White, #FFF) !important; } @media (max-width: 767px) { body.magento_invitation-index-index.account .block-collapsible-nav .title, body.magento_invitation-index-index.account .account-nav .title, body.magento_invitation-index-index.account .sidebar-main .block-collapsible-nav .title, body.magento_invitation-index-index.account .sidebar-main .account-nav .title { display: none !important; } .magento_invitation-index-index .page-title-wrapper { margin-bottom: 24px !important; } body.magento_invitation-index-index.account .breadcrumbs { margin-bottom: 8px !important; } body.magento_invitation-index-index.account .page-main .page-title-wrapper .page-title, body.magento_invitation-index-index.account .page-title-wrapper h1.page-title, body.magento_invitation-index-index.account .page-title-wrapper .page-title .base, body.magento_invitation-index-index.account .page-title-wrapper .page-title span { display: block !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 32px !important; font-style: normal; font-weight: 300 !important; line-height: 40px !important; letter-spacing: -1px !important; color: var(--Blue-blue-10, #0A053D) !important; } body.magento_invitation-index-index.account .page-title-wrapper .account-page-subtitle { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 300 !important; line-height: 20px !important; color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important; opacity: 1 !important; } .magento_invitation-index-index .gwl-invitation-empty__text { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 400 !important; line-height: 20px !important; color: var(--Blue-blue-10, #0A053D) !important; } } /* ========================================================================== GWL Send Invitations — form page (magento_invitation-index-send) ========================================================================== */ .magento_invitation-index-send .gwl-invitation-form { max-width: 620px; } .magento_invitation-index-send .gwl-invitation-form .fieldset { margin: 0 !important; letter-spacing: normal; } .magento_invitation-index-send .gwl-invitation-form__row-actions { display: flex; justify-content: flex-end; } .magento_invitation-index-send .gwl-invitation-form .action.remove { background: none; border: 0; padding: 0; color: var(--gwl-account-muted); font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; } .magento_invitation-index-send .gwl-invitation-form .action.remove:hover { color: #F04438; } /* Field / label / input — same spec as the Gift Card input */ .magento_invitation-index-send .gwl-invitation-form .field { margin: 0 0 16px !important; } .magento_invitation-index-send .gwl-invitation-form .field > .label { display: block; float: none !important; width: auto !important; margin: 0 0 8px !important; padding: 0 !important; text-align: start !important; font-size: 13px !important; font-weight: 500 !important; color: var(--gwl-account-text) !important; } .magento_invitation-index-send .gwl-invitation-form .field.required > .label:after { content: '*'; color: #F04438; margin-inline-start: 2px; } .magento_invitation-index-send .gwl-invitation-form .field > .control { width: 100% !important; float: none !important; } .magento_invitation-index-send .gwl-invitation-form input.input-text, .magento_invitation-index-send .gwl-invitation-form textarea.input-text { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--gwl-account-border); border-radius: 4px; padding: 0 12px; font-size: 13px; color: var(--gwl-account-text); font-family: 'Work Sans', sans-serif; } .magento_invitation-index-send .gwl-invitation-form input.input-text { height: 40px; } .magento_invitation-index-send .gwl-invitation-form textarea.input-text { padding: 10px 12px; line-height: 18px; resize: vertical; } .magento_invitation-index-send .gwl-invitation-form input.input-text::placeholder, .magento_invitation-index-send .gwl-invitation-form textarea.input-text::placeholder { color: var(--gwl-account-muted); } .magento_invitation-index-send .gwl-invitation-form input.input-text:focus, .magento_invitation-index-send .gwl-invitation-form textarea.input-text:focus { border-color: var(--gwl-account-blue); box-shadow: none; outline: none; } /* Add-row button — secondary/outline, distinct from the primary submit */ .magento_invitation-index-send .gwl-invitation-form__add-row { margin: 4px 0 20px; } .magento_invitation-index-send .gwl-invitation-form button.action.add { height: 36px; padding: 0 18px; background: #fff; border: 1px solid var(--gwl-account-blue); border-radius: 4px; color: var(--gwl-account-blue); font-size: 13px; font-weight: 600; cursor: pointer; } .magento_invitation-index-send .gwl-invitation-form button.action.add:hover { background: var(--gwl-account-current-bg); } /* Max-emails notice */ .magento_invitation-index-send .gwl-invitation-form #max-emails-message.message.notice { background: var(--gwl-account-surface); border: 1px solid var(--gwl-account-border); border-radius: 4px; padding: 10px 14px; margin: 0 0 16px; font-size: 12px; color: var(--gwl-account-muted); } /* Submit button — same spec as the other card-internal Save/submit buttons */ .magento_invitation-index-send .gwl-invitation-form .actions-toolbar { margin: 8px 0 0 !important; } .magento_invitation-index-send .gwl-invitation-form .actions-toolbar > .primary { float: none !important; } .magento_invitation-index-send .gwl-invitation-form button.action.submit.primary { height: 40px; padding: 0 22px !important; background: var(--gwl-account-blue) !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; font-size: 13px; font-weight: 600; box-shadow: none !important; cursor: pointer; } .magento_invitation-index-send .gwl-invitation-form button.action.submit.primary:hover { background: #221796 !important; } /* ========================================================================== GWL My Returns — Mirasvit RMA list page (rma-rma-list) ========================================================================== */ /* "Request New Return" button — placement/spacing matches the "Send an Invitation" button on the My Invitations page exactly (below the card). */ .rma-rma-list .gwl-returns-actions { margin-top: 20px; } /* the Mirasvit module's own stylesheet floats this button right (body.rma-rma-list .mst-rma-list__new-request { float: right }) — override so it sits left/start, matching the Invitations page button */ .rma-rma-list .gwl-returns-actions button.mst-rma-list__new-request { display: inline-flex; align-items: center; justify-content: center; float: none !important; margin: 0 !important; height: 44px; padding: 0 24px; background: var(--gwl-account-blue); border: 0; border-radius: 4px; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; } .rma-rma-list .gwl-returns-actions button.mst-rma-list__new-request:hover { background: #221796; } /* Empty-state card */ .rma-rma-list .gwl-returns-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px 24px; } .rma-rma-list .gwl-returns-empty__illustration { margin-bottom: 20px; } .rma-rma-list .gwl-returns-empty__illustration svg { display: block; } .rma-rma-list .gwl-returns-empty__text { margin: 0; font-family: 'Work Sans', sans-serif; font-size: 16px; font-weight: 600; color: var(--gwl-account-title); } /* Populated returns list */ .rma-rma-list .gwl-returns-list .table-wrapper { overflow-x: auto; border-radius: 8px; } .rma-rma-list .gwl-returns-list table.mst-rma-list thead th { text-align: start; color: var(--gwl-account-muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--gwl-account-surface); border-bottom: 1px solid var(--gwl-account-border); padding: 10px 12px; } .rma-rma-list .gwl-returns-list table.mst-rma-list tbody td { border-top: 1px solid var(--gwl-account-border); padding: 10px 12px; font-size: 14px; color: var(--gwl-account-text); vertical-align: middle; } .rma-rma-list .gwl-returns-list table.mst-rma-list .mst-rma-list__name a, .rma-rma-list .gwl-returns-list table.mst-rma-list .mst-rma-list__items a { color: var(--gwl-account-blue); text-decoration: none; font-weight: 500; } .rma-rma-list .gwl-returns-list table.mst-rma-list .mst-rma-list__name a:hover, .rma-rma-list .gwl-returns-list table.mst-rma-list .mst-rma-list__items a:hover { text-decoration: underline; } .rma-rma-list .gwl-returns-list table.mst-rma-list .mst-rma-list__name { display: inline-flex; align-items: center; gap: 6px; } .rma-rma-list .gwl-returns-list table.mst-rma-list .mst-rma-list__unread { width: 8px; height: 8px; border-radius: 50%; background: #F04438; flex: 0 0 auto; } .rma-rma-list .gwl-returns-list table.mst-rma-list .mst-rma-list__items p { margin: 0 0 4px; } .rma-rma-list .gwl-returns-list__items { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .rma-rma-list .gwl-returns-list__items li { display: flex; align-items: center; gap: 8px; } .rma-rma-list .gwl-returns-list__items img { width: 32px; height: 32px; border-radius: 4px; border: 1px solid var(--gwl-account-border); object-fit: cover; flex: 0 0 auto; } .rma-rma-list .gwl-returns-list__items strong { font-size: 12px; font-weight: 500; color: var(--gwl-account-text); } .rma-rma-list .gwl-returns-list table.mst-rma-list .col.actions a { color: var(--gwl-account-blue); text-decoration: none; font-size: 13px; font-weight: 500; } .rma-rma-list .gwl-returns-list table.mst-rma-list .col.actions a:hover { text-decoration: underline; } /* Status pill — shape/typography only; per-status background color is left to the site's own configured Mirasvit status colors (admin-managed) so the semantic meaning (pending/approved/rejected/etc.) is preserved. A neutral fallback is provided for any status left without a configured color (renders as plain "status-branch-" with no matching rule). */ .rma-rma-list .mst-rma-status { display: inline-block; padding: 6px 14px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; text-align: center; background: var(--gwl-account-muted); color: #fff; } /* ========================================================================== GWL Account Pagination — PLP-match restyle (My Returns) Same spec as My Orders above — see that block's comment for the full rationale. list.phtml prints the SAME full pager markup twice — once in a plain (".top", unmodified) toolbar above the list, once in a ".bottom" toolbar below it — matching the split used on every other account list page: item count + "Show N per page" limiter as their own row above the list (.top, shown here), page-number pagination as its own row below it (.bottom, hides count+limiter, shows only .pages). ========================================================================== */ .rma-rma-list .gwl-returns-list .order-products-toolbar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; gap: 16px 24px; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--gwl-account-border); } .rma-rma-list .gwl-returns-list .order-products-toolbar .toolbar-amount { flex: 1 1 auto; min-width: 0; /* Parent theme's base .order-products-toolbar .toolbar-amount rule sets text-align:center — override so the count hugs the row's start edge. */ text-align: start; } .rma-rma-list .gwl-returns-list .order-products-toolbar .limiter { flex: 0 0 auto; } .rma-rma-list .gwl-returns-list .order-products-toolbar .pages { display: none !important; } /* pager.phtml wraps everything in its own
    — see the matching comment on My Orders above for the full rationale. */ .rma-rma-list .gwl-returns-list .order-products-toolbar .pager { display: contents; } .rma-rma-list .gwl-returns-list .order-products-toolbar.bottom { justify-content: flex-end; margin: 16px 0 0; padding: 16px 0 0; border-bottom: 0; border-top: 1px solid var(--gwl-account-border); } .rma-rma-list .gwl-returns-list .order-products-toolbar.bottom .pages { display: block !important; } .rma-rma-list .gwl-returns-list .order-products-toolbar.bottom .toolbar-amount, .rma-rma-list .gwl-returns-list .order-products-toolbar.bottom .limiter { display: none !important; } .rma-rma-list .gwl-returns-list .order-products-toolbar .toolbar-amount, .rma-rma-list .gwl-returns-list .order-products-toolbar .limiter { position: static !important; float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; } .rma-rma-list .gwl-returns-list .order-products-toolbar .toolbar-amount { order: -2; font-family: 'Work Sans', sans-serif; font-size: 13px; color: var(--gwl-account-muted); } .rma-rma-list .gwl-returns-list .order-products-toolbar .limiter { display: flex !important; align-items: center; gap: 8px; order: -1; } .rma-rma-list .gwl-returns-list .order-products-toolbar .limiter-label, .rma-rma-list .gwl-returns-list .order-products-toolbar .limiter-text { font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; color: #100f1b; } .rma-rma-list .gwl-returns-list .order-products-toolbar .limiter-options { appearance: none; min-width: 56px; height: 36px; padding: 6px 28px 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23100f1b' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 10px 6px; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600; color: #100f1b; box-shadow: none !important; cursor: pointer; } /* position:static overrides the parent theme's absolute-positioning of .pages at this breakpoint (see the matching comment on the My Orders pagination above) — without it .pages overflows off the card's right edge instead of shrinking/wrapping inside the toolbar row. */ .rma-rma-list .gwl-returns-list .order-products-toolbar .pages { display: block; position: static !important; flex: 1 1 auto; min-width: 0; margin: 0; } .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items { display: flex; flex-wrap: wrap; justify-content: flex-end; width: 100%; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; } .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items li.item { margin: 0 !important; } .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.page, .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items strong.page, .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #d9d9d9; border-radius: 4px; background-color: #ffffff; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; color: #100f1b; text-decoration: none; transition: all 0.2s ease; } .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.page:hover, .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action:hover { border-color: #100f1b; color: #100f1b; } .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items li.current strong.page { background: #100f1b !important; border-color: #100f1b !important; color: #ffffff !important; font-weight: 600; } /* First/Last — icon-only squares (double chevron). Two template variants are in play across account pages depending on which pager.phtml override resolves (a stock-style copy uses a.page.first/.last; the theme's own Figma-pager copy — see its "gwl-plp-pager__next" class below — uses a.action.first/.last instead) — cover both so this looks right regardless of which one a given page/cache state serves. */ .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.page.first, .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.page.last, .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.first, .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.last { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; } .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.page.first, .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.first { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M6.5 2 2.5 6l4 4M11.5 2 7.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.page.last, .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.last { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M2.5 2 6.5 6l-4 4M7.5 2 11.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Previous — icon-only square (single chevron) */ .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.previous { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M7.5 2 3.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Next — keeps visible text + trailing chevron */ .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.next { width: auto; min-width: 0; padding: 0 34px 0 14px; background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2 8.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; } .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items a.action.next span:not(.label) { display: inline !important; position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; margin: 0 !important; } /* The Figma-pager template variant (see comment above the First/Last rule) sidesteps that same clamp itself by using an instead of a for Next's visible text — but an unstyled is italic by default in every browser, and the sitewide PLP rule that normally resets it (".gwl-plp-pager__next-label") is scoped to body.gwl-plp-figma, which account pages don't carry. Reset it here too. */ .rma-rma-list .gwl-returns-list .order-products-toolbar .pages-items .gwl-plp-pager__next-label { display: inline; font-style: normal; } /* ========================================================================== GWL My Support Tickets — Mirasvit Helpdesk (helpdesk-ticket-index / helpdesk-ticket-create). Pure CSS restyle of the module's own markup (.hdmx__tickets / .hdmx__ticket-new etc — no template overrides), reusing the same card/field/button conventions as the rest of My Account. ========================================================================== */ /* Empty state — same illustration/card treatment as Invitations/Questions/Returns */ .helpdesk-ticket-index .hdmx__tickets .gwl-helpdesk-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px 24px; background: #fff; border: 1px solid var(--gwl-account-border); border-radius: 4px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); } .helpdesk-ticket-index .hdmx__tickets .gwl-helpdesk-empty__illustration { margin-bottom: 20px; } .helpdesk-ticket-index .hdmx__tickets .gwl-helpdesk-empty__illustration svg { display: block; } .helpdesk-ticket-index .hdmx__tickets .gwl-helpdesk-empty__text { margin: 0; font-family: 'Work Sans', sans-serif; font-size: 16px; font-weight: 600; color: var(--gwl-account-title); } /* "Create ticket" button — sits below the card, not inside it */ .helpdesk-ticket-index .gwl-helpdesk-actions { margin-top: 20px; } .helpdesk-ticket-index .gwl-helpdesk-actions .create-button { display: inline-flex; align-items: center; justify-content: center; float: none !important; position: static !important; margin-top: 0 !important; height: 44px; padding: 0 24px !important; background: var(--gwl-account-blue) !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; font-family: 'Work Sans', sans-serif; font-size: 14px; font-weight: 600; box-shadow: none !important; cursor: pointer; } .helpdesk-ticket-index .gwl-helpdesk-actions .create-button:hover { background: #221796 !important; } /* Ticket table — card container, same treatment as My Returns/RMA */ .helpdesk-ticket-index .hdmx__tickets .table-wrapper { clear: both; background: #fff; border: 1px solid var(--gwl-account-border); border-radius: 4px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); overflow: hidden; } .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table { width: 100%; } .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table .table-caption { display: none; } .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table thead th { padding: 12px 16px; background: var(--gwl-account-surface); border-bottom: 1px solid var(--gwl-account-border); font-family: 'Work Sans', sans-serif; font-size: 12px; font-weight: 600; color: var(--gwl-account-muted); text-transform: uppercase; letter-spacing: 0.02em; text-align: start; } .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table tbody td { padding: 14px 16px; border-top: 1px solid var(--gwl-account-border); font-family: 'Work Sans', sans-serif; font-size: 13px; color: var(--gwl-account-text); vertical-align: middle; } .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table tbody tr:first-child td { border-top: 0; } .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table td.subject a { color: var(--gwl-account-blue); font-weight: 600; text-decoration: none; } .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table td.subject a:hover { text-decoration: underline; } /* status pill — colors stay as defined by the module's own LESS (.hdmx-aqua/.hdmx-grey/.hdmx-navy/.hdmx-green/.hdmx-red/...), only the shape/spacing is unified with .order-status-pill elsewhere */ .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table .hdmx__status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-family: 'Work Sans', sans-serif; font-size: 11px; font-weight: 600; color: #fff; text-transform: capitalize; } /* Mobile — stack each row's columns as label/value pairs */ @media (max-width: 767px) { .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table thead { display: none; } .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table, .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table tbody, .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table tr, .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table td { display: block; width: 100%; box-sizing: border-box; } .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table tr { padding: 12px 16px; border-top: 1px solid var(--gwl-account-border); } .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table tr:first-child { border-top: 0; } .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 0; text-align: end; } .helpdesk-ticket-index .hdmx__tickets table.hdmx__tickets-table td:before { content: attr(data-th); flex: 0 0 auto; font-weight: 600; color: var(--gwl-account-muted); text-align: start; } } /* Create ticket form */ .helpdesk-ticket-create .hdmx__ticket-new .fieldset { box-sizing: border-box; width: 100%; margin: 0 0 20px; padding: 20px; background: #fff; border: 1px solid var(--gwl-account-border); border-radius: 4px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); } .helpdesk-ticket-create .hdmx__ticket-new .fields.group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: start; margin: 0 0 4px; } /* the module's own LESS clearfixes .group via ::before/::after — as a grid container those pseudo-elements become phantom grid items and eat the first cell, so neutralize them once grid is in charge */ .helpdesk-ticket-create .hdmx__ticket-new .fields.group:before, .helpdesk-ticket-create .hdmx__ticket-new .fields.group:after { display: none; } .helpdesk-ticket-create .hdmx__ticket-new .field { margin: 0 !important; } .helpdesk-ticket-create .hdmx__ticket-new .field.message, .helpdesk-ticket-create .hdmx__ticket-new .field.custom { grid-column: 1 / -1; } .helpdesk-ticket-create .hdmx__ticket-new .field > .label { display: block; float: none !important; width: auto !important; margin: 0 0 6px !important; padding: 0 !important; text-align: start !important; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; color: var(--gwl-account-text); } .helpdesk-ticket-create .hdmx__ticket-new .field > .control { width: 100% !important; float: none !important; } .helpdesk-ticket-create .hdmx__ticket-new .field .max-attachment-size, .helpdesk-ticket-create .hdmx__ticket-new .field .note { margin: 4px 0 0; font-size: 12px; color: var(--gwl-account-muted); } .helpdesk-ticket-create .hdmx__ticket-new input.input-text, .helpdesk-ticket-create .hdmx__ticket-new select, .helpdesk-ticket-create .hdmx__ticket-new textarea { box-sizing: border-box; width: 100%; background: #fff; border: 1px solid var(--gwl-account-border); border-radius: 4px; padding: 0 12px; font-family: 'Work Sans', sans-serif; font-size: 13px; color: var(--gwl-account-text); } .helpdesk-ticket-create .hdmx__ticket-new input.input-text, .helpdesk-ticket-create .hdmx__ticket-new select { height: 40px; } .helpdesk-ticket-create .hdmx__ticket-new textarea { padding-top: 10px; padding-bottom: 10px; min-height: 120px; resize: vertical; } .helpdesk-ticket-create .hdmx__ticket-new input.input-text:focus, .helpdesk-ticket-create .hdmx__ticket-new select:focus, .helpdesk-ticket-create .hdmx__ticket-new textarea:focus { border-color: var(--gwl-account-blue); box-shadow: none; } .helpdesk-ticket-create .hdmx__ticket-new .field.order .orderLoading { font-size: 13px; color: var(--gwl-account-muted); } .helpdesk-ticket-create .hdmx__ticket-new input[type="file"].attachment { height: auto; padding: 8px 12px; } .helpdesk-ticket-create .hdmx__ticket-new .actions-toolbar { display: flex; justify-content: flex-end; margin: 0; } .helpdesk-ticket-create .hdmx__ticket-new .actions-toolbar button.action.primary { height: 38px; padding: 0 26px !important; background: var(--gwl-account-blue) !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600; box-shadow: none !important; cursor: pointer; } .helpdesk-ticket-create .hdmx__ticket-new .actions-toolbar button.action.primary:hover { background: #221796 !important; } /* Mobile — every field goes full width, one per row (fields that were only ever alone in their row, like Department/Order, otherwise left an empty gap beside them at the 2-column breakpoint) */ @media (max-width: 767px) { .helpdesk-ticket-create .hdmx__ticket-new .fields.group { grid-template-columns: 1fr; } .helpdesk-ticket-create .hdmx__ticket-new .field.message, .helpdesk-ticket-create .hdmx__ticket-new .field.custom { grid-column: 1; } } /* ========================================================================== GWL My Questions — Swissup Askit account page (askit-customer-index) ========================================================================== */ .askit-customer-index .page-title-wrapper .page-title, .askit-customer-index .page-title-wrapper .page-title .base, .askit-customer-index .page-title-wrapper .page-title span, .askit-customer-index .page-title-wrapper h1.page-title { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 32px !important; font-weight: 300 !important; line-height: 40px !important; letter-spacing: -0.25px; color: var(--Blue-blue-10, #0A053D) !important; } .askit-customer-index .page-title-wrapper .account-page-subtitle { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 24px !important; color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important; opacity: 1 !important; } /* Empty-state card */ .askit-customer-index .gwl-questions-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 24px; padding: 24px; margin-bottom: 0; box-shadow: none; } .askit-customer-index .gwl-questions-empty__illustration { margin: 0; line-height: 0; } .askit-customer-index .gwl-questions-empty__illustration img { display: block; width: 145px; height: auto; max-width: 100%; } .askit-customer-index .gwl-questions-empty__text { margin: 0; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 20px !important; font-style: normal; font-weight: 400 !important; line-height: 26px !important; color: var(--Blue-blue-10, #0A053D) !important; } @media (max-width: 767px) { body.askit-customer-index.account .block-collapsible-nav .title, body.askit-customer-index.account .account-nav .title, body.askit-customer-index.account .sidebar-main .block-collapsible-nav .title, body.askit-customer-index.account .sidebar-main .account-nav .title { display: none !important; } .askit-customer-index .page-title-wrapper { margin-bottom: 24px !important; } body.askit-customer-index.account .breadcrumbs { margin-bottom: 8px !important; } body.askit-customer-index.account .page-main .page-title-wrapper .page-title, body.askit-customer-index.account .page-title-wrapper h1.page-title, body.askit-customer-index.account .page-title-wrapper .page-title .base, body.askit-customer-index.account .page-title-wrapper .page-title span { display: block !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 32px !important; font-style: normal; font-weight: 300 !important; line-height: 40px !important; letter-spacing: -1px !important; color: var(--Blue-blue-10, #0A053D) !important; } body.askit-customer-index.account .page-title-wrapper .account-page-subtitle { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 300 !important; line-height: 20px !important; color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important; opacity: 1 !important; } .askit-customer-index .gwl-questions-empty__text { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 400 !important; line-height: 20px !important; color: var(--Blue-blue-10, #0A053D) !important; } } /* Populated question list */ .askit-customer-index .gwl-questions-list .askit-items { list-style: none; margin: 0; padding: 0; } .askit-customer-index .gwl-questions-list .askit-items > .askit-item { padding: 16px 0; border-top: 1px solid var(--gwl-account-border); } .askit-customer-index .gwl-questions-list .askit-items > .askit-item:first-child { border-top: 0; padding-top: 0; } .askit-customer-index .gwl-questions-list .askit-item-avatar img { border-radius: 50%; } .askit-customer-index .gwl-questions-list .askit-item-title { margin: 0 0 6px; font-size: 13px; color: var(--gwl-account-muted); } .askit-customer-index .gwl-questions-list .askit-item-author { color: var(--gwl-account-title); font-weight: 600; } .askit-customer-index .gwl-questions-list .askit-item-status { display: inline-block; padding: 2px 8px; margin-inline-end: 6px; border-radius: 4px; background: var(--gwl-account-surface); color: var(--gwl-account-muted); font-size: 11px; text-transform: uppercase; } .askit-customer-index .gwl-questions-list .askit-item-parent { color: var(--gwl-account-blue); text-decoration: none; } .askit-customer-index .gwl-questions-list .askit-item-timestamp { color: var(--gwl-account-muted); } .askit-customer-index .gwl-questions-list .askit-item-body { margin: 0 0 8px; font-size: 14px; line-height: 22px; color: var(--gwl-account-text); } .askit-customer-index .gwl-questions-list .askit-item-same { margin: 0; } .askit-customer-index .gwl-questions-list .askit-item-vote a.action { color: var(--gwl-account-blue); text-decoration: none; font-size: 12px; font-weight: 600; } .askit-customer-index .gwl-questions-list .askit-item-vote a.action:hover { text-decoration: underline; } .askit-customer-index .gwl-questions-list .askit-item-vote span { font-size: 12px; color: var(--gwl-account-muted); } /* Expand/collapse answers trigger */ .askit-customer-index .gwl-questions-list .askit-item-actions { margin-top: 8px; } .askit-customer-index .gwl-questions-list .askit-item-trigger { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--gwl-account-blue); cursor: pointer; } .askit-customer-index .gwl-questions-list .askit-item-actions > input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .askit-customer-index .gwl-questions-list .askit-item-answers { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; } .askit-customer-index .gwl-questions-list .askit-item-actions > input[type="checkbox"]:checked ~ .askit-item-answers { max-height: none; overflow: visible; margin-top: 12px; } .askit-customer-index .gwl-questions-list .askit-item-answers .askit-item-answer { padding: 12px; margin-bottom: 8px; background: var(--gwl-account-surface); border-radius: 6px; border-inline-start: 3px solid var(--gwl-account-border); } /* ========================================================================== GWL Account Pagination — PLP-match restyle (My Questions / Ask It) No pagination CSS previously existed for this page — added from scratch, same spec as My Orders/My Returns/My Product Reviews above. listing.phtml prints the SAME full pager markup twice as two identical, unmodified
    elements — the first and last children of .block-content, with the question list in between — so :first-child/ :last-child (not a class) distinguish them. Matching the split used on every other account list page: item count + "Show N per page" limiter as their own row above the list (:first-child), page-number pagination as its own row below it (:last-child, hides count+limiter). ========================================================================== */ .askit-customer-index .gwl-questions-list .toolbar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px 24px; } .askit-customer-index .gwl-questions-list .toolbar .pages { display: none !important; } .askit-customer-index .gwl-questions-list .block-content > .toolbar:last-child { justify-content: flex-end; } .askit-customer-index .gwl-questions-list .block-content > .toolbar:last-child .pages { display: block !important; } .askit-customer-index .gwl-questions-list .block-content > .toolbar:last-child .toolbar-amount, .askit-customer-index .gwl-questions-list .block-content > .toolbar:last-child .limiter { display: none !important; } /* pager.phtml wraps everything in its own
    — see the matching comment on My Orders above for the full rationale. */ .askit-customer-index .gwl-questions-list .toolbar .pager { display: contents; } .askit-customer-index .gwl-questions-list .toolbar .toolbar-amount, .askit-customer-index .gwl-questions-list .toolbar .limiter { position: static !important; float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; } .askit-customer-index .gwl-questions-list .toolbar .toolbar-amount { order: -2; font-family: 'Work Sans', sans-serif; font-size: 13px; color: var(--gwl-account-muted); } .askit-customer-index .gwl-questions-list .toolbar .limiter { display: flex !important; align-items: center; gap: 8px; order: -1; } .askit-customer-index .gwl-questions-list .toolbar .limiter-label, .askit-customer-index .gwl-questions-list .toolbar .limiter-text { font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; color: #100f1b; } .askit-customer-index .gwl-questions-list .toolbar .limiter-options { appearance: none; min-width: 56px; height: 36px; padding: 6px 28px 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23100f1b' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 10px 6px; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600; color: #100f1b; box-shadow: none !important; cursor: pointer; } /* position:static overrides the parent theme's absolute-positioning of .pages at this breakpoint (see the matching comment on the My Orders pagination above) — without it .pages overflows off the card's right edge instead of shrinking/wrapping inside the toolbar row. */ .askit-customer-index .gwl-questions-list .toolbar .pages { display: block; position: static !important; flex: 1 1 auto; min-width: 0; margin: 0; } .askit-customer-index .gwl-questions-list .toolbar .pages-items { display: flex; flex-wrap: wrap; justify-content: flex-end; width: 100%; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; } .askit-customer-index .gwl-questions-list .toolbar .pages-items li.item { margin: 0 !important; } .askit-customer-index .gwl-questions-list .toolbar .pages-items a.page, .askit-customer-index .gwl-questions-list .toolbar .pages-items strong.page, .askit-customer-index .gwl-questions-list .toolbar .pages-items a.action { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #d9d9d9; border-radius: 4px; background-color: #ffffff; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; color: #100f1b; text-decoration: none; transition: all 0.2s ease; } .askit-customer-index .gwl-questions-list .toolbar .pages-items a.page:hover, .askit-customer-index .gwl-questions-list .toolbar .pages-items a.action:hover { border-color: #100f1b; color: #100f1b; } .askit-customer-index .gwl-questions-list .toolbar .pages-items li.current strong.page { background: #100f1b !important; border-color: #100f1b !important; color: #ffffff !important; font-weight: 600; } /* First/Last — icon-only squares (double chevron). Two template variants are in play across account pages depending on which pager.phtml override resolves (a stock-style copy uses a.page.first/.last; the theme's own Figma-pager copy — see its "gwl-plp-pager__next" class below — uses a.action.first/.last instead) — cover both so this looks right regardless of which one a given page/cache state serves. */ .askit-customer-index .gwl-questions-list .toolbar .pages-items a.page.first, .askit-customer-index .gwl-questions-list .toolbar .pages-items a.page.last, .askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.first, .askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.last { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; } .askit-customer-index .gwl-questions-list .toolbar .pages-items a.page.first, .askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.first { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M6.5 2 2.5 6l4 4M11.5 2 7.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .askit-customer-index .gwl-questions-list .toolbar .pages-items a.page.last, .askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.last { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M2.5 2 6.5 6l-4 4M7.5 2 11.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Previous — icon-only square (single chevron) */ .askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.previous { min-width: 36px; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 14px 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M7.5 2 3.5 6l4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Next — keeps visible text + trailing chevron */ .askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.next { width: auto; min-width: 0; padding: 0 34px 0 14px; background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2 8.5 6l-4 4' stroke='%23100f1b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; } .askit-customer-index .gwl-questions-list .toolbar .pages-items a.action.next span:not(.label) { display: inline !important; position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; margin: 0 !important; } /* The Figma-pager template variant (see comment above the First/Last rule) sidesteps that same clamp itself by using an instead of a for Next's visible text — but an unstyled is italic by default in every browser, and the sitewide PLP rule that normally resets it (".gwl-plp-pager__next-label") is scoped to body.gwl-plp-figma, which account pages don't carry. Reset it here too. */ .askit-customer-index .gwl-questions-list .toolbar .pages-items .gwl-plp-pager__next-label { display: inline; font-style: normal; } /* ========================================================================== GWL Privacy Tools — Swissup Gdpr account page (swissup_gdpr-customer-index) ========================================================================== */ .swissup_gdpr-customer-index .page-title-wrapper .page-title, .swissup_gdpr-customer-index .page-title-wrapper .page-title .base, .swissup_gdpr-customer-index .page-title-wrapper .page-title span, .swissup_gdpr-customer-index .page-title-wrapper h1.page-title { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 32px !important; font-weight: 300 !important; line-height: 40px !important; letter-spacing: -0.25px; color: var(--Blue-blue-10, #0A053D) !important; } .swissup_gdpr-customer-index .page-title-wrapper .account-page-subtitle { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 24px !important; color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important; opacity: 1 !important; } .swissup_gdpr-customer-index .gwl-privacy-card { display: flex; flex-direction: column; gap: 16px; background: #fff; border: 1px solid var(--Main-Secondary-Shades-Secondary-Shade-200, #E7E6EC); border-radius: 8px; padding: 24px; margin-bottom: 16px; box-shadow: none; } .swissup_gdpr-customer-index .gwl-privacy-card:last-child { margin-bottom: 0; } .account.swissup_gdpr-customer-index .gwl-privacy-card.block-dashboard-info .block-title, .swissup_gdpr-customer-index .gwl-privacy-card .block-title { margin: 0 !important; padding: 0 !important; border-bottom: 0 !important; } .swissup_gdpr-customer-index .gwl-privacy-card .block-title strong { display: block; margin: 0 !important; padding: 0 !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 18px !important; font-style: normal; font-weight: 500 !important; line-height: 24px !important; color: var(--Main-Text-Color, #100F1B) !important; } .swissup_gdpr-customer-index .gwl-privacy-card .block-content { margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 16px; } .swissup_gdpr-customer-index .gwl-privacy-card .block-content::before, .swissup_gdpr-customer-index .gwl-privacy-card .block-content::after { content: none !important; display: none !important; } .swissup_gdpr-customer-index .gwl-privacy-card .block-content p, .swissup_gdpr-customer-index .gwl-privacy-card .gwl-privacy-note { margin: 0 !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 300 !important; line-height: 22px !important; color: var(--Main-Button-Secondary, #100F1B) !important; } .swissup_gdpr-customer-index .gwl-privacy-card .grouped-consents { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .swissup_gdpr-customer-index .gwl-privacy-card .consent-form-title { display: block; margin: 0 0 6px; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px; font-weight: 500; line-height: 22px; color: var(--Main-Text-Color, #100F1B); } .swissup_gdpr-customer-index .gwl-privacy-card .list-consents { list-style: none; margin: 0; padding: 0; } .swissup_gdpr-customer-index .gwl-privacy-card .list-consents li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 14px; font-weight: 300; line-height: 20px; color: var(--Main-Button-Secondary, #100F1B); } .swissup_gdpr-customer-index .gwl-privacy-card .list-consents svg { width: 14px; height: 14px; fill: #2EC175; flex: 0 0 auto; } /* Delete Account card + trigger button */ .swissup_gdpr-customer-index .gwl-privacy-danger button.gwl-privacy-danger-btn, .swissup_gdpr-customer-index .gwl-privacy-danger button.gwl-privacy-danger-btn span { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 400 !important; line-height: 16px !important; text-align: center; color: var(--Sub-White, #FFF) !important; } .swissup_gdpr-customer-index .gwl-privacy-danger button.gwl-privacy-danger-btn { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; box-sizing: border-box; max-width: 175px; width: 100%; height: 40px; min-height: 40px; margin: 0; padding: 0 16px; background: var(--color-red-56, #EA4335) !important; border: 0; border-radius: 4px; cursor: pointer; } .swissup_gdpr-customer-index .gwl-privacy-danger button.gwl-privacy-danger-btn:hover { background: #d13c30 !important; } @media (max-width: 767px) { body.swissup_gdpr-customer-index.account .block-collapsible-nav .title, body.swissup_gdpr-customer-index.account .account-nav .title, body.swissup_gdpr-customer-index.account .sidebar-main .block-collapsible-nav .title, body.swissup_gdpr-customer-index.account .sidebar-main .account-nav .title { display: none !important; } .swissup_gdpr-customer-index .page-title-wrapper { margin-bottom: 24px !important; } body.swissup_gdpr-customer-index.account .breadcrumbs { margin-bottom: 8px !important; } body.swissup_gdpr-customer-index.account .page-main .page-title-wrapper .page-title, body.swissup_gdpr-customer-index.account .page-title-wrapper h1.page-title, body.swissup_gdpr-customer-index.account .page-title-wrapper .page-title .base, body.swissup_gdpr-customer-index.account .page-title-wrapper .page-title span { display: block !important; font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 32px !important; font-style: normal; font-weight: 300 !important; line-height: 40px !important; letter-spacing: -1px !important; color: var(--Blue-blue-10, #0A053D) !important; } body.swissup_gdpr-customer-index.account .page-title-wrapper .account-page-subtitle { font-family: var(--Typography-Font-1, 'Outfit'), sans-serif !important; font-size: 16px !important; font-style: normal; font-weight: 300 !important; line-height: 20px !important; color: var(--Main-Secondary-Shades-Secondary-Shade-500, #6C698B) !important; opacity: 1 !important; } .swissup_gdpr-customer-index .gwl-privacy-card { padding: 16px; } .swissup_gdpr-customer-index .gwl-privacy-card .block-title strong { font-size: 16px !important; line-height: 20px !important; } .swissup_gdpr-customer-index .gwl-privacy-card .block-content p, .swissup_gdpr-customer-index .gwl-privacy-card .gwl-privacy-note { font-size: 14px !important; line-height: 20px !important; } } /* ========================================================================== GWL Privacy Policy page (cms-privacy-policy-cookie-restriction-mode) UI-ONLY restyle — no content was removed or hidden; every existing section (Returns, Refunds, Cancellation, Warranty, Store Collection, Shipping & Delivery, Ajeer Installation, Express Delivery, campaign T&Cs, Cashback Program, and Privacy Policy) stays fully visible, in its original order and wording. The handful of section-question lines were wrapped in (verified byte-for-byte identical otherwise) so they can be styled as headings here. ========================================================================== */ /* Breadcrumb, title, and content all get the exact same max-width/padding spec, applied at the same nesting depth relative to their own parent — .page-main's own native responsive padding is neutralized here so it can't stack with this and throw the breadcrumb (a sibling of .page-main, so it never inherited that native padding to begin with) out of sync with the title/content (both nested inside .page-main). Verified via getComputedStyle() that all three now share an identical left edge. */ .cms-privacy-policy-cookie-restriction-mode .page-main { max-width: none !important; padding: 0 !important; } .cms-privacy-policy-cookie-restriction-mode .breadcrumbs, .cms-privacy-policy-cookie-restriction-mode .page-title-wrapper, .cms-privacy-policy-cookie-restriction-mode .column.main { max-width: 1280px; margin-left: auto !important; margin-right: auto !important; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } /* Breadcrumb — "Home > Privacy Policy" (inherits global account breadcrumb tokens) */ .cms-privacy-policy-cookie-restriction-mode .breadcrumbs { display: block !important; margin-top: 24px !important; margin-bottom: 20px !important; } /* Page title */ .cms-privacy-policy-cookie-restriction-mode .page-title-wrapper { margin-top: 0 !important; margin-bottom: 24px !important; } .cms-privacy-policy-cookie-restriction-mode .page-title-wrapper .page-title { font-family: 'Work Sans', sans-serif !important; font-size: 32px !important; line-height: 40px !important; font-weight: 700 !important; color: var(--gwl-account-text) !important; margin: 0 !important; } .cms-privacy-policy-cookie-restriction-mode .page-title-wrapper .page-title:after { content: none !important; } /* Content column */ .cms-privacy-policy-cookie-restriction-mode .column.main { padding-bottom: 60px; float: none; width: 100%; } .cms-privacy-policy-cookie-restriction-mode .column.main p { margin: 0 0 16px; font-family: 'Work Sans', sans-serif; font-size: 14px; line-height: 24px; color: var(--gwl-account-muted); } .cms-privacy-policy-cookie-restriction-mode .column.main p:empty { display: none; } .cms-privacy-policy-cookie-restriction-mode .column.main ul, .cms-privacy-policy-cookie-restriction-mode .column.main ol { margin: 0 0 16px; padding-inline-start: 20px; } .cms-privacy-policy-cookie-restriction-mode .column.main li { font-size: 14px; line-height: 24px; color: var(--gwl-account-muted); } .cms-privacy-policy-cookie-restriction-mode .column.main a { color: var(--gwl-account-blue); text-decoration: underline; } /* Section-question headings — the

    …

    lines. A divider sits above each one to visually separate Q&A groups, matching the mockup; the very first heading in the flow skips its own top divider/spacing. */ .cms-privacy-policy-cookie-restriction-mode .column.main p:has(> strong:only-child) { margin: 28px 0 12px; padding-top: 24px; border-top: 1px solid var(--gwl-account-border); font-size: 17px; line-height: 26px; font-weight: 600; color: var(--gwl-account-title); } .cms-privacy-policy-cookie-restriction-mode .column.main p:has(> strong:only-child):first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .cms-privacy-policy-cookie-restriction-mode .column.main p:has(> strong:only-child) strong { font-weight: 600; } /* ========================================================================== GWL Refund page (cms-refund) ========================================================================== */ /* Breadcrumb, title, and content share one alignment spec — same fix as the Privacy Policy page (.page-main's native padding neutralized so it can't double up with this, since .breadcrumbs is a sibling of .page-main while .page-title-wrapper/.column.main sit inside it). */ .cms-refund .page-main { max-width: none !important; padding: 0 !important; } .cms-refund .breadcrumbs, .cms-refund .page-title-wrapper, .cms-refund .column.main { max-width: 1280px; margin-left: auto !important; margin-right: auto !important; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } /* Breadcrumb — "Home > Refund" (inherits global account breadcrumb tokens) */ .cms-refund .breadcrumbs { display: block !important; margin-top: 24px !important; margin-bottom: 20px !important; } /* Page title */ .cms-refund .page-title-wrapper { margin-top: 0 !important; margin-bottom: 24px !important; } .cms-refund .page-title-wrapper .page-title { font-family: 'Work Sans', sans-serif !important; font-size: 32px !important; line-height: 40px !important; font-weight: 700 !important; color: var(--gwl-account-text) !important; margin: 0 !important; } .cms-refund .page-title-wrapper .page-title:after { content: none !important; } /* Content column */ .cms-refund .column.main { padding-bottom: 60px; float: none; width: 100%; } .cms-refund .column.main > p { margin: 0 0 16px; font-family: 'Work Sans', sans-serif; font-size: 14px; line-height: 24px; color: var(--gwl-account-muted); } .cms-refund .column.main h3 { margin: 28px 0 12px; padding-top: 24px; border-top: 1px solid var(--gwl-account-border); font-family: 'Work Sans', sans-serif; font-size: 17px; line-height: 26px; font-weight: 600; color: var(--gwl-account-title); } .cms-refund .column.main h3:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .cms-refund .column.main ul { list-style: none; margin: 0 0 16px; padding: 0; } .cms-refund .column.main ul li { position: relative; margin: 0 0 10px; padding-inline-start: 18px; font-size: 14px; line-height: 24px; color: var(--gwl-account-muted); } .cms-refund .column.main ul li:before { content: '\2022'; position: absolute; inset-inline-start: 4px; color: var(--gwl-account-blue); font-weight: 700; } .cms-refund .column.main ul li strong { color: var(--gwl-account-title); font-weight: 600; } .cms-refund .column.main a { color: var(--gwl-account-blue); text-decoration: underline; } /* ========================================================================== GWL My Orders — mobile pager (<=991px) — RTL mirror of saudiceramics.css Matches the desktop layout exactly: "Items X to Y of Z total" and the "Show N per page" limiter share one row above the order table/cards; the page-number pagination stays below the table/cards, same as desktop (there it's the parent theme's own CSS that absolutely-positions just .toolbar-amount/.limiter over the gap below the page title, leaving .pages in its normal place after the table). .order-products-toolbar and .pager are both plain wrapper divs with no styling of their own — display:contents unwraps them so their contents (.toolbar-amount, .pages, .limiter) become direct flex items of .block-order-history-card, sitting alongside .table-wrapper/ .gwl-recent-orders, and can be freely reordered independently of each other via `order`. */ @media (max-width: 991px) { .sales-order-history .gwl-order-history-shell { display: flex !important; flex-flow: row wrap !important; } .sales-order-history .gwl-order-history-shell .order-products-toolbar, .sales-order-history .gwl-order-history-shell .order-products-toolbar .pager { display: contents !important; } .sales-order-history .gwl-order-history-shell .toolbar-amount { order: -3 !important; flex: 1 1 0% !important; min-width: 0 !important; float: none !important; position: static !important; width: auto !important; max-width: none !important; margin: 0 !important; margin-block-end: 16px !important; } .sales-order-history .gwl-order-history-shell .limiter { order: -2 !important; flex: 0 0 auto !important; float: none !important; position: static !important; width: auto !important; max-width: none !important; margin: 0 0 16px !important; display: flex !important; align-items: center !important; gap: 8px !important; } .sales-order-history .gwl-order-history-shell .limiter-options { flex: 0 0 auto; } .sales-order-history .gwl-order-history-shell .block-order-history-card { order: 0 !important; flex: 1 1 100% !important; } .sales-order-history .gwl-order-history-shell .pages { order: 1 !important; flex: 1 1 100% !important; float: none !important; position: static !important; width: 100% !important; max-width: 100% !important; margin: 16px 0 0 !important; } /* The page-number list has no flex-wrap, so with several pages (1 2 3 4 5 → 15) it overflows past the card's right edge instead of fitting within it — wrap it onto as many rows as needed instead. */ .sales-order-history .gwl-order-history-shell .pages-items { flex-wrap: wrap !important; justify-content: flex-end !important; row-gap: 8px !important; } .sales-order-history .gwl-order-history-shell .pages-item-first, .sales-order-history .gwl-order-history-shell .pages-item-next, .sales-order-history .gwl-order-history-shell .pages-item-last { position: static !important; } } /* ========================================================================== GWL Create Account — Figma "My Account" design (customer_account_create) Pure CSS restyle of the stock Magento_Customer register.phtml. Same technique already used on customer_account_edit / customer_address_form: `display:contents` on both fieldsets promotes every .field to a direct child of one CSS Grid on the
    , so First/Last, Email/Mobile and Password/Confirm can be paired side-by-side across the two fieldsets without touching the template or the two-fieldset markup Magento/ Magedelight_SMSProfile/newsletter/remember-me functionality relies on. Desktop 2-column grid, mobile (<=767px) single column. EN + AR. ========================================================================== */ .customer-account-create .page-title-wrapper { width: 100% !important; max-width: 640px !important; float: none !important; margin: 56px auto 40px !important; padding: 0 !important; text-align: center; } /* Figma Create Account title — Outfit Light 300 / 32px / #0A053D (Dev Mode) */ .customer-account-create .page-title-wrapper .page-title, .customer-account-create .page-title-wrapper .page-title .base, .customer-account-create .page-title-wrapper .page-title span { font-family: 'Outfit', sans-serif !important; font-size: 32px !important; line-height: 40px !important; font-weight: 300 !important; color: #0A053D !important; margin: 0 !important; letter-spacing: 0 !important; } .customer-account-create .page-title-wrapper .page-title:after { content: none !important; } /* Figma subtitle — Outfit Regular 16/#0A053D (cool gray-violet in design; was #7A8FA3 blue-muted which looked off) */ .customer-account-create .page-title-wrapper .account-page-subtitle { margin: 12px 0 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important; color: #0A053D !important; opacity: 0.6; letter-spacing: 0 !important; } .customer-account-create .columns .column.main { width: 100% !important; max-width: 640px !important; float: none !important; margin: 0 auto 72px !important; } /* both fieldsets disappear from the box model — their .field children join the single grid on below, keeping fieldset/legend semantics and the OTP/newsletter/remember-me scripts untouched in the DOM */ .customer-account-create .form-create-account { width: 100% !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; background: none !important; border-radius: 0 !important; box-sizing: border-box !important; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); /* Figma: 16px row + column gap between fields */ gap: 16px 16px; align-items: start; font-family: 'Outfit', sans-serif; } .customer-account-create .form-create-account .fieldset.create.info, .customer-account-create .form-create-account .fieldset.create.account, .customer-account-create .form-create-account .fieldset.additional_info { display: contents; } .customer-account-create .form-create-account .fieldset > .legend, .customer-account-create .form-create-account .fieldset > br { display: none !important; } .customer-account-create .form-create-account .fieldset:after { display: none !important; } /* row order: First/Last, Email/Mobile, Password/Confirm, Newsletter, Remember Me, Terms, Actions — full-width checkbox rows after passwords */ .customer-account-create .form-create-account .field-name-firstname { order: 1; grid-column: span 3; } .customer-account-create .form-create-account .field-name-lastname { order: 2; grid-column: span 3; } .customer-account-create .form-create-account .fieldset.create.account > .field.required:not(.password):not(.confirmation):not(.choice) { order: 3; grid-column: span 3; } .customer-account-create .form-create-account .field-name-customer_mobile { order: 4; grid-column: span 3; } .customer-account-create .form-create-account .field.password { order: 5; grid-column: span 3; } .customer-account-create .form-create-account .field.confirmation { order: 6; grid-column: span 3; } .customer-account-create .form-create-account .field.choice.newsletter { order: 7; grid-column: 1 / -1; } .customer-account-create .form-create-account #remember-me-box { order: 8; grid-column: 1 / -1; } .customer-account-create .form-create-account .gwl-terms-condition { order: 7; grid-column: 1 / -1; } .customer-account-create .form-create-account .actions-toolbar { order: 8; grid-column: 1 / -1; } /* fields: label above input, Figma spacing/type */ .customer-account-create .form-create-account .field { margin: 0 !important; } .customer-account-create .form-create-account .field > .label { display: block; float: none !important; width: auto !important; margin: 0 0 8px !important; padding: 0 !important; text-align: start !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #0A053D !important; } /* Field labels (First Name, Password, etc.) — Figma weight 300 (was 500; that is what DevTools showed as not changing) */ .customer-account-create .form-create-account .field > .label > span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #0A053D !important; } .customer-account-create .form-create-account .field > .control { width: 100% !important; float: none !important; } .customer-account-create .form-create-account input.input-text { height: 44px; width: 100%; background: #fff; border: 1px solid #E5E8EE; border-radius: 4px; padding: 0 16px; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; box-sizing: border-box; } /* Figma P4 Regular — Bg-Inset #838384 / weight 300 */ .customer-account-create .form-create-account input.input-text::placeholder { color: #838384 !important; opacity: 1; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; } .customer-account-create .form-create-account input.input-text::-webkit-input-placeholder { color: #838384 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; opacity: 1; } .customer-account-create .form-create-account input.input-text::-moz-placeholder { color: #838384 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; opacity: 1; } .customer-account-create .form-create-account input.input-text:focus { border-color: var(--gwl-account-blue); box-shadow: none; outline: none; } /* Password / Confirm Password show-hide eye icon (Figma 20×20 SVG in register.phtml) */ .customer-account-create .form-create-account .field.password .control, .customer-account-create .form-create-account .field.confirmation .control { position: relative; } .customer-account-create .form-create-account .field.password input.input-text, .customer-account-create .form-create-account .field.confirmation input.input-text { padding-inline-end: 44px; } .customer-account-create .form-create-account .gwl-password-toggle { position: absolute; inset-inline-end: 14px; /* Center on the 44px input only (not label) — input is first meaningful box in .control */ top: 22px; transform: translateY(-50%); display: flex !important; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; margin: 0; background: none; border: 0; color: #0A053D; cursor: pointer; z-index: 2; line-height: 0; } .customer-account-create .form-create-account .gwl-password-toggle svg { display: block; width: 20px; height: 20px; } .customer-account-create .form-create-account .gwl-password-toggle:hover, .customer-account-create .form-create-account .gwl-password-toggle--visible { color: #0A053D; opacity: 0.75; } /* Figma has no password-strength meter / phone format note under the field. Idle .otp_generatenote used to hold   (~19px) and made Mobile taller than Email — that is why First/Last→Email gap looked different from Email/Mobile→Password. Hide only when empty; OTP JS can still fill it. */ .customer-account-create #password-strength-meter-container, .customer-account-create .profile-notice-phone { display: none !important; } .customer-account-create .form-create-account .otp_generatenote:empty { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; line-height: 0 !important; overflow: hidden !important; } .customer-account-create .password-strength-meter { height: 32px; line-height: 32px; padding: 0 12px; border-radius: 4px; font-family: 'Outfit', sans-serif; font-size: 12px; color: var(--gwl-account-text); } /* Mobile number: single bordered field — flag/dial-code inside the input */ .customer-account-create .form-create-account .field-name-customer_mobile .flag-top-section-with-input { position: relative !important; display: block; width: 100%; height: 44px; box-sizing: border-box; } .customer-account-create .form-create-account .field-name-customer_mobile .custom-flag-main-section { position: absolute !important; inset-inline-start: 1px; top: 1px; bottom: 1px; width: auto !important; height: auto !important; z-index: 2; pointer-events: auto; background: transparent !important; border: 0 !important; box-shadow: none !important; } .customer-account-create .form-create-account .field-name-customer_mobile .custom-flag-main-section .iti__flag-container { top: 0 !important; bottom: 0 !important; height: 100% !important; } .customer-account-create .form-create-account .field-name-customer_mobile .custom-flag-main-section .iti__selected-flag { height: 100% !important; padding: 0 8px 0 12px !important; display: flex !important; align-items: center !important; gap: 6px; background: transparent !important; border: 0 !important; box-shadow: none !important; } .customer-account-create .form-create-account .field-name-customer_mobile .custom-flag-main-section .iti__selected-dial-code { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 1 !important; color: #100F1B !important; margin: 0; padding: 0; display: inline-flex !important; align-items: center !important; } .customer-account-create .form-create-account .field-name-customer_mobile #customer_mobile { height: 44px !important; width: 100% !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-inline-start: 94px !important; padding-inline-end: 16px !important; border: 1px solid var(--gwl-account-border) !important; border-radius: 4px !important; box-sizing: border-box !important; background: #fff !important; } .customer-account-create .form-create-account .field-name-customer_mobile #customer_mobile:focus { border-color: var(--gwl-account-blue) !important; } /* Kill idle OTP spacing under the mobile input so grid row height matches Email */ .customer-account-create .form-create-account .field-name-customer_mobile .send_otp, .customer-account-create .form-create-account .field-name-customer_mobile .resendotp-block, .customer-account-create .form-create-account .field-name-customer_mobile .otp_text:empty { display: none !important; margin: 0 !important; } /* Checkboxes (Terms) — Figma square, darker stroke */ .customer-account-create .form-create-account .field.choice { display: flex !important; align-items: center !important; flex-wrap: wrap; gap: 10px; padding-top: 0; margin-top: 0 !important; } .customer-account-create .form-create-account .field.choice input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important; flex-shrink: 0; position: relative !important; top: 0 !important; margin: 0 !important; padding: 0 !important; width: 18px !important; height: 18px !important; border: 1.5px solid #0A053D !important; border-radius: 4px !important; background-color: #fff !important; background-repeat: no-repeat; background-position: center; background-size: 11px 11px; cursor: pointer; outline: none !important; box-shadow: none !important; } .customer-account-create .form-create-account .field.choice input[type="checkbox"]::after, .customer-account-create .form-create-account .field.choice input[type="checkbox"]::before { content: none !important; } .customer-account-create .form-create-account .field.choice input[type="checkbox"]:checked { background-color: var(--gwl-account-blue) !important; border-color: var(--gwl-account-blue) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.2 4.3 6.5 11 2.8 7.3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .customer-account-create .form-create-account .field.choice .label, .customer-account-create .form-create-account .field.choice .label > span { display: inline-flex !important; align-items: center; min-height: 18px; margin: 0 !important; padding: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; } /* keep link inside terms at 400 — overrides span 300 above */ .customer-account-create .form-create-account .field.choice .label > span > a { display: inline !important; font-weight: 400 !important; color: #160B8B !important; text-decoration: underline !important; } .customer-account-create .form-create-account .field.choice div.mage-error { flex: 1 0 100%; margin: 4px 0 0 !important; } /* Figma: "Terms of Services" + "Sign In" always underlined, brand blue */ .customer-account-create .form-create-account .gwl-terms-condition .label a, .customer-account-create .form-create-account #remember-me-box .tooltip.toggle { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-style: normal !important; font-weight: 400 !important; line-height: 20px !important; color: #160B8B !important; text-decoration: underline !important; cursor: pointer; } .customer-account-create .form-create-account .gwl-terms-condition .label a:hover, .customer-account-create .form-create-account #remember-me-box .tooltip.toggle:hover { text-decoration: underline; } /* Actions: full-width primary button, centered "Already have an account? Sign In" */ .customer-account-create .form-create-account .actions-toolbar { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; margin: 8px 0 0 !important; width: 100% !important; } .customer-account-create .form-create-account .actions-toolbar .primary { width: 100% !important; float: none !important; margin: 0 !important; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar .primary button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary span, .customer-account-create .form-create-account .actions-toolbar .primary button.action.submit.primary span { font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar .primary button.action.submit.primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; height: 40px !important; min-height: 40px !important; background: #160B8B !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; box-shadow: none !important; cursor: pointer; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary:hover, .customer-account-create .form-create-account .actions-toolbar .primary button.action.submit.primary:hover { background: #221796 !important; } .customer-account-create .form-create-account .actions-toolbar .secondary { float: none !important; margin: 24px auto 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 4px !important; width: auto !important; max-width: 100%; font-family: 'Outfit', sans-serif; font-size: 14px; line-height: 20px; white-space: nowrap; text-align: center; } .customer-account-create .form-create-account .actions-toolbar .action.back { display: inline !important; float: none !important; margin: 0 !important; padding: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-style: normal !important; font-weight: 400 !important; line-height: 20px !important; color: #160B8B !important; text-decoration: underline !important; cursor: pointer; vertical-align: baseline; } .customer-account-create .form-create-account .actions-toolbar .action.back:hover { text-decoration: underline !important; } .customer-account-create .form-create-account .actions-toolbar .action.back span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; color: #160B8B !important; } /* Already have an account? — P4 Regular #100F1B / 300 */ .customer-account-create .form-create-account .actions-toolbar .gwl-signin-prompt { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-style: normal !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; text-align: center; } /* Mobile (<=767px): single column — Figma mobile Create Account */ @media (max-width: 767px) { .customer-account-create .page-title-wrapper, .customer-account-create .columns .column.main { max-width: none !important; padding-inline: 16px; } .customer-account-create .page-title-wrapper { margin: 32px auto 28px !important; } .customer-account-create .columns .column.main { margin-bottom: 48px !important; } .customer-account-create .page-title-wrapper .page-title, .customer-account-create .page-title-wrapper .page-title .base, .customer-account-create .page-title-wrapper .page-title span { font-size: 28px !important; line-height: 36px !important; font-weight: 300 !important; color: #0A053D !important; } .customer-account-create .page-title-wrapper .account-page-subtitle { font-size: 14px !important; line-height: 22px !important; margin-top: 8px !important; color: #0A053D !important; opacity: 0.6; } .customer-account-create .form-create-account { grid-template-columns: 1fr; gap: 16px; } .customer-account-create .form-create-account .field-name-firstname, .customer-account-create .form-create-account .field-name-lastname, .customer-account-create .form-create-account .fieldset.create.account > .field.required:not(.password):not(.confirmation):not(.choice), .customer-account-create .form-create-account .field-name-customer_mobile, .customer-account-create .form-create-account .field.password, .customer-account-create .form-create-account .field.confirmation, .customer-account-create .form-create-account .gwl-terms-condition { grid-column: 1 / -1; } .customer-account-create .form-create-account .actions-toolbar { gap: 0 !important; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar .primary button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary span { font-size: 15px !important; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar .primary button.action.submit.primary { height: 40px !important; min-height: 40px !important; } } /* ===== Figma typography hard-lock (weights) — beat styles-m/l leftovers ===== Critical: Magento wraps "By continuing…" in , and `.field > .label > span { font-weight:500 }` was winning over the label rule. Fields (inputs + placeholders) + By continuing text = 300. Terms / Sign In links stay 400. */ .customer-account-create .form-create-account input.input-text, .customer-account-create .form-create-account input.input-text[type="text"], .customer-account-create .form-create-account input.input-text[type="email"], .customer-account-create .form-create-account input.input-text[type="password"], .customer-account-create .form-create-account input.input-text[type="tel"], .customer-account-create .form-create-account #customer_mobile, .customer-account-create .form-create-account .iti__selected-dial-code { font-weight: 300 !important; } .customer-account-create .form-create-account input.input-text::placeholder, .customer-account-create .form-create-account input.input-text::-webkit-input-placeholder, .customer-account-create .form-create-account input.input-text::-moz-placeholder, .customer-account-create .form-create-account #customer_mobile::placeholder, .customer-account-create .form-create-account #customer_mobile::-webkit-input-placeholder { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #838384 !important; opacity: 1 !important; } /* By continuing text (label + inner span) — NOT the Terms link */ .customer-account-create .form-create-account .field.choice .label, .customer-account-create .form-create-account .field.choice .label > span, .customer-account-create .form-create-account .gwl-terms-condition .label, .customer-account-create .form-create-account .gwl-terms-condition .label > span, .customer-account-create .form-create-account .field.choice.gwl-terms-condition > .label, .customer-account-create .form-create-account .field.choice.gwl-terms-condition > .label > span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; } .customer-account-create .form-create-account .gwl-terms-condition .label a, .customer-account-create .form-create-account .gwl-terms-condition .label a span, .customer-account-create .form-create-account .actions-toolbar .action.back, .customer-account-create .form-create-account .actions-toolbar .action.back span { font-weight: 400 !important; color: #160B8B !important; } .customer-account-create .form-create-account .actions-toolbar .gwl-signin-prompt { font-weight: 300 !important; color: #100F1B !important; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary span, body.customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, body.customer-account-create .form-create-account .actions-toolbar button.action.submit.primary span { font-weight: 400 !important; } /* ========================================================================== GWL Sign In — Figma "Sign In to Your Account" design (customer_account_login) Same approach as the Create Account page: title/subtitle via layout XML (page.main.title + a child block), pill-style Email/Mobile toggle and a per-field password eye icon via a theme override of Magedelight_SMSProfile::login.phtml (the template this page actually renders — see that file's own header comment), everything else pure CSS. Single centered column (720px), stacking the stock 2-column float layout (.login-container .block at 48%/float) down to one. Desktop + mobile (<=767px). EN + AR. Every selector below is scoped to :is(.customer-account-login, .multishipping-checkout-login) — the multishipping checkout's guest login step (Magento_Multishipping's block-authentication popup) renders the exact same Magedelight_SMSProfile login.phtml form (login.phtml doesn't branch on route), just inside different KO-driven wrapper markup (.block-authentication instead of .login-container). Reusing the same rule set here keeps both pages' UI identical without duplicating ~60 rules; wherever the multishipping wrapper's markup doesn't match a given selector (e.g. ".login-container .block", which that page's DOM doesn't have), the rule is simply a no-op there. ========================================================================== */ :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper { width: 100% !important; max-width: 485px !important; float: none !important; margin: 56px auto 40px !important; padding: 0 !important; text-align: center; } /* Figma Sign In title — Outfit Light 300 / 32 / #0A053D (same as Create Account) */ :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title, :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title .base, :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title span { font-family: 'Outfit', sans-serif !important; font-size: 32px !important; line-height: 40px !important; font-weight: 300 !important; color: #0A053D !important; margin: 0 !important; letter-spacing: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title:after { content: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .account-page-subtitle { margin: 12px 0 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important; color: #0A053D !important; opacity: 0.6; letter-spacing: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .columns .column.main { width: 100% !important; max-width: 485px !important; float: none !important; margin: 0 auto 72px !important; } :is(.customer-account-login, .multishipping-checkout-login) .login-container { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: none !important; border-radius: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .login-container .block { width: 100% !important; float: none !important; clear: both !important; margin: 0 0 16px !important; } :is(.customer-account-login, .multishipping-checkout-login) .login-container .block:last-child { margin-bottom: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-title { display: none !important; } /* Email/Mobile pill toggle */ :is(.customer-account-login, .multishipping-checkout-login) .field.reset_type_login { text-align: center; margin: 0 0 24px !important; } :is(.customer-account-login, .multishipping-checkout-login) .field.reset_type_login > .label { display: none !important; } :is(.customer-account-login, .multishipping-checkout-login) #reset_type_login { display: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .gwl-login-type-toggle { display: inline-flex; gap: 4px; padding: 4px; background: #F7F9FB; border-radius: 4px; } :is(.customer-account-login, .multishipping-checkout-login) .gwl-login-type-btn { min-width: 120px; height: 40px; padding: 0 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: transparent; border: 0; border-radius: 4px; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1 !important; color: #100F1B !important; cursor: pointer; box-sizing: border-box; } :is(.customer-account-login, .multishipping-checkout-login) .gwl-login-type-btn--active { background: #0A053D !important; color: #fff !important; font-weight: 400 !important; } /* fields */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .fieldset.login { margin: 0; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field { margin: 0 0 16px !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field > .label, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field .form-field__label { display: block; float: none !important; width: auto !important; margin: 0 0 8px !important; padding: 0 !important; text-align: start !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #0A053D !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field > .label > span, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field .form-field__label > span { display: inline; margin: 0 !important; padding: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #0A053D !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.required .form-field__label:after, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.required > .label:after { content: '*'; color: #F04438; margin-inline-start: 4px; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field > .control, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field .form-field__control { width: 100% !important; float: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login input.input-text, :is(.customer-account-login, .multishipping-checkout-login) .form-login input.form-field__input { height: 44px !important; width: 100%; max-width: 485px; background: #fff; border: 1px solid #E5E8EE !important; border-radius: 4px !important; padding: 0 16px; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; box-sizing: border-box; } :is(.customer-account-login, .multishipping-checkout-login) .form-login input.input-text::placeholder, :is(.customer-account-login, .multishipping-checkout-login) .form-login input.form-field__input::placeholder, :is(.customer-account-login, .multishipping-checkout-login) .form-login input.input-text::-webkit-input-placeholder, :is(.customer-account-login, .multishipping-checkout-login) .form-login input.form-field__input::-webkit-input-placeholder { color: #838384 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; opacity: 1 !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login input.input-text:focus, :is(.customer-account-login, .multishipping-checkout-login) .form-login input.form-field__input:focus { border-color: #160B8B !important; box-shadow: none; outline: none; } /* Mobile number: flag/dial vertically centered in 44px field (input lives inside .custom-flag-main-section — keep wrapper relative, not absolute) */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .control.mobile { position: relative !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .control.mobile .custom-flag-main-section { position: relative !important; display: block !important; width: 100% !important; max-width: 485px; height: 44px !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .control.mobile .iti__flag-container { position: absolute !important; inset-inline-start: 0; top: 0 !important; bottom: 0 !important; height: 100% !important; z-index: 2; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .control.mobile .iti__selected-flag { height: 100% !important; padding: 0 8px 0 12px !important; display: flex !important; align-items: center !important; gap: 6px; background: transparent !important; border: 0 !important; box-shadow: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .control.mobile .iti__selected-dial-code { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 1 !important; color: #100F1B !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .control.mobile .iti__flag { flex-shrink: 0; } :is(.customer-account-login, .multishipping-checkout-login) .form-login #login_mobile { height: 44px !important; width: 100% !important; max-width: 485px; padding-top: 0 !important; padding-bottom: 0 !important; padding-inline-start: 94px !important; padding-inline-end: 16px !important; border: 1px solid #E5E8EE !important; border-radius: 4px !important; box-sizing: border-box !important; line-height: 20px !important; } :is(.customer-account-login, .multishipping-checkout-login) .profile-notice-phone { display: none !important; } /* OTP action buttons */ :is(.customer-account-login, .multishipping-checkout-login) .send_otp_login.action.primary, :is(.customer-account-login, .multishipping-checkout-login) .resendotp.action.primary, :is(.customer-account-login, .multishipping-checkout-login) .verif_otp_login.action.primary, .customer-account-create .send_otp.action.primary, .customer-account-create .resendotp.action.primary, .customer-account-create .verif_otp.action.primary { align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; height: 40px; background: #160B8B !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer; } :is(.customer-account-login, .multishipping-checkout-login) .send_otp_login.action.primary:hover, :is(.customer-account-login, .multishipping-checkout-login) .resendotp.action.primary:hover, :is(.customer-account-login, .multishipping-checkout-login) .verif_otp_login.action.primary:hover, .customer-account-create .send_otp.action.primary:hover, .customer-account-create .resendotp.action.primary:hover, .customer-account-create .verif_otp.action.primary:hover { background: #221796 !important; } :is(.customer-account-create, .customer-account-login) .otp_generatenote { display: block; text-align: center; font-family: 'Outfit', sans-serif; font-size: 13px; color: #A19FA8; } :is(.customer-account-create, .customer-account-login) .resendotp-block { margin-top: 12px; } :is(.customer-account-create, .customer-account-login) .resend-wait { font-family: 'Outfit', sans-serif; font-size: 13px; color: #A19FA8; margin: 0 0 4px; } :is(.customer-account-create, .customer-account-login) .resendlink { margin: 0 0 8px; } :is(.customer-account-create, .customer-account-login) .resendlink button { width: auto; height: auto; background: none !important; border: 0 !important; color: #160B8B !important; font-family: 'Outfit', sans-serif !important; font-size: 13px; font-weight: 400 !important; padding: 0; text-decoration: underline; box-shadow: none !important; cursor: pointer; } :is(.customer-account-create, .customer-account-login) .resend-link-attempt { font-size: 13px; color: #A19FA8; margin: 0 0 8px; } :is(.customer-account-create, .customer-account-login) .field-name-otp .label, :is(.customer-account-create, .customer-account-login) .field-name-otp .label span { margin-top: 8px !important; margin-bottom: 8px !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #0A053D !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field-name-otp #otp { height: 44px !important; width: 100% !important; max-width: 485px; border: 1px solid #E5E8EE !important; border-radius: 4px !important; padding: 0 16px !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; color: #100F1B !important; box-sizing: border-box !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field-name-otp #otp::placeholder { color: #838384 !important; font-weight: 300 !important; } :is(.customer-account-create, .customer-account-login) .otp_text { display: block; font-size: 13px; font-weight: 400; margin-top: 8px; } /* Password eye */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.password .control { position: relative; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.password input.input-text { padding-inline-end: 44px; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-password-toggle { position: absolute; inset-inline-end: 14px; top: 22px; transform: translateY(-50%); display: flex !important; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; margin: 0; background: none; border: 0; color: #100F1B; cursor: pointer; z-index: 2; line-height: 0; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-password-toggle svg { display: block; width: 20px; height: 20px; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-password-toggle:hover, :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-password-toggle--visible { color: #100F1B; opacity: 0.75; } /* Remember Me + Forgot Password */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-remember-forgot-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; white-space: nowrap; gap: 12px; margin: 0 0 24px !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-remember-forgot-row #remember-me-box { margin: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-remember-forgot-row .tooltip.content { white-space: normal; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .action.remind, :is(.customer-account-login, .multishipping-checkout-login) .form-login .action.remind span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; color: #160B8B !important; text-decoration: underline !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .action.remind:hover { text-decoration: underline !important; } /* Checkbox Remember Me */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice { display: flex !important; align-items: center !important; flex-wrap: wrap; gap: 8px; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important; flex-shrink: 0; position: relative !important; top: 0 !important; margin: 0 !important; padding: 0; width: 18px !important; height: 18px !important; border: 1px solid #CECDD8 !important; border-radius: 0 !important; background-color: #FFF !important; background-repeat: no-repeat; background-position: center; background-size: 11px 11px; cursor: pointer; outline: none !important; box-shadow: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice input[type="checkbox"]::after, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice input[type="checkbox"]::before { content: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice input[type="checkbox"]:checked { background-color: #160B8B !important; border-color: #160B8B !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.2 4.3 6.5 11 2.8 7.3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice .label, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice .label > span { display: inline-flex !important; align-items: center; min-height: 18px; margin: 0 !important; padding: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; } /* Figma Sign In: Remember Me only — hide Magento Persistent "What's this?" */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice .tooltip.toggle, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice .tooltip.content, :is(.customer-account-login, .multishipping-checkout-login) .form-login #remember-me-box .tooltip { display: none !important; } /* Mobile OTP mode: Figma shows phone + CTA only (no Remember / Forgot) */ :is(.customer-account-login, .multishipping-checkout-login) .form-login.gwl-login-mode-mobile .gwl-remember-forgot-row { display: none !important; } /* Sign In / Login using OTP button */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar { display: block; margin: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar .primary { width: 100%; float: none !important; margin: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary, :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary span { font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; height: 40px; background: #160B8B !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; box-shadow: none !important; cursor: pointer; } /* Login using OTP stays disabled until OTP verified (match migrate behavior) */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary:disabled, :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary[disabled] { background: #160B8B !important; color: #fff !important; opacity: 0.45 !important; cursor: not-allowed !important; pointer-events: none; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary:hover:not(:disabled) { background: #221796 !important; } /* Don't have an account? Create Account */ :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer .block-content > p { display: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer .actions-toolbar { display: flex; justify-content: center; margin: 24px 0 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer .actions-toolbar .primary { display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: 4px; float: none !important; margin: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer .gwl-create-account-prompt { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer a.action.create.primary, :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer a.action.create.primary span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; color: #160B8B !important; text-decoration: underline !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer a.action.create.primary:hover { text-decoration: underline !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer a.action.create.primary span { display: inline; } /* Mobile Sign In */ @media (max-width: 767px) { :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper, :is(.customer-account-login, .multishipping-checkout-login) .columns .column.main { max-width: none !important; padding-inline: 16px; } :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper { margin: 32px auto 28px !important; } :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title, :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title .base, :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title span { font-size: 28px !important; line-height: 36px !important; font-weight: 300 !important; color: #0A053D !important; } :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .account-page-subtitle { font-size: 14px !important; line-height: 22px !important; margin-top: 8px !important; color: #0A053D !important; opacity: 0.6; } :is(.customer-account-login, .multishipping-checkout-login) .columns .column.main { margin-bottom: 48px !important; } :is(.customer-account-login, .multishipping-checkout-login) .gwl-login-type-btn { min-width: 0; flex: 1 1 0; } :is(.customer-account-login, .multishipping-checkout-login) .gwl-login-type-toggle { width: 100%; max-width: 100%; box-sizing: border-box; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary { height: 40px !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary, :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary span { font-size: 15px !important; } } /* ===== Figma typography hard-lock (weights) — beat styles-m/l leftovers ===== Critical: Magento wraps "By continuing…" in , and `.field > .label > span { font-weight:500 }` was winning over the label rule. Fields (inputs + placeholders) + By continuing text = 300. Terms / Sign In links stay 400. */ .customer-account-create .form-create-account input.input-text, .customer-account-create .form-create-account input.input-text[type="text"], .customer-account-create .form-create-account input.input-text[type="email"], .customer-account-create .form-create-account input.input-text[type="password"], .customer-account-create .form-create-account input.input-text[type="tel"], .customer-account-create .form-create-account #customer_mobile, .customer-account-create .form-create-account .iti__selected-dial-code { font-weight: 300 !important; } .customer-account-create .form-create-account input.input-text::placeholder, .customer-account-create .form-create-account input.input-text::-webkit-input-placeholder, .customer-account-create .form-create-account input.input-text::-moz-placeholder, .customer-account-create .form-create-account #customer_mobile::placeholder, .customer-account-create .form-create-account #customer_mobile::-webkit-input-placeholder { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #838384 !important; opacity: 1 !important; } /* By continuing text (label + inner span) — NOT the Terms link */ .customer-account-create .form-create-account .field.choice .label, .customer-account-create .form-create-account .field.choice .label > span, .customer-account-create .form-create-account .gwl-terms-condition .label, .customer-account-create .form-create-account .gwl-terms-condition .label > span, .customer-account-create .form-create-account .field.choice.gwl-terms-condition > .label, .customer-account-create .form-create-account .field.choice.gwl-terms-condition > .label > span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; } .customer-account-create .form-create-account .gwl-terms-condition .label a, .customer-account-create .form-create-account .gwl-terms-condition .label a span, .customer-account-create .form-create-account .actions-toolbar .action.back, .customer-account-create .form-create-account .actions-toolbar .action.back span { font-weight: 400 !important; color: #160B8B !important; } .customer-account-create .form-create-account .actions-toolbar .gwl-signin-prompt { font-weight: 300 !important; color: #100F1B !important; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary span, body.customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, body.customer-account-create .form-create-account .actions-toolbar button.action.submit.primary span { font-weight: 400 !important; } /* ========================================================================== GWL Sign In popup — Magento_Customer's "block-authentication" popup, same colors/typography as the full Sign In page above. This popup can be triggered from ANY page (e.g. the guest "Sign In" button in the mobile hamburger's Account tab — see .nav-sections #store\.links earlier in this file), so unlike the full page it can't be scoped to a body class — scoped to .block-authentication itself instead. Its markup is the stock Magento_Customer::account/authentication-popup template, not the Magedelight override the full login page uses: no Email/Mobile toggle or password-visibility eye icon exists here, the Sign In button carries class "secondary" (not "primary"), and the Create Account link carries class "action-register" (not "action create") — so this uses its own selectors rather than broadening the :is(...) list above, to avoid also matching toggle/eye-icon rules with nothing to bind to in this simpler form. The "Proceed as a new customer" heading/benefits list staying hidden and "Create an Account" sitting next to "Forgot Your Password?" is already stock Magento behavior for this modal context — untouched here; only colors/ typography change. */ .block-authentication .block-customer-login .form-login .field { margin: 0 0 20px; } .block-authentication .block-customer-login .form-login .field > .label { display: block; margin: 0 0 8px; font-size: 16px; font-weight: 400; color: var(--gwl-account-title); } .block-authentication .block-customer-login .form-login .field.required > .label:after { color: var(--gwl-account-danger); } .block-authentication .block-customer-login .form-login .field > .control { width: 100%; } .block-authentication .block-customer-login .form-login input.input-text { height: 44px; max-width: 485px; width: 100%; background: #fff; border: 1px solid var(--gwl-account-border); border-radius: 6px; padding: 0 16px; font-size: 14px; color: var(--gwl-account-text); box-sizing: border-box; } .block-authentication .block-customer-login .form-login input.input-text:focus { border-color: var(--gwl-account-blue); box-shadow: none; outline: none; } .block-authentication .block-customer-login .form-login .actions-toolbar button.action-login { width: 100%; height: 40px; background: var(--gwl-account-blue) !important; border: 0 !important; border-radius: 6px !important; color: #fff !important; font-size: 15px; font-weight: 600; box-shadow: none !important; cursor: pointer; } .block-authentication .block-customer-login .form-login .actions-toolbar button.action-login:hover { background: #221796 !important; } .block-authentication .block-customer-login .form-login .actions-toolbar .secondary a.action, .block-authentication .block-new-customer .actions-toolbar .primary a.action-register { font-size: 14px; font-weight: 600; color: var(--gwl-account-blue) !important; text-decoration: none; } .block-authentication .block-customer-login .form-login .actions-toolbar .secondary a.action:hover, .block-authentication .block-new-customer .actions-toolbar .primary a.action-register:hover { text-decoration: underline; } /* Mobile (<=767px): tighter side padding — title/subtitle/button tokens live in the earlier Sign In @media block (28/36 title, 48px button). Keep Remember + Forgot on one row (Figma mobile Email). */ @media (max-width: 767px) { :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper, :is(.customer-account-login, .multishipping-checkout-login) .columns .column.main { max-width: none !important; padding-inline: 16px; } :is(.customer-account-login, .multishipping-checkout-login) .gwl-login-type-toggle { width: 100%; } :is(.customer-account-login, .multishipping-checkout-login) .gwl-login-type-btn { flex: 1 1 0; min-width: 0; padding: 0 12px; } } /* ========================================================================== GWL Forgot Password — Figma tokens (match Sign In / Create Account) Outfit + #0A053D / #838384 / #160B8B; inputs 44px; form 485px. Captcha kept (not in Figma) — label/input match other fields. EN + AR. ========================================================================== */ .customer-account-forgotpassword .page-title-wrapper { width: 100% !important; max-width: 485px !important; float: none !important; margin: 56px auto 40px !important; padding: 0 !important; text-align: center; } .customer-account-forgotpassword .page-title-wrapper .page-title, .customer-account-forgotpassword .page-title-wrapper .page-title .base, .customer-account-forgotpassword .page-title-wrapper .page-title span { font-family: 'Outfit', sans-serif !important; font-size: 32px !important; line-height: 40px !important; font-weight: 300 !important; color: #0A053D !important; margin: 0 !important; letter-spacing: 0 !important; } .customer-account-forgotpassword .page-title-wrapper .page-title:after { content: none !important; } .customer-account-forgotpassword .page-title-wrapper .account-page-subtitle { margin: 12px 0 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important; color: #0A053D !important; opacity: 0.6; letter-spacing: 0 !important; } .customer-account-forgotpassword .columns .column.main { width: 100% !important; max-width: 485px !important; float: none !important; margin: 0 auto 72px !important; } .customer-account-forgotpassword .login-container { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: none !important; border-radius: 0 !important; } .customer-account-forgotpassword .login-container .block { width: 100% !important; float: none !important; clear: both !important; margin: 0 !important; } .customer-account-forgotpassword .block-title { display: none !important; } .customer-account-forgotpassword .form.password.forget { background: none !important; padding: 0 !important; border-radius: 0 !important; box-sizing: border-box !important; width: 100% !important; max-width: 485px !important; margin: 0 auto !important; } .customer-account-forgotpassword .form.password.forget .fieldset { margin: 0 !important; } .customer-account-forgotpassword .form.password.forget > .fieldset > .field.note { text-align: center; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; color: #A19FA8 !important; margin: 0 0 16px !important; } .customer-account-forgotpassword #reset_type { display: none !important; } .customer-account-forgotpassword .field.email, .customer-account-forgotpassword .field.mobile > .form-field, .customer-account-forgotpassword .field.mobile > .profile-notice-phone { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Hide Mobile OTP UI until Mobile mode is active (button lives outside clipped .form-field) */ .customer-account-forgotpassword .field.mobile > .field { display: none !important; } .customer-account-forgotpassword .md-forget-password[data-gwl-reset-type="Mobile"] .field.mobile > .field { display: block !important; } .customer-account-forgotpassword .form.password.forget .field { margin: 0 0 16px !important; } .customer-account-forgotpassword .form.password.forget .field > .label, .customer-account-forgotpassword .form.password.forget .field .form-field__label, .customer-account-forgotpassword .form.password.forget .field > .label > span, .customer-account-forgotpassword .form.password.forget .field .form-field__label > span, .customer-account-forgotpassword .form.password.forget .field.captcha > .label, .customer-account-forgotpassword .form.password.forget .field.captcha > .label > span { display: block; float: none !important; width: auto !important; margin: 0 0 8px !important; padding: 0 !important; text-align: start !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #0A053D !important; } .customer-account-forgotpassword .form.password.forget .field > .label > span, .customer-account-forgotpassword .form.password.forget .field .form-field__label > span, .customer-account-forgotpassword .form.password.forget .field.captcha > .label > span { display: inline; margin: 0 !important; } .customer-account-forgotpassword .form.password.forget .field.required .form-field__label:after, .customer-account-forgotpassword .form.password.forget .field.required > .label:after { content: '*'; color: #F04438; margin-inline-start: 4px; } .customer-account-forgotpassword .form.password.forget .field > .control, .customer-account-forgotpassword .form.password.forget .field .form-field__control, .customer-account-forgotpassword .form.password.forget .field.captcha .control.captcha { width: 100% !important; float: none !important; } .customer-account-forgotpassword .form.password.forget input.input-text, .customer-account-forgotpassword .form.password.forget input.form-field__input, .customer-account-forgotpassword .form.password.forget .field.captcha input.input-text { height: 44px !important; width: 100%; max-width: 485px; background: #fff; border: 1px solid #E5E8EE !important; border-radius: 4px !important; padding: 0 16px; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; box-sizing: border-box; } .customer-account-forgotpassword .form.password.forget input.input-text::placeholder, .customer-account-forgotpassword .form.password.forget input.form-field__input::placeholder, .customer-account-forgotpassword .form.password.forget input.input-text::-webkit-input-placeholder, .customer-account-forgotpassword .form.password.forget input.form-field__input::-webkit-input-placeholder { color: #838384 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; opacity: 1 !important; } .customer-account-forgotpassword .form.password.forget input.input-text:focus, .customer-account-forgotpassword .form.password.forget input.form-field__input:focus, .customer-account-forgotpassword .form.password.forget .field.captcha input.input-text:focus { border-color: #160B8B !important; box-shadow: none; outline: none; } /* Captcha image row under the styled input */ .customer-account-forgotpassword .form.password.forget .field.captcha .captcha-image { margin-top: 8px; } .customer-account-forgotpassword .form.password.forget .field.captcha .captcha-img { border-radius: 4px; border: 1px solid #E5E8EE; } .customer-account-forgotpassword #password-strength-meter-container { display: none !important; } .customer-account-forgotpassword .form.password.forget button.first-attempt.send_otp_password { align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; height: 40px; margin: 8px 0 0 !important; background: #160B8B !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer; } .customer-account-forgotpassword .form.password.forget button.first-attempt.send_otp_password:hover { background: #221796 !important; } .customer-account-forgotpassword .form.password.forget .otp_generatenote:empty, .customer-account-forgotpassword .form.password.forget .otp_generatenote:blank { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .customer-account-forgotpassword .form.password.forget .otp_generatenote { display: block; text-align: center; font-family: 'Outfit', sans-serif; font-size: 13px; color: #A19FA8; } .customer-account-forgotpassword .gwl-sr-only, .customer-account-forgotpassword .gwl-otp-real { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .customer-account-forgotpassword .field-name-otp { text-align: center; } .customer-account-forgotpassword .md-forget-password[data-gwl-fp-step="otp"] .gwl-fp-identifier, .customer-account-forgotpassword .md-forget-password[data-gwl-fp-step="password"] .gwl-fp-identifier { display: none !important; } .customer-account-forgotpassword .md-forget-password[data-gwl-fp-step="otp"] .field.captcha.required[role="user_forgotpassword"] { display: none !important; } .customer-account-forgotpassword .gwl-otp-boxes { display: flex; justify-content: center; gap: 10px; margin: 4px 0 40px; } .customer-account-forgotpassword .gwl-otp-box { width: 48px; height: 48px; border: 1px solid #58575F !important; border-radius: 4px !important; background: #FFF; text-align: center; font-family: 'Outfit', sans-serif !important; font-size: 20px !important; font-style: normal !important; font-weight: 400 !important; line-height: 24px !important; letter-spacing: -0.25px !important; color: #100F1B !important; padding: 0; box-sizing: border-box; } .customer-account-forgotpassword .gwl-otp-box:focus { border-color: #160B8B !important; outline: none; box-shadow: none; } .customer-account-forgotpassword .gwl-otp-actions { display: flex; flex-direction: row; align-items: stretch; gap: 24px; } .customer-account-forgotpassword .gwl-otp-actions button.verif_otp_password { flex: 1 1 0; width: auto; } .customer-account-forgotpassword .gwl-otp-actions .gwl-fp-mobile-back { padding-top: 0 !important; padding-bottom: 0 !important; flex: 1 1 0; display: flex !important; align-items: center; justify-content: center; height: 40px; background: #fff; border: 1px solid #E5E8EE !important; border-radius: 4px !important; box-sizing: border-box; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; color: #160B8B !important; text-decoration: none !important; } .customer-account-forgotpassword .gwl-otp-actions .gwl-fp-mobile-back:hover { text-decoration: none; border-color: #160B8B !important; } .customer-account-forgotpassword button.verif_otp_password { align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; height: 40px; background: #160B8B !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer; } .customer-account-forgotpassword button.verif_otp_password:hover { background: #221796 !important; } .customer-account-forgotpassword .otp_text { display: block; text-align: center; font-family: 'Outfit', sans-serif; font-size: 13px; margin-top: 8px; } .customer-account-forgotpassword .resendotp-block { text-align: center; margin-top: 0; } /* Figma: resend copy sits under Confirm OTP + Go Back (keep attempt counter) */ .customer-account-forgotpassword .gwl-fp-resend-meta { margin-top: 24px; text-align: center; } .customer-account-forgotpassword .resend-wait { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; color: #100F1B !important; margin: 0; } .customer-account-forgotpassword .gwl-fp-resend-prefix { color: #100F1B !important; } .customer-account-forgotpassword .gwl-fp-resend-timer { color: #160B8B !important; font-weight: 400 !important; } .customer-account-forgotpassword .resend-wait .time { color: inherit; font-weight: inherit; } .customer-account-forgotpassword .resendlink { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; line-height: 20px !important; } /* Magento .show() sets display:block inline — keep flex layout when visible */ .customer-account-forgotpassword .resendlink[style*="display: block"], .customer-account-forgotpassword .resendlink[style*="display:block"] { display: flex !important; } .customer-account-forgotpassword .resendlink button.send_otp_password { width: auto; height: auto; background: none !important; color: #160B8B !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; padding: 0; margin: 0; border: 0 !important; text-decoration: underline; box-shadow: none !important; cursor: pointer; } .customer-account-forgotpassword .resend-link-attempt { font-family: 'Outfit', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; color: #A19FA8 !important; margin-top: 8px; } .customer-account-forgotpassword .gwl-fp-mobile-back, .customer-account-forgotpassword .gwl-fp-mobile-back-row { display: none; } .customer-account-forgotpassword .md-forget-password[data-gwl-reset-type="Mobile"][data-gwl-fp-step="start"] .gwl-fp-mobile-back-row { display: block; text-align: center; margin-top: 24px; } .customer-account-forgotpassword .md-forget-password[data-gwl-reset-type="Mobile"][data-gwl-fp-step="start"] .gwl-fp-mobile-back-row .gwl-fp-mobile-back { display: inline-block; } .customer-account-forgotpassword .md-forget-password[data-gwl-reset-type="Mobile"][data-gwl-fp-step="otp"] .field-name-otp .gwl-fp-mobile-back { display: inline-block; } .customer-account-forgotpassword .gwl-fp-mobile-back { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #160B8B !important; text-decoration: underline !important; } .customer-account-forgotpassword .gwl-fp-mobile-back:hover { text-decoration: underline !important; } .customer-account-forgotpassword .field.password .form-field__control, .customer-account-forgotpassword .field.confirmation .form-field__control, .customer-account-forgotpassword .field.password .control, .customer-account-forgotpassword .field.confirmation .control { position: relative; } .customer-account-forgotpassword .field.password input.input-text, .customer-account-forgotpassword .field.confirmation input.input-text { padding-inline-end: 44px; } .customer-account-forgotpassword .gwl-password-toggle { position: absolute; inset-inline-end: 14px; /* Label is outside .control — center on 44px input (Figma / Sign In) */ top: 22px; transform: translateY(-50%); display: flex !important; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; margin: 0; background: none; border: 0; color: #100F1B; cursor: pointer; z-index: 2; line-height: 0; } .customer-account-forgotpassword .gwl-password-toggle svg { display: block; width: 18px; height: 18px; } .customer-account-forgotpassword .gwl-password-toggle:hover, .customer-account-forgotpassword .gwl-password-toggle--visible { color: #100F1B; opacity: 0.75; } .customer-account-forgotpassword .actions-toolbar.reset-pwd { margin: 8px 0 0 !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd:after { display: none !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd .primary { width: 100%; float: none !important; margin: 0 !important; padding: 0 !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd .primary .action, .customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary .action { margin-bottom: 0 !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd button.action.submit.primary, .customer-account-forgotpassword .actions-toolbar.reset-pwd button.action.submit.primary span { font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd button.action.submit.primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; height: 40px; background: #160B8B !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; box-shadow: none !important; cursor: pointer; } .customer-account-forgotpassword .actions-toolbar.reset-pwd button.action.submit.primary:hover { background: #221796 !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary { width: 100%; float: none !important; clear: both !important; display: flex !important; justify-content: center; align-items: center; text-align: center; margin: 24px 0 0 !important; padding: 0 !important; line-height: 20px !important; font-size: 14px !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary .action.back, .customer-account-forgotpassword .form.password.forget .actions-toolbar.reset-pwd > .secondary .action.back { margin: 0 !important; padding: 0 !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary .action.back, .customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary .action.back span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; color: #160B8B !important; text-decoration: underline !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary .action.back:hover { text-decoration: underline !important; } .customer-account-forgotpassword .md-forget-password[data-gwl-fp-step="password"] .actions-toolbar.reset-pwd .secondary { display: none !important; } /* Auth form fields — force 44px height + centered intl dial-code */ :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) input.input-text, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) input.form-field__input, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) .field.captcha input.input-text { height: 44px !important; min-height: 44px !important; box-sizing: border-box !important; } :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) .iti__selected-flag { display: flex !important; align-items: center !important; height: 100% !important; } :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) .iti__selected-dial-code { line-height: 1 !important; display: inline-flex !important; align-items: center !important; } /* Auth CTAs — vertically center label in 40px buttons. Theme .action.primary uses padding:15px 20px which pushes text down. OTP toggle buttons (send_otp*/verif_otp*/resendotp) are excluded from display:inline-flex — Magento JS hides/shows them via inline style. */ :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.action.submit.primary, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.action.login.primary, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) a.gwl-fp-mobile-back, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) .gwl-otp-actions .gwl-fp-mobile-back { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1 !important; box-sizing: border-box !important; vertical-align: middle; } :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.action.submit.primary > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.action.login.primary > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) a.gwl-fp-mobile-back > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) .gwl-otp-actions .gwl-fp-mobile-back > span { line-height: 1 !important; display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } /* OTP buttons: size/type only — do not set display (JS owns visibility) */ :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_login, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_password, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.resendotp, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_login, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_password, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.first-attempt { padding-top: 0 !important; padding-bottom: 0 !important; line-height: 40px !important; box-sizing: border-box !important; text-align: center; } :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_login > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_password > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.resendotp > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_login > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_password > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.first-attempt > span { line-height: 40px !important; margin: 0 !important; padding: 0 !important; } /* OTP/toggle CTAs — center label ONLY when JS has shown them. Never force display on .send_otp* / .verif_otp* / .resendotp — that broke Magento hide/show (Generate OTP appearing on Email + empty Mobile). */ :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_login[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_login[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_password[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_password[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.resendotp[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.resendotp[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_login[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_login[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_password[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_password[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.first-attempt[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.first-attempt[style*="display:block"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; } @media (max-width: 767px) { .customer-account-forgotpassword .page-title-wrapper, .customer-account-forgotpassword .columns .column.main { max-width: none !important; padding-inline: 16px; } .customer-account-forgotpassword .page-title-wrapper { margin: 32px auto 28px !important; } .customer-account-forgotpassword .page-title-wrapper .page-title, .customer-account-forgotpassword .page-title-wrapper .page-title .base, .customer-account-forgotpassword .page-title-wrapper .page-title span { font-size: 28px !important; line-height: 36px !important; } .customer-account-forgotpassword .page-title-wrapper .account-page-subtitle { font-size: 14px !important; line-height: 22px !important; margin-top: 8px !important; color: #0A053D !important; opacity: 0.6; } .customer-account-forgotpassword .columns .column.main { margin-bottom: 48px !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd button.action.submit.primary { height: 40px !important; } .customer-account-forgotpassword .gwl-otp-box { width: 44px; height: 44px; font-size: 16px !important; } } /* ========================================================================== GWL My Orders — Order detail page (sales_order_view) + shared sibling views (Invoices / Shipments / Refunds / Subscription Items / RMA). Reskins the untouched core markup into the My Account card system. Layout XML: Magento_Sales/layout/sales_order_view.xml (+ sibling handles) move page.main.title to columns.top, retitle "My Orders", add an order-specific subtitle. No template/behaviour changes. Tokens reused: --gwl-account-* (see :root at top of file). ========================================================================== */ /* --- Left header (columns.top): "My Order" + subtitle ------------------- page.main.title (h1 + subtitle) stays in normal block flow so the two lines align flush-left exactly like every other My Account page. The Reorder / Print toolbar is moved by layout to sit beside the title block and is floated right. .account .page-title-wrapper is `position:static !important; width:100%`. */ .account .page-main > .order-actions-toolbar { float: right; clear: none; margin: 0 0 8px 24px; padding: 0; } /* contain the floated toolbar so the two columns clear it */ .account .page-main > .order-actions-toolbar ~ .columns { clear: both; } .account .page-main > .order-actions-toolbar:before, .account .page-main > .order-actions-toolbar:after { content: none; display: none; } .account .page-main > .order-actions-toolbar .actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; } .account .page-main > .order-actions-toolbar .action { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; float: none; min-height: 40px; margin: 0; padding: 9px 20px; border-radius: 4px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: none; white-space: nowrap; } .account .page-main > .order-actions-toolbar .action.order { background: var(--gwl-account-blue); border: 1px solid var(--gwl-account-blue); color: #fff; } .account .page-main > .order-actions-toolbar .action.order:hover { opacity: 0.9; color: #fff; } .account .page-main > .order-actions-toolbar .action.print { background: #fff; border: 1px solid var(--gwl-account-border); color: var(--gwl-account-blue); } .account .page-main > .order-actions-toolbar .action.print:hover { border-color: var(--gwl-account-blue); color: var(--gwl-account-blue); } .account .page-main > .order-actions-toolbar .action span { color: inherit; } /* RSS feed link — no RSS anywhere else in the account redesign */ .account .page-main > .order-actions-toolbar .rss, .account .page-main > .order-actions-toolbar a.link.feed, .account .page-main > .order-actions-toolbar .action.rss { display: none !important; } /* title + subtitle flush left, clear of the floated toolbar */ .account .page-title-wrapper .page-title, .account .page-title-wrapper .account-page-subtitle { margin-left: 0 !important; padding-left: 0 !important; } /* "Order # [status]" line + date — moved by layout into the content column, directly above the tab bar. Base rules are NOT scoped to .column.main so they also style the print page, where order.status stays in page.main.title. */ .account .order-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; padding: 0; border: 0; /* kill Luma's 2px #e5e5e5 box around .order-status */ border-radius: 0; background: transparent; } .account .column.main .order-status { margin: 0 0 14px; } .account .order-status .order-status__ref { font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 500; line-height: 28px; color: var(--gwl-account-title); } .account .order-status .order-status__badge { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 24px; padding: 3px 12px; border-radius: 4px; color: #fff !important; font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; line-height: 18px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; border: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .account .order-status .order-status__badge.status-success { background: #34A853 !important; } .account .order-status .order-status__badge.status-warning { background: #F59E0B !important; } .account .order-status .order-status__badge.status-danger { background: #EA4335 !important; } .account .order-status .order-status__badge.status-neutral { background: #8A94A6 !important; } .account .order-status .order-status__badge:not([class*="status-"]) { background: #8A94A6 !important; } .account .column.main .order-date { margin: -4px 0 16px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; color: var(--gwl-account-muted); } .account .column.main .order-date .label { display: none; } /* ---- Print page (sales/order/print) ---------------------------------- */ /* the core

    Order # X

    is kept, so hide our duplicate ref */ .page-print .order-status .order-status__ref { display: none; } /* badge sits inline, right after the "Order # X" heading; drop the date */ .page-print .page-main .page-title-wrapper .page-title { display: inline-block !important; margin: 0 12px 0 0 !important; vertical-align: middle; } .page-print .page-main .page-title-wrapper .order-status { display: inline-flex !important; vertical-align: middle; margin: 0; padding: 0; border: 0; background: transparent; } .page-print .page-main .page-title-wrapper .order-date { display: none !important; } /* "Back to My Account" — back-arrow link, screen only */ .page-print .gwl-print-back { display: inline-flex; align-items: center; gap: 8px; float: right; margin: 0 0 8px 24px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; color: var(--gwl-account-blue); text-decoration: none; text-transform: none; } .page-print .gwl-print-back:before { content: ''; display: inline-block; width: 6px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M0.599609 8.6001L4.59961 4.6001L0.599609 0.600098' stroke='%23160B8B' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transform: scaleX(-1); } .page-print .gwl-print-back:hover { text-decoration: underline; } [dir="rtl"] .page-print .gwl-print-back { float: left; margin: 0 24px 8px 0; } [dir="rtl"] .page-print .gwl-print-back:before { transform: none; } /* Print button that replaces the (empty) core "back" link on the print page */ .page-print .order-details-items .actions-toolbar .gwl-print-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 22px; border-radius: 4px; background: var(--gwl-account-blue); border: 1px solid var(--gwl-account-blue); color: #fff; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; cursor: pointer; } .page-print .order-details-items .actions-toolbar .gwl-print-trigger span { color: #fff; } .page-print .order-details-items .actions-toolbar .gwl-print-trigger:hover { opacity: 0.9; } @media print { .page-print .gwl-print-back, .page-print .gwl-print-trigger, .page-print .order-details-items .actions-toolbar { display: none !important; } } /* --- Tabs: Items Ordered / Invoices / Subscription Items / RMA ------------- */ .account .order-links { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 4px; margin: 0 0 16px; padding: 0; list-style: none; border-bottom: 1px solid var(--gwl-account-border); -webkit-overflow-scrolling: touch; } .account .order-links > .item { margin: 0; padding: 0; white-space: nowrap; } .account .order-links > .item > a, .account .order-links > .item > strong { display: block; padding: 12px 16px; margin-bottom: -1px; background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; color: var(--gwl-account-blue); text-decoration: none; } .account .order-links > .item > a:hover { color: var(--gwl-account-blue); background: transparent; text-decoration: underline; } .account .order-links > .item.current > strong { color: var(--gwl-account-blue); font-weight: 600; border-bottom-color: var(--gwl-account-blue); } /* --- Items card (.order-details-items — ordered / invoice / creditmemo) ---- */ .account .order-details-items { background: #fff; border: 1px solid #E7E6EC; border-radius: 8px; padding: 24px; margin-bottom: 16px; box-shadow: none; } .account .order-details-items .order-title { border: 0; margin: 0 0 16px; padding: 0; } .account .column.main .order-details-items .order-title strong, .account .order-details-items .order-title strong { font-family: 'Outfit', sans-serif !important; font-size: 18px !important; font-weight: 500 !important; line-height: 24px !important; letter-spacing: 0 !important; text-transform: none !important; color: #100F1B !important; } .account .order-details-items .order-title a { margin-left: 12px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 400; color: var(--gwl-account-blue); text-decoration: underline; } .account .order-details-items .table-wrapper { margin: 0; overflow-x: auto; overflow-y: hidden; border: 0; } .account .order-details-items table.table-order-items { width: 100%; border-collapse: collapse; } .account .order-details-items table.table-order-items > thead > tr > th { text-align: left; padding: 10px 12px; background: #F5F5F7; border-bottom: 1px solid #E7E6EC; font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: #6C698B; vertical-align: middle; } .account .order-details-items table.table-order-items > tbody > tr > td { padding: 14px 12px; border-top: 1px solid #E7E6EC; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; color: #6C698B; vertical-align: top; } .account .order-details-items table.table-order-items > tbody:first-of-type > tr:first-child > td { border-top: 0; } .account .order-details-items .col.name .product-item-name { display: block; font-size: 14px; font-weight: 500; color: #100F1B; } .account .order-details-items .col.name .item-options { margin: 6px 0 0; font-size: 13px; color: #6C698B; } .account .order-details-items .col.name .item-options dt { font-weight: 500; } .account .order-details-items .col.price, .account .order-details-items .col.subtotal { text-align: right; white-space: nowrap; } .account .order-details-items .col.qty { text-align: center; } .account .order-details-items .items-qty { margin: 0; padding: 0; list-style: none; } .account .order-details-items .items-qty .item { display: block; white-space: nowrap; } .account .order-details-items .items-qty .title, .account .order-details-items .items-qty .content { display: inline; } .account .order-details-items .price-including-tax .price, .account .order-details-items .price-excluding-tax .price { font-weight: 400; color: #58575F; } /* per-item pager rows (only when the order has more items than the pager limit) */ .account .order-details-items .order-pager-wrapper { padding: 8px 0; border: 0; background: transparent; } /* totals in */ .account .order-details-items table.table-order-items > tfoot > tr > th, .account .order-details-items table.table-order-items > tfoot > tr > td { padding: 8px 12px; border: 0; background: transparent; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; } .account .order-details-items table.table-order-items > tfoot > tr > th { text-align: right; color: #6C698B; } .account .order-details-items table.table-order-items > tfoot > tr > td { text-align: right; white-space: nowrap; color: #100F1B; } .account .order-details-items table.table-order-items > tfoot > tr:first-child > th, .account .order-details-items table.table-order-items > tfoot > tr:first-child > td { padding-top: 16px; border-top: 1px solid #E7E6EC; } .account .order-details-items table.table-order-items > tfoot > tr.grand_total > th, .account .order-details-items table.table-order-items > tfoot > tr.grand_total > td { padding-top: 14px; border-top: 1px solid #E7E6EC; } .account .order-details-items table.table-order-items > tfoot > tr.grand_total strong { font-size: 16px; font-weight: 600; color: #100F1B; } /* --- Back to My Orders --------------------------------------------------- */ .account .order-details-items .actions-toolbar { margin: 24px 0 0; padding: 0; border: 0; } .account .order-details-items .actions-toolbar:before, .account .order-details-items .actions-toolbar:after { display: none; } .account .order-details-items .actions-toolbar .secondary { float: none; } .account .order-details-items .actions-toolbar a.action.back { display: inline-flex; align-items: center; gap: 8px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 400; color: var(--gwl-account-blue); text-decoration: none; } .account .order-details-items .actions-toolbar a.action.back:before { content: ''; display: inline-block; width: 6px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M0.599609 8.6001L4.59961 4.6001L0.599609 0.600098' stroke='%23160B8B' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transform: scaleX(-1); } .account .order-details-items .actions-toolbar a.action.back:hover { text-decoration: underline; } /* --- Order Information card ------------------------------------------------- Parent theme: `.account .column.main .block.block-order-details-view .block-content:not(.widget) .box { float:left; width:25% }` (8-class specificity) — matched below so the 2-col grid wins. */ .account .block-order-details-view { background: #fff; border: 1px solid #E7E6EC; border-radius: 8px; padding: 24px; margin-bottom: 16px; box-shadow: none; } .account .column.main .block.block-order-details-view > .block-title, .account .block-order-details-view > .block-title { border: 0 !important; margin: 0 0 20px !important; padding: 0 !important; text-align: left; } .account .column.main .block.block-order-details-view > .block-title strong, .account .block-order-details-view > .block-title strong { display: inline-block; margin: 0 !important; padding: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 18px !important; font-weight: 500 !important; line-height: 24px !important; letter-spacing: 0 !important; text-transform: none !important; color: #100F1B !important; } .account .column.main .block.block-order-details-view .block-content, .account .block-order-details-view .block-content { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; margin: 0; float: none; } .account .column.main .block.block-order-details-view .block-content:before, .account .column.main .block.block-order-details-view .block-content:after, .account .block-order-details-view .block-content:before, .account .block-order-details-view .block-content:after { content: none !important; display: none !important; } .account .column.main .block.block-order-details-view .block-content:not(.widget) .box, .account .block-order-details-view .block-content .box { width: auto; min-width: 0; margin: 0; padding: 0; float: none; clear: none; } .account .column.main .block.block-order-details-view .box-title, .account .block-order-details-view .box-title { display: block !important; margin: 0 0 8px !important; padding: 0 !important; font-weight: 400 !important; } .account .column.main .block.block-order-details-view .box-title span, .account .block-order-details-view .box-title span { font-family: 'Outfit', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; line-height: 16px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #5C5F98 !important; } .account .column.main .block.block-order-details-view .box-content, .account .block-order-details-view .box-content, .account .block-order-details-view .box-content address, .account .block-order-details-view .box-content .payment-method, .account .block-order-details-view .box-content .payment-method .title, .account .block-order-details-view .box-content .payment-method .content { margin: 0; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 22px !important; font-style: normal !important; color: #100F1B !important; } .account .block-order-details-view .box-content a[href^="tel:"], .account .block-order-details-view .box-content a[href^="mailto:"] { color: var(--gwl-account-blue); } /* --- "About Your Order" (status history) + gift-message cards ------------ */ .account .block-order-details-comments, .account .block-order-details-gift-message { background: #fff; border: 1px solid #E7E6EC; border-radius: 8px; padding: 24px; margin: 0 0 16px; box-shadow: none; } .account .column.main .block.block-order-details-comments > .block-title, .account .column.main .block.block-order-details-gift-message > .block-title, .account .block-order-details-comments > .block-title, .account .block-order-details-gift-message > .block-title { border: 0 !important; margin: 0 0 16px !important; padding: 0 !important; text-align: left; } .account .column.main .block.block-order-details-comments > .block-title strong, .account .column.main .block.block-order-details-gift-message > .block-title strong, .account .block-order-details-comments > .block-title strong, .account .block-order-details-gift-message > .block-title strong { display: inline-block; margin: 0 !important; padding: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 18px !important; font-weight: 500 !important; line-height: 24px !important; letter-spacing: 0 !important; text-transform: none !important; color: #100F1B !important; } .account .block-order-details-comments .block-content, .account .block-order-details-comments dl.order-comments { margin: 0; padding: 0; border: 0; } .account .block-order-details-comments .block-content:before, .account .block-order-details-comments .block-content:after { content: none; display: none; } .account .column.main .block.block-order-details-comments dl.order-comments > dt.comment-date, .account .block-order-details-comments dl.order-comments > dt.comment-date { float: none !important; clear: none !important; max-width: none !important; margin: 0 0 4px !important; font-family: 'Outfit', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; line-height: 16px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #5C5F98 !important; } .account .column.main .block.block-order-details-comments dl.order-comments > dd.comment-content, .account .block-order-details-comments dl.order-comments > dd.comment-content { margin: 0 0 16px !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 22px !important; font-style: normal !important; color: #100F1B !important; } .account .block-order-details-comments dl.order-comments > dd.comment-content:last-of-type { margin-bottom: 0; } /* --- Responsive --------------------------------------------------------- */ @media (max-width: 991px) { .account .page-main > .order-actions-toolbar { float: none; margin: 12px 0 0; } .account .page-main > .order-actions-toolbar .actions { justify-content: flex-start; } } @media (max-width: 767px) { .account .block-order-details-view .block-content { grid-template-columns: 1fr; } .account .order-details-items, .account .block-order-details-view { padding: 16px; } } /* --- RTL --------------------------------------------------------------- */ [dir="rtl"] .account .page-main > .order-actions-toolbar { float: left; margin: 0 24px 8px 0; } [dir="rtl"] .account .page-main > .order-actions-toolbar .actions { justify-content: flex-start; } [dir="rtl"] .account .order-details-items table.table-order-items > thead > tr > th, [dir="rtl"] .account .order-details-items table.table-order-items > tfoot > tr > th { text-align: right; } [dir="rtl"] .account .order-details-items .col.price, [dir="rtl"] .account .order-details-items .col.subtotal, [dir="rtl"] .account .order-details-items table.table-order-items > tfoot > tr > th, [dir="rtl"] .account .order-details-items table.table-order-items > tfoot > tr > td { text-align: left; } [dir="rtl"] .account .order-details-items .actions-toolbar a.action.back:before { transform: none; } /* ========================================================================== GWL My Product Reviews — single review detail page (review_customer_view). Reskins core Magento_Review::customer/view.phtml into the My Account card system. Layout: Magento_Review/layout/review_customer_view.xml (breadcrumb + "Review Detail" title + subtitle in columns.top). Rating widget (.rating-result stars) is left to the base theme. ========================================================================== */ .review-customer-view .page-title-wrapper .page-title, .review-customer-view .page-title-wrapper h1.page-title { font-family: 'Outfit', sans-serif !important; font-size: 32px !important; font-weight: 300 !important; line-height: 40px !important; color: #0A053D !important; } .review-customer-view .page-title-wrapper .account-page-subtitle { font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 24px !important; color: #6C698B !important; opacity: 1 !important; } .review-customer-view .customer-review.view { background: #fff; border: 1px solid #E7E6EC; border-radius: 8px; padding: 24px; margin: 0 0 16px; box-shadow: none; } /* product header */ .review-customer-view .customer-review.view .product-details { display: flex; gap: 20px; align-items: flex-start; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #E7E6EC; } .review-customer-view .customer-review.view .product-details:before, .review-customer-view .customer-review.view .product-details:after { content: none; display: none; } .review-customer-view .customer-review.view .product-media { flex: 0 0 auto; width: 96px; margin: 0; } .review-customer-view .customer-review.view .product-media .product-photo { display: block; } .review-customer-view .customer-review.view .product-media img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid #E7E6EC; } .review-customer-view .customer-review.view .product-info { flex: 1 1 auto; min-width: 0; } .review-customer-view .customer-review.view .product-info .product-name { margin: 0 0 8px; font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 500; line-height: 24px; color: #100F1B; } .review-customer-view .customer-review.view .product-info .rating-average-label { display: block; margin: 0 0 4px; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 400; color: #6C698B; } /* review body */ .review-customer-view .customer-review.view .review-details .title { margin: 0 0 12px; border: 0; } .review-customer-view .customer-review.view .review-details .title strong { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; line-height: 22px; color: #100F1B; } .review-customer-view .customer-review.view .customer-review-rating { margin: 0 0 16px; } .review-customer-view .customer-review.view .customer-review-rating .rating-summary.item { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; } .review-customer-view .customer-review.view .customer-review-rating .rating-label { font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 500; color: #6C698B; min-width: 90px; } .review-customer-view .customer-review.view .review-title { margin: 0 0 6px; font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600; line-height: 22px; color: #100F1B; } .review-customer-view .customer-review.view .review-content { margin: 0 0 16px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 400; line-height: 22px; color: #58575F; } .review-customer-view .customer-review.view .review-date { font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 400; color: #A19FA8; } .review-customer-view .customer-review.view .review-date time { color: inherit; } /* back link */ .review-customer-view .actions-toolbar { margin: 0; padding: 0; border: 0; } .review-customer-view .actions-toolbar:before, .review-customer-view .actions-toolbar:after { content: none; display: none; } .review-customer-view .actions-toolbar .secondary { float: none; } .review-customer-view .actions-toolbar a.action.back { display: inline-flex; align-items: center; gap: 8px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 400; color: var(--gwl-account-blue); text-decoration: none; } .review-customer-view .actions-toolbar a.action.back:before { content: ''; display: inline-block; width: 6px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M0.599609 8.6001L4.59961 4.6001L0.599609 0.600098' stroke='%23160B8B' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transform: scaleX(-1); } .review-customer-view .actions-toolbar a.action.back:hover { text-decoration: underline; } [dir="rtl"] .review-customer-view .actions-toolbar a.action.back:before { transform: none; } @media (max-width: 767px) { .review-customer-view .customer-review.view { padding: 16px; } .review-customer-view .customer-review.view .product-details { flex-direction: column; } }