/* My Account: sign in / create account, password reset, dashboard. Loaded on account pages only. Flat edges, Soft Sand dividers, Clay Coral only on the primary button. Signed-out pages use the two-column .cfs-auth layout from page.php: photo panel left, forms right. */ .woocommerce-account .woocommerce { --acc-line: var(--sand); --acc-field: rgba(38, 54, 56, 0.55); } /* ---------- Fields (all account pages) ---------- 48px, 2px radius. Border is Deep Ink at 55%: the lightest tint that keeps 3:1 against white (WCAG 1.4.11). */ .woocommerce-account .woocommerce form .form-row label { font: 500 0.8125rem / 1.3 var(--font-body); margin: 0 0 0.375rem; } .woocommerce-account .woocommerce form .form-row input.input-text, .woocommerce-account .woocommerce form .form-row input[type="password"], .woocommerce-account .woocommerce form .form-row input[type="email"], .woocommerce-account .woocommerce form .form-row select, .woocommerce-account .woocommerce form .form-row textarea { width: 100%; height: 48px; min-height: 48px; padding: 0 0.875rem; border: 1px solid var(--acc-field); border-radius: 2px; background: var(--paper); box-shadow: none; font-size: 1rem; } .woocommerce-account .woocommerce form .form-row textarea { height: auto; padding-block: 0.75rem; } .woocommerce-account .woocommerce form .form-row input:focus, .woocommerce-account .woocommerce form .form-row input:focus-visible, .woocommerce-account .woocommerce form .form-row select:focus-visible, .woocommerce-account .woocommerce form .form-row textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); box-shadow: none; } .woocommerce-account .woocommerce .button { border-radius: 2px; } .woocommerce-account .woocommerce .button:focus-visible, .woocommerce-account .woocommerce a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* Show/hide password toggle (WooCommerce prints the button; its own stylesheet and icon are not loaded here). */ .woocommerce-account .woocommerce .password-input { position: relative; display: block; } .woocommerce-account .woocommerce .password-input input { padding-right: 3rem; } .woocommerce-account .woocommerce .show-password-input { position: absolute; top: 0; right: 0; width: 48px; height: 48px; padding: 0; margin: 0; border: 0; background: transparent no-repeat center / 20px 20px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23263638' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 10s3-5.5 8.5-5.5S18.5 10 18.5 10 15.5 15.5 10 15.5 1.5 10 1.5 10z'/%3E%3Ccircle cx='10' cy='10' r='2.5'/%3E%3C/svg%3E"); } .woocommerce-account .woocommerce .show-password-input.display-password { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23263638' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 10s3-5.5 8.5-5.5S18.5 10 18.5 10 15.5 15.5 10 15.5 1.5 10 1.5 10z'/%3E%3Ccircle cx='10' cy='10' r='2.5'/%3E%3Cpath d='M3 17 17 3'/%3E%3C/svg%3E"); } .woocommerce-account .woocommerce .show-password-input::before, .woocommerce-account .woocommerce .show-password-input::after { content: none; } .woocommerce-account .woocommerce .show-password-input:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; } /* ---------- Auth layout (signed out, lost password) ---------- */ .site-main--auth { padding-block: 0; } .cfs-auth { display: grid; border-bottom: 1px solid var(--sand); } /* Photo panel: ivory column, photo with the dashed cut frame, two lines of copy below it. */ .cfs-auth__aside { display: flex; flex-direction: column; background: var(--ivory); } .cfs-auth__media { position: relative; margin: 0; height: 200px; background: var(--sand); } .cfs-auth__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; } .cfs-auth__frame { position: absolute; top: 12px; left: 12px; width: calc(100% - 24px); height: calc(100% - 24px); overflow: visible; pointer-events: none; } .cfs-auth__frame-line { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 6 6; } .cfs-auth__frame-end { stroke: var(--coral); stroke-width: 1.5; fill: none; } .cfs-auth__label { position: absolute; right: 20px; bottom: 20px; padding: 2px 6px; background: var(--ivory); color: var(--ink-soft); font: 500 11px / 1.3 var(--font-body); letter-spacing: 0.02em; } .cfs-auth__note { padding: var(--s-3) var(--gutter); } .cfs-auth__note p { margin: 0; } .cfs-auth__note-title { font: 800 1.375rem / 1.25 var(--font-head); letter-spacing: -0.01em; color: var(--ink); } .cfs-auth__note-text { margin-top: 0.375rem !important; font-size: 0.9375rem; color: var(--ink-soft); } /* Form column. */ .cfs-auth__panel { padding: var(--s-4) var(--gutter) var(--s-6); background: var(--paper); } .cfs-auth__inner { width: 100%; max-width: 440px; margin-inline: auto; } .cfs-auth .woocommerce-notices-wrapper:empty { display: none; } .cfs-auth .woocommerce-message, .cfs-auth .woocommerce-info, .cfs-auth .woocommerce-error { display: block; padding: 0.75rem 1rem; border: 0; border-left: 3px solid var(--ink); border-radius: 0; background: var(--ivory); font-size: 0.9375rem; } .cfs-auth .woocommerce-error { border-left-color: var(--coral); } .cfs-auth .woocommerce-error li + li { margin-top: 0.25rem; } @media (min-width: 960px) { .cfs-auth { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); min-height: clamp(600px, calc(100svh - 93px), 780px); } .cfs-auth__media { flex: 1 1 auto; height: auto; min-height: 440px; } .cfs-auth__img { position: absolute; inset: 0; object-position: 50% 62%; } .cfs-auth__frame { top: 16px; left: 16px; width: calc(100% - 32px); height: calc(100% - 32px); z-index: 1; } .cfs-auth__label { right: 24px; bottom: 24px; z-index: 1; } /* Copy lines up with the logo: container edge plus gutter. */ .cfs-auth__note { padding: var(--s-3) var(--s-4) var(--s-4) calc(var(--gutter) + max(0px, (100vw - var(--container)) / 2)); border-top: 1px solid var(--sand); } .cfs-auth__panel { display: flex; align-items: center; padding: var(--s-5) var(--s-5); border-left: 1px solid var(--sand); } /* Tabs keep their place when switching: the box is as tall as the longer (register) form. */ .cfs-auth__inner:has(.cfs-forms--tabs) { min-height: 32rem; } } /* The frame draws itself once (0.8 s) when motion is allowed. */ @media (prefers-reduced-motion: no-preference) { .cfs-auth__frame-draw { stroke-dasharray: 1; animation: cfs-auth-draw 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both; } .cfs-auth__frame-end { stroke-dasharray: 1; animation: cfs-auth-draw 240ms ease-out 900ms both; } } @keyframes cfs-auth-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } /* ---------- Tabs and headings ---------- */ .cfs-tabs { display: flex; gap: var(--s-4); margin: 0 0 var(--s-4); box-shadow: inset 0 -1px 0 var(--sand); } .cfs-tabs__tab { appearance: none; min-height: 44px; margin: 0; padding: 0 0 0.75rem; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--ink-soft); font: 800 1.25rem / 1.2 var(--font-head); letter-spacing: -0.01em; cursor: pointer; } .cfs-tabs__tab:hover { color: var(--ink); } .cfs-tabs__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); } .cfs-tabs__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; } .no-js .cfs-tabs { display: none; } /* One heading styled as a single tab (lost password, reset, no-JS forms). */ .cfs-heading { margin: 0 0 var(--s-3); box-shadow: inset 0 -1px 0 var(--sand); font: 800 1.5rem / 1.2 var(--font-head); letter-spacing: -0.01em; color: var(--ink); } .cfs-heading > span { display: inline-block; padding-bottom: 0.75rem; border-bottom: 2px solid var(--ink); } .js .cfs-forms--tabs .cfs-heading { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; } .js .cfs-forms--tabs .cfs-forms__panel:not(.is-active) { display: none; } .cfs-forms__panel + .cfs-forms__panel { margin-top: var(--s-6); } .js .cfs-forms--tabs .cfs-forms__panel + .cfs-forms__panel { margin-top: 0; } /* ---------- Form parts ---------- */ .cfs-auth .woocommerce form.login, .cfs-auth .woocommerce form.register, .cfs-auth .woocommerce form.lost_reset_password { max-width: none; margin: 0; padding: 0; border: 0; } .cfs-forms__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem var(--s-2); margin: 0.25rem 0 var(--s-3); font-size: 0.875rem; } .cfs-auth .woocommerce form .cfs-forms__row .form-row, .cfs-forms__row .lost_password { margin: 0; } .cfs-auth .woocommerce form .cfs-forms__remember label { display: flex; align-items: center; gap: 0.5rem; margin: 0; font: 400 0.875rem / 1.3 var(--font-body); cursor: pointer; } .cfs-forms__remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); } .cfs-auth .woocommerce form .cfs-forms__submit { margin: 0; } .cfs-auth .woocommerce form .cfs-forms__submit .button { width: 100%; min-height: 48px; font-size: 1rem; } .cfs-forms__switch { margin: var(--s-2) 0 0; font-size: 0.75rem; color: var(--ink-soft); text-align: center; } .cfs-forms__switch a { color: var(--ink); font-weight: 500; } .cfs-forms__hint { display: block; margin-top: 0.375rem; font-size: 0.8125rem; color: var(--ink-soft); } .cfs-forms__lede { margin: 0 0 var(--s-3); font-size: 0.9375rem; color: var(--ink-soft); } .cfs-forms__back { margin: var(--s-3) 0 0; padding-top: var(--s-2); border-top: 1px solid var(--sand); font-size: 0.875rem; } /* Account perks: three lines with small monoline icons. */ .cfs-perks { display: grid; gap: 0.625rem; list-style: none; margin: var(--s-3) 0; padding: var(--s-2) 0; border-block: 1px solid var(--sand); } .cfs-perks li { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; color: var(--ink); } .cfs-perks .icon { flex: none; } .cfs-auth .woocommerce-privacy-policy-text { margin: 0 0 var(--s-2); color: var(--ink-soft); font-size: 0.75rem; line-height: 1.5; } .cfs-auth .woocommerce-privacy-policy-text p { margin: 0; } /* ---------- Signed in: shell ---------- 1120px column, "Hi, name" row with Sign out, three underlined tabs (Downloads, Orders, Account). */ .cfs-acct-main { max-width: calc(1120px + 2 * var(--gutter)); padding-block: var(--s-4) var(--s-6); } .woocommerce-account .entry-content > .woocommerce { margin: 0; } .cfs-acct-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem var(--s-2); margin: 0 0 var(--s-2); } .cfs-acct-head__title { margin: 0; font: 800 1.5rem / 1.25 var(--font-head); letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; } .cfs-acct-head__out { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 0.25em; } .cfs-acct-head__out:hover { text-decoration-thickness: 2px; } .cfs-acct-head__out:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .woocommerce-account .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-account .woocommerce-notices-wrapper .woocommerce-error, .woocommerce-account .woocommerce-notices-wrapper .woocommerce-info { border-radius: 2px; } /* Tabs: one row, scrolls sideways on phones; the active tab is underlined in ink. */ .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { display: block; } .woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; gap: var(--s-4); overflow-x: auto; margin: 0 0 var(--s-4); padding: 0 2px; border: 0; box-shadow: inset 0 -1px 0 var(--sand); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; } .woocommerce-account .woocommerce-MyAccount-navigation li { flex: none; border: 0; } .woocommerce-account .woocommerce-MyAccount-navigation a { display: flex; align-items: center; min-height: 48px; padding: 0 0 2px; border-bottom: 2px solid transparent; color: var(--ink-soft); font: 700 1rem / 1.2 var(--font-head); text-decoration: none; white-space: nowrap; box-shadow: none; } .woocommerce-account .woocommerce-MyAccount-navigation a:hover { color: var(--ink); } .woocommerce-account .woocommerce-MyAccount-navigation .is-active a { color: var(--ink); border-bottom-color: var(--ink); box-shadow: none; padding-left: 0; font-weight: 800; } .woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; } /* ---------- Sections ---------- */ .cfs-acct-sec { margin: 0 0 var(--s-5); } .cfs-acct-sec__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem var(--s-2); margin: 0 0 var(--s-2); } .cfs-acct-h, .entry-content .cfs-acct-h { margin: 0; font: 800 1.25rem / 1.25 var(--font-head); letter-spacing: -0.01em; color: var(--ink); } .entry-content .cfs-acct-h--sm { font-size: 1.0625rem; } .cfs-acct-sec__link { color: var(--ink); font: 700 var(--fs-sm) / 1.4 var(--font-head); text-decoration: underline; text-underline-offset: 0.25em; } .cfs-acct-sec__count { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); } .cfs-acct-note { margin: 0; padding: var(--s-2) 0; border-block: 1px solid var(--sand); color: var(--ink-soft); font-size: var(--fs-sm); } /* Tags: product formats and licence; badge: one file's format. */ .cfs-tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.125rem 0.5rem; border: 1px solid var(--sand); color: var(--ink); font: 700 0.75rem / 1.5 var(--font-head); letter-spacing: 0.02em; } .cfs-tag--license { padding-inline: 0.25rem 0; border-color: transparent; color: var(--ink-soft); font-weight: 600; letter-spacing: 0; } .cfs-badge { display: inline-block; padding: 0 0.375rem; border: 1px solid var(--sand); background: var(--ivory); color: var(--ink); font: 700 0.6875rem / 1.6 var(--font-head); letter-spacing: 0.04em; } /* Status pills: completed has a sage frame, open orders a dashed ink one (the cut line), closed ones are muted. */ .cfs-pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.5rem; border: 1px solid var(--ink-soft); color: var(--ink); font: 500 0.8125rem / 1.5 var(--font-body); white-space: nowrap; } .cfs-pill::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .cfs-pill--done { border-color: var(--sage); } .cfs-pill--done::before { background: var(--sage); } .cfs-pill--open { border-style: dashed; border-color: var(--ink); } .cfs-pill--muted { border-color: var(--sand); color: var(--ink-soft); } /* ---------- Download group (template-parts/account-download-row.php) ---------- */ .cfs-dl__head { display: flex; align-items: flex-start; gap: var(--s-2); min-width: 0; } .cfs-dl__media { flex: none; width: 72px; height: 72px; overflow: hidden; background: var(--sand); } .cfs-dl--card .cfs-dl__media { width: 64px; height: 64px; } .entry-content .cfs-dl__img, .cfs-dl__img { border: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .cfs-dl__info { min-width: 0; } .entry-content .cfs-dl__title { margin: 0; font: 700 1rem / 1.35 var(--font-head); letter-spacing: -0.005em; overflow-wrap: anywhere; } .cfs-dl__title a { color: var(--ink); text-decoration: none; } .cfs-dl__title a:hover { text-decoration: underline; text-underline-offset: 0.2em; } .cfs-dl__meta { display: flex; flex-wrap: wrap; gap: 0 0.375rem; margin: 0.25rem 0 0; color: var(--ink-soft); font-size: var(--fs-xs); } .cfs-dl__meta a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -0.8rem; color: var(--ink-soft); text-underline-offset: 0.2em; } .cfs-dl__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; list-style: none; margin: 0.5rem 0 0; padding: 0; } .cfs-dl__list { list-style: none; margin: 0; padding: 0; } .cfs-dl__file { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: 0.625rem 0; } .cfs-dl__file + .cfs-dl__file { border-top: 1px solid var(--sand); } .cfs-dl__fname { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .cfs-dl__fname-text { color: var(--ink); font-size: var(--fs-sm); line-height: 1.4; overflow-wrap: anywhere; } .cfs-dl__fmeta { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-soft); font-size: var(--fs-xs); } .woocommerce a.button.cfs-dl__btn, .cfs-dl__btn { flex: none; gap: 0.5rem; min-height: 44px; padding: 0.375rem 1rem; font-size: 0.875rem; } .cfs-dl__note { margin: 0.375rem 0 0; color: var(--ink-soft); font-size: var(--fs-xs); } /* Row: Downloads page and order view. Name and tags left, files right from 768px. */ .cfs-dl-stack { border-top: 1px solid var(--sand); } .cfs-dl--row { display: grid; gap: var(--s-2) var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--sand); } @media (min-width: 768px) { .cfs-dl--row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .cfs-dl--row .cfs-dl__files { padding-top: 0; } .cfs-dl--row .cfs-dl__file:first-child { padding-top: 0; } } /* Card: dashboard, three across on desktop. A single file shows just the button (its format is in the tags). */ .cfs-dl-grid { display: grid; gap: var(--s-2); } @media (min-width: 720px) { .cfs-dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .cfs-dl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .cfs-dl--card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2); border: 1px solid var(--sand); background: var(--paper); } .cfs-dl--card .cfs-dl__files { margin-top: auto; } .cfs-dl--card:not(.cfs-dl--single) .cfs-dl__files { border-top: 1px solid var(--sand); } .cfs-dl--card.cfs-dl--single .cfs-dl__fname { display: none; } .cfs-dl--card.cfs-dl--single .cfs-dl__file { padding: 0; } .woocommerce .cfs-dl--card.cfs-dl--single a.button.cfs-dl__btn { width: 100%; min-height: 44px; } @media (max-width: 599px) { .cfs-dl__file { flex-direction: column; align-items: stretch; gap: 0.5rem; } .woocommerce a.button.cfs-dl__btn { width: 100%; min-height: 44px; } } /* ---------- Dashboard ---------- */ .cfs-olist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sand); } .cfs-olist__row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "no no status" "date total view"; align-items: center; gap: 0.25rem var(--s-2); padding: 0.75rem 0; border-bottom: 1px solid var(--sand); font-size: var(--fs-sm); } .cfs-olist__no { grid-area: no; font: 700 var(--fs-sm) / 1.4 var(--font-head); color: var(--ink); } .cfs-olist__date { grid-area: date; color: var(--ink-soft); } .cfs-olist__total { grid-area: total; } .cfs-olist__status { grid-area: status; justify-self: end; } .cfs-olist__view { grid-area: view; justify-self: end; display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; } @media (min-width: 700px) { .cfs-olist__row { grid-template-columns: minmax(7rem, 1.2fr) minmax(8rem, 1.4fr) minmax(5rem, 1fr) minmax(8rem, 1fr) 4rem; grid-template-areas: "no date total status view"; } .cfs-olist__status { justify-self: start; } } .cfs-acct-help { display: grid; gap: var(--s-2); margin: 0; } @media (min-width: 700px) { .cfs-acct-help { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cfs-help-card { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2); border: 1px solid var(--sand); background: var(--ivory); color: var(--ink); text-decoration: none; transition: border-color var(--dur) var(--ease); } .cfs-help-card:hover { border-color: var(--ink); } .cfs-help-card__icon { flex: none; width: 24px; height: 24px; margin-top: 0.125rem; color: var(--ink); } .cfs-help-card__text strong { display: block; font: 700 1rem / 1.35 var(--font-head); } .cfs-help-card__text span { display: block; margin-top: 0.125rem; color: var(--ink-soft); font-size: var(--fs-sm); } .cfs-help-card:hover .cfs-help-card__text strong { text-decoration: underline; text-underline-offset: 0.2em; } /* Empty state: the cutting-mat photo beside one line and a button. */ .cfs-empty { display: grid; gap: var(--s-3); align-items: center; margin: 0 0 var(--s-5); padding: var(--s-4) 0; border-block: 1px solid var(--sand); } .cfs-empty__media { width: 160px; aspect-ratio: 1; background: var(--sand); } .entry-content .cfs-empty__media img { border: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .cfs-empty__text p { max-width: 44ch; margin: 0.5rem 0 var(--s-3); color: var(--ink-soft); font-size: var(--fs-sm); } @media (min-width: 768px) { .cfs-empty { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-5); } .cfs-empty__media { width: 240px; } } /* ---------- Orders ---------- */ .woocommerce table.shop_table.cfs-orders { margin: 0; font-size: var(--fs-sm); } .woocommerce table.shop_table.cfs-orders thead th { padding: 0 1rem 0.625rem 0; border-bottom: 1px solid var(--ink); color: var(--ink-soft); font: 600 var(--fs-xs) / 1.4 var(--font-head); white-space: nowrap; } .woocommerce table.shop_table.cfs-orders tbody th, .woocommerce table.shop_table.cfs-orders tbody td { padding: 0.875rem 1rem 0.875rem 0; border-bottom: 1px solid var(--sand); color: var(--ink); font: 400 var(--fs-sm) / 1.45 var(--font-body); text-align: left; vertical-align: middle; } .woocommerce table.shop_table.cfs-orders .woocommerce-orders-table__cell-order-actions { padding-right: 0; text-align: right; white-space: nowrap; } .cfs-orders__no { color: var(--ink); font: 700 var(--fs-sm) / 1.4 var(--font-head); text-decoration: underline; text-underline-offset: 0.25em; } .cfs-orders__total { font-weight: 600; } .cfs-orders__items, .cfs-orders__files { display: block; color: var(--ink-soft); font-size: var(--fs-xs); } .cfs-orders__dl { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 44px; margin-block: -0.75rem; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; } .cfs-orders__none { color: var(--ink-soft); font-size: var(--fs-xs); } .woocommerce a.button.cfs-orders__btn { min-height: 44px; padding: 0.375rem 0.875rem; font-size: 0.8125rem; } .cfs-orders__btn + .cfs-orders__btn { margin-left: 0.5rem; } /* Phones: one card per order instead of the table. */ .cfs-ocards { display: none; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sand); } .cfs-ocard { padding: var(--s-2) 0; border-bottom: 1px solid var(--sand); } .cfs-ocard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } .cfs-ocard__no { display: inline-flex; align-items: center; min-height: 44px; margin-block: -0.75rem; color: var(--ink); font: 700 1rem / 1.3 var(--font-head); text-decoration: underline; text-underline-offset: 0.25em; } .cfs-ocard__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem var(--s-2); margin: 0.75rem 0; } .cfs-ocard__facts dt { color: var(--ink-soft); font-size: var(--fs-xs); } .cfs-ocard__facts dd { margin: 0.125rem 0 0; font-size: var(--fs-sm); } .cfs-ocard__actions { display: flex; gap: 0.5rem; } .woocommerce .cfs-ocard__actions a.button.cfs-orders__btn { flex: 1; min-height: 44px; margin: 0; } @media (max-width: 767px) { .woocommerce table.shop_table.cfs-orders { display: none; } .cfs-ocards { display: block; } } .cfs-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-3); } .cfs-pager__count { color: var(--ink-soft); font-size: var(--fs-sm); } .woocommerce .cfs-pager a.button { min-height: 44px; } .cfs-pager .woocommerce-button--next { margin-left: auto; } /* ---------- Single order ---------- */ .cfs-ov__back { margin: 0 0 var(--s-2); font-size: var(--fs-sm); } .cfs-ov__back a { color: var(--ink); text-underline-offset: 0.25em; } .cfs-ov { margin: 0 0 var(--s-5); padding: var(--s-3) 0; border-block: 1px solid var(--sand); } .cfs-ov__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem var(--s-2); } .cfs-ov__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin: var(--s-3) 0 0; } .cfs-ov__facts dt { color: var(--ink-soft); font-size: var(--fs-xs); } .cfs-ov__facts dd { margin: 0.125rem 0 0; font-weight: 600; font-size: var(--fs-sm); overflow-wrap: anywhere; } @media (min-width: 768px) { .cfs-ov__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .cfs-ov__notes { list-style: none; margin: var(--s-2) 0 0; padding: 0; border-top: 1px solid var(--sand); font-size: var(--fs-sm); } .cfs-ov__notes li { padding: 0.75rem 0; border-bottom: 1px solid var(--sand); } .cfs-ov__notes .meta { margin: 0; color: var(--ink-soft); font-size: var(--fs-xs); } .cfs-ov__notes .description p { margin: 0.25rem 0 0; } /* Items table and billing address from WooCommerce (order/order-details.php), set small. */ .cfs-ov__details .woocommerce-order-details__title, .cfs-ov__details .woocommerce-column__title { margin: 0 0 var(--s-2); font: 800 1.25rem / 1.25 var(--font-head); letter-spacing: -0.01em; } .cfs-ov__details .woocommerce-column__title { font-size: 1rem; } .woocommerce .cfs-ov__details table.shop_table { margin: 0 0 var(--s-4); } .woocommerce .cfs-ov__details table.shop_table thead th { padding: 0 0 0.625rem; } .woocommerce .cfs-ov__details table.shop_table td, .woocommerce .cfs-ov__details table.shop_table tfoot th { padding: 0.75rem 0; border-bottom: 1px solid var(--sand); } .woocommerce .cfs-ov__details table.shop_table .product-total, .woocommerce .cfs-ov__details table.shop_table tfoot td { text-align: right; } .woocommerce .cfs-ov__details table.shop_table tfoot th { color: var(--ink-soft); font: 400 var(--fs-sm) / 1.4 var(--font-body); text-align: left; } .woocommerce .cfs-ov__details table.shop_table tfoot td { color: var(--ink); font-weight: 600; } .cfs-ov__details .product-name a { color: var(--ink); } .cfs-ov__details .wc-item-meta { list-style: none; margin: 0.25rem 0 0; padding: 0; color: var(--ink-soft); font-size: var(--fs-xs); } .cfs-ov__details .wc-item-meta p { display: inline; margin: 0; } .cfs-ov__details .woocommerce-customer-details { max-width: 440px; font-size: var(--fs-sm); } .cfs-ov__details .woocommerce-customer-details address { margin: 0; color: var(--ink-soft); font-style: normal; line-height: 1.6; } .cfs-ov__details .woocommerce-customer-details address p { margin: 0; } /* ---------- Account details ---------- "Account" title, then "Profile" and "Password" fieldsets of one form (440px), each with its own Save, then a billing details summary. Phones: full width. */ .cfs-acct-form { max-width: 440px; } .entry-content .cfs-acct-form .cfs-acct-form__title { margin: 0 0 var(--s-3); } .woocommerce-account .cfs-acct-form form .form-row { float: none; width: auto; margin: 0 0 var(--s-2); padding: 0; } .cfs-acct-form__pair { display: grid; gap: 0 var(--s-2); } @media (min-width: 480px) { .cfs-acct-form__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cfs-acct-form__sec { min-width: 0; margin: 0; padding: 0; border: 0; } .cfs-acct-form__sec + .cfs-acct-form__sec { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--sand); } .cfs-acct-form__sec legend, .entry-content .cfs-acct-form__sec legend { float: left; width: 100%; margin: 0 0 var(--s-2); padding: 0; } .cfs-acct-form__sec legend + * { clear: both; } .entry-content .cfs-acct-form__pw legend { margin-bottom: 0.375rem; } .cfs-acct-form__opt { color: var(--ink-soft); font-weight: 400; } .cfs-acct-form__lede { margin: 0 0 var(--s-2); color: var(--ink-soft); font-size: var(--fs-sm); } .cfs-acct-form__note { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; } .cfs-acct-form__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; font-size: var(--fs-sm); text-underline-offset: 0.25em; } .woocommerce-account .cfs-acct-form form .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 0.625rem; margin: 0; font: 400 var(--fs-sm) / 1.45 var(--font-body); cursor: pointer; } .cfs-acct-form .woocommerce-form__input-checkbox { flex: none; width: 18px; height: 18px; margin: 0.125rem 0 0; accent-color: var(--ink); } .cfs-acct-form__submit { margin: var(--s-3) 0 0; } .woocommerce .cfs-acct-form__submit .button { min-width: 160px; min-height: 48px; font-size: 1rem; } .cfs-acct-billing { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--sand); font-size: var(--fs-sm); } .cfs-acct-billing__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } .cfs-acct-billing address { margin: 0.5rem 0 0; color: var(--ink-soft); font-style: normal; line-height: 1.6; } .cfs-acct-billing .cfs-acct-form__lede { margin: 0.5rem 0 0; } .cfs-acct-billing a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-underline-offset: 0.25em; } @media (max-width: 479px) { .woocommerce .cfs-acct-form__submit .button { width: 100%; } } /* Notices in the signed-in area: ivory with an ink rule (sage for success, coral for errors); a button inside a notice is secondary (outlined) so the page keeps one coral action. */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-error { border-color: var(--sand); border-left: 3px solid var(--ink); background: var(--ivory); color: var(--ink); font-size: var(--fs-sm); } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message { border-left-color: var(--sage); } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-error { border-left-color: var(--coral); } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-error li + li { margin-top: 0.25rem; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button { border: 1px solid var(--ink); background: transparent; color: var(--ink); } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button:hover, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button:hover { background: var(--ink); color: var(--paper); } /* Billing address form (edit-address/billing): same column. */ .woocommerce-account .woocommerce-MyAccount-content > form:has(.woocommerce-address-fields) { max-width: 440px; } .woocommerce-account .woocommerce-address-fields .form-row { float: none; width: auto; margin: 0 0 var(--s-2); } /* Touch targets: 48px on phones. */ @media (max-width: 767px) { .cfs-dl__btn, .woocommerce a.button.cfs-dl__btn, .woocommerce a.button.cfs-orders__btn, .woocommerce .cfs-dl--card.cfs-dl--single a.button.cfs-dl__btn, .woocommerce .cfs-ocard__actions a.button.cfs-orders__btn, .woocommerce .cfs-pager a.button, .cfs-olist__view, .cfs-acct-billing a { min-height: 48px; } .cfs-orders__dl, .cfs-ocard__no, .cfs-dl__meta a { min-height: 48px; margin-block: -0.9rem; } }