/* * TimeClick store: the login, lost password and account pages (035, Oct 2026). Loaded after tc-branding.css on the * account pages only (functions.php). Its rules sit under the new templates' classes (.tc-acc, and the page-wide ones * ask for them with :has(.tc-acc)), so nothing changes until the templates are up. tc-branding.css marks most of its * account rules !important, so these do too, with longer selectors. * Colors: blue #2aa5d5 (#1f8fbf for small blue text), orange #ff6500, text #1d2b3a, gray text #4f5d6b / #5d6b78. */ /* Page */ body.woocommerce-account:has(.tc-acc) .entry-content > h1.wp-block-heading:first-child { display: none !important; } /* the page's own "Your Account" heading; each template prints its own H1 */ body.woocommerce-account.woocommerce-account-settings:has(.tc-acc) { display: block !important; } /* WooCommerce gives Account Details' body the class tc-branding.css styles as a flex column with 3rem gaps (meant for the form's box), which left a white strip between the header and the band */ body.woocommerce-account:has(.tc-acc) .section-padding { padding: 0 !important; } body.woocommerce-account:has(.tc-acc) .entry-header { display: none !important; } body.woocommerce-account:has(.tc-acc) #footerSection { margin-top: 0 !important; } body.woocommerce-account:has(.tc-acc) #primary, body.woocommerce-account:has(.tc-acc) .site-main, body.woocommerce-account:has(.tc-acc) article.page, body.woocommerce-account:has(.tc-acc) .entry-content, body.woocommerce-account:has(.tc-acc) #homepage-sections, body.woocommerce-account:has(.tc-acc) .section.pagecontent { margin: 0 !important; padding: 0 !important; max-width: none !important; width: auto !important; background: transparent !important; } body.woocommerce-account:has(.tc-acc) .entry-content > .woocommerce { max-width: none !important; margin: 0 !important; padding: 0 !important; } .tc-acc, .tc-acc * { box-sizing: border-box; } .tc-acc { font-family: Inter, Arial, sans-serif; color: #1d2b3a; } .tc-acc a, .tc-acc a:visited { text-decoration: none !important; } .tc-acc .tc-acc-h1 { margin: 0 !important; padding: 0 !important; font: 700 clamp(34px, 4.2vw, 50px)/1.1 'Work Sans', Arial, sans-serif !important; color: #1d2b3a !important; text-align: left !important; letter-spacing: -.01em !important; } .tc-acc .tc-acc-h2 { margin: 0 !important; padding: 0 !important; border: 0 !important; font: 600 28px/1.2 'Work Sans', Arial, sans-serif !important; color: #1d2b3a !important; text-align: left !important; } .tc-acc .tc-acc-lead { margin: 0 !important; max-width: 560px; font: 400 clamp(17px, 1.5vw, 19px)/1.6 Inter, Arial, sans-serif !important; color: #4f5d6b !important; } .tc-acc .tc-acc-sub { margin: 0 !important; font: 400 15px/1.55 Inter, Arial, sans-serif !important; color: #4f5d6b !important; } .tc-acc .tc-acc-card { background: #fff; border: 1px solid #dde9f0; border-radius: 20px; box-shadow: 0 24px 56px rgba(29, 43, 58, .10); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 20px; } .tc-acc .tc-acc-ico { flex: none; width: 48px; height: 48px; border-radius: 12px; background: #eaf6fb; display: inline-flex; align-items: center; justify-content: center; } /* Form rows on these pages: WooCommerce's own

with its label and input */ .tc-acc form .form-row { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } .tc-acc form .form-row::before, .tc-acc form .form-row::after { content: none !important; display: none !important; } .tc-acc form .form-row > label:not(.woocommerce-form__label-for-checkbox) { display: block !important; margin: 0 !important; padding: 0 !important; font: 600 14px/1.4 Inter, Arial, sans-serif !important; color: #1d2b3a !important; text-transform: none !important; } .tc-acc form .form-row .required { display: none !important; } .tc-acc form input.input-text, .tc-acc form input.woocommerce-Input, .tc-acc form select, .tc-acc form textarea { display: block !important; width: 100% !important; height: 48px !important; margin: 0 !important; padding: 0 14px !important; border: 1.5px solid #d6e2ea !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; font: 400 16px/1.2 Inter, Arial, sans-serif !important; color: #1d2b3a !important; outline: none !important; } .tc-acc form input.input-text::placeholder { color: #8a97a3 !important; opacity: 1 !important; } .tc-acc form input.input-text:focus, .tc-acc form select:focus { border-color: #2aa5d5 !important; box-shadow: 0 0 0 4px rgba(42, 165, 213, .15) !important; } /* WooCommerce's show password button (woocommerce.js wraps the field in .password-input) */ .tc-acc form .password-input { position: relative !important; display: block !important; width: 100% !important; } .tc-acc form .password-input input.input-text { padding-right: 52px !important; } .tc-acc form .show-password-input { position: absolute !important; top: 50% !important; right: 4px !important; transform: translateY(-50%) !important; width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: none !important; box-shadow: none !important; cursor: pointer; } .tc-acc form .show-password-input::before { content: none !important; display: none !important; } .tc-acc form .show-password-input::after { content: "" !important; display: block !important; width: 20px; height: 20px; margin: 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat !important; font-family: inherit !important; } .tc-acc form .show-password-input.display-password::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232aa5d5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E") !important; } .tc-acc form .show-password-input:focus-visible { outline: 2px solid #2aa5d5 !important; outline-offset: 0 !important; } /* Buttons */ .tc-acc form button.button, .tc-acc form button.woocommerce-button, .tc-acc form button.woocommerce-Button, .tc-acc form input[type=submit].button { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; min-height: 56px !important; margin: 0 !important; padding: 0 20px !important; border: 0 !important; border-radius: 12px !important; background: #ff6500 !important; color: #fff !important; box-shadow: none !important; transform: none !important; animation: none !important; font: 600 18px/1.2 'Work Sans', Arial, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; } .tc-acc form button.button:hover, .tc-acc form button.woocommerce-button:hover, .tc-acc form button.woocommerce-Button:hover { filter: brightness(1.05); background: #ff6500 !important; color: #fff !important; } .tc-acc form button.button:focus-visible { outline: 3px solid #1d2b3a !important; outline-offset: 2px !important; } /* Login */ body.tc-login-page:has(.tc-acc-login) .section-padding { background: linear-gradient(180deg, #ffffff 0%, #eaf6fb 100%) !important; } .tc-acc.tc-acc-login { max-width: 1180px; margin: 0 auto; padding: clamp(36px, 6vw, 80px) clamp(16px, 4vw, 40px) clamp(56px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: clamp(32px, 5vw, 72px); align-items: center; } .tc-acc .tc-acc-login-l { display: flex; flex-direction: column; gap: 22px; min-width: 0; } .tc-acc .tc-acc-note { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid #d9e7ee; border-radius: 16px; padding: 18px 20px; } .tc-acc .tc-acc-note-i { flex: none; width: 44px; height: 44px; border-radius: 12px; background: #eaf6fb; display: inline-flex; align-items: center; justify-content: center; } .tc-acc .tc-acc-note p { margin: 0 !important; font: 400 15px/23px Inter, Arial, sans-serif !important; color: #4f5d6b !important; } .tc-acc .tc-acc-note strong { font-weight: 600; color: #1d2b3a; } .tc-acc .tc-acc-note a { color: #1f8fbf !important; font-weight: 600 !important; } .tc-acc .tc-acc-note a:hover { color: #2aa5d5 !important; text-decoration: underline !important; } .tc-acc .tc-acc-login-art img { display: block; width: 100%; max-width: 440px; height: auto; } .tc-acc .tc-acc-login-r { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .tc-acc .tc-acc-login-card form.woocommerce-form-login { display: flex !important; flex-direction: column !important; gap: 18px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } .tc-acc form .form-row.tc-acc-login-row { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } .tc-acc .tc-acc-login-row label.woocommerce-form-login__rememberme { display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 !important; cursor: pointer; font: 400 15px/1.4 Inter, Arial, sans-serif !important; color: #1d2b3a !important; } .tc-acc .tc-acc-login-row input#rememberme { width: 20px !important; height: 20px !important; margin: 0 !important; accent-color: #2aa5d5; } .tc-acc .tc-acc-login-row label span { font: inherit !important; color: inherit !important; } .tc-acc .tc-acc-forgot, .tc-acc .tc-acc-nopass a { color: #1f8fbf !important; font: 600 15px/1.4 Inter, Arial, sans-serif !important; } .tc-acc .tc-acc-forgot:hover, .tc-acc .tc-acc-nopass a:hover { color: #2aa5d5 !important; text-decoration: underline !important; } /* tc-branding.css underlines every link inside a paragraph (#page p a); links within a sentence keep that, the two standalone links don't, as drawn */ #page .tc-acc p.tc-acc-login-row a.tc-acc-forgot, #page .tc-acc p.tc-acc-call > a[href] { text-decoration: none !important; } #page .tc-acc p.tc-acc-login-row a.tc-acc-forgot:hover, #page .tc-acc p.tc-acc-call > a[href]:hover { text-decoration: underline !important; } .tc-acc .tc-acc-nopass { margin: 0 !important; font: 400 14px/21px Inter, Arial, sans-serif !important; color: #4f5d6b !important; text-align: left !important; } .tc-acc .tc-acc-nopass a { font-size: 14px !important; } .tc-acc .tc-acc-call { margin: 0 !important; text-align: center; font: 400 14px/1.4 Inter, Arial, sans-serif !important; color: #5d6b78 !important; } .tc-acc .tc-acc-call a { color: #5d6b78 !important; } .tc-acc .tc-acc-call a:hover { color: #2aa5d5 !important; } /* Lost password, and WooCommerce's own pages of that flow (the sent message, the new password form) */ body.woocommerce-account:has(.tc-acc-reset) .section-padding, body.tc-lost-password-page:has(.tc-acc-reset) .section-padding { background: linear-gradient(180deg, #ffffff 0%, #eaf6fb 100%) !important; } .tc-acc.tc-acc-reset { max-width: 560px; margin: 0 auto; padding: clamp(40px, 7vw, 80px) 16px clamp(56px, 8vw, 110px); } .tc-acc .tc-acc-reset-card { gap: 18px; } .tc-acc .tc-acc-reset-card form.woocommerce-ResetPassword { display: flex !important; flex-direction: column !important; gap: 18px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } .tc-acc .tc-acc-reset-card .form-row-first { width: 100% !important; } .tc-acc .tc-acc-reset-card .clear { display: none !important; } .tc-acc .tc-acc-backlink { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: center; min-height: 44px; color: #1f8fbf !important; font: 600 15px/1.2 Inter, Arial, sans-serif; } .tc-acc .tc-acc-backlink:hover { color: #2aa5d5 !important; text-decoration: underline !important; } /* Tablets and phones */ @media (max-width: 980px) { .tc-acc.tc-acc-login { grid-template-columns: minmax(0, 1fr); } .tc-acc .tc-acc-login-art { display: none; } } @media (max-width: 560px) { .tc-acc .tc-acc-card { border-radius: 16px; } .tc-acc .tc-acc-h2 { font-size: 24px !important; } } /* --------------------------------------------------------------------------------------------------------------------- Account pages (my-account.php: .tc-acc-shell). tc-branding.css styles the menu, tables and buttons with !important, so these rules start from body.woocommerce-account and the shell, and use !important where it competes. --------------------------------------------------------------------------------------------------------------------- */ body.woocommerce-account:has(.tc-acc-shell) .entry-content > .woocommerce { display: block !important; } /* tc-branding.css gives every span, paragraph, heading and in-paragraph link inside .woocommerce its own font, color and margins (!important). Inside the account shell they take the shell's values; the classes below style them again. */ body.woocommerce-account .tc-acc-shell span { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; color: inherit !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-content :is(h2, h3) { margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-content p:not([class*=form-row]) { margin: 0 !important; } #page .tc-acc.tc-acc-shell :is(p, label) a:is(.tc-acc-link, .tc-acc-back) { text-decoration: none !important; } #page .tc-acc.tc-acc-shell :is(p, label) a:is(.tc-acc-link, .tc-acc-back):hover { text-decoration: underline !important; } .tc-acc.tc-acc-shell { width: 100%; font: 400 16px/1.55 Inter, Arial, sans-serif; } .tc-acc-shell .tc-acc-band { background: linear-gradient(180deg, #ffffff 0%, #eaf6fb 100%); border-bottom: 1px solid #e3eef4; padding: clamp(28px, 4vw, 44px) 0 clamp(28px, 4vw, 40px); } .tc-acc-shell .tc-acc-band-in, .tc-acc-shell .tc-acc-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); } .tc-acc-shell .tc-acc-band .tc-acc-h1 { font-size: clamp(30px, 3.4vw, 40px) !important; line-height: 1.15 !important; letter-spacing: 0 !important; } .tc-acc-shell .tc-acc-who { margin: 6px 0 0 !important; font: 400 16px/1.5 Inter, Arial, sans-serif !important; color: #4f5d6b !important; } .tc-acc-shell .tc-acc-who strong { font-weight: 600 !important; color: #1d2b3a !important; } body .tc-acc-shell .tc-acc-who a { color: #1f8fbf !important; font-weight: 600 !important; text-decoration: none !important; } body .tc-acc-shell .tc-acc-who a:hover { text-decoration: underline !important; } .tc-acc-shell .tc-acc-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; padding-top: clamp(24px, 4vw, 40px); padding-bottom: clamp(56px, 7vw, 96px); } /* The menu: a list on the left; Log Out under a line */ body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation-wrapper.tc-acc-nav-wrap { position: sticky !important; top: 24px !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; float: none !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation-wrapper .woocommerce-MyAccount-navigation.tc-acc-nav { display: block !important; position: static !important; width: auto !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; float: none !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation.tc-acc-nav ul { display: flex !important; flex-direction: column !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; border: 0 !important; background: none !important; } body.woocommerce-account .tc-acc-shell div.woocommerce-MyAccount-navigation.tc-acc-nav li.woocommerce-MyAccount-navigation-link, body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation.tc-acc-nav li.woocommerce-MyAccount-navigation-link { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; list-style: none !important; box-shadow: none !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation.tc-acc-nav li.woocommerce-MyAccount-navigation-link::before { content: none !important; display: none !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation.tc-acc-nav li.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 8px !important; padding-top: 8px !important; border-top: 1px solid #e8f0f4 !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation.tc-acc-nav li.woocommerce-MyAccount-navigation-link a { display: flex !important; align-items: center !important; gap: 12px !important; min-height: 46px !important; margin: 0 !important; padding: 0 14px !important; border: 0 !important; border-radius: 10px !important; background: none !important; box-shadow: none !important; color: #1d2b3a !important; font: 500 15.5px/1.3 Inter, Arial, sans-serif !important; text-decoration: none !important; text-transform: none !important; transform: none !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation.tc-acc-nav li.woocommerce-MyAccount-navigation-link a .tc-span { font: inherit !important; color: inherit !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation.tc-acc-nav li.woocommerce-MyAccount-navigation-link a svg { display: block !important; flex: none !important; width: 20px !important; height: 20px !important; margin: 0 !important; color: #5d6b78 !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation.tc-acc-nav li.woocommerce-MyAccount-navigation-link a:hover { background: #f3f9fc !important; color: #1f8fbf !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation.tc-acc-nav li.woocommerce-MyAccount-navigation-link a[aria-current], body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation.tc-acc-nav li.woocommerce-MyAccount-navigation-link.is-active a { background: #eaf6fb !important; color: #1f8fbf !important; font-weight: 600 !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation.tc-acc-nav li.woocommerce-MyAccount-navigation-link a:hover svg, body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation.tc-acc-nav li.woocommerce-MyAccount-navigation-link a[aria-current] svg, body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation.tc-acc-nav li.woocommerce-MyAccount-navigation-link.is-active a svg { color: #2aa5d5 !important; } /* The page's content */ body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-content { display: flex !important; flex-direction: column !important; gap: 24px !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; border: 0 !important; background: none !important; box-shadow: none !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:empty, body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-content > .clear { display: none !important; } .tc-acc-shell .tc-acc-h2 { font: 700 26px/1.2 'Work Sans', Arial, sans-serif !important; } .tc-acc-shell .tc-acc-h3 { margin: 0 !important; padding: 0 !important; border: 0 !important; font: 600 20px/26px 'Work Sans', Arial, sans-serif !important; color: #1d2b3a !important; text-align: left !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-content p.tc-acc-p, body.woocommerce-account .tc-acc-shell .tc-acc-p { margin: 0 !important; padding: 0 !important; font: 400 15.5px/1.6 Inter, Arial, sans-serif !important; color: #4f5d6b !important; } .tc-acc-shell .tc-acc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; } body.woocommerce-account .tc-acc-shell span.tc-acc-count { font-size: 15px !important; color: #4f5d6b !important; } .tc-acc-shell .tc-acc-card { border-radius: 18px; box-shadow: none; padding: clamp(20px, 3vw, 28px); gap: 18px; } .tc-acc-shell .tc-acc-card-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } body.woocommerce-account .tc-acc-shell span.tc-acc-k { font: 600 13px/1.3 Inter, Arial, sans-serif !important; letter-spacing: .05em; text-transform: uppercase; color: #5d6b78 !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-content p.tc-acc-big { margin: 0 !important; font: 700 24px/30px 'Work Sans', Arial, sans-serif !important; color: #1d2b3a !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-content p.tc-acc-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0 !important; } body.woocommerce-account .tc-acc-shell a.tc-acc-link { display: inline-flex !important; align-items: center !important; gap: 8px !important; color: #1f8fbf !important; font: 600 16px/1.4 Inter, Arial, sans-serif !important; text-decoration: none !important; } body.woocommerce-account .tc-acc-shell a.tc-acc-link:hover { color: #2aa5d5 !important; text-decoration: underline !important; } body.woocommerce-account .tc-acc-shell a.tc-acc-link--quiet { color: #4f5d6b !important; font-weight: 500 !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-content p.tc-acc-note, body.woocommerce-account .tc-acc-shell .tc-acc-note { display: flex !important; gap: 10px !important; align-items: flex-start !important; margin: 0 !important; padding: 12px 14px !important; border: 0 !important; border-radius: 12px !important; background: #f6fafc !important; font: 400 14px/21px Inter, Arial, sans-serif !important; color: #4f5d6b !important; } .tc-acc-shell .tc-acc-note svg { flex: none; margin-top: 2px; } body.woocommerce-account .tc-acc-shell .tc-acc-note a { color: #1f8fbf !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap; } body.woocommerce-account .tc-acc-shell .tc-acc-item { display: block; margin-top: 2px !important; font-size: 13px !important; line-height: 1.35 !important; font-weight: 400 !important; color: #5d6b78 !important; } /* Status badges: the same classes on every page (functions.php section 7); the colors only */ body.woocommerce-account .tc-acc-shell .order-status-badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; width: auto !important; margin: 0 !important; padding: 4px 10px !important; border: 0 !important; border-radius: 999px !important; background: #eef2f5 !important; color: #4f5d6b !important; font: 600 13px/1.3 Inter, Arial, sans-serif !important; white-space: nowrap !important; text-transform: none !important; box-shadow: none !important; } body.woocommerce-account .tc-acc-shell .order-status-badge::before { content: "" !important; display: block !important; flex: none !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #8a97a3 !important; } body.woocommerce-account .tc-acc-shell .order-status-badge .tc-span { font: inherit !important; color: inherit !important; } body.woocommerce-account .tc-acc-shell .order-status-badge:is(.order-status-completed, .order-status-active, .order-status-processing) { background: #e6f5fb !important; color: #17739a !important; } body.woocommerce-account .tc-acc-shell .order-status-badge:is(.order-status-completed, .order-status-active, .order-status-processing)::before { background: #2aa5d5 !important; } body.woocommerce-account .tc-acc-shell .order-status-badge:is(.order-status-pending, .order-status-on-hold, .order-status-pending-cancel) { background: #fff1e6 !important; color: #a84300 !important; } body.woocommerce-account .tc-acc-shell .order-status-badge:is(.order-status-pending, .order-status-on-hold, .order-status-pending-cancel)::before { background: #ff6500 !important; } /* Buttons (links and buttons the pages and plugins print) */ body.woocommerce-account .tc-acc-shell a.tc-acc-btn, body.woocommerce-account .tc-acc-shell .payment-methods-actions a.button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 46px !important; margin: 0 !important; padding: 0 18px !important; border: 0 !important; border-radius: 10px !important; background: #ff6500 !important; color: #fff !important; box-shadow: none !important; transform: none !important; font: 600 15px/1.2 'Work Sans', Arial, sans-serif !important; text-decoration: none !important; text-transform: none !important; white-space: nowrap !important; } body.woocommerce-account .tc-acc-shell a.tc-acc-btn:hover, body.woocommerce-account .tc-acc-shell .payment-methods-actions a.button:hover { filter: brightness(1.05); background: #ff6500 !important; color: #fff !important; } body.woocommerce-account .tc-acc-shell .payment-methods-actions a.button svg, body.woocommerce-account .tc-acc-shell a.tc-acc-btn svg { display: block !important; width: 18px !important; height: 18px !important; margin: 0 !important; } body.woocommerce-account .tc-acc-shell .payment-methods-actions a.button .tc-span { font: inherit !important; color: inherit !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-content p.payment-methods-actions { margin: 0 !important; } /* Dashboard */ .tc-acc-shell .tc-acc-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .tc-acc-shell .tc-acc-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } body.woocommerce-account .tc-acc-shell a.tc-acc-act { display: flex !important; align-items: center !important; gap: 14px !important; padding: 18px 20px !important; border: 1px solid #dde9f0 !important; border-radius: 16px !important; background: #fff !important; color: #1d2b3a !important; text-decoration: none !important; transition: border-color .15s ease; } body.woocommerce-account .tc-acc-shell a.tc-acc-act:hover { border-color: #2aa5d5 !important; color: #1d2b3a !important; } .tc-acc-shell .tc-acc-act-i, .tc-acc-shell .tc-acc-help-i { flex: none; width: 48px; height: 48px; border-radius: 12px; background: #eaf6fb; display: inline-flex; align-items: center; justify-content: center; } .tc-acc-shell .tc-acc-act-b { flex: 1 1 auto; min-width: 0; } body.woocommerce-account .tc-acc-shell span.tc-acc-act-t { display: block; font: 600 17px/22px 'Work Sans', Arial, sans-serif !important; color: #1d2b3a !important; } body.woocommerce-account .tc-acc-shell span.tc-acc-act-d { display: block; margin-top: 2px !important; font-size: 14px !important; line-height: 20px !important; color: #5d6b78 !important; } .tc-acc-shell .tc-acc-act > svg { flex: none; } .tc-acc-shell .tc-acc-help { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 22px 24px; border-radius: 18px; background: #f6fafc; } .tc-acc-shell .tc-acc-help-t { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .tc-acc-shell .tc-acc-help .tc-acc-h3 { font-size: 18px !important; line-height: 24px !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-content p.tc-acc-phone { margin: 0 !important; font: 400 15px/1.6 Inter, Arial, sans-serif !important; color: #4f5d6b !important; } body.woocommerce-account .tc-acc-shell p.tc-acc-phone a { color: #1d2b3a !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap; } /* Tables: orders, subscriptions, a subscription's orders */ body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table { width: 100% !important; margin: 0 !important; border: 1px solid #dde9f0 !important; border-collapse: separate !important; border-spacing: 0 !important; border-radius: 18px !important; overflow: hidden !important; background: #fff !important; box-shadow: none !important; font: 400 15px/1.45 Inter, Arial, sans-serif !important; font-variant-numeric: tabular-nums; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table :is(th, td) { padding: 16px 20px !important; border: 0 !important; border-bottom: 1px solid #eef3f6 !important; background: none !important; text-align: left !important; vertical-align: middle !important; color: #1d2b3a !important; font: inherit !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table thead th { background: #f6fafc !important; color: #5d6b78 !important; font: 600 13px/1.3 Inter, Arial, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table thead th .tc-span, body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table thead th .nobr { font: inherit !important; color: inherit !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table tbody tr:last-child :is(th, td) { border-bottom: 0 !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table tbody th { font-weight: 600 !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table tbody :is(th, td) a:not(.button) { color: #1f8fbf !important; font-weight: 600 !important; text-decoration: none !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table tbody :is(th, td) a:not(.button):hover { text-decoration: underline !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table .tc-span, body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table .woocommerce-Price-amount, body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table bdi { font: inherit !important; color: inherit !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table .order-total-amount { font-weight: 600 !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions, body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table td.order-actions { text-align: right !important; white-space: nowrap !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table td.subscription-plan { font-weight: 600 !important; } /* the actions WooCommerce gives each row: Pay orange, View outline, Cancel a text button */ body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table a.button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; min-height: 42px !important; margin: 0 0 0 6px !important; padding: 0 14px !important; border: 1.5px solid #2aa5d5 !important; border-radius: 10px !important; background: #fff !important; color: #1f8fbf !important; box-shadow: none !important; transform: none !important; font: 600 15px/1.2 'Work Sans', Arial, sans-serif !important; text-decoration: none !important; text-transform: none !important; white-space: nowrap !important; vertical-align: middle !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table a.button .tc-span { font: inherit !important; color: inherit !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table a.button:hover { background: #f3fafd !important; color: #1f8fbf !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table a.button.pay { border-color: #ff6500 !important; background: #ff6500 !important; color: #fff !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table a.button.pay:hover { filter: brightness(1.05); background: #ff6500 !important; color: #fff !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table a.button.cancel { border-color: transparent !important; background: none !important; color: #4f5d6b !important; padding: 0 6px !important; text-decoration: underline !important; text-underline-offset: 3px !important; } body.woocommerce-account .tc-acc-shell .woocommerce-pagination { display: flex !important; justify-content: flex-end !important; gap: 10px !important; margin: 0 !important; } body.woocommerce-account .tc-acc-shell .woocommerce-pagination a.button { display: inline-flex !important; align-items: center !important; min-height: 42px !important; margin: 0 !important; padding: 0 16px !important; border: 1.5px solid #2aa5d5 !important; border-radius: 10px !important; background: #fff !important; color: #1f8fbf !important; box-shadow: none !important; font: 600 15px/1.2 'Work Sans', Arial, sans-serif !important; text-decoration: none !important; } /* One subscription */ body.woocommerce-account .tc-acc-shell a.tc-acc-back { display: inline-flex !important; align-items: center !important; gap: 8px !important; align-self: flex-start; margin: 0 0 -8px !important; color: #1f8fbf !important; font: 600 15px/1.4 Inter, Arial, sans-serif !important; text-decoration: none !important; } body.woocommerce-account .tc-acc-shell a.tc-acc-back:hover { text-decoration: underline !important; } .tc-acc-shell .tc-acc-subhead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; } .tc-acc-shell .tc-acc-subhead > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .tc-acc-shell .tc-acc-subhead .tc-acc-p { font-size: 15px !important; } body.woocommerce-account .tc-acc-shell div.tc-acc-subcard.shop_table { width: auto !important; margin: 0 !important; border: 1px solid #dde9f0 !important; border-radius: 18px !important; background: #fff !important; } .tc-acc-shell .tc-acc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; margin: 0; padding: 0; } .tc-acc-shell .tc-acc-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tc-acc-shell .tc-acc-fact dt { margin: 0; font: 500 13px/1.4 Inter, Arial, sans-serif; color: #5d6b78; } .tc-acc-shell .tc-acc-fact dd { margin: 0; font: 600 16px/1.45 Inter, Arial, sans-serif; color: #1d2b3a; font-variant-numeric: tabular-nums; } .tc-acc-shell .tc-acc-fact dd .tc-span { font: inherit !important; color: inherit !important; } body.woocommerce-account .tc-acc-shell .tc-acc-fact dd .tc-acc-item { display: inline; margin: 0 !important; font-size: 14px !important; font-weight: 400 !important; } .tc-acc-shell .tc-acc-toggle { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border: 1px solid #dde9f0; border-radius: 14px; } .tc-acc-shell .tc-acc-toggle-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tc-acc-shell .tc-acc-toggle-t strong { font: 600 16px/1.4 Inter, Arial, sans-serif; color: #1d2b3a; } body.woocommerce-account .tc-acc-shell .tc-acc-toggle-t span { font-size: 14px !important; line-height: 1.5 !important; color: #4f5d6b !important; } /* the line follows the plugin's toggle: on or off */ .tc-acc-shell .tc-acc-toggle .tc-acc-toggle-on, .tc-acc-shell .tc-acc-toggle:has(.subscription-auto-renew-toggle--on) .tc-acc-toggle-off { display: none; } .tc-acc-shell .tc-acc-toggle:has(.subscription-auto-renew-toggle--on) .tc-acc-toggle-on { display: inline; } /* the plugin's toggle, as the design's switch (its link, classes and script unchanged) */ body.woocommerce-account .tc-acc-shell .wcs-auto-renew-toggle { flex: none; margin: 0 !important; } body.woocommerce-account .tc-acc-shell a.subscription-auto-renew-toggle { position: relative !important; display: block !important; width: 52px !important; height: 30px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: #c9d6de !important; box-shadow: none !important; text-decoration: none !important; cursor: pointer; transition: background-color .15s ease; } body.woocommerce-account .tc-acc-shell a.subscription-auto-renew-toggle.subscription-auto-renew-toggle--on { background: #2aa5d5 !important; } body.woocommerce-account .tc-acc-shell a.subscription-auto-renew-toggle .subscription-auto-renew-toggle__i { position: absolute !important; top: 3px !important; left: 3px !important; width: 24px !important; height: 24px !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .2) !important; transition: left .15s ease; } body.woocommerce-account .tc-acc-shell a.subscription-auto-renew-toggle.subscription-auto-renew-toggle--on .subscription-auto-renew-toggle__i { left: 25px !important; } body.woocommerce-account .tc-acc-shell a.subscription-auto-renew-toggle.subscription-auto-renew-toggle--disabled { opacity: .5; cursor: default; } body.woocommerce-account .tc-acc-shell a.subscription-auto-renew-toggle:focus-visible { outline: 2px solid #2aa5d5 !important; outline-offset: 3px !important; } .tc-acc-shell .tc-acc-subacts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } body.woocommerce-account .tc-acc-shell .tc-acc-subacts a.button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 46px !important; margin: 0 !important; padding: 0 18px !important; border: 1.5px solid #2aa5d5 !important; border-radius: 10px !important; background: #fff !important; color: #1f8fbf !important; box-shadow: none !important; transform: none !important; font: 600 15px/1.2 'Work Sans', Arial, sans-serif !important; text-decoration: none !important; text-transform: none !important; white-space: nowrap !important; } body.woocommerce-account .tc-acc-shell .tc-acc-subacts a.button .tc-span { font: inherit !important; color: inherit !important; } body.woocommerce-account .tc-acc-shell .tc-acc-subacts a.button:hover { background: #f3fafd !important; color: #1f8fbf !important; } body.woocommerce-account .tc-acc-shell .tc-acc-subacts a.button.cancel { border-color: transparent !important; background: none !important; color: #4f5d6b !important; padding: 0 6px !important; text-decoration: underline !important; text-underline-offset: 3px !important; } body.woocommerce-account .tc-acc-shell .tc-acc-subacts a.button svg { display: block !important; width: 18px !important; height: 18px !important; margin: 0 !important; } .tc-acc-shell .tc-acc-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; } .tc-acc-shell .tc-acc-list li { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 15.5px; line-height: 1.5; color: #1d2b3a; } .tc-acc-shell .tc-acc-list li svg { flex: none; margin-top: 2px; } /* "Orders for This Subscription" (the plugin's related orders) and the billing address */ body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-content > header h2, body.woocommerce-account .tc-acc-shell .woocommerce-customer-details h2 { margin: 0 !important; padding: 0 !important; border: 0 !important; font: 600 20px/26px 'Work Sans', Arial, sans-serif !important; color: #1d2b3a !important; text-align: left !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-content > header { margin: 0 0 -10px !important; } body.woocommerce-account .tc-acc-shell section.woocommerce-customer-details { display: flex !important; flex-direction: column !important; gap: 14px !important; margin: 0 !important; padding: clamp(20px, 3vw, 28px) !important; border: 1px solid #dde9f0 !important; border-radius: 18px !important; background: #fff !important; } body.woocommerce-account .tc-acc-shell section.woocommerce-customer-details address { margin: 0 !important; padding: 0 !important; border: 0 !important; font: 400 15.5px/24px Inter, Arial, sans-serif !important; font-style: normal !important; color: #1d2b3a !important; } body.woocommerce-account .tc-acc-shell section.woocommerce-customer-details address p { margin: 0 !important; font: inherit !important; color: inherit !important; } /* an order's page keeps today's table; only the page's 24px gap between it and the billing address */ body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-content > section.woocommerce-order-details, body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-content > section.woocommerce-order-details > table.woocommerce-table--order-details { margin-bottom: 0 !important; } body.woocommerce-account .tc-acc-shell .tc-acc-totals table { width: 100% !important; margin: 0 !important; } /* Account details */ body.woocommerce-account .tc-acc-shell .woocommerce-account-settings { display: flex !important; flex-direction: column !important; gap: 24px !important; margin: 0 !important; padding: 0 !important; } body.woocommerce-account .tc-acc-shell .woocommerce-account-settings .account-settings-section { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } body.woocommerce-account .tc-acc-shell .woocommerce-account-settings form.edit-account { display: flex !important; flex-direction: column !important; gap: 24px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } body.woocommerce-account .tc-acc-shell .woocommerce-account-settings .tc-acc-card.woocommerce-address-fields, body.woocommerce-account .tc-acc-shell .woocommerce-account-settings section.tc-acc-card { position: relative !important; margin: 0 !important; padding: clamp(20px, 3vw, 28px) !important; border: 1px solid #dde9f0 !important; border-radius: 18px !important; background: #fff !important; box-shadow: none !important; } body.woocommerce-account .tc-acc-shell .woocommerce-account-settings .woocommerce-address-fields__field-wrapper { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; margin: 0 !important; padding: 0 !important; } body.woocommerce-account .tc-acc-shell .woocommerce-account-settings .woocommerce-address-fields__field-wrapper > * { grid-column: 1 / -1 !important; } body.woocommerce-account .tc-acc-shell .woocommerce-account-settings .woocommerce-address-fields__field-wrapper > .clear { display: none !important; } body.woocommerce-account .tc-acc-shell .woocommerce-account-settings fieldset.password-change-fieldset { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; min-width: 0 !important; } body.woocommerce-account .tc-acc-shell .woocommerce-account-settings fieldset.password-change-fieldset > .form-row-wide { grid-column: 1 / -1 !important; } body.woocommerce-account .tc-acc-shell .woocommerce-account-settings fieldset.password-change-fieldset > :is(.form-row-first, .form-row-last) { grid-column: auto !important; } body.woocommerce-account .tc-acc-shell .woocommerce-account-settings form .form-row span#account_display_name_description, body.woocommerce-account .tc-acc-shell .woocommerce-account-settings form .form-row small.email-sync-notice { display: block !important; margin: 0 !important; font: 400 13px/1.45 Inter, Arial, sans-serif !important; font-style: normal !important; color: #5d6b78 !important; } body.woocommerce-account .tc-acc-shell .woocommerce-account-settings form .form-row.account-save-button { display: block !important; } body.woocommerce-account .tc-acc-shell .woocommerce-account-settings form button.button, body.woocommerce-account .tc-acc-shell .woocommerce-account-settings form button.woocommerce-Button { display: inline-flex !important; width: auto !important; min-height: 46px !important; padding: 0 18px !important; border-radius: 10px !important; font-size: 15px !important; } body.woocommerce-account .tc-acc-shell .woocommerce-account-settings form button.button svg { display: none !important; } body.woocommerce-account .tc-acc-shell .woocommerce-account-settings form button.cancel-edit-address { margin-left: 10px !important; background: #fff !important; border: 1.5px solid #2aa5d5 !important; color: #1f8fbf !important; } body.woocommerce-account .tc-acc-shell .woocommerce-account-settings form .form-row.address-save-button { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; } body.woocommerce-account .tc-acc-shell .woocommerce-account-settings form .form-row.address-save-button button.cancel-edit-address { margin: 0 !important; } /* the billing address: shown as an address, with Edit at the top right (today's toggle) */ body.woocommerce-account .tc-acc-shell .billing-address-section .billing-address-display address { margin: 16px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; font: 400 15.5px/24px Inter, Arial, sans-serif !important; font-style: normal !important; color: #1d2b3a !important; } body.woocommerce-account .tc-acc-shell .billing-address-section p.billing-address-actions { position: absolute !important; top: clamp(20px, 3vw, 28px) !important; right: clamp(20px, 3vw, 28px) !important; margin: 0 !important; } body.woocommerce-account .tc-acc-shell .billing-address-section button.edit-billing-address-toggle { display: inline-flex !important; align-items: center !important; gap: 6px !important; width: auto !important; min-height: 40px !important; margin: 0 !important; padding: 0 14px !important; border: 1.5px solid #2aa5d5 !important; border-radius: 10px !important; background: #fff !important; color: #1f8fbf !important; box-shadow: none !important; font: 600 15px/1.2 'Work Sans', Arial, sans-serif !important; cursor: pointer; } body.woocommerce-account .tc-acc-shell .billing-address-section button.edit-billing-address-toggle .tc-span { font: inherit !important; color: inherit !important; } body.woocommerce-account .tc-acc-shell .billing-address-section .billing-address-form { margin-top: 16px !important; } body.woocommerce-account .tc-acc-shell .billing-address-section .billing-address-form .woocommerce-address-fields__field-wrapper > :is(.form-row-first, .form-row-last) { grid-column: auto !important; } /* Payment methods: today's table, each saved card a row of its own */ body.woocommerce-account .tc-acc-shell table.woocommerce-MyAccount-paymentMethods { display: block !important; width: 100% !important; margin: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-MyAccount-paymentMethods thead { display: none !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-MyAccount-paymentMethods tbody { display: flex !important; flex-direction: column !important; gap: 16px !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-MyAccount-paymentMethods tbody tr { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 18px !important; padding: 18px 20px !important; border: 1px solid #dde9f0 !important; border-radius: 16px !important; background: #fff !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-MyAccount-paymentMethods tbody td { display: flex !important; align-items: center !important; gap: 8px !important; padding: 0 !important; border: 0 !important; background: none !important; font: 400 15px/1.45 Inter, Arial, sans-serif !important; color: #4f5d6b !important; text-align: left !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-MyAccount-paymentMethods tbody td::before { content: none !important; display: none !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-MyAccount-paymentMethods tbody td.payment-method-method { font: 600 16px/1.4 Inter, Arial, sans-serif !important; color: #1d2b3a !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-MyAccount-paymentMethods tbody td.payment-method-details { font-weight: 600 !important; color: #1d2b3a !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-MyAccount-paymentMethods tbody td.payment-method-details img { display: block !important; width: 40px !important; height: auto !important; margin: 0 !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-MyAccount-paymentMethods tbody td.payment-method-expires::before { content: "Expires" !important; display: inline !important; color: #5d6b78 !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-MyAccount-paymentMethods tbody td.payment-method-actions { margin-left: auto !important; gap: 10px !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-MyAccount-paymentMethods mark.default { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 4px 10px !important; border-radius: 999px !important; background: #e6f5fb !important; color: #17739a !important; font: 600 13px/1.3 Inter, Arial, sans-serif !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-MyAccount-paymentMethods mark.default::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2aa5d5; } body.woocommerce-account .tc-acc-shell table.woocommerce-MyAccount-paymentMethods td.payment-method-actions a.button { display: inline-flex !important; align-items: center !important; min-height: 40px !important; margin: 0 !important; padding: 0 6px !important; border: 0 !important; background: none !important; box-shadow: none !important; color: #4f5d6b !important; font: 600 15px/1.2 'Work Sans', Arial, sans-serif !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-transform: none !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-MyAccount-paymentMethods td.payment-method-actions a.button.default { padding: 0 14px !important; border: 1.5px solid #2aa5d5 !important; border-radius: 10px !important; background: #fff !important; color: #1f8fbf !important; text-decoration: none !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-MyAccount-paymentMethods td.payment-method-actions a.button .tc-span { font: inherit !important; color: inherit !important; } /* WooCommerce's notices on these pages */ body.woocommerce-account .tc-acc-shell :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { margin: 0 !important; padding: 14px 16px !important; border: 1px solid #cfe8f3 !important; border-radius: 12px !important; background: #eaf6fb !important; color: #1d2b3a !important; font: 400 15px/1.5 Inter, Arial, sans-serif !important; box-shadow: none !important; } body.woocommerce-account .tc-acc-shell .woocommerce-error { border-color: #f6c7b8 !important; background: #fdf0ec !important; } body.woocommerce-account .tc-acc-shell :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { content: none !important; display: none !important; } /* 035 fixes from the offline look */ body.woocommerce-account .tc-acc-shell .order-status-badge .tc-span { display: inline !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table thead th.woocommerce-orders-table__header-order-actions .tc-span { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table td.subscription-total { white-space: nowrap !important; } @media (min-width: 981px) { body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table td.subscription-plan { min-width: 170px; } } body.woocommerce-account .tc-acc-shell address { background: none !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; } body.woocommerce-account .tc-acc-shell address p, body.woocommerce-account .tc-acc-shell .woocommerce-customer-details address :is(.woocommerce-customer-details--phone, .woocommerce-customer-details--email) { display: block !important; padding: 0 !important; } body.woocommerce-account .tc-acc-shell address p::before, body.woocommerce-account .tc-acc-shell address::before { content: none !important; display: none !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-MyAccount-paymentMethods tbody td.payment-method-subscriptions::before { content: "Subscriptions:" !important; display: inline !important; color: #5d6b78 !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-MyAccount-paymentMethods tbody td.payment-method-title:empty { display: none !important; } @media (max-width: 980px) { .tc-acc-shell .tc-acc-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; } /* On phones the menu is a row of pills that scrolls sideways */ body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation-wrapper.tc-acc-nav-wrap { position: static !important; margin: 0 calc(-1 * clamp(16px, 4vw, 40px)) !important; overflow-x: auto !important; scrollbar-width: none; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation-wrapper.tc-acc-nav-wrap::-webkit-scrollbar { display: none; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation.tc-acc-nav ul { flex-direction: row !important; gap: 8px !important; width: max-content !important; padding: 0 clamp(16px, 4vw, 40px) !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation.tc-acc-nav li.woocommerce-MyAccount-navigation-link--customer-logout { margin: 0 !important; padding: 0 !important; border: 0 !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation.tc-acc-nav li.woocommerce-MyAccount-navigation-link a { min-height: 44px !important; padding: 0 16px !important; border: 1.5px solid #dde9f0 !important; border-radius: 999px !important; background: #fff !important; font-size: 14.5px !important; font-weight: 600 !important; white-space: nowrap !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation.tc-acc-nav li.woocommerce-MyAccount-navigation-link a svg { display: none !important; } body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation.tc-acc-nav li.woocommerce-MyAccount-navigation-link a[aria-current], body.woocommerce-account .tc-acc-shell .woocommerce-MyAccount-navigation.tc-acc-nav li.woocommerce-MyAccount-navigation-link.is-active a { border-color: #2aa5d5 !important; background: #2aa5d5 !important; color: #fff !important; } } @media (max-width: 560px) { .tc-acc-shell .tc-acc-sum, .tc-acc-shell .tc-acc-acts, .tc-acc-shell .tc-acc-facts { grid-template-columns: minmax(0, 1fr); } body.woocommerce-account .tc-acc-shell .woocommerce-account-settings :is(.woocommerce-address-fields__field-wrapper, fieldset.password-change-fieldset) { grid-template-columns: minmax(0, 1fr) !important; } body.woocommerce-account .tc-acc-shell .woocommerce-account-settings :is(.woocommerce-address-fields__field-wrapper, fieldset.password-change-fieldset) > * { grid-column: 1 / -1 !important; } /* each order or subscription becomes a card */ body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table thead { display: none !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table, body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table tbody { display: block !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table tbody tr { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 14px !important; padding: 16px 18px !important; border-bottom: 1px solid #eef3f6 !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table tbody tr:last-child { border-bottom: 0 !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table tbody :is(th, td) { display: block !important; padding: 0 !important; border: 0 !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table tbody :is(th, td)::before { content: none !important; display: none !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table tbody td:last-child { flex-basis: 100% !important; text-align: left !important; white-space: normal !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-orders-table tbody td:last-child a.button:first-child { margin-left: 0 !important; } body.woocommerce-account .tc-acc-shell .billing-address-section p.billing-address-actions { position: static !important; margin-top: 14px !important; } body.woocommerce-account .tc-acc-shell table.woocommerce-MyAccount-paymentMethods tbody td.payment-method-actions { margin-left: 0 !important; flex-basis: 100% !important; } }