/* ===================================================================== 6 MUSHROOMS - ACCOUNT (scoped to .six-account) Sign in / create account when logged out, dashboard when logged in. All sizes in px (theme sets html font-size:10px, so rem is 62.5% off). Every colour comes from the global tokens in chrome.css - never hardcode. ===================================================================== */ .six-account{ --f: var(--ap-font); --ink:var(--ap-ink); --ink-2:var(--ap-ink-2); --muted:var(--ap-mute); --faint:var(--ap-faint); --line:var(--ap-line); --line-soft:var(--ap-line-soft); --line-strong:var(--ap-line-strong); --canvas:var(--ap-canvas); --parch:var(--ap-parchment); --surface:var(--ap-surface); --plum:var(--ap-plum); --plum-h:var(--ap-plum-dark); --plum-tint:var(--ap-plum-tint); --sale:var(--ap-sale); --ok:var(--ap-stock); --wrap:1280px; --gut:clamp(20px,4vw,48px); --r:18px; --e:cubic-bezier(.16,1,.3,1); font-family:var(--f); color:var(--ink); background:var(--canvas); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .six-account *{box-sizing:border-box;} .six-account .ac-wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); width:100%;} .six-account h1,.six-account h2,.six-account h3{margin:0; font-weight:700; letter-spacing:-.022em; line-height:1.18;} .six-account p{margin:0;} .six-account a{color:inherit; text-decoration:none;} /* ---------- HEAD ---------- */ .six-account .ac-crumb{padding:18px 0 0; font-size:12.5px; color:var(--faint);} .six-account .ac-crumb .ac-wrap{display:flex; flex-wrap:wrap; align-items:center; gap:7px;} .six-account .ac-crumb a:hover{color:var(--ink); text-decoration:underline;} .six-account .ac-head{padding:20px 0 26px; border-bottom:1px solid var(--line-soft);} .six-account .ac-head h1{font-size:clamp(28px,3vw,38px); letter-spacing:-.026em;} .six-account .ac-sub{margin-top:8px; font-size:15px; color:var(--muted); max-width:60ch;} .six-account .ac-body{padding-block:30px 72px;} /* strip the Beaver Builder chrome the page content carries. The register row was authored as a full-screen centred login, so it carries a 1500px min-height and vertical padding - both have to go or the card floats in a huge empty box. */ .six-account .fl-builder-content, .six-account .fl-row, .six-account .fl-row-content-wrap, .six-account .fl-row-content, .six-account .fl-col-group, .six-account .fl-col, .six-account .fl-col-content, .six-account .fl-module, .six-account .fl-module-content{ max-width:none !important; width:100% !important; min-height:0 !important; height:auto !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; padding-top:0 !important; padding-bottom:0 !important; background-color:transparent !important; background-image:none !important; display:block !important; } .six-account .fl-row-default-height, .six-account .fl-row-full-height, .six-account .fl-row-align-center{min-height:0 !important;} /* ===================================================================== LOGGED OUT - a single centred card. WooCommerce registration is switched off for this store (the site keeps a separate /register page), so only the login form renders here. A full-width form would look broken, so the panel is capped and centred. ===================================================================== */ .six-account.is-out .ac-panel, .six-account.is-register .ac-panel{ max-width:460px; margin-inline:auto; background:var(--canvas); border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--ap-shadow-sm); } .six-account.is-in .ac-panel{max-width:none;} /* the WooCommerce wrapper inside the card must not add its own box */ .six-account.is-out .ac-panel .woocommerce, .six-account.is-register .ac-panel .fl-builder-content{ background:none; border:0; padding:0; margin:0; } .six-account.is-out .ac-panel form.login{ border:0 !important; padding:0 !important; margin:0 !important; background:none !important; box-shadow:none !important; } /* the page H1 already says "Sign in" - drop WooCommerce's duplicate "Login" */ .six-account.is-out .ac-panel > .woocommerce > h2, .six-account.is-out .ac-panel form.login > h2:first-child{display:none;} /* "New customer? Create an account" / "Already have an account? Sign in" */ .six-account .ac-alt{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line-soft); font-size:14px; color:var(--muted); text-align:center; } .six-account .ac-alt a{color:var(--plum) !important; font-weight:700; text-decoration:underline; text-underline-offset:3px;} /* if registration is ever re-enabled, the two forms sit side by side again */ .six-account.is-out .woocommerce:has(form.register) .u-columns.col2-set, .six-account.is-out .woocommerce:has(form.register) .col2-set{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,32px); align-items:start; } .six-account.is-out .ac-panel:has(form.register){max-width:900px;} .six-account.is-out .col2-set .col-1, .six-account.is-out .col2-set .col-2, .six-account.is-out .woocommerce > form.login, .six-account.is-out .woocommerce > form.register{ width:auto !important; float:none !important; margin:0 !important; background:var(--canvas); border:1px solid var(--line); border-radius:var(--r); padding:26px !important; box-shadow:var(--ap-shadow-sm); } .six-account .col-1 h2, .six-account .col-2 h2, .six-account form.login h2, .six-account form.register h2{ font-size:12.5px !important; font-weight:700 !important; letter-spacing:.07em; text-transform:uppercase; color:var(--faint) !important; margin:0 0 16px !important; padding:0 0 12px !important; border-bottom:1px solid var(--line); } /* WooCommerce nests the forms inside the columns - don't double-card them */ .six-account .col-1 form.login, .six-account .col-2 form.register{ border:0 !important; padding:0 !important; margin:0 !important; background:none !important; box-shadow:none !important; } /* ---------- PowerPack forms (the /register page and any legacy login form) ---- These carry the parent theme's dark-plum slab styling, which is off-palette. Reset the container and put the fields on the same scale as everything else. */ /* the module paints a #480371 aubergine slab on .pp-rf-wrap / .pp-lf-wrap - that is the dark box that made this page look off-brand */ .six-account .pp-rf-wrap, .six-account .pp-lf-wrap, .six-account .pp-login-form, .six-account .pp-registration-form, .six-account .pp-form-content, .six-account form[id^="pp-form"], .six-account form[id^="pp-rf"], .six-account form[id^="pp-lf"]{ background:none !important; background-color:transparent !important; background-image:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; color:var(--ink) !important; } .six-account .ac-panel img[alt*="logo" i]{display:none;} /* the card has the site header above it */ .six-account form[id^="pp-"] label, .six-account .pp-login-form label, .six-account .pp-registration-form label{ display:block; margin:0 0 6px; font-size:12.5px !important; font-weight:400 !important; color:var(--muted) !important; letter-spacing:-.005em; } .six-account form[id^="pp-"] input[type=text], .six-account form[id^="pp-"] input[type=email], .six-account form[id^="pp-"] input[type=password], .six-account form[id^="pp-"] input[type=tel], .six-account form[id^="pp-"] select{ width:100% !important; height:48px !important; min-height:48px; padding:0 14px !important; margin:0 0 14px !important; font-family:inherit !important; font-size:15px !important; color:var(--ink) !important; background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:11px !important; box-shadow:none !important; outline:none; transition:border-color .18s var(--e), box-shadow .18s var(--e); } .six-account form[id^="pp-"] input::placeholder{color:var(--faint) !important;} .six-account form[id^="pp-"] input:focus, .six-account form[id^="pp-"] select:focus{ border-color:var(--plum) !important; background:var(--canvas) !important; box-shadow:0 0 0 3px var(--plum-tint) !important;} .six-account form[id^="pp-"] button[type=submit], .six-account form[id^="pp-"] input[type=submit], .six-account .pp-button, .six-account .pp-submit-button{ display:flex !important; align-items:center; justify-content:center; width:100% !important; min-height:48px; margin-top:4px !important; padding:13px 26px !important; background:var(--plum) !important; color:var(--ap-on-dark) !important; border:0 !important; border-radius:9999px !important; font-family:inherit !important; font-size:15px !important; font-weight:700 !important; letter-spacing:-.012em; text-transform:none !important; cursor:pointer; transition:background-color .2s var(--e), transform .15s var(--e); } .six-account form[id^="pp-"] button[type=submit]:hover{background:var(--plum-h) !important; transform:translateY(-1px);} .six-account form[id^="pp-"] a{color:var(--plum) !important; font-size:13.5px; font-weight:400;} .six-account form[id^="pp-"] a:hover{text-decoration:underline;} /* ---- PowerPack registration form field grid ---- */ .six-account .pp-rf-fields-wrap{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px !important; margin:0 !important; padding:0 !important;} .six-account .pp-rf-field{ display:flex !important; flex-direction:column; min-width:0; margin:0 0 14px !important; padding:0 !important; float:none !important; width:auto !important;} .six-account .pp-rf-field.pp-rf-col-50{grid-column:span 1;} .six-account .pp-rf-field.pp-rf-col-100, .six-account .pp-rf-field:not(.pp-rf-col-50){grid-column:1 / -1;} .six-account .pp-rf-field-inner{position:relative; display:block;} .six-account .pp-rf-field .pp-rf-control{margin-bottom:0 !important;} .six-account .pp-required-mask{color:var(--sale); margin-left:2px;} /* PowerPack renders its validation strings up front - only show them when the field actually fails, otherwise every row carries "This field is required." */ .six-account .pp-rf-error, .six-account form[id^="pp-"] .pp-field-error, .six-account form[id^="pp-"] .pp-form-error{ display:none; margin:5px 0 0; font-size:12.5px; line-height:1.35; color:var(--sale) !important;} .six-account .pp-rf-field.pp-rf-field-error .pp-rf-error, .six-account .pp-rf-control:invalid:not(:placeholder-shown) ~ .pp-rf-error, .six-account .pp-rf-control.pp-rf-invalid ~ .pp-rf-error{display:block;} .six-account .pp-rf-field.pp-rf-field-error .pp-rf-control{border-color:var(--sale) !important;} /* show/hide password toggle */ .six-account .pp-rf-toggle-pw{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:32px; height:32px; display:flex; align-items:center; justify-content:center; padding:0 !important; margin:0 !important; min-height:0 !important; background:none !important; border:0 !important; border-radius:8px !important; color:var(--faint) !important; cursor:pointer; box-shadow:none !important;} .six-account .pp-rf-toggle-pw:hover{background:var(--plum-tint) !important; color:var(--plum) !important; transform:translateY(-50%);} .six-account .pp-rf-toggle-pw svg{width:17px; height:17px;} .six-account .pp-rf-field-inner .pp-rf-control{padding-right:46px !important;} /* the submit row */ .six-account .pp-rf-submit-wrap, .six-account .pp-rf-form-submit{margin-top:4px !important; padding:0 !important;} /* ---------- FIELDS (shared by login, register and account details) ---------- */ .six-account .woocommerce form .form-row{ display:flex; flex-direction:column; gap:6px; margin:0 0 14px !important; padding:0 !important; width:auto !important; float:none !important; } .six-account .woocommerce form .form-row label{ font-size:12.5px; font-weight:400; color:var(--muted); letter-spacing:-.005em;} .six-account .woocommerce form .form-row label .required{color:var(--sale); border:0; text-decoration:none;} .six-account .woocommerce form .form-row input.input-text, .six-account .woocommerce form .form-row input[type=text], .six-account .woocommerce form .form-row input[type=email], .six-account .woocommerce form .form-row input[type=password], .six-account .woocommerce form .form-row select, .six-account .woocommerce form input.input-text{ width:100% !important; height:48px; min-height:48px; padding:0 14px !important; font-family:inherit !important; font-size:15px !important; color:var(--ink) !important; background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:11px !important; box-shadow:none !important; outline:none; transition:border-color .18s var(--e), box-shadow .18s var(--e); } .six-account .woocommerce form .form-row input::placeholder{color:var(--faint);} .six-account .woocommerce form .form-row input:focus, .six-account .woocommerce form .form-row select:focus{ border-color:var(--plum) !important; background:var(--canvas) !important; box-shadow:0 0 0 3px var(--plum-tint) !important;} /* the show/hide password eye the theme injects */ .six-account .woocommerce .password-input{display:block; position:relative;} .six-account .woocommerce .show-password-input{ position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--faint); cursor:pointer;} /* remember me + small print */ .six-account .woocommerce form .woocommerce-form-login__rememberme, .six-account .woocommerce label.woocommerce-form-login__rememberme{ display:flex !important; align-items:center; gap:9px; font-size:13.5px !important; font-weight:400 !important; color:var(--ink) !important; margin:0 0 14px !important;} .six-account .woocommerce label.woocommerce-form-login__rememberme input[type=checkbox]{ width:16px; height:16px; margin:0; accent-color:var(--plum); flex:0 0 auto;} .six-account .woocommerce-privacy-policy-text p, .six-account .woocommerce form .form-row + p:not(.form-row){ font-size:12.5px !important; line-height:1.5; color:var(--faint) !important;} /* ---------- BUTTONS ---------- */ .six-account .woocommerce button.button, .six-account .woocommerce a.button, .six-account .woocommerce input.button, .six-account .woocommerce button[type=submit]{ display:inline-flex !important; align-items:center; justify-content:center; min-height:48px; padding:13px 26px !important; background:var(--plum) !important; color:var(--ap-on-dark) !important; border:0 !important; border-radius:9999px !important; font-family:inherit !important; font-size:15px !important; font-weight:700 !important; letter-spacing:-.012em; text-shadow:none !important; box-shadow:none !important; cursor:pointer; transition:background-color .2s var(--e), transform .15s var(--e); } .six-account .woocommerce button.button:hover, .six-account .woocommerce a.button:hover, .six-account .woocommerce button[type=submit]:hover{ background:var(--plum-h) !important; transform:translateY(-1px);} .six-account.is-out .woocommerce form.login button[type=submit], .six-account.is-out .woocommerce form.register button[type=submit]{width:100% !important;} .six-account .woocommerce-LostPassword{margin:14px 0 0 !important;} .six-account .woocommerce-LostPassword a, .six-account .woocommerce a.woocommerce-Button--previous{ font-size:13.5px; color:var(--plum) !important; font-weight:400;} .six-account .woocommerce-LostPassword a:hover{text-decoration:underline;} /* ---------- NOTICES ---------- */ .six-account .woocommerce-info, .six-account .woocommerce-message, .six-account .woocommerce-error, .six-account ul.woocommerce-error{ display:flex !important; align-items:flex-start; gap:12px; flex-direction:column; margin:0 0 18px !important; padding:13px 16px !important; background:var(--parch) !important; border:1px solid var(--line) !important; border-left:3px solid var(--plum) !important; border-radius:12px !important; font-size:14px !important; line-height:1.45; color:var(--ink) !important; list-style:none !important; box-shadow:none !important; } .six-account .woocommerce-error{border-left-color:var(--sale) !important;} .six-account .woocommerce-info::before, .six-account .woocommerce-message::before, .six-account .woocommerce-error::before{content:none !important;} .six-account .woocommerce-error li{font-size:14px; margin:0;} /* ===================================================================== LOGGED IN - left nav + content ===================================================================== */ .six-account.is-in .woocommerce{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:clamp(24px,3vw,44px); align-items:start; } .six-account .woocommerce-MyAccount-navigation{width:auto !important; float:none !important;} .six-account .woocommerce-MyAccount-navigation ul{list-style:none; margin:0; padding:0;} .six-account .woocommerce-MyAccount-navigation li{margin:0 0 2px;} .six-account .woocommerce-MyAccount-navigation li a{ display:block; padding:9px 12px; border-radius:9px; font-size:14.5px; color:var(--ink); transition:background-color .18s var(--e), color .18s var(--e);} .six-account .woocommerce-MyAccount-navigation li a:hover{background:var(--plum-tint);} .six-account .woocommerce-MyAccount-navigation li.is-active a{ background:var(--plum); color:var(--canvas); font-weight:700;} .six-account .woocommerce-MyAccount-content{ width:auto !important; float:none !important; min-width:0; background:var(--canvas); border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--ap-shadow-sm);} .six-account .woocommerce-MyAccount-content p{font-size:15px; line-height:1.6; color:var(--ink-2); margin-bottom:14px;} .six-account .woocommerce-MyAccount-content p:last-child{margin-bottom:0;} .six-account .woocommerce-MyAccount-content a:not(.button){color:var(--plum) !important; text-decoration:underline; text-underline-offset:3px;} .six-account .woocommerce-MyAccount-content h2, .six-account .woocommerce-MyAccount-content legend{ font-size:12.5px !important; font-weight:700 !important; letter-spacing:.07em; text-transform:uppercase; color:var(--faint) !important; margin:0 0 16px !important; padding:0 0 12px !important; border-bottom:1px solid var(--line);} .six-account .woocommerce-MyAccount-content fieldset{border:0; padding:0; margin:28px 0 0;} /* orders / downloads tables */ .six-account .woocommerce table.shop_table{ width:100%; border:0 !important; border-collapse:collapse; margin:0;} .six-account .woocommerce table.shop_table th, .six-account .woocommerce table.shop_table td{ border:0 !important; border-bottom:1px solid var(--line-soft) !important; padding:13px 10px 13px 0 !important; font-size:14.5px; text-align:left; vertical-align:middle;} .six-account .woocommerce table.shop_table th{ font-size:11px !important; font-weight:700 !important; letter-spacing:.07em; text-transform:uppercase; color:var(--faint) !important;} .six-account .woocommerce table.shop_table td:last-child, .six-account .woocommerce table.shop_table th:last-child{text-align:right; padding-right:0 !important;} .six-account .woocommerce table.shop_table .button{min-height:38px; padding:9px 18px !important; font-size:13.5px !important;} .six-account .woocommerce-Address{margin-top:8px;} .six-account .woocommerce-Address address{font-style:normal; font-size:15px; line-height:1.6; color:var(--ink-2);} /* ---------- ASSURANCES under the sign-in cards ---------- */ .six-account .ac-assure{ list-style:none; margin:28px 0 0; padding:22px 0 0; border-top:1px solid var(--line-soft); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;} .six-account .ac-assure li{display:flex; flex-direction:column; gap:3px;} .six-account .ac-assure strong{font-size:13.5px; font-weight:700; letter-spacing:-.008em;} .six-account .ac-assure span{font-size:13px; color:var(--muted); line-height:1.45;} /* ---------- RESPONSIVE ---------- */ @media(max-width:900px){ .six-account.is-out .woocommerce{grid-template-columns:minmax(0,1fr);} .six-account.is-in .woocommerce{grid-template-columns:minmax(0,1fr);} .six-account .woocommerce-MyAccount-navigation ul{display:flex; flex-wrap:wrap; gap:6px;} .six-account .woocommerce-MyAccount-navigation li a{border:1px solid var(--line);} .six-account .ac-assure{grid-template-columns:minmax(0,1fr); gap:14px;} } @media(max-width:640px){ .six-account .ac-body{padding-block:24px 56px;} .six-account.is-out .col2-set .col-1, .six-account.is-out .col2-set .col-2, .six-account .woocommerce-MyAccount-content{padding:20px !important;} .six-account .woocommerce table.shop_table th{display:none;} .six-account .woocommerce table.shop_table td{display:block; text-align:left !important; padding:6px 0 !important; border:0 !important;} .six-account .woocommerce table.shop_table tr{display:block; padding:14px 0; border-bottom:1px solid var(--line-soft);} } @media (prefers-reduced-motion:reduce){ .six-account *{transition:none !important;} } /* the theme colours links #5b2a86 - keep the brand plum on the small print */ .six-account .woocommerce-privacy-policy-text a, .six-account .woocommerce-privacy-policy-link{ color:var(--plum) !important; text-decoration:underline; text-underline-offset:2px;} /* select2 keeps the real