:root{--cp-accent:#82c8a0;--cp-dark:#1f2d26;--cp-surface:#f3f7f3;--cp-line:#dce8df;--cp-muted:#6e8278;--cp-shadow:0 18px 48px rgba(31,45,38,.08)}.cp-rewards-shell,.cp-guide,.cp-account-summary,.cp-login-prompt{font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--cp-dark)}.cp-rewards-shell{max-width:1120px;margin:0 auto;padding:36px 20px 80px}.cp-rewards-header{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:32px}.cp-eyebrow{display:block;color:#719381;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}.cp-rewards-header h1,.cp-guide-hero h1,.cp-login-prompt h1{font-size:46px;line-height:1.02;letter-spacing:-.06em;margin:10px 0 12px}.cp-rewards-header p,.cp-guide-hero p,.cp-login-prompt p{max-width:580px;color:var(--cp-muted);font-size:16px;line-height:1.6;margin:0}.cp-balance-orbit{width:138px;height:138px;flex:0 0 138px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--cp-accent);color:var(--cp-dark);box-shadow:0 0 0 12px rgba(130,200,160,.16)}.cp-balance-orbit span{font-size:37px;letter-spacing:-.08em;font-weight:700;font-variant-numeric:tabular-nums}.cp-balance-orbit small{font-size:12px;margin-top:4px}.cp-notice{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:18px;border:1px solid #ecd9b9;background:#fcf8ef;border-radius:8px;color:#654d2f}.cp-notice-dot{width:8px;height:8px;border-radius:50%;background:#d3a65d}.cp-notice div{display:grid;gap:2px;flex:1}.cp-notice strong{font-size:13px}.cp-notice span:not(.cp-notice-dot){font-size:12px}.cp-notice a{color:#654d2f;font-size:12px;font-weight:700}.cp-rewards-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:50px}.cp-panel{border-radius:12px;padding:24px;min-height:238px}.cp-panel--progress{background:#fff;border:1px solid var(--cp-line)}.cp-panel--referral{background:var(--cp-dark);color:#fff;position:relative;overflow:hidden}.cp-panel--referral:after{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(130,200,160,.32);border-radius:50%;right:-60px;top:-40px}.cp-panel-heading{display:flex;justify-content:space-between;gap:20px}.cp-panel h2,.cp-section-heading h2,.cp-activity-section h2{font-size:22px;line-height:1.1;letter-spacing:-.04em;margin:7px 0 0}.cp-progress-value{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}.cp-progress-track{height:10px;border-radius:999px;background:#edf3ee;margin:46px 0 10px;overflow:hidden}.cp-progress-track span{display:block;height:100%;border-radius:inherit;background:var(--cp-accent);transition:width 300ms ease-out}.cp-progress-meta{display:flex;justify-content:space-between;color:var(--cp-muted);font-size:12px}.cp-referral-mark{position:absolute;right:24px;top:18px;color:var(--cp-accent);font-size:36px}.cp-panel--referral .cp-eyebrow{color:var(--cp-accent)}.cp-panel--referral h2{font-size:30px;max-width:260px}.cp-panel--referral p{color:#b7cbbd;max-width:370px;font-size:13px;line-height:1.5;margin:12px 0 20px}.cp-referral-field{display:flex;gap:8px;position:relative;z-index:1}.cp-referral-field input{min-width:0;flex:1;border:1px solid rgba(255,255,255,.16);border-radius:6px;background:rgba(255,255,255,.08);color:#fff;padding:0 11px;font-size:12px}.cp-button{min-height:42px;padding:0 16px;border:0;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;font-size:13px;font-weight:700;transition:transform 150ms ease,box-shadow 150ms ease,background-color 150ms ease}.cp-button:active{transform:scale(.98)}.cp-button--dark{background:var(--cp-dark);color:#fff}.cp-button--light{background:var(--cp-accent);color:var(--cp-dark)}.cp-button--muted{background:#eef2ef;color:#8a9a90;cursor:not-allowed}.cp-button:hover:not(:disabled){box-shadow:0 8px 20px rgba(31,45,38,.15)}.cp-share-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;position:relative;z-index:1}.cp-text-button{appearance:none;background:none;border:0;padding:0;color:var(--cp-dark);font-size:12px;font-weight:700;cursor:pointer;text-decoration:none}.cp-panel--referral .cp-text-button{color:#c6ddce}.cp-text-button:hover{text-decoration:underline}.cp-section{margin-bottom:48px}.cp-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.cp-reward-list{display:grid;gap:8px}.cp-reward-card{display:flex;align-items:center;gap:16px;padding:15px 16px;border:1px solid var(--cp-line);background:#fff;border-radius:10px}.cp-reward-card.is-locked{opacity:.7}.cp-reward-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--cp-surface);font-size:18px}.cp-reward-copy{flex:1;min-width:0}.cp-reward-copy h3{font-size:14px;margin:0 0 4px}.cp-reward-copy p{color:var(--cp-muted);font-size:12px;margin:0}.cp-reward-action{display:flex;align-items:center;gap:6px}.cp-reward-action strong{font-size:14px}.cp-reward-action>span{font-size:11px;color:var(--cp-muted);margin-right:11px}.cp-reward-action .cp-button{min-width:106px}.cp-activity-section{max-width:700px}.cp-activity-list{border-top:1px solid var(--cp-line)}.cp-activity-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--cp-line)}.cp-activity-dot{width:8px;height:8px;border-radius:50%;background:#96a59b}.cp-activity-dot.is-positive{background:#72af84}.cp-activity-dot.is-negative{background:#cd8b83}.cp-activity-row div{display:grid;gap:4px;flex:1}.cp-activity-row strong{font-size:13px}.cp-activity-row div span{color:var(--cp-muted);font-size:11px}.cp-activity-row b{font-variant-numeric:tabular-nums}.is-positive{color:#4b9662}.is-negative{color:#b36b65}.cp-muted{color:var(--cp-muted);font-size:12px}.cp-empty-state{padding:40px 20px;text-align:center;border:1px dashed #cbdacf;border-radius:10px;color:var(--cp-muted)}.cp-empty-state h3{color:var(--cp-dark);margin:0 0 7px}.cp-empty-state p{font-size:13px;margin:0}.cp-empty-mark{font-size:24px;color:var(--cp-accent);margin-bottom:10px}.cp-empty-state--compact{text-align:left;border:0;padding:25px 0}.cp-guide{max-width:960px;margin:0 auto;padding:56px 20px 80px}.cp-guide-hero{padding:56px 0 72px;border-bottom:1px solid var(--cp-line)}.cp-guide-hero h1{font-size:68px;max-width:650px}.cp-guide-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:54px 0}.cp-guide-steps article{padding:22px 0;border-top:2px solid var(--cp-dark)}.cp-guide-steps article>span{color:#719381;font-size:12px;font-weight:700}.cp-guide-steps h2{font-size:21px;letter-spacing:-.035em;margin:48px 0 10px}.cp-guide-steps p{color:var(--cp-muted);font-size:14px;line-height:1.6;margin:0}.cp-guide-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--cp-surface);padding:26px;border-radius:12px}.cp-guide-cta h2{font-size:24px;letter-spacing:-.04em;margin:0}.cp-login-prompt{max-width:620px;margin:60px auto;padding:48px 24px;text-align:center;background:var(--cp-surface);border-radius:12px}.cp-login-prompt p{margin:0 auto 24px}.cp-account-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:18px 0 28px;padding:22px 24px;background:var(--cp-surface);border-radius:10px}.cp-account-summary h2{margin:7px 0;font-size:22px;letter-spacing:-.04em}.cp-account-summary p{margin:0;color:var(--cp-muted);font-size:13px}.cp-inline-note,.covert-loyalty-inline-note{color:var(--cp-dark);font-size:13px}.covert-loyalty-cart-note{padding:12px 14px;margin:0 0 16px;border-radius:7px;background:var(--cp-surface);color:var(--cp-dark);font-size:13px}@media(max-width:760px){.cp-rewards-header{align-items:flex-start;flex-direction:column}.cp-rewards-header h1,.cp-guide-hero h1,.cp-login-prompt h1{font-size:38px}.cp-balance-orbit{width:104px;height:104px;flex-basis:104px;align-self:flex-end}.cp-balance-orbit span{font-size:30px}.cp-rewards-grid,.cp-guide-steps{grid-template-columns:1fr}.cp-reward-card{align-items:flex-start;flex-wrap:wrap}.cp-reward-action{width:100%;margin-left:56px}.cp-reward-action .cp-button{margin-left:auto}.cp-guide-cta,.cp-account-summary{align-items:flex-start;flex-direction:column}.cp-referral-field{flex-direction:column}.cp-referral-field input{min-height:42px;padding:0 11px}.cp-panel--referral h2{font-size:27px}}@media(prefers-reduced-motion:reduce){.cp-button,.cp-progress-track span{transition:none}} :root{--cp-line:#b7cbbb;--cp-field-line:#a8c1ae}.cp-panel--progress,.cp-reward-card{border-color:var(--cp-line)}.cp-reward-list{gap:9px}.cp-reward-card{box-shadow:0 5px 16px rgba(31,45,38,.035)}.cp-activity-list{border-top-color:var(--cp-line)}.cp-activity-row{border-bottom-color:#d7e3da}.cp-guide-hero{border-bottom-color:var(--cp-line)}.cp-empty-state{border-color:#b9cec0}.cp-account-summary{box-shadow:inset 0 0 0 1px rgba(31,45,38,.025)}.cp-reward-icon{box-shadow:inset 0 0 0 1px rgba(31,45,38,.04)}.cp-reward-card .cp-button,.cp-referral-field input{border-color:var(--cp-field-line)}.cp-panel--progress,.cp-account-summary,.cp-login-prompt,.cp-guide-cta{border:1px solid var(--cp-line)}.cp-section{padding-top:24px;border-top:1px solid #cfddd2}.cp-section-heading{padding-bottom:13px;border-bottom:1px solid #cfddd2}.cp-reward-list{padding:9px;border:1px solid #a9c2af;border-radius:12px;background:#fbfdfb}.cp-activity-section{max-width:700px;padding:20px;border:1px solid #a9c2af;border-radius:12px;background:#fff}.cp-activity-list{border-top-color:var(--cp-line)}.cp-notice{border-color:#d6bd92}.cp-loyalty-launcher{position:fixed;z-index:9999;bottom:22px;color:var(--cp-text,#fff)}.cp-launcher-position-left{left:22px}.cp-launcher-position-center{left:50%;transform:translateX(-50%)}.cp-launcher-position-right{right:22px}.cp-launcher-button{display:flex;align-items:center;gap:9px;min-height:46px;padding:7px 13px 7px 8px;border:1px solid color-mix(in srgb,var(--cp-accent) 45%,var(--cp-dark));border-radius:999px;background:var(--cp-dark);color:#fff;box-shadow:0 16px 34px rgba(0,0,0,.22);font-size:12px;font-weight:800;cursor:pointer}.cp-launcher-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:var(--cp-accent);color:var(--cp-dark);font-size:15px}.cp-launcher-points{color:var(--cp-accent);font-variant-numeric:tabular-nums}.cp-launcher-shape-circle .cp-launcher-button,.cp-launcher-shape-square .cp-launcher-button{width:58px;height:58px;min-height:58px;padding:0;justify-content:center;border-radius:50%}.cp-launcher-shape-square .cp-launcher-button{border-radius:12px}.cp-launcher-shape-circle .cp-launcher-label,.cp-launcher-shape-circle .cp-launcher-points,.cp-launcher-shape-square .cp-launcher-label,.cp-launcher-shape-square .cp-launcher-points{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cp-launcher-shape-circle .cp-launcher-icon,.cp-launcher-shape-square .cp-launcher-icon{width:36px;height:36px;font-size:18px}.cp-launcher-popover{position:absolute;bottom:70px;width:286px;padding:17px;border:1px solid var(--cp-line);border-radius:13px;background:var(--cp-card,#fff);color:var(--cp-text,var(--cp-dark));box-shadow:0 22px 48px rgba(0,0,0,.22)}.cp-launcher-popover[hidden]{display:none}.cp-launcher-position-left .cp-launcher-popover{left:0}.cp-launcher-position-center .cp-launcher-popover{left:50%;transform:translateX(-50%)}.cp-launcher-position-right .cp-launcher-popover{right:0}.cp-launcher-popover h2{margin:5px 0 6px;font-size:20px;letter-spacing:-.04em}.cp-launcher-popover p{margin:0 0 14px;color:var(--cp-muted,#6e8278);font-size:12px;line-height:1.5}.cp-launcher-balance{display:flex;align-items:baseline;gap:7px;padding:12px;border:1px solid var(--cp-line);border-radius:9px;background:var(--cp-surface);margin-bottom:11px}.cp-launcher-balance strong{font-size:27px;letter-spacing:-.07em}.cp-launcher-balance span{color:var(--cp-muted,#6e8278);font-size:10px}.cp-launcher-reward{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px solid var(--cp-line);font-size:11px}.cp-launcher-reward>span:nth-child(2){flex:1}.cp-launcher-reward strong{font-size:11px}.cp-launcher-reward-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--cp-accent);color:var(--cp-dark);font-size:12px}.cp-launcher-link{width:100%;margin-top:13px}.cp-theme-dark.cp-rewards-shell,.cp-theme-dark.cp-guide{background:var(--cp-surface);color:var(--cp-text)}.cp-theme-dark .cp-rewards-header p,.cp-theme-dark .cp-guide-hero p,.cp-theme-dark .cp-account-summary p,.cp-theme-dark .cp-reward-copy p,.cp-theme-dark .cp-progress-meta,.cp-theme-dark .cp-activity-row div span,.cp-theme-dark .cp-muted{color:var(--cp-muted)}.cp-theme-dark .cp-panel--progress,.cp-theme-dark .cp-reward-card,.cp-theme-dark .cp-account-summary,.cp-theme-dark .cp-login-prompt,.cp-theme-dark .cp-guide-cta,.cp-theme-dark .cp-activity-section{background:var(--cp-card);border-color:var(--cp-line);color:var(--cp-text)}.cp-theme-dark .cp-reward-list{background:var(--cp-surface);border-color:var(--cp-line)}.cp-theme-dark .cp-reward-icon{background:rgba(255,255,255,.07);color:var(--cp-accent)}.cp-theme-dark .cp-section,.cp-theme-dark .cp-section-heading,.cp-theme-dark .cp-guide-hero,.cp-theme-dark .cp-activity-list,.cp-theme-dark .cp-activity-row{border-color:var(--cp-line)}.cp-theme-dark .cp-guide-steps article{border-top-color:var(--cp-accent)}.cp-theme-dark .cp-login-prompt{background:var(--cp-card)}@media(max-width:760px){.cp-loyalty-launcher{bottom:16px}.cp-launcher-position-left{left:16px}.cp-launcher-position-right{right:16px}.cp-launcher-popover{width:min(286px,calc(100vw - 32px))}.cp-launcher-position-left .cp-launcher-popover{left:0}.cp-launcher-position-right .cp-launcher-popover{right:0}} .cp-launcher-button{border-color:var(--cp-accent)} .woocommerce-MyAccount-navigation-link--customer-logout{margin-top:8px;padding-top:8px;border-top:1px solid var(--cp-line)}.woocommerce-MyAccount-navigation-link--customer-logout a{display:inline-block!important;width:auto!important;font-size:.82em!important;font-weight:500!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:4px!important}.cp-referrals-shell{max-width:960px}.cp-panel--referral-page{min-height:290px;padding:34px;max-width:760px}.cp-panel--referral-page h2{max-width:520px;font-size:36px}.cp-panel--referral-page p{max-width:590px}.cp-referral-steps{margin-top:20px;padding:24px;border:1px solid var(--cp-line);border-radius:12px;background:var(--cp-card,#fff)}.cp-referral-steps>div h2{margin:7px 0 20px;font-size:24px;letter-spacing:-.04em}.cp-referral-steps ol{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 22px;padding:0;list-style:none}.cp-referral-steps li{display:grid;gap:5px;padding-top:14px;border-top:2px solid var(--cp-dark)}.cp-referral-steps li>span{color:var(--cp-muted);font-size:10px;font-weight:700;letter-spacing:.09em}.cp-referral-steps li strong{font-size:13px}.cp-referral-steps li small{color:var(--cp-muted);font-size:11px;line-height:1.45}.cp-theme-dark .cp-referral-steps{border-color:var(--cp-line);background:var(--cp-card);color:var(--cp-text)}.cp-theme-dark .cp-referral-steps li{border-top-color:var(--cp-accent)}@media(max-width:760px){.cp-panel--referral-page{padding:24px}.cp-panel--referral-page h2{font-size:29px}.cp-referral-steps ol{grid-template-columns:1fr}.cp-referral-steps li{padding-bottom:6px}} .cp-launcher-button{gap:9px;min-height:52px;padding:6px 7px 6px 6px;border-radius:15px}.cp-launcher-icon{width:38px;height:38px;flex:0 0 38px;border-radius:11px;font-size:14px;font-weight:900}.cp-launcher-label{display:grid;min-width:105px;gap:1px;text-align:left}.cp-launcher-label small{color:#b9cbbf;font-size:9px;font-weight:600;line-height:1.2}.cp-launcher-label strong{overflow:hidden;max-width:120px;color:#fff;font-size:11px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.cp-launcher-points{display:grid;justify-items:end;min-width:50px;padding:7px 9px;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:rgba(255,255,255,.075)}.cp-launcher-points strong{color:var(--cp-accent);font-size:13px;line-height:1}.cp-launcher-points small{margin-top:3px;color:#b9cbbf;font-size:8px;font-weight:600;text-transform:lowercase}.cp-launcher-popover{bottom:66px;width:330px;padding:10px;border-color:color-mix(in srgb,var(--cp-line) 88%,var(--cp-dark));border-radius:17px;box-shadow:0 28px 64px rgba(0,0,0,.27)}.cp-launcher-member{display:flex;align-items:center;gap:9px;padding:6px 6px 10px}.cp-launcher-avatar{display:grid;place-items:center;width:35px;height:35px;flex:0 0 35px;border-radius:10px;background:var(--cp-dark);color:var(--cp-accent);font-size:12px;font-weight:900}.cp-launcher-member>span:nth-child(2){display:grid;gap:2px;min-width:0;flex:1}.cp-launcher-member small{color:var(--cp-muted);font-size:8px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.cp-launcher-member strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.cp-launcher-member-program{max-width:88px;overflow:hidden;color:var(--cp-muted);font-size:9px;text-overflow:ellipsis;white-space:nowrap}.cp-launcher-balance{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;padding:12px 13px;border-color:color-mix(in srgb,var(--cp-line) 85%,var(--cp-dark));border-radius:11px;background:var(--cp-dark);color:#fff}.cp-launcher-balance>span{display:grid;gap:2px}.cp-launcher-balance span small{color:#b8c9be;font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.cp-launcher-balance span strong{color:#fff;font-size:25px;line-height:1}.cp-launcher-balance>b{padding:5px 7px;border-radius:6px;background:var(--cp-accent);color:var(--cp-dark);font-size:8px;text-transform:uppercase}.cp-launcher-section-heading{display:flex;align-items:center;justify-content:space-between;padding:3px 3px 5px}.cp-launcher-section-heading strong{font-size:10px}.cp-launcher-section-heading a{color:var(--cp-muted);font-size:9px;text-decoration:underline;text-underline-offset:3px}.cp-launcher-reward{gap:9px;margin-top:5px;padding:8px;border:1px solid var(--cp-line);border-radius:10px;background:color-mix(in srgb,var(--cp-card,#fff) 94%,var(--cp-surface))}.cp-launcher-reward-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:9px;background:var(--cp-accent);color:var(--cp-dark);font-size:16px;overflow:hidden}.cp-launcher-reward-icon img,.cp-reward-artwork--image img{width:100%;height:100%;object-fit:cover}.cp-launcher-reward-copy{display:grid;gap:2px;min-width:0;flex:1}.cp-launcher-reward-copy strong{overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.cp-launcher-reward-copy small{display:-webkit-box;overflow:hidden;color:var(--cp-muted);font-size:8px;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}.cp-launcher-reward-cost{display:grid;justify-items:end;gap:1px}.cp-launcher-reward-cost strong{font-size:11px}.cp-launcher-reward-cost small{color:var(--cp-muted);font-size:8px}.cp-launcher-referral{margin-top:8px;padding:11px;border:1px solid color-mix(in srgb,var(--cp-accent) 55%,var(--cp-line));border-radius:11px;background:color-mix(in srgb,var(--cp-accent) 14%,var(--cp-card,#fff))}.cp-launcher-referral-heading{display:flex;align-items:center;justify-content:space-between}.cp-launcher-referral-heading>span{display:grid;gap:1px}.cp-launcher-referral-heading small{color:var(--cp-muted);font-size:8px;font-weight:700;text-transform:uppercase}.cp-launcher-referral-heading strong{font-size:11px}.cp-launcher-referral-heading b{color:var(--cp-dark);font-size:18px}.cp-launcher-referral p{display:-webkit-box;overflow:hidden;margin:7px 0 3px;font-size:9px;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:2}.cp-launcher-referral-rule{display:block;overflow:hidden;color:var(--cp-muted);font-size:8px;text-overflow:ellipsis;white-space:nowrap}.cp-launcher-referral-field{display:flex;gap:5px;margin-top:8px}.cp-launcher-referral-field input{min-width:0;height:31px;flex:1;margin:0;padding:0 8px;border:1px solid var(--cp-line);border-radius:7px;background:var(--cp-card,#fff);color:var(--cp-text,var(--cp-dark));font-size:8px}.cp-launcher-referral-field button{min-width:49px;border:0;border-radius:7px;background:var(--cp-dark);color:#fff;font-size:9px;font-weight:800;cursor:pointer}.cp-launcher-link{min-height:36px;margin-top:8px;border-radius:9px;font-size:10px}.cp-reward-artwork--image{overflow:hidden;padding:0}.cp-reward-artwork--image img{display:block;border-radius:inherit}.cp-launcher-shape-circle .cp-launcher-button,.cp-launcher-shape-square .cp-launcher-button{width:58px;height:58px;padding:0;border-radius:50%}.cp-launcher-shape-square .cp-launcher-button{border-radius:14px}.cp-launcher-shape-circle .cp-launcher-icon,.cp-launcher-shape-square .cp-launcher-icon{width:40px;height:40px}.cp-theme-dark .cp-launcher-referral-field input{background:rgba(255,255,255,.05)}@media(max-width:760px){.cp-launcher-popover{width:min(330px,calc(100vw - 32px))}} .cp-launcher-icon svg{display:block;width:21px;height:21px}.cp-launcher-shape-circle .cp-launcher-icon{border-radius:50%}.cp-launcher-shape-square .cp-launcher-icon{border-radius:9px}.cp-theme-dark .cp-button--dark,.cp-theme-dark .cp-launcher-button{border:1px solid var(--cp-accent);background:var(--cp-accent);color:var(--cp-dark)}.cp-theme-dark .cp-launcher-icon{background:var(--cp-dark);color:var(--cp-accent)}.cp-theme-dark .cp-launcher-label small,.cp-theme-dark .cp-launcher-label strong,.cp-theme-dark .cp-launcher-points strong,.cp-theme-dark .cp-launcher-points small{color:var(--cp-dark)}.cp-theme-dark .cp-launcher-points{border-color:rgba(0,0,0,.22);background:rgba(0,0,0,.1)}.cp-theme-dark .cp-launcher-referral-field button{background:var(--cp-accent);color:var(--cp-dark)} .cp-theme-dark .cp-empty-state h3,.cp-theme-dark .cp-text-button,.cp-theme-dark .cp-inline-note,.cp-theme-dark .covert-loyalty-inline-note{color:var(--cp-text)}.cp-theme-dark .cp-launcher-referral-heading b{color:var(--cp-accent)}.cp-theme-dark .cp-launcher-balance{border-color:var(--cp-line)} .cp-reward-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0;border:0;background:transparent}.cp-reward-card{display:grid;grid-template-rows:auto 1fr auto;align-items:stretch;gap:18px;min-width:0;min-height:280px;padding:18px;border-radius:13px;box-shadow:0 7px 20px rgba(31,45,38,.05)}.cp-reward-card.is-locked{opacity:1}.cp-reward-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.cp-reward-card .cp-reward-icon{width:54px;height:54px;flex:0 0 54px;border:1px solid var(--cp-line);border-radius:13px;background:var(--cp-surface);font-size:22px}.cp-reward-card .cp-reward-artwork--image{padding:0;overflow:hidden}.cp-reward-availability{display:inline-flex;align-items:center;min-height:25px;padding:0 8px;border:1px solid var(--cp-line);border-radius:999px;background:var(--cp-surface);color:var(--cp-muted);font-size:9px;font-weight:750;white-space:nowrap}.cp-reward-availability.is-ready{border-color:color-mix(in srgb,var(--cp-accent) 65%,var(--cp-line));background:color-mix(in srgb,var(--cp-accent) 18%,var(--cp-card,#fff));color:var(--cp-text,var(--cp-dark))}.cp-reward-card .cp-reward-copy{display:block}.cp-reward-type{display:block;margin-bottom:8px;color:var(--cp-muted);font-size:9px;font-weight:750;letter-spacing:.09em;text-transform:uppercase}.cp-reward-card .cp-reward-copy h3{margin:0 0 7px;font-size:17px;line-height:1.25;letter-spacing:-.025em}.cp-reward-card .cp-reward-copy p{font-size:11px;line-height:1.55}.cp-reward-card .cp-reward-action{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--cp-line)}.cp-reward-points{display:grid;gap:1px}.cp-reward-points strong{font-size:18px;line-height:1;font-variant-numeric:tabular-nums}.cp-reward-points small{color:var(--cp-muted);font-size:9px}.cp-reward-card .cp-reward-action .cp-button{width:100%;min-width:0;justify-self:stretch}.cp-theme-dark .cp-reward-availability{background:var(--cp-surface);color:var(--cp-muted)}.cp-theme-dark .cp-reward-availability.is-ready{background:color-mix(in srgb,var(--cp-accent) 16%,var(--cp-card));color:var(--cp-text)} .logged-in.woocommerce-account .woocommerce{display:grid;grid-template-columns:minmax(190px,230px) minmax(0,1fr);align-items:start;gap:28px}.logged-in.woocommerce-account .woocommerce-MyAccount-navigation,.logged-in.woocommerce-account .woocommerce-MyAccount-content{float:none;width:auto}.logged-in.woocommerce-account .woocommerce-MyAccount-navigation{position:sticky;top:28px;padding:10px;border:1px solid var(--cp-line);border-radius:13px;background:var(--cp-card,#fff);box-shadow:0 8px 24px rgba(31,45,38,.05)}.logged-in.woocommerce-account .woocommerce-MyAccount-navigation ul{display:grid;gap:3px;margin:0;padding:0;list-style:none}.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li{margin:0}.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li a{display:flex;align-items:center;gap:9px;min-height:40px;padding:0 10px;border:1px solid transparent;border-radius:8px;color:var(--cp-muted);font-size:12px;font-weight:650;text-decoration:none}.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li a:before{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border-radius:6px;background:var(--cp-surface);color:var(--cp-dark);font-size:11px}.logged-in.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a:before{content:'⌂'}.logged-in.woocommerce-account .woocommerce-MyAccount-navigation-link--rewards a:before{content:'✦'}.logged-in.woocommerce-account .woocommerce-MyAccount-navigation-link--referrals a:before{content:'↗'}.logged-in.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a:before{content:'▣'}.logged-in.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads a:before{content:'↓'}.logged-in.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a:before{content:'⌖'}.logged-in.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a:before{content:'○'}.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li:not(.woocommerce-MyAccount-navigation-link--customer-logout) a:hover,.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{border-color:var(--cp-line);background:var(--cp-surface);color:var(--cp-dark)}.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:before{background:var(--cp-accent)}.logged-in.woocommerce-account .woocommerce-MyAccount-content{min-width:0;padding:24px;border:1px solid var(--cp-line);border-radius:14px;background:var(--cp-card,#fff);box-shadow:0 8px 24px rgba(31,45,38,.04)}.logged-in.woocommerce-account .woocommerce-MyAccount-content .cp-rewards-shell{padding:8px 0 38px} @media(max-width:980px){.cp-reward-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.cp-reward-list{grid-template-columns:1fr}.cp-reward-card{min-height:0}.logged-in.woocommerce-account .woocommerce{grid-template-columns:1fr}.logged-in.woocommerce-account .woocommerce-MyAccount-navigation{position:static;overflow-x:auto}.logged-in.woocommerce-account .woocommerce-MyAccount-navigation ul{display:flex;width:max-content}.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li{flex:0 0 auto}.logged-in.woocommerce-account .woocommerce-MyAccount-content{padding:16px}} .logged-in.woocommerce-account .woocommerce-MyAccount-content h2,.logged-in.woocommerce-account .woocommerce-MyAccount-content h3{color:var(--cp-on-card,var(--cp-text,var(--cp-dark)));letter-spacing:-.025em}.logged-in.woocommerce-account .woocommerce-MyAccount-content>p:first-child{margin-top:0;color:var(--cp-muted-on-card,var(--cp-muted));font-size:13px;line-height:1.6}.logged-in.woocommerce-account .woocommerce-Addresses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.logged-in.woocommerce-account .woocommerce-Address{float:none!important;width:auto!important;margin:0;padding:18px;border:1px solid var(--cp-line);border-radius:12px;background:var(--cp-surface)}.logged-in.woocommerce-account .woocommerce-Address-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.logged-in.woocommerce-account .woocommerce-Address-title h2,.logged-in.woocommerce-account .woocommerce-Address-title h3{margin:0;font-size:16px}.logged-in.woocommerce-account .woocommerce-Address-title .edit{float:none;color:var(--cp-dark);font-size:11px;font-weight:700;text-underline-offset:3px}.logged-in.woocommerce-account .woocommerce-Address address{color:var(--cp-muted-on-surface,var(--cp-muted));font-size:12px;font-style:normal;line-height:1.7}.logged-in.woocommerce-account .woocommerce-MyAccount-content table.shop_table{overflow:hidden;border:1px solid var(--cp-line);border-collapse:separate;border-radius:11px;background:var(--cp-card,#fff)}.logged-in.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,.logged-in.woocommerce-account .woocommerce-MyAccount-content table.shop_table td{padding:12px;border-color:var(--cp-line);font-size:12px}.logged-in.woocommerce-account .woocommerce-MyAccount-content table.shop_table td{color:var(--cp-on-card,var(--cp-text))}.logged-in.woocommerce-account .woocommerce-MyAccount-content table.shop_table th{background:var(--cp-surface);color:var(--cp-muted-on-surface,var(--cp-muted));font-size:10px;letter-spacing:.04em;text-transform:uppercase}.logged-in.woocommerce-account .woocommerce-EditAccountForm{display:grid;gap:13px}.logged-in.woocommerce-account .woocommerce-EditAccountForm .form-row{float:none;width:auto;margin:0}.logged-in.woocommerce-account .woocommerce-EditAccountForm>p:nth-of-type(1),.logged-in.woocommerce-account .woocommerce-EditAccountForm>p:nth-of-type(2){display:block}.logged-in.woocommerce-account .woocommerce-MyAccount-content label{color:var(--cp-on-card,var(--cp-text,var(--cp-dark)));font-size:11px;font-weight:700}.logged-in.woocommerce-account .woocommerce-MyAccount-content input.input-text,.logged-in.woocommerce-account .woocommerce-MyAccount-content select{min-height:42px;border:1px solid var(--cp-line);border-radius:8px;background:var(--cp-card,#fff);color:var(--cp-on-card,var(--cp-text,var(--cp-dark)));padding:0 11px}.logged-in.woocommerce-account .woocommerce-MyAccount-content fieldset{margin:8px 0 0;padding:16px;border:1px solid var(--cp-line);border-radius:11px;background:var(--cp-surface)}.logged-in.woocommerce-account .woocommerce-MyAccount-content fieldset legend{padding:0 6px;color:var(--cp-on-surface,var(--cp-text,var(--cp-dark)));font-size:11px;font-weight:750}.covert-loyalty-theme-dark.logged-in.woocommerce-account .woocommerce-MyAccount-navigation,.covert-loyalty-theme-dark.logged-in.woocommerce-account .woocommerce-MyAccount-content{border-color:var(--cp-line);background:var(--cp-card);color:var(--cp-text)}.covert-loyalty-theme-dark.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li a{color:var(--cp-muted)}.covert-loyalty-theme-dark.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li a:before{background:rgba(255,255,255,.06);color:var(--cp-accent)}.covert-loyalty-theme-dark.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li:not(.woocommerce-MyAccount-navigation-link--customer-logout) a:hover,.covert-loyalty-theme-dark.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{border-color:var(--cp-line);background:var(--cp-surface);color:var(--cp-text)}.covert-loyalty-theme-dark.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:before{background:var(--cp-accent);color:var(--cp-dark)}.covert-loyalty-theme-dark.logged-in.woocommerce-account .woocommerce-Address,.covert-loyalty-theme-dark.logged-in.woocommerce-account .woocommerce-MyAccount-content fieldset,.covert-loyalty-theme-dark.logged-in.woocommerce-account .woocommerce-MyAccount-content table.shop_table th{background:var(--cp-surface)}.covert-loyalty-theme-dark.logged-in.woocommerce-account .woocommerce-Address-title .edit{color:var(--cp-accent)}@media(max-width:760px){.logged-in.woocommerce-account .woocommerce-Addresses{grid-template-columns:1fr}} /* Readable compact launcher typography and palette-aware customer accents. */ .cp-eyebrow { color: var(--cp-accent); } .cp-launcher-popover { box-sizing: border-box; width: 360px; max-width: calc(100vw - 32px); padding: 14px; } .cp-launcher-member { gap: 10px; padding: 6px 6px 12px; } .cp-launcher-member small { font-size: 11px; line-height: 1.35; } .cp-launcher-member strong { font-size: 14px; line-height: 1.3; } .cp-launcher-member-program { max-width: 105px; font-size: 10px; line-height: 1.3; } .cp-launcher-balance { margin-bottom: 12px; padding: 14px; } .cp-launcher-balance span small { font-size: 11px; line-height: 1.35; } .cp-launcher-balance span strong { font-size: 28px; } .cp-launcher-balance > b { font-size: 10px; } .cp-launcher-section-heading { padding: 4px 4px 6px; } .cp-launcher-section-heading strong { font-size: 12px; } .cp-launcher-section-heading a { font-size: 10px; } .cp-launcher-reward { gap: 10px; padding: 10px; } .cp-launcher-reward-copy strong { font-size: 12px; line-height: 1.3; } .cp-launcher-reward-copy small { font-size: 11px; line-height: 1.45; } .cp-launcher-reward-cost strong { font-size: 12px; } .cp-launcher-reward-cost small { font-size: 9px; } .cp-launcher-referral { margin-top: 10px; padding: 14px; border-radius: 12px; } .cp-launcher-referral-heading > span { gap: 2px; } .cp-launcher-referral-heading small { color: var(--cp-accent); font-size: 10px; letter-spacing: .08em; } .cp-launcher-referral-heading strong { font-size: 15px; line-height: 1.3; } .cp-launcher-referral-heading b { font-size: 21px; } .cp-launcher-referral p { display: block; margin: 9px 0 5px; overflow: visible; font-size: 13px; line-height: 1.55; -webkit-line-clamp: unset; } .cp-launcher-referral-rule { overflow: visible; color: var(--cp-muted); font-size: 11px; line-height: 1.5; text-overflow: clip; white-space: normal; } .cp-launcher-referral-field { gap: 7px; margin-top: 11px; } .cp-launcher-referral-field input { height: 36px; padding-inline: 10px; font-size: 11px; } .cp-launcher-referral-field button { min-width: 56px; font-size: 10px; } .cp-launcher-link { min-height: 40px; margin-top: 10px; font-size: 11px; } @media (max-width: 760px) { .cp-launcher-popover { width: min(360px, calc(100vw - 32px)); } } /* Contrast-safe semantic palette roles for merchant presets and custom colors. */ .cp-rewards-shell, .cp-guide, .cp-account-summary, .cp-login-prompt { color: var(--cp-on-surface, var(--cp-text)); } .cp-rewards-header p, .cp-guide-hero p, .cp-login-prompt p, .cp-account-summary p { color: var(--cp-muted-on-surface, var(--cp-muted)); } .cp-panel--progress, .cp-reward-card, .cp-activity-section, .cp-referral-steps, .cp-launcher-popover { color: var(--cp-on-card, var(--cp-text)); } .cp-reward-copy p, .cp-activity-row div span, .cp-muted, .cp-launcher-member small, .cp-launcher-member-program, .cp-launcher-reward-copy small, .cp-launcher-reward-cost small, .cp-launcher-section-heading a, .cp-launcher-referral-rule { color: var(--cp-muted-on-card, var(--cp-muted)); } .cp-eyebrow, .cp-text-button, .cp-section-heading a, .logged-in.woocommerce-account .woocommerce-MyAccount-content a:not(.cp-button):not(.button) { color: var(--cp-action, var(--cp-dark)); } .cp-balance-orbit, .cp-button--light, .cp-reward-icon, .cp-launcher-reward-icon, .cp-launcher-balance > b { color: var(--cp-on-accent, var(--cp-dark)); } .cp-button--dark, .cp-theme-dark .cp-button--dark, .cp-launcher-button, .cp-theme-dark .cp-launcher-button, .cp-launcher-referral-field button, .cp-theme-dark .cp-launcher-referral-field button { border: 1px solid var(--cp-action, var(--cp-dark)); background: var(--cp-action, var(--cp-dark)); color: var(--cp-on-action, #fff); } .cp-launcher-button .cp-launcher-label small, .cp-launcher-button .cp-launcher-label strong, .cp-launcher-button .cp-launcher-points strong, .cp-launcher-button .cp-launcher-points small { color: var(--cp-on-action, #fff); } .cp-launcher-icon { background: color-mix(in srgb, var(--cp-on-action, #fff) 12%, transparent); color: var(--cp-on-action, #fff); } .cp-launcher-points { border-color: color-mix(in srgb, var(--cp-on-action, #fff) 28%, transparent); background: color-mix(in srgb, var(--cp-on-action, #fff) 10%, transparent); } .cp-launcher-popover { background: var(--cp-card); } .cp-launcher-avatar, .cp-launcher-balance { background: var(--cp-dark); color: var(--cp-on-dark, #fff); } .cp-launcher-balance span small, .cp-launcher-balance span strong { color: var(--cp-on-dark, #fff); } .cp-launcher-referral { color: var(--cp-on-card, var(--cp-text)); } .cp-launcher-referral-heading small, .cp-launcher-referral p { color: var(--cp-muted-on-card, var(--cp-muted)); } .cp-panel--referral, .cp-panel--referral h2, .cp-panel--referral h3, .cp-panel--referral strong { color: var(--cp-on-dark, #fff); } .cp-panel--referral p, .cp-panel--referral .cp-text-button { color: var(--cp-muted-on-dark, #d8e2dc); } .cp-panel--referral .cp-eyebrow, .cp-referral-mark { color: var(--cp-accent); } .cp-referral-field input { color: var(--cp-on-dark, #fff); } .cp-theme-dark .cp-panel--progress, .cp-theme-dark .cp-reward-card, .cp-theme-dark .cp-account-summary, .cp-theme-dark .cp-login-prompt, .cp-theme-dark .cp-guide-cta, .cp-theme-dark .cp-activity-section { color: var(--cp-on-card, var(--cp-text)); } /* WooCommerce account controls should never fall back to the active theme's blue. */ .logged-in.woocommerce-account .woocommerce-MyAccount-navigation, .logged-in.woocommerce-account .woocommerce-MyAccount-content { color: var(--cp-on-card, var(--cp-text)); } .logged-in.woocommerce-account .woocommerce-MyAccount-navigation li a { color: var(--cp-muted-on-card, var(--cp-muted)); } .logged-in.woocommerce-account .woocommerce-MyAccount-navigation li:not(.woocommerce-MyAccount-navigation-link--customer-logout) a:hover, .logged-in.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--cp-on-card, var(--cp-text)); } .logged-in.woocommerce-account .woocommerce-MyAccount-navigation li a:before { color: var(--cp-on-surface, var(--cp-text)); } .logged-in.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:before { background: var(--cp-accent); color: var(--cp-on-accent, var(--cp-dark)); } .logged-in.woocommerce-account .woocommerce-MyAccount-content .button, .logged-in.woocommerce-account .woocommerce-MyAccount-content a.button, .logged-in.woocommerce-account .woocommerce-MyAccount-content button.button, .logged-in.woocommerce-account .woocommerce-MyAccount-content input.button, .logged-in.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button { border-color: var(--cp-action, var(--cp-dark)) !important; background: var(--cp-action, var(--cp-dark)) !important; color: var(--cp-on-action, #fff) !important; box-shadow: none; } .logged-in.woocommerce-account .woocommerce-MyAccount-content .button:hover, .logged-in.woocommerce-account .woocommerce-MyAccount-content a.button:hover, .logged-in.woocommerce-account .woocommerce-MyAccount-content button.button:hover, .logged-in.woocommerce-account .woocommerce-MyAccount-content input.button:hover, .logged-in.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button:hover { filter: brightness(.94); color: var(--cp-on-action, #fff) !important; } .logged-in.woocommerce-account .woocommerce-Address-title .edit { color: var(--cp-action, var(--cp-dark)); } /* Keep the customer activity timeline visually grouped like the other account cards. */ .cp-activity-section { width: 100%; max-width: 700px; padding: 22px; border: 1px solid var(--cp-line); border-radius: 14px; background: var(--cp-card, #fff); color: var(--cp-on-card, var(--cp-text)); overflow: hidden; box-shadow: 0 8px 24px rgba(18, 35, 27, .04); } .cp-activity-section .cp-section-heading { margin-bottom: 0; } .cp-activity-section .cp-activity-list { border-top-color: var(--cp-line); } .cp-activity-section .cp-activity-row:last-child { border-bottom: 0; } @media (max-width: 760px) { .cp-activity-section { padding: 18px; border-radius: 12px; } } /* Make launcher shape settings change the control footprint, not only its artwork. */ .cp-loyalty-launcher.cp-launcher-shape-button .cp-launcher-button { min-width: 190px; min-height: var(--cp-launcher-size, 52px); padding: 7px 13px 7px 8px; border-radius: 999px; } .cp-loyalty-launcher.cp-launcher-shape-circle .cp-launcher-button, .cp-loyalty-launcher.cp-launcher-shape-square .cp-launcher-button { width: var(--cp-launcher-size, 60px); min-width: var(--cp-launcher-size, 60px); height: var(--cp-launcher-size, 60px); min-height: var(--cp-launcher-size, 60px); padding: 0; justify-content: center; border-radius: 50%; } .cp-loyalty-launcher.cp-launcher-shape-square .cp-launcher-button { border-radius: 14px; } .cp-loyalty-launcher.cp-launcher-shape-circle .cp-launcher-icon, .cp-loyalty-launcher.cp-launcher-shape-square .cp-launcher-icon { width: var(--cp-launcher-icon-size, 38px); height: var(--cp-launcher-icon-size, 38px); border-radius: 50%; } .cp-loyalty-launcher.cp-launcher-shape-square .cp-launcher-icon { border-radius: 10px; } .cp-loyalty-launcher.cp-launcher-shape-circle .cp-launcher-label, .cp-loyalty-launcher.cp-launcher-shape-circle .cp-launcher-points, .cp-loyalty-launcher.cp-launcher-shape-square .cp-launcher-label, .cp-loyalty-launcher.cp-launcher-shape-square .cp-launcher-points { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Compact launcher: remove customer identity and make the balance the focal point. */ .cp-loyalty-launcher.cp-launcher-shape-button .cp-launcher-button { min-width: 0; gap: 6px; padding: 6px 7px 6px 6px; border-radius: 16px; } .cp-launcher-label, .cp-launcher-member { display: none; } .cp-launcher-points { display: flex; align-items: baseline; justify-content: center; gap: 5px; min-width: 92px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--cp-on-action, #fff) 28%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--cp-on-action, #fff) 10%, transparent); color: var(--cp-on-action, #fff); white-space: nowrap; } .cp-launcher-points > strong { color: var(--cp-on-action, #fff); font-size: 16px; line-height: 1; font-variant-numeric: tabular-nums; } .cp-launcher-points small { margin: 0; color: var(--cp-on-action, #fff); font-size: 8px; font-weight: 800; line-height: 1; text-transform: uppercase; opacity: .78; } /* WooCommerce address map with live billing/shipping pin updates. */ .cp-address-map { margin-top: 22px; overflow: hidden; border: 1px solid var(--cp-line); border-radius: 14px; background: var(--cp-card, #fff); color: var(--cp-on-card, var(--cp-text)); box-shadow: 0 8px 24px rgba(18, 35, 27, .04); } .cp-address-map [hidden] { display: none!important; } .cp-address-map-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px; } .cp-address-map-heading h2 { margin: 6px 0 5px!important; color: var(--cp-on-card, var(--cp-text))!important; font-size: 21px; line-height: 1.15; } .cp-address-map-heading p { max-width: 520px; margin: 0; color: var(--cp-muted-on-card, var(--cp-muted)); font-size: 12px; line-height: 1.55; } .cp-address-map-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--cp-line); border-radius: 10px; background: var(--cp-surface); } .cp-address-map-tabs button { min-height: 34px; padding: 0 12px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--cp-muted-on-surface, var(--cp-muted)); font-size: 11px; font-weight: 750; cursor: pointer; } .cp-address-map-tabs button:hover, .cp-address-map-tabs button:focus-visible, .cp-address-map-tabs button.is-active { border-color: var(--cp-line); background: var(--cp-card); color: var(--cp-on-card, var(--cp-text)); outline: 0; } .cp-address-map-frame { position: relative; min-height: 330px; border-top: 1px solid var(--cp-line); border-bottom: 1px solid var(--cp-line); background: var(--cp-surface); } .cp-address-map-frame iframe { display: block; width: 100%; height: 330px; border: 0; } .cp-address-map-placeholder { display: grid; place-items: center; align-content: center; min-height: 330px; padding: 28px; color: var(--cp-on-surface, var(--cp-text)); text-align: center; } .cp-address-map-placeholder > span { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px; border: 1px solid var(--cp-line); border-radius: 13px; background: var(--cp-card); color: var(--cp-action, var(--cp-dark)); font-size: 22px; } .cp-address-map-placeholder strong { font-size: 14px; } .cp-address-map-placeholder small { max-width: 320px; margin-top: 5px; color: var(--cp-muted-on-surface, var(--cp-muted)); font-size: 10px; line-height: 1.5; } .cp-address-map-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; } .cp-address-map-footer > span { display: grid; min-width: 0; gap: 3px; } .cp-address-map-footer small { color: var(--cp-muted-on-card, var(--cp-muted)); font-size: 9px; font-weight: 750; text-transform: uppercase; } .cp-address-map-footer strong { overflow: hidden; max-width: 610px; color: var(--cp-on-card, var(--cp-text)); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .cp-address-map-footer a { flex: 0 0 auto; color: var(--cp-action, var(--cp-dark))!important; font-size: 11px; font-weight: 750; text-decoration: none; } .cp-address-map-footer a:hover { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 760px) { .cp-address-map-heading, .cp-address-map-footer { align-items: stretch; flex-direction: column; } .cp-address-map-tabs { align-self: stretch; } .cp-address-map-tabs button { flex: 1; } .cp-address-map-frame, .cp-address-map-frame iframe, .cp-address-map-placeholder { min-height: 250px; height: 250px; } .cp-address-map-footer strong { white-space: normal; } } /* Member Access refinement: make the native account entrance feel like a * deliberate, high-conversion welcome screen instead of a theme default. * Semantic auth variables are injected by the frontend class so every palette * keeps readable text, borders, inputs, and actions. */ body.covert-loyalty-auth.woocommerce-account { background: var(--cp-auth-bg) !important; color: var(--cp-auth-text); } body.covert-loyalty-auth.woocommerce-account .site-main, body.covert-loyalty-auth.woocommerce-account main, body.covert-loyalty-auth.woocommerce-account .content-area { background: var(--cp-auth-bg); } body.covert-loyalty-auth.woocommerce-account .woocommerce { width: min(1180px, calc(100% - 48px)); margin: 24px auto 68px; padding: clamp(30px, 5vw, 64px); border: 1px solid color-mix(in srgb, var(--cp-auth-line) 84%, transparent); border-radius: calc(var(--cp-auth-radius) + 8px); background: var(--cp-auth-bg); box-shadow: 0 24px 70px color-mix(in srgb, var(--cp-auth-text) 8%, transparent); color: var(--cp-auth-text); } body.covert-loyalty-auth.woocommerce-account .cp-auth-page-intro { max-width: 760px; margin-bottom: clamp(32px, 5vw, 48px); } body.covert-loyalty-auth.woocommerce-account .cp-auth-brand { min-height: 34px; margin-bottom: 28px; } body.covert-loyalty-auth.woocommerce-account .cp-auth-store-logo { max-width: 210px; max-height: 58px; } body.covert-loyalty-auth.woocommerce-account .cp-auth-page-intro > span { color: var(--cp-auth-accent-on-bg, var(--cp-auth-text)) !important; display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--cp-auth-accent) 52%, var(--cp-auth-line)); border-radius: 999px; background: color-mix(in srgb, var(--cp-auth-accent) 11%, var(--cp-auth-bg)); } body.covert-loyalty-auth.woocommerce-account .cp-auth-page-intro h1 { max-width: 760px; margin: 13px 0 14px; font-size: clamp(40px, 5.5vw, 68px); line-height: .98; letter-spacing: -.06em; } body.covert-loyalty-auth.woocommerce-account .cp-auth-page-intro p { max-width: 650px; font-size: 16px; line-height: 1.65; } body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-login, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-register, body.covert-loyalty-auth.woocommerce-account form.lost_reset_password { position: relative; min-height: 100%; padding: clamp(26px, 3.5vw, 40px); border: 1px solid var(--cp-auth-line); border-top: 3px solid var(--cp-auth-accent); border-radius: var(--cp-auth-radius); background: var(--cp-auth-card); box-shadow: 0 18px 46px color-mix(in srgb, var(--cp-auth-text) 9%, transparent); color: var(--cp-auth-text); } body.covert-loyalty-auth.woocommerce-account .cp-auth-form-intro { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--cp-auth-line); } body.covert-loyalty-auth.woocommerce-account .cp-auth-form-intro > span { display: block; margin-bottom: 10px; font-size: 10px; letter-spacing: .15em; } body.covert-loyalty-auth.woocommerce-account .cp-auth-form-intro h2 { margin: 0 0 9px; font-size: clamp(26px, 3vw, 36px); line-height: 1.02; letter-spacing: -.05em; } body.covert-loyalty-auth.woocommerce-account .cp-auth-form-intro p { max-width: 460px; margin: 0; font-size: 13px; line-height: 1.55; } body.covert-loyalty-auth.woocommerce-account .cp-auth-benefits { display: grid; gap: 9px; margin: 0 0 26px; padding: 0; list-style: none; } body.covert-loyalty-auth.woocommerce-account .cp-auth-benefits li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 10px; margin: 0; padding: 10px; border: 1px solid var(--cp-auth-line); border-radius: max(8px, calc(var(--cp-auth-radius) * .55)); background: color-mix(in srgb, var(--cp-auth-accent) 6%, var(--cp-auth-card)); } body.covert-loyalty-auth.woocommerce-account .cp-auth-benefits li > span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--cp-auth-accent); color: var(--cp-auth-on-button); font-size: 15px; font-weight: 800; } body.covert-loyalty-auth.woocommerce-account .cp-auth-benefits li > span:last-child { display: grid; gap: 3px; min-width: 0; } body.covert-loyalty-auth.woocommerce-account .cp-auth-benefits strong { color: var(--cp-auth-text); font-size: 12px; line-height: 1.25; } body.covert-loyalty-auth.woocommerce-account .cp-auth-benefits small { color: var(--cp-auth-muted); font-size: 11px; line-height: 1.4; } body.covert-loyalty-auth.woocommerce-account .woocommerce-form-row, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-login .form-row, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-register .form-row { margin-bottom: 19px; } body.covert-loyalty-auth.woocommerce-account .woocommerce-form-row label, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-login label, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-register label { margin-bottom: 8px; font-size: 12px; letter-spacing: .01em; } body.covert-loyalty-auth.woocommerce-account input.input-text, body.covert-loyalty-auth.woocommerce-account input[type="date"] { min-height: 52px; padding: 0 15px; border: 1px solid color-mix(in srgb, var(--cp-auth-line) 110%, transparent); border-radius: max(8px, calc(var(--cp-auth-radius) * .55)); background: var(--cp-auth-card); color: var(--cp-auth-text); font-size: 15px; } body.covert-loyalty-auth.woocommerce-account input.input-text::placeholder { color: var(--cp-auth-muted); opacity: .86; } body.covert-loyalty-auth.woocommerce-account input.input-text:focus, body.covert-loyalty-auth.woocommerce-account input[type="date"]:focus { border-color: var(--cp-auth-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cp-auth-accent) 18%, transparent); } body.covert-loyalty-auth.woocommerce-account .woocommerce-form-login__rememberme { min-height: 24px; font-size: 12px; } body.covert-loyalty-auth.woocommerce-account .woocommerce-form-login__rememberme input { width: 17px; height: 17px; } body.covert-loyalty-auth.woocommerce-account button.button, body.covert-loyalty-auth.woocommerce-account .woocommerce-form-login__submit, body.covert-loyalty-auth.woocommerce-account .woocommerce-form-register__submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; margin-top: 6px; padding: 0 18px; border: 1px solid var(--cp-auth-button); border-radius: max(8px, calc(var(--cp-auth-radius) * .55)); background: var(--cp-auth-button); color: var(--cp-auth-on-button); font-size: 14px; font-weight: 800; } body.covert-loyalty-auth.woocommerce-account button.button::after, body.covert-loyalty-auth.woocommerce-account .woocommerce-form-login__submit::after, body.covert-loyalty-auth.woocommerce-account .woocommerce-form-register__submit::after { content: "→"; font-size: 18px; line-height: 1; } body.covert-loyalty-auth.woocommerce-account button.button:hover, body.covert-loyalty-auth.woocommerce-account button.button:focus-visible { transform: translateY(-1px); opacity: 1; } body.covert-loyalty-auth.woocommerce-account .lost_password { margin: 16px 0 0; } body.covert-loyalty-auth.woocommerce-account .lost_password a, body.covert-loyalty-auth.woocommerce-account .woocommerce-privacy-policy-link { color: var(--cp-auth-muted); font-size: 12px; font-weight: 650; text-underline-offset: 4px; } body.covert-loyalty-auth.woocommerce-account .woocommerce-privacy-policy-text { margin: 16px 0 12px; font-size: 11px; line-height: 1.5; } body.covert-loyalty-auth.woocommerce-account .woocommerce-error, body.covert-loyalty-auth.woocommerce-account .woocommerce-message, body.covert-loyalty-auth.woocommerce-account .woocommerce-info { border: 1px solid var(--cp-auth-line); border-radius: 10px; background: var(--cp-auth-card); box-shadow: none; color: var(--cp-auth-text); } body.covert-loyalty-auth.woocommerce-account a:focus-visible, body.covert-loyalty-auth.woocommerce-account button:focus-visible, body.covert-loyalty-auth.woocommerce-account input:focus-visible { outline: 3px solid color-mix(in srgb, var(--cp-auth-accent) 38%, transparent); outline-offset: 3px; } @media (max-width: 760px) { body.covert-loyalty-auth.woocommerce-account .woocommerce { width: min(100% - 24px, 640px); margin: 12px auto 36px; padding: 24px 14px 28px; border-radius: calc(var(--cp-auth-radius) + 4px); } body.covert-loyalty-auth.woocommerce-account .cp-auth-brand { margin-bottom: 22px; } body.covert-loyalty-auth.woocommerce-account .cp-auth-page-intro h1 { font-size: clamp(36px, 11vw, 48px); } body.covert-loyalty-auth.woocommerce-account .cp-auth-page-intro p { font-size: 14px; } body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set { grid-template-columns: 1fr; gap: 14px; } body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-login, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-register, body.covert-loyalty-auth.woocommerce-account form.lost_reset_password { padding: 24px 18px; } } /* Customer-owned coupons, including safely migrated WP Loyalty rewards. */ .cp-earned-rewards { margin-bottom: 34px; } .cp-earned-rewards .cp-reward-list { grid-template-columns: repeat(3,minmax(0,1fr)); } .cp-earned-reward-card { min-height: 250px; } .cp-earned-coupon { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px dashed var(--cp-line); border-radius: 9px; background: var(--cp-surface); color: var(--cp-on-surface, var(--cp-text)); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 12px; font-weight: 800; letter-spacing: .06em; } @media (max-width: 920px) { .cp-earned-rewards .cp-reward-list { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .cp-earned-rewards .cp-reward-list { grid-template-columns: 1fr; } } /* Persisted account layouts. Every variation keeps the same WooCommerce data and endpoints; only hierarchy, density, and emphasis change. */ .cp-rewards-shell[class*="cp-account-layout-"] { display: flex; flex-direction: column; } .cp-account-layout-balance .cp-rewards-header { min-height: 250px; padding: clamp(24px,5vw,54px); border-radius: 18px; background: var(--cp-dark); } .cp-account-layout-balance .cp-rewards-header h1, .cp-account-layout-balance .cp-rewards-header .cp-eyebrow { color: var(--cp-on-dark,#fff); } .cp-account-layout-balance .cp-rewards-header p { color: var(--cp-muted-on-dark,#d8e2dc); } .cp-account-layout-balance .cp-balance-orbit { width: 158px; height: 158px; flex-basis: 158px; } .cp-account-layout-balance .cp-balance-orbit span { font-size: 42px; } .cp-account-layout-rewards #cp-rewards { order: 1; margin-top: 0; } .cp-account-layout-rewards .cp-rewards-grid { order: 2; } .cp-account-layout-rewards .cp-earned-rewards { order: 3; } .cp-account-layout-rewards .cp-activity-section { order: 4; } .cp-account-layout-rewards #cp-rewards .cp-reward-list { grid-template-columns: repeat(3,minmax(0,1fr)); } .covert-loyalty-layout-orders.logged-in.woocommerce-account .woocommerce { grid-template-columns: 180px minmax(0,1fr); } .covert-loyalty-layout-orders.logged-in.woocommerce-account .woocommerce-MyAccount-content { padding: clamp(24px,4vw,40px); } .covert-loyalty-layout-orders.logged-in.woocommerce-account .woocommerce-MyAccount-content table.shop_table th, .covert-loyalty-layout-orders.logged-in.woocommerce-account .woocommerce-MyAccount-content table.shop_table td { padding: 16px; } .cp-account-layout-compact { font-size: .94em; } .cp-account-layout-compact .cp-rewards-header { margin-bottom: 22px; } .cp-account-layout-compact .cp-rewards-header h1 { font-size: clamp(31px,4vw,46px); } .cp-account-layout-compact .cp-rewards-grid { gap: 10px; margin-bottom: 28px; } .cp-account-layout-compact .cp-panel { min-height: 190px; padding: 19px; } .cp-account-layout-compact .cp-reward-list { gap: 9px; } .cp-account-layout-compact .cp-reward-card { min-height: 235px; padding: 16px; } .covert-loyalty-layout-compact.logged-in.woocommerce-account .woocommerce { gap: 16px; grid-template-columns: 200px minmax(0,1fr); } .covert-loyalty-layout-compact.logged-in.woocommerce-account .woocommerce-MyAccount-navigation, .covert-loyalty-layout-compact.logged-in.woocommerce-account .woocommerce-MyAccount-content { border-radius: 10px; } .cp-account-layout-editorial .cp-rewards-header { align-items: end; min-height: 260px; padding-bottom: 24px; } .cp-account-layout-editorial .cp-rewards-header h1 { max-width: 720px; font-family: Georgia,"Times New Roman",serif; font-size: clamp(48px,7vw,76px); font-weight: 500; letter-spacing: -.055em; } .cp-account-layout-editorial .cp-section { margin-top: 58px; } .cp-account-layout-editorial .cp-rewards-grid { gap: 24px; } .covert-loyalty-layout-editorial.logged-in.woocommerce-account .woocommerce-MyAccount-content > h2, .covert-loyalty-layout-editorial.logged-in.woocommerce-account .woocommerce-MyAccount-content > h3 { font-family: Georgia,"Times New Roman",serif; font-weight: 500; } .cp-account-layout-referral .cp-rewards-grid { grid-template-columns: 1fr; } .cp-account-layout-referral .cp-panel--referral { min-height: 310px; padding: clamp(28px,5vw,54px); } .cp-account-layout-referral .cp-panel--referral h2 { max-width: 630px; font-size: clamp(36px,6vw,62px); } .cp-account-layout-referral .cp-panel--progress { min-height: 180px; } .cp-account-layout-referral.cp-referrals-shell .cp-panel--referral-page { min-height: 380px; } .cp-account-layout-wallet .cp-rewards-header { padding: clamp(24px,4vw,42px); border: 1px solid var(--cp-line); border-radius: 18px; background: linear-gradient(135deg,var(--cp-card),var(--cp-surface)); } .cp-account-layout-wallet .cp-balance-orbit { width: 210px; height: 112px; flex-basis: 210px; border-radius: 17px; box-shadow: 0 12px 30px color-mix(in srgb,var(--cp-accent) 18%,transparent); } .cp-account-layout-wallet .cp-balance-orbit span { font-size: 43px; } .cp-account-layout-wallet .cp-panel,.cp-account-layout-wallet .cp-reward-card { border-radius: 17px; } .cp-account-layout-timeline .cp-activity-section { max-width: none; border-left: 5px solid var(--cp-accent); } .cp-account-layout-timeline .cp-activity-row { min-height: 62px; } .cp-account-layout-timeline .cp-activity-dot { width: 11px; height: 11px; box-shadow: 0 0 0 5px color-mix(in srgb,var(--cp-accent) 18%,transparent); } .cp-account-layout-timeline .cp-activity-list { position: relative; } .cp-account-layout-timeline .cp-activity-list::before { position: absolute; top: 18px; bottom: 18px; left: 5px; width: 1px; background: var(--cp-line); content: ''; } .cp-account-layout-timeline .cp-activity-row { position: relative; } .cp-account-layout-grid .cp-rewards-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .cp-account-layout-grid .cp-reward-list { grid-template-columns: repeat(3,minmax(0,1fr)); } .cp-account-layout-grid .cp-activity-section { max-width: none; } .covert-loyalty-layout-grid.logged-in.woocommerce-account .woocommerce-Addresses { grid-template-columns: repeat(2,minmax(0,1fr)); } .cp-account-layout-minimal .cp-rewards-header { padding-block: 28px; border-bottom: 1px solid var(--cp-line); } .cp-account-layout-minimal .cp-balance-orbit { border-radius: 14px; box-shadow: none; } .cp-account-layout-minimal .cp-panel, .cp-account-layout-minimal .cp-reward-card, .cp-account-layout-minimal .cp-activity-section { border-radius: 8px; box-shadow: none; } .cp-account-layout-minimal .cp-panel--progress { background: transparent; } .covert-loyalty-layout-minimal.logged-in.woocommerce-account .woocommerce-MyAccount-navigation, .covert-loyalty-layout-minimal.logged-in.woocommerce-account .woocommerce-MyAccount-content { box-shadow: none; } .cp-account-layout-full { max-width: none; } .cp-account-layout-full .cp-rewards-header { min-height: 230px; padding: clamp(24px,5vw,60px); } .cp-account-layout-full .cp-rewards-grid { gap: 24px; } .covert-loyalty-layout-full.logged-in.woocommerce-account .woocommerce { grid-template-columns: 1fr; } .covert-loyalty-layout-full.logged-in.woocommerce-account .woocommerce-MyAccount-navigation { position: static; overflow-x: auto; } .covert-loyalty-layout-full.logged-in.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; width: max-content; min-width: 100%; } .covert-loyalty-layout-full.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li { flex: 1 0 auto; } .covert-loyalty-layout-full.logged-in.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout { border-top: 0; border-left: 1px solid var(--cp-line); } @media (max-width: 980px) { .cp-account-layout-rewards #cp-rewards .cp-reward-list, .cp-account-layout-grid .cp-reward-list { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 760px) { .cp-account-layout-balance .cp-rewards-header, .cp-account-layout-editorial .cp-rewards-header { min-height: 0; } .cp-account-layout-balance .cp-balance-orbit { width: 116px; height: 116px; flex-basis: 116px; } .cp-account-layout-wallet .cp-balance-orbit { width: 100%; height: 96px; flex-basis: 96px; } .cp-account-layout-referral .cp-panel--referral { min-height: 0; padding: 24px; } .cp-account-layout-referral .cp-panel--referral h2 { font-size: 34px; } .cp-account-layout-rewards #cp-rewards .cp-reward-list, .cp-account-layout-grid .cp-reward-list { grid-template-columns: 1fr; } .covert-loyalty-layout-compact.logged-in.woocommerce-account .woocommerce, .covert-loyalty-layout-orders.logged-in.woocommerce-account .woocommerce { grid-template-columns: 1fr; } } /* WooCommerce block themes can reverse auto-placed account grid children. Pin each native endpoint region explicitly so the menu never consumes the wide content column. */ .logged-in.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1!important; grid-row: 1!important; width: auto!important; } .logged-in.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { grid-column: 2!important; grid-row: 1!important; width: auto!important; } .covert-loyalty-layout-full.logged-in.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1!important; grid-row: 1!important; } .covert-loyalty-layout-full.logged-in.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { grid-column: 1!important; grid-row: 2!important; } /* Replace WooCommerce's generic greeting with a useful account home. */ body.woocommerce-dashboard .woocommerce-MyAccount-content > p { display: none; } .cp-account-home { display: grid; gap: 18px; color: var(--cp-on-card,var(--cp-text)); font-family: Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } .cp-account-home-hero { display: grid; grid-template-columns: minmax(0,1fr) 190px; align-items: stretch; gap: 24px; padding: clamp(22px,4vw,34px); border: 1px solid var(--cp-line); border-radius: 16px; background: var(--cp-card); } .cp-account-home-hero > div:first-child { align-self: center; min-width: 0; } .cp-account-home-hero h2 { margin: 8px 0 8px!important; color: var(--cp-on-card,var(--cp-text))!important; font-size: clamp(30px,4vw,46px); line-height: 1.02; letter-spacing: -.055em!important; } .cp-account-home-hero p { max-width: 520px; margin: 0; color: var(--cp-muted-on-card,var(--cp-muted)); font-size: 13px; line-height: 1.6; } .cp-account-points-card { display: grid; min-width: 0; align-content: center; justify-items: start; padding: 20px; border: 1px solid var(--cp-line); border-radius: 14px; background: var(--cp-dark); color: var(--cp-on-dark,#fff); } .cp-account-points-card small { color: var(--cp-muted-on-dark,#d8e2dc); font-size: 9px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; } .cp-account-points-card strong { margin-top: 9px; color: var(--cp-on-dark,#fff); font-size: 42px; line-height: .95; letter-spacing: -.07em; font-variant-numeric: tabular-nums; } .cp-account-points-card > span { margin-top: 4px; color: var(--cp-muted-on-dark,#d8e2dc); font-size: 10px; } .cp-account-points-card a { margin-top: 18px; color: var(--cp-accent)!important; font-size: 11px; font-weight: 800; text-decoration: none; } .cp-account-stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 12px; } .cp-account-stat-grid article { position: relative; display: grid; grid-template-rows: auto minmax(36px,auto) auto; min-width: 0; min-height: 142px; align-content: start; gap: 6px; padding: 54px 16px 16px; border: 1px solid var(--cp-line); border-radius: 13px; background: var(--cp-card); } .cp-account-stat-icon { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--cp-surface); color: var(--cp-on-surface,var(--cp-text)); font-size: 12px; } .cp-account-stat-grid article > small { color: var(--cp-muted-on-card,var(--cp-muted)); font-size: 9px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; } .cp-account-stat-grid article > strong { overflow-wrap: anywhere; color: var(--cp-on-card,var(--cp-text)); font-size: 13px; line-height: 1.35; } .cp-account-stat-grid article > span:not(.cp-account-stat-icon),.cp-account-stat-grid article > a { color: var(--cp-muted-on-card,var(--cp-muted)); font-size: 10px; line-height: 1.4; } .cp-account-stat-grid article > a { color: var(--cp-action,var(--cp-dark))!important; font-weight: 750; text-decoration: none; } .cp-account-home-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 12px; } .cp-account-order-card,.cp-account-actions-card { display: grid; grid-template-rows: auto 1fr auto; align-content: start; gap: 16px; min-width: 0; height: 100%; padding: 20px; border: 1px solid var(--cp-line); border-radius: 14px; background: var(--cp-card); } .cp-account-order-card h3,.cp-account-actions-card h3 { margin: 5px 0 0!important; color: var(--cp-on-card,var(--cp-text))!important; font-size: 18px; } .cp-account-order-list { display: grid; } .cp-account-order-list > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 55px; padding: 8px 0; border-top: 1px solid var(--cp-line); color: var(--cp-on-card,var(--cp-text))!important; text-decoration: none; } .cp-account-order-list > a > span { display: grid; gap: 3px; min-width: 0; } .cp-account-order-list > a > span:last-child { justify-items: end; text-align: right; } .cp-account-order-list strong,.cp-account-order-list b { color: var(--cp-on-card,var(--cp-text)); font-size: 11px; } .cp-account-order-list small { color: var(--cp-muted-on-card,var(--cp-muted)); font-size: 9px; } .cp-account-card-link { justify-self: start; color: var(--cp-action,var(--cp-dark))!important; font-size: 10px; font-weight: 800; text-decoration: none; } .cp-account-action-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cp-account-action-list a { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 2px 8px; min-width: 0; min-height: 66px; padding: 9px; border: 1px solid var(--cp-line); border-radius: 10px; background: var(--cp-surface); color: var(--cp-on-surface,var(--cp-text))!important; text-decoration: none; } .cp-account-action-list a > span { display: grid; grid-row: 1/3; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--cp-accent); color: var(--cp-on-accent,var(--cp-dark)); font-size: 11px; } .cp-account-action-list strong { overflow: hidden; color: var(--cp-on-surface,var(--cp-text)); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .cp-account-action-list small { color: var(--cp-muted-on-surface,var(--cp-muted)); font-size: 8px; } .cp-account-home-empty { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--cp-line); } .cp-account-home-empty strong { font-size: 12px; } .cp-account-home-empty span { color: var(--cp-muted-on-card,var(--cp-muted)); font-size: 10px; } @media (max-width: 760px) { .logged-in.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation, .logged-in.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { grid-column: 1!important; grid-row: auto!important; } .logged-in.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation { scrollbar-width: thin; overscroll-behavior-x: contain; } .cp-account-home-hero { grid-template-columns: 1fr; } .cp-account-points-card { min-width: 0; } .cp-account-stat-grid,.cp-account-home-grid { grid-template-columns: 1fr; } } @media (max-width: 460px) { .cp-account-action-list { grid-template-columns: 1fr; } } /* Account surface refinement: let the plugin own the customer layout instead of inheriting floats, spacing, and low-contrast colors from the active theme. */ body.logged-in.woocommerce-account main, body.logged-in.woocommerce-account .site-main { padding-block-start: clamp(18px, 2.4vw, 32px) !important; } body.logged-in.woocommerce-account main .woocommerce, body.logged-in.woocommerce-account .site-main .woocommerce { box-sizing: border-box; width: min(1480px, calc(100% - 48px)); max-width: 1480px; margin: clamp(20px, 3vw, 38px) auto 72px; grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); } body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation, body.logged-in.woocommerce-account .woocommerce-MyAccount-content { box-sizing: border-box; min-width: 0; } body.logged-in.woocommerce-account .woocommerce-MyAccount-content { padding: clamp(26px, 3.2vw, 42px); } body.logged-in.woocommerce-account .woocommerce-MyAccount-content > .cp-rewards-shell { padding: 0 0 38px; } body.logged-in.woocommerce-account .woocommerce-MyAccount-content > h2, body.logged-in.woocommerce-account .woocommerce-MyAccount-content > h3 { margin: 0 0 18px !important; color: var(--cp-on-card, var(--cp-text)) !important; } /* Equal, aligned billing and shipping cards. */ body.logged-in.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch; gap: 16px; margin: 20px 0 0 !important; } body.logged-in.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address { display: flex !important; flex-direction: column; align-items: stretch; width: auto !important; min-width: 0; height: 100%; box-sizing: border-box; margin: 0 !important; padding: 22px !important; border: 1px solid var(--cp-line) !important; border-radius: 14px !important; background: var(--cp-card) !important; color: var(--cp-on-card, var(--cp-text)) !important; } body.logged-in.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 18px !important; } body.logged-in.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title h3 { margin: 0 !important; color: var(--cp-on-card, var(--cp-text)) !important; font-size: 18px; line-height: 1.2; } body.logged-in.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title .edit { flex: 0 0 auto; margin: 2px 0 0 !important; color: var(--cp-action, var(--cp-dark)) !important; font-size: 11px; font-weight: 800; line-height: 1.3; text-decoration: underline; text-underline-offset: 3px; } body.logged-in.woocommerce-account .woocommerce-Addresses .woocommerce-Address address { flex: 1; margin: 0 !important; color: var(--cp-muted-on-card, var(--cp-muted)) !important; font-size: 13px; font-style: normal; line-height: 1.7; } /* Contrast contract for every customer-facing card. Theme selectors may set direct heading colors, so these declarations intentionally use !important. */ .cp-rewards-shell .cp-rewards-header--catalog, .cp-rewards-shell .cp-account-home-hero, .cp-rewards-shell .cp-panel--progress, .cp-rewards-shell .cp-reward-card, .cp-rewards-shell .cp-activity-section, .cp-rewards-shell .cp-account-order-card, .cp-rewards-shell .cp-account-actions-card { color: var(--cp-on-card, var(--cp-text)) !important; } .cp-rewards-shell .cp-rewards-header--catalog h1, .cp-rewards-shell .cp-account-home-hero h2, .cp-rewards-shell .cp-panel--progress h2, .cp-rewards-shell .cp-panel--progress strong, .cp-rewards-shell .cp-reward-card h3, .cp-rewards-shell .cp-reward-card strong, .cp-rewards-shell .cp-activity-section h2, .cp-rewards-shell .cp-account-order-card h3, .cp-rewards-shell .cp-account-actions-card h3, .cp-rewards-shell .cp-account-stat-grid article > strong, .cp-rewards-shell .cp-account-order-list strong, .cp-rewards-shell .cp-account-order-list b { color: var(--cp-on-card, var(--cp-text)) !important; } .cp-rewards-shell .cp-rewards-header--catalog p, .cp-rewards-shell .cp-account-home-hero p, .cp-rewards-shell .cp-panel--progress p, .cp-rewards-shell .cp-panel--progress .cp-progress-meta, .cp-rewards-shell .cp-reward-card p, .cp-rewards-shell .cp-reward-card small, .cp-rewards-shell .cp-reward-copy p, .cp-rewards-shell .cp-activity-row div span, .cp-rewards-shell .cp-account-stat-grid article > span:not(.cp-account-stat-icon), .cp-rewards-shell .cp-account-order-list small, .cp-rewards-shell .cp-account-home-empty span { color: var(--cp-muted-on-card, var(--cp-muted)) !important; } .cp-rewards-shell .cp-panel--progress .cp-eyebrow, .cp-rewards-shell .cp-account-home-hero .cp-eyebrow, .cp-rewards-shell .cp-reward-card .cp-reward-type { color: var(--cp-accent) !important; } .cp-rewards-shell .cp-reward-card, .cp-rewards-shell .cp-account-home-hero, .cp-rewards-shell .cp-account-stat-grid article, .cp-rewards-shell .cp-account-order-card, .cp-rewards-shell .cp-account-actions-card, .cp-rewards-shell .cp-activity-section { background: var(--cp-card) !important; border-color: var(--cp-line) !important; } .cp-rewards-shell .cp-reward-card .cp-reward-icon, .cp-rewards-shell .cp-account-stat-icon, .cp-rewards-shell .cp-account-action-list a > span { background: var(--cp-accent) !important; color: var(--cp-on-accent, var(--cp-dark)) !important; } .cp-rewards-shell .cp-reward-card .cp-reward-availability.is-ready { border-color: var(--cp-action) !important; background: var(--cp-action) !important; color: var(--cp-on-action, #fff) !important; } .cp-rewards-shell .cp-reward-card.is-locked { background: color-mix(in srgb, var(--cp-card) 92%, var(--cp-surface)) !important; } .cp-rewards-shell .cp-panel--progress .cp-progress-track { background: color-mix(in srgb, var(--cp-on-card, var(--cp-text)) 13%, var(--cp-card)) !important; } .cp-rewards-shell .cp-panel--referral, .cp-rewards-shell .cp-panel--referral h2, .cp-rewards-shell .cp-panel--referral strong { color: var(--cp-on-dark, #fff) !important; } .cp-rewards-shell .cp-panel--referral p, .cp-rewards-shell .cp-panel--referral .cp-text-button { color: var(--cp-muted-on-dark, #d8e2dc) !important; } @media (max-width: 980px) { body.logged-in.woocommerce-account main .woocommerce, body.logged-in.woocommerce-account .site-main .woocommerce { width: min(100% - 32px, 920px); grid-template-columns: minmax(190px, 220px) minmax(0, 1fr); gap: 18px; } body.logged-in.woocommerce-account .woocommerce-MyAccount-content { padding: 24px; } } @media (max-width: 760px) { body.logged-in.woocommerce-account main .woocommerce, body.logged-in.woocommerce-account .site-main .woocommerce { width: calc(100% - 24px); grid-template-columns: 1fr; gap: 14px; margin-top: 16px; margin-bottom: 42px; } body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation { position: static; overflow: visible; } body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; } body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation li a { min-height: 44px; } body.logged-in.woocommerce-account .woocommerce-MyAccount-content { padding: 18px; } body.logged-in.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: 1fr !important; } body.logged-in.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address { min-height: 190px; padding: 18px !important; } body.logged-in.woocommerce-account main, body.logged-in.woocommerce-account .site-main { padding-block-start: 12px !important; } } @media (max-width: 460px) { body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation ul { grid-template-columns: 1fr; } } /* Native WooCommerce login and registration designer. */ body.covert-loyalty-auth.woocommerce-account .woocommerce { width: min(1120px, calc(100% - 32px)); margin: 32px auto 56px; padding: clamp(24px, 5vw, 64px); border: 1px solid color-mix(in srgb, var(--cp-auth-line) 76%, transparent); border-radius: calc(var(--cp-auth-radius) + 6px); background: var(--cp-auth-bg); color: var(--cp-auth-text); } body.covert-loyalty-auth.woocommerce-account .cp-auth-page-intro { display: grid; justify-items: start; max-width: 720px; margin: 0 0 clamp(26px, 4vw, 44px); } body.covert-loyalty-auth.woocommerce-account .cp-auth-brand { min-height: 34px; margin: 0 0 32px; } body.covert-loyalty-auth.woocommerce-account .cp-auth-store-logo { display: block; width: auto; max-width: 190px; max-height: 52px; object-fit: contain; } body.covert-loyalty-auth.woocommerce-account .cp-auth-brand > strong { display: block; color: var(--cp-auth-text); font-size: 14px; font-weight: 800; letter-spacing: -.02em; } body.covert-loyalty-auth.woocommerce-account .cp-auth-page-intro > span, body.covert-loyalty-auth.woocommerce-account .cp-auth-form-intro > span { color: var(--cp-auth-accent); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } body.covert-loyalty-auth.woocommerce-account .cp-auth-page-intro h1 { margin: 10px 0 12px; color: var(--cp-auth-text); font-size: clamp(32px, 5vw, 54px); font-weight: 760; letter-spacing: -.055em; line-height: .98; } body.covert-loyalty-auth.woocommerce-account .cp-auth-page-intro p { max-width: 610px; margin: 0; color: var(--cp-auth-muted); font-size: 15px; line-height: 1.7; } body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; } body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set::before, body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set::after { display: none; } body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set > .col-1, body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set > .col-2 { float: none; width: auto; min-width: 0; } body.covert-loyalty-auth.woocommerce-account #customer_login > .col-1 > h2, body.covert-loyalty-auth.woocommerce-account #customer_login > .col-2 > h2, body.covert-loyalty-auth.woocommerce-account .woocommerce > h2:has(+ .woocommerce-form-login) { display: none; } body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-login, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-register, body.covert-loyalty-auth.woocommerce-account form.lost_reset_password { box-sizing: border-box; height: 100%; margin: 0; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--cp-auth-line); border-radius: var(--cp-auth-radius); background: var(--cp-auth-card); box-shadow: 0 18px 48px color-mix(in srgb, var(--cp-auth-text) 8%, transparent); color: var(--cp-auth-text); } body.covert-loyalty-auth.woocommerce-account .woocommerce > form.woocommerce-form-login, body.covert-loyalty-auth.woocommerce-account form.lost_reset_password { max-width: 580px; margin-inline: auto; } body.covert-loyalty-auth.woocommerce-account .cp-auth-form-intro { margin: 0 0 28px; } body.covert-loyalty-auth.woocommerce-account .cp-auth-form-intro h2 { margin: 8px 0 8px; color: var(--cp-auth-text); font-size: clamp(24px, 3vw, 34px); font-weight: 760; letter-spacing: -.045em; line-height: 1.05; } body.covert-loyalty-auth.woocommerce-account .cp-auth-form-intro p, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-login > p, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-register > p, body.covert-loyalty-auth.woocommerce-account form.lost_reset_password > p { color: var(--cp-auth-muted); font-size: 13px; line-height: 1.6; } body.covert-loyalty-auth.woocommerce-account .woocommerce-form-row, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-login .form-row, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-register .form-row { float: none; width: 100%; margin: 0 0 17px; } body.covert-loyalty-auth.woocommerce-account .woocommerce-form-row label, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-login label, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-register label { display: block; margin: 0 0 7px; color: var(--cp-auth-text); font-size: 12px; font-weight: 720; } body.covert-loyalty-auth.woocommerce-account input.input-text { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid var(--cp-auth-line); border-radius: max(6px, calc(var(--cp-auth-radius) * .55)); background: var(--cp-auth-card); box-shadow: none; color: var(--cp-auth-text); font-size: 15px; } body.covert-loyalty-auth.woocommerce-account input.input-text:focus { border-color: var(--cp-auth-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-auth-accent) 22%, transparent); outline: 0; } body.covert-loyalty-auth.woocommerce-account .password-input { display: block; } body.covert-loyalty-auth.woocommerce-account .show-password-input { color: var(--cp-auth-muted); } body.covert-loyalty-auth.woocommerce-account .woocommerce-form-login__rememberme { display: inline-flex !important; align-items: center; gap: 8px; margin: 1px 12px 12px 0 !important; color: var(--cp-auth-muted) !important; font-weight: 600 !important; } body.covert-loyalty-auth.woocommerce-account .woocommerce-form-login__rememberme input { width: 16px; height: 16px; margin: 0; accent-color: var(--cp-auth-button); } body.covert-loyalty-auth.woocommerce-account button.button, body.covert-loyalty-auth.woocommerce-account .woocommerce-form-login__submit, body.covert-loyalty-auth.woocommerce-account .woocommerce-form-register__submit { min-height: 48px; padding: 0 20px; border: 1px solid var(--cp-auth-button); border-radius: max(6px, calc(var(--cp-auth-radius) * .55)); background: var(--cp-auth-button); box-shadow: none; color: var(--cp-auth-on-button); font-size: 13px; font-weight: 780; transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease; } body.covert-loyalty-auth.woocommerce-account button.button:hover, body.covert-loyalty-auth.woocommerce-account button.button:focus-visible { background: var(--cp-auth-button); color: var(--cp-auth-on-button); opacity: .92; box-shadow: 0 10px 24px color-mix(in srgb, var(--cp-auth-button) 24%, transparent); } body.covert-loyalty-auth.woocommerce-account button.button:active { transform: scale(.98); } body.covert-loyalty-auth.woocommerce-account .lost_password { margin: 18px 0 0; } body.covert-loyalty-auth.woocommerce-account .lost_password a, body.covert-loyalty-auth.woocommerce-account .woocommerce-privacy-policy-link { color: var(--cp-auth-text); font-size: 12px; font-weight: 700; text-underline-offset: 3px; } body.covert-loyalty-auth-layout-stacked.woocommerce-account #customer_login.col2-set { grid-template-columns: minmax(0, 760px); justify-content: center; } body.covert-loyalty-auth-layout-compact.woocommerce-account .cp-auth-page-intro { justify-items: center; max-width: 650px; margin-inline: auto; text-align: center; } body.covert-loyalty-auth-layout-compact.woocommerce-account #customer_login.col2-set { grid-template-columns: minmax(0, 620px); justify-content: center; } body.covert-loyalty-auth-layout-compact.woocommerce-account form.woocommerce-form-login, body.covert-loyalty-auth-layout-compact.woocommerce-account form.woocommerce-form-register { padding-inline: clamp(24px, 7vw, 64px); } body.covert-loyalty-auth-shape-square.woocommerce-account form.woocommerce-form-login, body.covert-loyalty-auth-shape-square.woocommerce-account form.woocommerce-form-register, body.covert-loyalty-auth-shape-square.woocommerce-account form.lost_reset_password { box-shadow: none; } @media (max-width: 760px) { body.covert-loyalty-auth.woocommerce-account .woocommerce { width: min(100% - 20px, 640px); margin-block: 16px 36px; padding: 22px 14px; } body.covert-loyalty-auth.woocommerce-account .cp-auth-brand { margin-bottom: 22px; } body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set { grid-template-columns: minmax(0, 1fr); } body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-login, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-register, body.covert-loyalty-auth.woocommerce-account form.lost_reset_password { padding: 22px 18px; } } /* Prominent rewards catalog and annual birthday reward. */ .cp-rewards-header--catalog { align-items: flex-start; padding: clamp(22px, 4vw, 38px); border: 1px solid var(--cp-line); border-radius: 18px; background: var(--cp-surface); } .cp-rewards-header--catalog > div:first-child { max-width: 690px; } .cp-rewards-header--catalog h1 { max-width: 660px; margin-top: 8px; font-size: clamp(38px, 5vw, 58px); } .cp-rewards-balance { display: flex; align-items: center; gap: 13px; min-width: 220px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--cp-accent) 54%, var(--cp-line)); border-radius: 14px; background: var(--cp-dark); color: var(--cp-on-dark, #fff); box-shadow: 0 12px 28px color-mix(in srgb, var(--cp-dark) 17%, transparent); } .cp-rewards-balance-icon { display: grid; place-items: center; width: 45px; height: 45px; flex: 0 0 45px; border-radius: 12px; background: var(--cp-accent); color: var(--cp-on-accent, var(--cp-dark)); } .cp-rewards-balance-icon svg { width: 24px; height: 24px; } .cp-rewards-balance > span:last-child { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 6px; } .cp-rewards-balance small { grid-column: 1 / -1; margin-bottom: 4px; color: var(--cp-muted-on-dark, #d8e2dc); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; } .cp-rewards-balance strong { color: var(--cp-on-dark, #fff); font-size: 30px; font-variant-numeric: tabular-nums; letter-spacing: -.055em; line-height: 1; } .cp-rewards-balance b { color: var(--cp-accent); font-size: 10px; font-weight: 750; text-transform: lowercase; } .cp-birthday-reward-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin: 0 0 38px; padding: 18px; border: 1px solid color-mix(in srgb, var(--cp-accent) 58%, var(--cp-line)); border-radius: 14px; background: color-mix(in srgb, var(--cp-accent) 10%, var(--cp-card)); color: var(--cp-on-card, var(--cp-text)); } .cp-birthday-reward-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 13px; background: var(--cp-accent); color: var(--cp-on-accent, var(--cp-dark)); } .cp-birthday-reward-icon svg { width: 27px; height: 27px; } .cp-birthday-reward-card h2 { margin: 5px 0 5px; color: var(--cp-on-card, var(--cp-text)); font-size: 19px; letter-spacing: -.035em; } .cp-birthday-reward-card p { margin: 0; color: var(--cp-muted-on-card, var(--cp-muted)); font-size: 11px; line-height: 1.55; } .cp-birthday-reward-card .cp-button--muted { border: 1px solid var(--cp-line); background: var(--cp-card); color: var(--cp-on-card, var(--cp-text)); cursor: pointer; } #cp-rewards .cp-section-heading { align-items: center; padding: 0 0 16px; } #cp-rewards .cp-section-heading h2 { font-size: clamp(24px, 3vw, 32px); } #cp-rewards .cp-reward-card { min-height: 300px; padding: 20px; border-width: 1.5px; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } #cp-rewards .cp-reward-card:hover { border-color: color-mix(in srgb, var(--cp-accent) 76%, var(--cp-line)); box-shadow: 0 14px 30px color-mix(in srgb, var(--cp-dark) 10%, transparent); transform: translateY(-2px); } #cp-rewards .cp-reward-card.is-locked { border-style: dashed; background: color-mix(in srgb, var(--cp-card) 92%, var(--cp-surface)); } #cp-rewards .cp-reward-card .cp-reward-icon { width: 64px; height: 64px; flex-basis: 64px; border-radius: 16px; background: color-mix(in srgb, var(--cp-accent) 15%, var(--cp-surface)); color: var(--cp-accent-on-card, var(--cp-action)); } .cp-reward-svg { display: block; width: 28px; height: 28px; } #cp-rewards .cp-reward-copy h3 { font-size: 18px; } #cp-rewards .cp-reward-copy p { font-size: 12px; } #cp-rewards .cp-reward-availability { min-height: 28px; padding-inline: 10px; font-size: 9px; } #cp-rewards .cp-reward-availability.is-ready { border-color: var(--cp-action); background: var(--cp-action); color: var(--cp-on-action); } #cp-rewards .cp-reward-points strong { font-size: 21px; } #cp-rewards .cp-button--muted { border: 1px solid var(--cp-line); background: var(--cp-surface); color: var(--cp-muted-on-surface, var(--cp-muted)); opacity: 1; } .cp-birthday-field { display: grid !important; gap: 7px; clear: both; } .cp-birthday-field > label { margin: 0 !important; } .cp-birthday-input-wrap { position: relative; display: block; } .cp-birthday-field-icon { position: absolute; z-index: 1; top: 50%; left: 12px; display: grid; place-items: center; width: 22px; height: 22px; color: var(--cp-auth-accent, var(--cp-action)); pointer-events: none; transform: translateY(-50%); } .cp-birthday-field-icon svg { width: 19px; height: 19px; } .cp-birthday-field input[type="date"] { box-sizing: border-box; width: 100%; padding-left: 43px !important; } .cp-birthday-field > small { color: var(--cp-muted-on-card, var(--cp-auth-muted, var(--cp-muted))); font-size: 10px; line-height: 1.5; } body.covert-loyalty-auth.woocommerce-account .cp-birthday-field { margin-top: 3px; } body.covert-loyalty-auth.woocommerce-account .cp-birthday-field input[type="date"] { min-height: 48px; border: 1px solid var(--cp-auth-line); border-radius: max(6px, calc(var(--cp-auth-radius) * .55)); background: var(--cp-auth-card); color: var(--cp-auth-text); } body.covert-loyalty-auth.woocommerce-account .cp-birthday-field > small { color: var(--cp-auth-muted); } @media (max-width: 760px) { .cp-rewards-header--catalog { padding: 22px 18px; } .cp-rewards-balance { width: 100%; min-width: 0; box-sizing: border-box; } .cp-birthday-reward-card { grid-template-columns: auto minmax(0, 1fr); } .cp-birthday-reward-card .cp-button { grid-column: 1 / -1; width: 100%; } } @media (prefers-reduced-motion: reduce) { #cp-rewards .cp-reward-card { transition: none; } } /* * Contrast guardrail: the merchant palette is resolved server-side into * semantic foregrounds. Keep these declarations at the end of the sheet so * an active theme cannot turn a light card into white-on-white (or a dark * card into dark-on-dark). The namespaced variables also avoid collisions * with custom properties supplied by themes and page builders. */ .cp-rewards-shell .cp-rewards-header--catalog { background: var(--cp-surface) !important; color: var(--covert-loyalty-surface-text, var(--cp-on-surface, #1f2d26)) !important; } .cp-rewards-shell .cp-rewards-header--catalog h1 { color: var(--covert-loyalty-surface-text, var(--cp-on-surface, #1f2d26)) !important; } .cp-rewards-shell .cp-rewards-header--catalog p { color: var(--covert-loyalty-muted-surface, var(--cp-muted-on-surface, #52645a)) !important; } .cp-rewards-shell .cp-rewards-header--catalog .cp-eyebrow, .cp-rewards-shell .cp-section-heading .cp-eyebrow { color: var(--covert-loyalty-accent-surface-text, var(--cp-accent-on-surface, #1f2d26)) !important; } .cp-rewards-shell .cp-panel--progress, .cp-rewards-shell .cp-reward-card, .cp-rewards-shell .cp-activity-section, .cp-rewards-shell .cp-account-home-hero, .cp-rewards-shell .cp-account-stat-grid article, .cp-rewards-shell .cp-account-order-card, .cp-rewards-shell .cp-account-actions-card { background: var(--cp-card) !important; color: var(--covert-loyalty-card-text, var(--cp-on-card, #1f2d26)) !important; } .cp-rewards-shell .cp-panel--progress h2, .cp-rewards-shell .cp-panel--progress strong, .cp-rewards-shell .cp-reward-card h3, .cp-rewards-shell .cp-reward-card strong, .cp-rewards-shell .cp-activity-section h2, .cp-rewards-shell .cp-account-home-hero h2, .cp-rewards-shell .cp-account-stat-grid article > strong, .cp-rewards-shell .cp-account-order-card h3, .cp-rewards-shell .cp-account-actions-card h3 { color: var(--covert-loyalty-card-text, var(--cp-on-card, #1f2d26)) !important; } .cp-rewards-shell .cp-panel--progress .cp-eyebrow, .cp-rewards-shell .cp-account-home-hero .cp-eyebrow, .cp-rewards-shell .cp-reward-card .cp-reward-type { color: var(--covert-loyalty-accent-card-text, var(--cp-accent-on-card, #1f2d26)) !important; } .cp-rewards-shell .cp-panel--referral .cp-eyebrow, .cp-rewards-shell .cp-panel--referral .cp-referral-mark { color: var(--covert-loyalty-accent-dark-text, var(--cp-accent-on-dark, #ffffff)) !important; } .cp-rewards-shell .cp-panel--progress p, .cp-rewards-shell .cp-panel--progress .cp-progress-meta, .cp-rewards-shell .cp-reward-card p, .cp-rewards-shell .cp-reward-card small, .cp-rewards-shell .cp-activity-row div span, .cp-rewards-shell .cp-account-home-hero p, .cp-rewards-shell .cp-account-order-list small { color: var(--covert-loyalty-muted-card, var(--cp-muted-on-card, #52645a)) !important; } .cp-rewards-shell .cp-panel--referral { background: var(--cp-dark) !important; color: var(--covert-loyalty-dark-text, var(--cp-on-dark, #ffffff)) !important; } .cp-rewards-shell .cp-panel--referral h2, .cp-rewards-shell .cp-panel--referral strong { color: var(--covert-loyalty-dark-text, var(--cp-on-dark, #ffffff)) !important; } .cp-rewards-shell .cp-panel--referral p, .cp-rewards-shell .cp-panel--referral .cp-text-button { color: var(--covert-loyalty-muted-dark, var(--cp-muted-on-dark, #d8e2dc)) !important; } .cp-rewards-shell .cp-reward-card .cp-reward-icon, .cp-rewards-shell .cp-account-stat-icon, .cp-rewards-shell .cp-account-action-list a > span { background: var(--cp-accent) !important; color: var(--covert-loyalty-accent-text, var(--cp-on-accent, #1f2d26)) !important; } .cp-rewards-shell .cp-reward-list, .cp-rewards-shell .cp-account-action-list a { background: var(--cp-surface) !important; color: var(--covert-loyalty-surface-text, var(--cp-on-surface, #1f2d26)) !important; } .cp-rewards-shell .cp-account-action-list strong { color: var(--covert-loyalty-surface-text, var(--cp-on-surface, #1f2d26)) !important; } .cp-rewards-shell .cp-account-action-list small, .cp-rewards-shell .cp-account-home-empty span { color: var(--covert-loyalty-muted-surface, var(--cp-muted-on-surface, #52645a)) !important; } .cp-rewards-shell .cp-reward-card .cp-reward-availability.is-ready { background: var(--cp-action) !important; border-color: var(--cp-action) !important; color: var(--cp-on-action) !important; } .cp-rewards-shell .cp-button--muted { background: var(--cp-surface) !important; border: 1px solid var(--cp-line) !important; color: var(--covert-loyalty-muted-surface, var(--cp-muted-on-surface, #52645a)) !important; opacity: 1; } .cp-rewards-shell .cp-empty-state h3 { color: var(--covert-loyalty-surface-text, var(--cp-on-surface, #1f2d26)) !important; } .cp-rewards-shell .cp-empty-state p { color: var(--covert-loyalty-muted-surface, var(--cp-muted-on-surface, #52645a)) !important; } .cp-rewards-shell .cp-rewards-balance b { color: var(--covert-loyalty-accent-dark-text, var(--cp-accent-on-dark, #ffffff)) !important; } .cp-rewards-shell .cp-section-heading .cp-text-button, .cp-rewards-shell .cp-account-card-link { color: var(--covert-loyalty-accent-surface-text, var(--cp-accent-on-surface, #1f2d26)) !important; } .cp-rewards-shell .cp-button--dark, .cp-rewards-shell .cp-launcher-referral-field button { color: var(--cp-on-action) !important; } .cp-rewards-shell .cp-button--light { color: var(--cp-on-accent) !important; } .cp-rewards-shell .cp-launcher-button { color: var(--covert-loyalty-dark-text, var(--cp-on-dark, #ffffff)) !important; } /* The account dashboard is rendered by a WooCommerce hook and therefore is * not always nested inside the rewards shell. Give it the same explicit * contrast contract as the dedicated rewards endpoint. */ .cp-account-home .cp-account-home-hero, .cp-account-home .cp-account-stat-grid article, .cp-account-home .cp-account-order-card, .cp-account-home .cp-account-actions-card { background: var(--cp-card) !important; color: var(--covert-loyalty-card-text, var(--cp-on-card, #1f2d26)) !important; } .cp-account-home .cp-account-home-hero h2, .cp-account-home .cp-account-stat-grid article > strong, .cp-account-home .cp-account-order-card h3, .cp-account-home .cp-account-actions-card h3, .cp-account-home .cp-account-order-list strong, .cp-account-home .cp-account-order-list b { color: var(--covert-loyalty-card-text, var(--cp-on-card, #1f2d26)) !important; } .cp-account-home .cp-account-home-hero p, .cp-account-home .cp-account-stat-grid article > small, .cp-account-home .cp-account-stat-grid article > span:not(.cp-account-stat-icon), .cp-account-home .cp-account-order-list small, .cp-account-home .cp-account-home-empty span { color: var(--covert-loyalty-muted-card, var(--cp-muted-on-card, #52645a)) !important; } .cp-account-home .cp-account-home-hero .cp-eyebrow { color: var(--covert-loyalty-accent-card-text, var(--cp-accent-on-card, #1f2d26)) !important; } .cp-account-home .cp-account-points-card { background: var(--cp-dark) !important; color: var(--covert-loyalty-dark-text, var(--cp-on-dark, #ffffff)) !important; } .cp-account-home .cp-account-points-card small, .cp-account-home .cp-account-points-card strong, .cp-account-home .cp-account-points-card > span { color: var(--covert-loyalty-dark-text, var(--cp-on-dark, #ffffff)) !important; } .cp-account-home .cp-account-stat-icon, .cp-account-home .cp-account-action-list a > span { background: var(--cp-accent) !important; color: var(--covert-loyalty-accent-text, var(--cp-on-accent, #1f2d26)) !important; } .cp-account-home .cp-account-action-list a { background: var(--cp-surface) !important; color: var(--covert-loyalty-surface-text, var(--cp-on-surface, #1f2d26)) !important; } .cp-account-home .cp-account-action-list strong { color: var(--covert-loyalty-surface-text, var(--cp-on-surface, #1f2d26)) !important; } .cp-account-home .cp-account-action-list small { color: var(--covert-loyalty-muted-surface, var(--cp-muted-on-surface, #52645a)) !important; } .cp-account-home .cp-account-points-card a, .cp-account-home .cp-account-card-link, .cp-account-home .cp-account-stat-grid article > a { color: var(--covert-loyalty-accent-card-text, var(--cp-accent-on-card, #1f2d26)) !important; } /* Account framing: the host theme's duplicate "My account" page title adds * a large empty band before the real account UI. The plugin already provides * contextual headings inside each account view, so remove only the theme * page-title chrome and reclaim that space at every responsive breakpoint. */ body.woocommerce-account .site-main > .entry-header, body.woocommerce-account .site-main > .page-header, body.woocommerce-account .site-main > .wp-block-post-title, body.woocommerce-account h1.entry-title, body.woocommerce-account h1.page-title, body.woocommerce-account h1.wp-block-post-title { display: none !important; } body.woocommerce-account main, body.woocommerce-account .site-main { padding-block-start: 8px !important; } body.woocommerce-account main .woocommerce, body.woocommerce-account .site-main .woocommerce { margin-top: 8px !important; } body.logged-in.woocommerce-account .woocommerce-MyAccount-content { padding-top: 18px; } @media (max-width: 760px) { body.woocommerce-account main, body.woocommerce-account .site-main { padding-block-start: 4px !important; } body.woocommerce-account main .woocommerce, body.woocommerce-account .site-main .woocommerce { margin-top: 4px !important; } body.logged-in.woocommerce-account .woocommerce-MyAccount-content { padding-top: 14px; } } /* The floating launcher is outside the account content tree, so it gets its * own contrast guardrail as well. */ .cp-loyalty-launcher .cp-launcher-button { border-color: var(--cp-action, var(--cp-dark)) !important; background: var(--cp-action, var(--cp-dark)) !important; color: var(--cp-on-action, var(--covert-loyalty-dark-text, #ffffff)) !important; } .cp-loyalty-launcher .cp-launcher-icon, .cp-loyalty-launcher .cp-launcher-reward-icon { background: var(--cp-accent) !important; color: var(--covert-loyalty-accent-text, var(--cp-on-accent, #1f2d26)) !important; } .cp-loyalty-launcher .cp-launcher-points, .cp-loyalty-launcher .cp-launcher-points strong, .cp-loyalty-launcher .cp-launcher-points small { color: var(--cp-on-action, var(--covert-loyalty-dark-text, #ffffff)) !important; } .cp-loyalty-launcher .cp-launcher-popover { background: var(--cp-card) !important; color: var(--covert-loyalty-card-text, var(--cp-on-card, #1f2d26)) !important; } .cp-loyalty-launcher .cp-launcher-popover h2, .cp-loyalty-launcher .cp-launcher-popover strong { color: var(--covert-loyalty-card-text, var(--cp-on-card, #1f2d26)) !important; } .cp-loyalty-launcher .cp-launcher-popover p, .cp-loyalty-launcher .cp-launcher-member small, .cp-loyalty-launcher .cp-launcher-member-program, .cp-loyalty-launcher .cp-launcher-reward-copy small, .cp-loyalty-launcher .cp-launcher-reward-cost small, .cp-loyalty-launcher .cp-launcher-section-heading a { color: var(--covert-loyalty-muted-card, var(--cp-muted-on-card, #52645a)) !important; } .cp-loyalty-launcher .cp-launcher-balance { background: var(--cp-dark) !important; color: var(--covert-loyalty-dark-text, var(--cp-on-dark, #ffffff)) !important; } .cp-loyalty-launcher .cp-launcher-balance span small, .cp-loyalty-launcher .cp-launcher-balance span strong { color: var(--covert-loyalty-dark-text, var(--cp-on-dark, #ffffff)) !important; } .cp-loyalty-launcher .cp-launcher-balance > b { background: var(--cp-accent) !important; color: var(--covert-loyalty-accent-text, var(--cp-on-accent, #1f2d26)) !important; } /* Let the selected dark palette carry through the full rewards canvas so the host theme cannot leave a lighter strip around the main customer surface. */ .cp-theme-dark.cp-rewards-shell { background: var(--cp-dark) !important; color: var(--covert-loyalty-dark-text, var(--cp-on-dark, #ffffff)) !important; } /* Make the birthday benefit visible from the main account dashboard, not * only from the dedicated rewards view. */ .cp-account-home .cp-account-birthday-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin: 0 0 18px; padding: 18px 20px; border: 1px solid var(--cp-line); border-radius: 14px; background: var(--cp-surface); color: var(--cp-on-surface, var(--cp-text)); } .cp-account-home .cp-account-birthday-card.needs-birthday { border-color: var(--cp-accent); } .cp-account-birthday-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 13px; background: var(--cp-accent); color: var(--cp-on-accent, var(--cp-dark)); } .cp-account-birthday-icon .cp-reward-svg { display: block; width: 25px; height: 25px; } .cp-account-birthday-card > div { min-width: 0; } .cp-account-birthday-card h3 { margin: 4px 0 5px; color: var(--cp-on-surface, var(--cp-text)); font-size: 18px; line-height: 1.2; letter-spacing: -.025em; } .cp-account-birthday-card p { max-width: 760px; margin: 0; color: var(--cp-muted-on-surface, var(--cp-muted)); font-size: 12px; line-height: 1.5; } .cp-account-birthday-card .cp-button { min-width: 130px; flex: 0 0 auto; } .cp-theme-dark .cp-account-birthday-card { box-shadow: 0 14px 30px rgba(0, 0, 0, .16); } @media (max-width: 760px) { .cp-account-home .cp-account-birthday-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 16px; } .cp-account-birthday-card .cp-button { grid-column: 1 / -1; width: 100%; } } /* Referral explainer: turn the plain numbered list into a friendly, * action-oriented set of steps with custom line icons. All text inherits the * semantic surface roles so the cards remain readable in every palette. */ .cp-referral-steps { position: relative; padding: clamp(24px, 3.5vw, 36px); border: 1px solid var(--cp-line); border-radius: 16px; background: var(--cp-card); color: var(--cp-on-card, var(--cp-text)); box-shadow: 0 16px 34px rgba(31, 45, 38, .08); } .cp-referral-steps-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--cp-line); } .cp-referral-steps-head h2 { margin: 7px 0 8px; color: var(--cp-on-card, var(--cp-text)); font-size: clamp(25px, 3vw, 34px); line-height: 1.05; letter-spacing: -.045em; } .cp-referral-steps-head p { max-width: 470px; margin: 0; color: var(--cp-muted-on-card, var(--cp-muted)); font-size: 13px; line-height: 1.55; } .cp-referral-steps-badge { display: grid; place-items: center; width: 54px; height: 54px; flex: 0 0 54px; border: 1px solid var(--cp-accent); border-radius: 16px; background: var(--cp-accent); color: var(--cp-on-accent, var(--cp-dark)); } .cp-referral-step-svg { display: block; width: 25px; height: 25px; } .cp-referral-steps ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0; } .cp-referral-steps li { gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--cp-line); border-top: 2px solid var(--cp-accent); border-radius: 12px; background: var(--cp-surface); color: var(--cp-on-surface, var(--cp-text)); } .cp-referral-step-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cp-referral-step-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid var(--cp-line); border-radius: 12px; background: var(--cp-card); color: var(--cp-action, var(--cp-dark)); } .cp-referral-step-number { color: var(--cp-action, var(--cp-dark)); font-size: 10px; font-weight: 800; letter-spacing: .09em; } .cp-referral-steps li strong { color: var(--cp-on-surface, var(--cp-text)); font-size: 15px; line-height: 1.25; } .cp-referral-steps li small { color: var(--cp-muted-on-surface, var(--cp-muted)); font-size: 12px; line-height: 1.5; } .cp-referral-steps-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; border: 1px solid var(--cp-line); border-radius: 12px; background: var(--cp-surface); } .cp-referral-steps-footer p { display: grid; gap: 4px; margin: 0; } .cp-referral-steps-footer p strong { color: var(--cp-on-surface, var(--cp-text)); font-size: 14px; } .cp-referral-steps-footer p span { color: var(--cp-muted-on-surface, var(--cp-muted)); font-size: 12px; line-height: 1.45; } .cp-referral-steps-footer .cp-button { flex: 0 0 auto; min-width: 132px; } .cp-theme-dark .cp-referral-steps { box-shadow: 0 18px 42px rgba(0, 0, 0, .2); } @media (max-width: 760px) { .cp-referral-steps-head { gap: 14px; } .cp-referral-steps-badge { width: 46px; height: 46px; flex-basis: 46px; border-radius: 13px; } .cp-referral-steps ol { grid-template-columns: 1fr; } .cp-referral-steps-footer { align-items: stretch; flex-direction: column; } .cp-referral-steps-footer .cp-button { width: 100%; } } /* Keep native billing and shipping cards in one predictable desktop row. Some themes reintroduce float/column rules after the plugin stylesheet, so these final, scoped rules intentionally pin both cards to grid row one. */ body.logged-in.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: minmax(190px, max-content) !important; grid-auto-flow: row !important; align-items: stretch !important; justify-items: stretch; } body.logged-in.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .woocommerce-Address { grid-column: auto; grid-row: 1 !important; align-self: stretch !important; } @media (max-width: 760px) { body.logged-in.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; } body.logged-in.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .woocommerce-Address { grid-column: 1; grid-row: auto !important; min-height: 0; } } /* Final Member Access polish. Keep this scoped to the signed-out account entrance so active themes retain control everywhere else. */ body.covert-loyalty-auth.woocommerce-account { background: var(--cp-auth-bg) !important; color: var(--cp-auth-text) !important; } body.covert-loyalty-auth.woocommerce-account .site-main, body.covert-loyalty-auth.woocommerce-account main, body.covert-loyalty-auth.woocommerce-account .content-area, body.covert-loyalty-auth.woocommerce-account .woocommerce { background: var(--cp-auth-bg) !important; color: var(--cp-auth-text) !important; } body.covert-loyalty-auth.woocommerce-account .woocommerce { box-sizing: border-box; width: min(1240px, calc(100% - 40px)); max-width: 1240px; margin: clamp(20px, 4vw, 48px) auto 72px; padding: clamp(30px, 5vw, 72px); border: 1px solid color-mix(in srgb, var(--cp-auth-line) 84%, transparent) !important; border-radius: calc(var(--cp-auth-radius) + 10px); box-shadow: 0 28px 80px color-mix(in srgb, var(--cp-auth-text) 10%, transparent); } body.covert-loyalty-auth.woocommerce-account .cp-auth-page-intro { display: grid; justify-items: start; max-width: 820px; margin: 0 0 clamp(28px, 4vw, 44px); } body.covert-loyalty-auth.woocommerce-account .cp-auth-brand { display: flex; align-items: center; min-height: 34px; margin: 0 0 30px; } body.covert-loyalty-auth.woocommerce-account .cp-auth-store-logo { display: block; width: auto; max-width: min(220px, 68vw); max-height: 58px; object-fit: contain; } body.covert-loyalty-auth.woocommerce-account .cp-auth-brand > strong { color: var(--cp-auth-text) !important; font-size: 15px; font-weight: 800; letter-spacing: -.02em; } body.covert-loyalty-auth.woocommerce-account .cp-auth-page-intro > span, body.covert-loyalty-auth.woocommerce-account .cp-auth-form-intro > span { color: var(--cp-auth-accent) !important; font-size: 11px; font-weight: 850; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; } body.covert-loyalty-auth.woocommerce-account .cp-auth-page-intro > span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border: 1px solid color-mix(in srgb, var(--cp-auth-accent) 54%, var(--cp-auth-line)); border-radius: 999px; background: color-mix(in srgb, var(--cp-auth-accent) 10%, var(--cp-auth-bg)); } body.covert-loyalty-auth.woocommerce-account .cp-auth-page-intro h1 { max-width: 820px; margin: 15px 0 14px; color: var(--cp-auth-text) !important; font-size: clamp(42px, 6vw, 76px); font-weight: 780; letter-spacing: -.065em; line-height: .96; } body.covert-loyalty-auth.woocommerce-account .cp-auth-page-intro p { max-width: 680px; margin: 0; color: var(--cp-auth-muted) !important; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.65; } body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: clamp(16px, 2.2vw, 24px); margin: 0; } body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set::before, body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set::after { display: none; } body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set > .col-1, body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set > .col-2 { display: flex; float: none; width: auto; min-width: 0; } body.covert-loyalty-auth.woocommerce-account #customer_login > .col-1 > h2, body.covert-loyalty-auth.woocommerce-account #customer_login > .col-2 > h2, body.covert-loyalty-auth.woocommerce-account .woocommerce > h2:has(+ .woocommerce-form-login) { display: none; } body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-login, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-register, body.covert-loyalty-auth.woocommerce-account form.lost_reset_password { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; min-height: 100%; margin: 0; padding: clamp(26px, 3.4vw, 42px); border: 1px solid var(--cp-auth-line) !important; border-top: 3px solid var(--cp-auth-accent) !important; border-radius: var(--cp-auth-radius) !important; background: var(--cp-auth-card) !important; box-shadow: 0 18px 48px color-mix(in srgb, var(--cp-auth-text) 10%, transparent); color: var(--cp-auth-text) !important; } body.covert-loyalty-auth.woocommerce-account .cp-auth-form-intro { margin: 0 0 24px; padding: 0 0 20px; border-bottom: 1px solid var(--cp-auth-line); } body.covert-loyalty-auth.woocommerce-account .cp-auth-form-intro > span { display: block; margin-bottom: 11px; font-size: 10px; } body.covert-loyalty-auth.woocommerce-account .cp-auth-form-intro h2 { margin: 0 0 9px; color: var(--cp-auth-text) !important; font-size: clamp(28px, 3.2vw, 40px); font-weight: 780; letter-spacing: -.055em; line-height: 1; } body.covert-loyalty-auth.woocommerce-account .cp-auth-form-intro p, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-login > p, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-register > p, body.covert-loyalty-auth.woocommerce-account form.lost_reset_password > p { max-width: 480px; margin: 0; color: var(--cp-auth-muted) !important; font-size: 13px; line-height: 1.6; } body.covert-loyalty-auth.woocommerce-account .cp-auth-benefits { display: grid; gap: 9px; margin: 0 0 24px; padding: 0; list-style: none; } body.covert-loyalty-auth.woocommerce-account .cp-auth-benefits li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 11px; min-width: 0; margin: 0; padding: 11px; border: 1px solid var(--cp-auth-line); border-radius: max(9px, calc(var(--cp-auth-radius) * .5)); background: color-mix(in srgb, var(--cp-auth-accent) 7%, var(--cp-auth-card)); } body.covert-loyalty-auth.woocommerce-account .cp-auth-benefits li > span:first-child { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--cp-auth-accent); color: var(--cp-auth-on-button) !important; font-size: 16px; font-weight: 850; } body.covert-loyalty-auth.woocommerce-account .cp-auth-benefits li > span:last-child { display: grid; gap: 3px; min-width: 0; } body.covert-loyalty-auth.woocommerce-account .cp-auth-benefits strong { color: var(--cp-auth-text) !important; font-size: 13px; font-weight: 760; line-height: 1.25; } body.covert-loyalty-auth.woocommerce-account .cp-auth-benefits small { color: var(--cp-auth-muted) !important; font-size: 11px; line-height: 1.4; } body.covert-loyalty-auth.woocommerce-account .woocommerce-form-row, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-login .form-row, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-register .form-row { float: none; width: 100%; margin: 0 0 18px; } body.covert-loyalty-auth.woocommerce-account .woocommerce-form-row label, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-login label, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-register label { display: block; margin: 0 0 8px; color: var(--cp-auth-text) !important; font-size: 12px; font-weight: 740; } body.covert-loyalty-auth.woocommerce-account input.input-text, body.covert-loyalty-auth.woocommerce-account input[type="date"] { box-sizing: border-box; width: 100%; min-height: 54px; padding: 0 15px; border: 1px solid var(--cp-auth-line) !important; border-radius: max(9px, calc(var(--cp-auth-radius) * .5)) !important; background: color-mix(in srgb, var(--cp-auth-card) 84%, var(--cp-auth-bg)) !important; box-shadow: none !important; color: var(--cp-auth-text) !important; font-size: 15px; } body.covert-loyalty-auth.woocommerce-account input.input-text::placeholder { color: var(--cp-auth-muted) !important; opacity: .9; } body.covert-loyalty-auth.woocommerce-account input.input-text:focus, body.covert-loyalty-auth.woocommerce-account input[type="date"]:focus { border-color: var(--cp-auth-accent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--cp-auth-accent) 20%, transparent) !important; outline: 0; } body.covert-loyalty-auth.woocommerce-account .password-input { display: block; } body.covert-loyalty-auth.woocommerce-account .show-password-input { color: var(--cp-auth-muted) !important; } body.covert-loyalty-auth.woocommerce-account .woocommerce-form-login__rememberme { display: inline-flex !important; align-items: center; gap: 8px; min-height: 24px; margin: 1px 12px 12px 0 !important; color: var(--cp-auth-muted) !important; font-size: 12px; font-weight: 650 !important; } body.covert-loyalty-auth.woocommerce-account .woocommerce-form-login__rememberme input { width: 17px; height: 17px; margin: 0; accent-color: var(--cp-auth-button); } body.covert-loyalty-auth.woocommerce-account button.button, body.covert-loyalty-auth.woocommerce-account .woocommerce-form-login__submit, body.covert-loyalty-auth.woocommerce-account .woocommerce-form-register__submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; margin-top: 5px; padding: 0 19px; border: 1px solid var(--cp-auth-button) !important; border-radius: max(9px, calc(var(--cp-auth-radius) * .5)) !important; background: var(--cp-auth-button) !important; box-shadow: none; color: var(--cp-auth-on-button) !important; font-size: 14px; font-weight: 800; line-height: 1; transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease; } body.covert-loyalty-auth.woocommerce-account button.button::after, body.covert-loyalty-auth.woocommerce-account .woocommerce-form-login__submit::after, body.covert-loyalty-auth.woocommerce-account .woocommerce-form-register__submit::after { content: "→"; font-size: 19px; line-height: 1; } body.covert-loyalty-auth.woocommerce-account button.button:hover, body.covert-loyalty-auth.woocommerce-account button.button:focus-visible { background: var(--cp-auth-button) !important; color: var(--cp-auth-on-button) !important; opacity: .93; box-shadow: 0 12px 26px color-mix(in srgb, var(--cp-auth-button) 26%, transparent); transform: translateY(-1px); } body.covert-loyalty-auth.woocommerce-account button.button:active { transform: translateY(0) scale(.985); } body.covert-loyalty-auth.woocommerce-account .lost_password { margin: 16px 0 0; } body.covert-loyalty-auth.woocommerce-account .lost_password a, body.covert-loyalty-auth.woocommerce-account .woocommerce-privacy-policy-link { color: var(--cp-auth-muted) !important; font-size: 12px; font-weight: 700; text-underline-offset: 4px; } body.covert-loyalty-auth.woocommerce-account .woocommerce-privacy-policy-text { margin: 16px 0 12px; color: var(--cp-auth-muted) !important; font-size: 11px; line-height: 1.5; } body.covert-loyalty-auth.woocommerce-account .woocommerce-error, body.covert-loyalty-auth.woocommerce-account .woocommerce-message, body.covert-loyalty-auth.woocommerce-account .woocommerce-info { border: 1px solid var(--cp-auth-line) !important; border-radius: 11px; background: var(--cp-auth-card) !important; box-shadow: none; color: var(--cp-auth-text) !important; } body.covert-loyalty-auth.woocommerce-account a:focus-visible, body.covert-loyalty-auth.woocommerce-account button:focus-visible, body.covert-loyalty-auth.woocommerce-account input:focus-visible { outline: 3px solid color-mix(in srgb, var(--cp-auth-accent) 42%, transparent); outline-offset: 3px; } @media (max-width: 760px) { body.covert-loyalty-auth.woocommerce-account .woocommerce { width: calc(100% - 24px); margin: 12px auto 38px; padding: 24px 15px 30px; border-radius: calc(var(--cp-auth-radius) + 5px); } body.covert-loyalty-auth.woocommerce-account .cp-auth-brand { margin-bottom: 22px; } body.covert-loyalty-auth.woocommerce-account .cp-auth-page-intro h1 { font-size: clamp(38px, 11vw, 54px); } body.covert-loyalty-auth.woocommerce-account .cp-auth-page-intro p { font-size: 14px; } body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set { grid-template-columns: 1fr; gap: 14px; } body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-login, body.covert-loyalty-auth.woocommerce-account form.woocommerce-form-register, body.covert-loyalty-auth.woocommerce-account form.lost_reset_password { padding: 24px 18px; } } @media (prefers-reduced-motion: reduce) { body.covert-loyalty-auth.woocommerce-account button.button { transition: none; } } /* Launcher content can be a live points balance or a merchant-defined label. */ .cp-loyalty-launcher.cp-launcher-content-text .cp-launcher-points-value, .cp-loyalty-launcher.cp-launcher-content-text .cp-launcher-points-label { display: none; } .cp-loyalty-launcher.cp-launcher-content-text .cp-launcher-custom-text { display: block; max-width: 180px; color: var(--cp-on-action, #ffffff) !important; font-size: 12px; font-weight: 850; letter-spacing: .04em; line-height: 1; text-transform: uppercase; white-space: nowrap; } .cp-loyalty-launcher.cp-launcher-content-points .cp-launcher-custom-text { display: none; } @media (max-width: 520px) { .cp-loyalty-launcher.cp-launcher-content-text .cp-launcher-custom-text { max-width: 132px; font-size: 11px; } } /* Give built-in reward artwork more presence without stretching uploaded images. */ .cp-reward-artwork:not(.cp-reward-artwork--image) > .cp-reward-svg { display: block; width: 34px; height: 34px; } .cp-reward-card .cp-reward-icon:not(.cp-reward-artwork--image) > .cp-reward-svg { width: 36px; height: 36px; } .cp-launcher-reward-icon:not(.cp-reward-artwork--image) > .cp-reward-svg { display: block; width: 29px; height: 29px; } .cp-admin-reward-icon > .cp-reward-svg { display: block; width: 28px; height: 28px; } @media (max-width: 760px) { .cp-reward-card .cp-reward-icon:not(.cp-reward-artwork--image) > .cp-reward-svg { width: 32px; height: 32px; } } /* Merchant-controlled launcher colors. Runtime values are contrast-safe even * when a store owner chooses a low-contrast custom combination. */ .cp-loyalty-launcher .cp-launcher-button, .cp-loyalty-launcher .cp-launcher-button:hover, .cp-loyalty-launcher .cp-launcher-button:focus-visible { border-color: var(--cp-launcher-button, var(--cp-action, var(--cp-dark))) !important; background: var(--cp-launcher-button, var(--cp-action, var(--cp-dark))) !important; color: var(--cp-launcher-text, var(--cp-on-action, #ffffff)) !important; } .cp-loyalty-launcher .cp-launcher-button .cp-launcher-label small, .cp-loyalty-launcher .cp-launcher-button .cp-launcher-label strong, .cp-loyalty-launcher .cp-launcher-button .cp-launcher-points, .cp-loyalty-launcher .cp-launcher-button .cp-launcher-points strong, .cp-loyalty-launcher .cp-launcher-button .cp-launcher-points small, .cp-loyalty-launcher .cp-launcher-button .cp-launcher-custom-text { color: var(--cp-launcher-text, var(--cp-on-action, #ffffff)) !important; } .cp-loyalty-launcher .cp-launcher-button .cp-launcher-icon { background: var(--cp-launcher-icon-background, var(--cp-on-action, #ffffff)) !important; color: var(--cp-launcher-icon, var(--cp-action, var(--cp-dark))) !important; } /* Member access layout: the two columns stack their children vertically. * The columns were flex containers without a direction, so the eyebrow, intro, * form and benefits list sat side by side and shrank to fit — the sign-in form * rendered ~250px wide inside a 528px column and the benefits list ~154px. The * column keeps no surface of its own: the plugin's form card is the card, so the * full column width reaches the fields instead of being eaten by double padding. */ body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set > .col-1, body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set > .col-2 { display: flex; flex-direction: column; float: none; width: auto; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set > .col-1 > *, body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set > .col-2 > * { min-width: 0; box-sizing: border-box; } body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set form.woocommerce-form-login, body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set form.woocommerce-form-register, body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set form.lost_reset_password { flex: 1 1 auto; width: 100%; } /* The sign-in and register cards share one width on desktop instead of * collapsing toward their content. */ @media (min-width: 761px) { body.covert-loyalty-auth.woocommerce-account #customer_login.col2-set { align-items: stretch; } } /* Signed-in account layout: complete the plugin's grid so every child has a * place. The theme still carries its float-era rules for this page * (.account-profile floated at 230px, .woocommerce-MyAccount-content offset by * 280px), which fight the grid: the content lost 280px inside its own track and * the profile card was auto-placed below the content, at the foot of the page. * Sidebar column: profile then navigation. Content column: the full track. */ @media (min-width: 761px) { /* Row one holds the profile card, row two the navigation. Without this the * spanning content column pushes its height into both rows and the sidebar * items drift hundreds of pixels apart. */ body.logged-in.woocommerce-account main .woocommerce, body.logged-in.woocommerce-account .site-main .woocommerce, body.logged-in.woocommerce-account .account-native > .woocommerce { grid-template-rows: max-content 1fr; } body.logged-in.woocommerce-account .woocommerce > .account-profile { grid-column: 1; grid-row: 1; float: none !important; width: auto !important; max-width: none !important; margin: 0 0 18px !important; } body.logged-in.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1 !important; grid-row: 2 !important; float: none !important; width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } body.logged-in.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { grid-column: 2 !important; grid-row: 1 / span 2 !important; float: none !important; width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } } @media (max-width: 760px) { body.logged-in.woocommerce-account .woocommerce > .account-profile, body.logged-in.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation, body.logged-in.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { grid-column: 1 !important; grid-row: auto !important; float: none !important; width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } }