:root{--r:#e30613;--rd:#b9000a;--b:#111318;--m:#667085;--bd:#e7e7ea}body.woocommerce-account .woocommerce{width:100%!important;max-width:1280px;margin:auto!important;display:grid!important;grid-template-columns:220px minmax(0,1fr)!important;gap:28px!important;align-items:start!important}body.woocommerce-account .woocommerce:before,body.woocommerce-account .woocommerce:after{display:none!important}body.woocommerce-account .woocommerce-MyAccount-navigation,body.woocommerce-account .woocommerce-MyAccount-content{float:none!important;width:auto!important;margin:0!important;padding:0!important;box-sizing:border-box!important}body.woocommerce-account .woocommerce-MyAccount-navigation{background:#fff;border:1px solid var(--bd);border-radius:14px;overflow:hidden;position:sticky;top:24px}body.woocommerce-account .woocommerce-MyAccount-navigation ul{margin:0!important;padding:0!important;list-style:none!important}body.woocommerce-account .woocommerce-MyAccount-navigation li{margin:0!important;border-bottom:1px solid var(--bd)}body.woocommerce-account .woocommerce-MyAccount-navigation a{display:block;padding:15px 17px;color:var(--b);text-decoration:none!important;font-weight:600}body.woocommerce-account .woocommerce-MyAccount-navigation .is-active a{background:linear-gradient(135deg,var(--rd),var(--r));color:#fff!important}body.woocommerce-account .woocommerce-MyAccount-content{min-width:0!important}.vcd-welcome h2{margin:0 0 8px;font-size:34px}.vcd-welcome h2 span{color:var(--r)}.vcd-welcome p{color:var(--m)}.vcd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0}.vcd-stats article,.vcd-panel,.vcd-detail-head,.vcd-detail-field,.vcd-section,.vcd-listbox{background:#fff;border:1px solid var(--bd);border-radius:14px;box-shadow:0 8px 24px rgba(17,19,24,.04)}.vcd-stats article{padding:18px}.vcd-stats article span{font-weight:600}.vcd-stats article strong{display:block;font-size:30px;margin:8px 0 14px}.vcd-stats a,.vcd-panel a,.vcd-back{color:var(--r);text-decoration:none;font-weight:700}.vcd-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:20px}.vcd-panel{overflow:hidden}.vcd-panel header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--bd)}.vcd-panel header h3{margin:0}.vcd-recent header{background:linear-gradient(135deg,var(--rd),var(--r));color:#fff}.vcd-recent header a{color:#fff}.vcd-row,.vcd-listrow{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;gap:14px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--bd);color:var(--b)!important;text-decoration:none!important}.vcd-row:last-child,.vcd-listrow:last-child{border-bottom:0}.vcd-row strong,.vcd-listrow strong{display:block;color:var(--r)}.vcd-row span:not(.vcd-badge),.vcd-listrow span:not(.vcd-badge){display:block;color:var(--m);font-size:13px;margin-top:4px}.vcd-row small,.vcd-listmeta small{display:block;color:var(--m);margin-top:6px}.vcd-badge{display:inline-block!important;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}.vcd-badge.in-transit{background:#ffe6e8;color:#bb0a16}.vcd-badge.arrived{background:#fff0dd;color:#c76a00}.vcd-badge.delivered{background:#e4f5e9;color:#147a39}.vcd-account>div{display:flex;justify-content:space-between;gap:15px;padding:14px 18px;border-bottom:1px solid var(--bd)}.vcd-account span{color:var(--m)}.vcd-button{display:block;margin:16px 18px 18px;padding:13px;background:var(--r);color:#fff!important;text-align:center;border-radius:9px}.vcd-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}.vcd-actions a{display:grid;place-items:center;min-height:52px;border:1px solid var(--bd);border-radius:10px}.vcd-empty{padding:24px 18px;color:var(--m)}.vcd-track-form{display:grid;grid-template-columns:1fr auto;gap:10px;margin:20px 0}.vcd-track-form input{min-height:46px;padding:10px 13px;border:1px solid var(--bd);border-radius:9px}.vcd-track-form button{min-height:46px;padding:10px 18px;border:0;border-radius:9px;background:var(--r);color:#fff;font-weight:700}.vcd-detail-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:20px;margin-top:18px}.vcd-detail-head h2{margin:5px 0}.vcd-detail-head>div>span,.vcd-detail-field span{display:block;color:var(--m);font-size:12px;font-weight:700;text-transform:uppercase}.vcd-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.vcd-detail-field,.vcd-section{padding:18px}.vcd-section{margin-top:18px}.vcd-section h3{margin-top:0}.vcd-timeline{padding:14px 0;border-bottom:1px solid var(--bd)}.vcd-timeline:last-child{border-bottom:0}.vcd-timeline span{display:block;color:var(--m);font-size:13px;margin-top:3px}.vcd-divider{margin:28px 0;border:0;border-top:1px solid var(--bd)}.vcd-mobile-nav{display:none}@media(max-width:980px){body.woocommerce-account .woocommerce{display:block!important}.woocommerce-MyAccount-navigation{display:none!important}.vcd-grid{grid-template-columns:1fr}.vcd-mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#fff;border-top:1px solid var(--bd);padding-bottom:env(safe-area-inset-bottom)}.vcd-mobile-nav a{min-height:62px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;color:#4b5563;text-decoration:none;font-size:18px}.vcd-mobile-nav a span{font-size:11px}body.woocommerce-account{padding-bottom:78px}.vcd-detail-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.vcd-stats{grid-template-columns:1fr 1fr}.vcd-stats article:last-child{grid-column:1/-1}.vcd-track-form{grid-template-columns:1fr}.vcd-detail-head{display:block}.vcd-detail-head>.vcd-badge{margin-top:14px}.vcd-detail-grid{grid-template-columns:1fr}.vcd-row,.vcd-listrow{grid-template-columns:minmax(0,1fr) 18px}.vcd-row>div:nth-child(2),.vcd-listmeta{grid-column:1;text-align:left}.vcd-row>b,.vcd-listrow>b{grid-column:2;grid-row:1/span 2}} /* v0.4 dashboard refinement + membership */ .vcd-stat-link{display:block;color:inherit!important;text-decoration:none!important;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.vcd-stat-link:hover{transform:translateY(-2px);border-color:#f0b6ba;box-shadow:0 12px 28px rgba(17,19,24,.07)}.vcd-stat-action{display:inline-block;color:var(--vcd-red);font-weight:700;font-size:14px}.vcd-membership-line{display:flex;align-items:baseline;gap:5px;margin-top:8px}.vcd-membership-line strong{display:inline;margin:0}.vcd-membership-line span{color:var(--vcd-muted);font-weight:700}.vcd-membership-tier{margin-top:8px;font-weight:700}.vcd-membership-progress{width:100%;height:8px;margin-top:12px;overflow:hidden;border-radius:999px;background:#f0f1f3}.vcd-membership-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--vcd-red-dark),var(--vcd-red))}.vcd-membership-next{margin-top:8px;color:var(--vcd-muted);font-size:13px;font-weight:600}.vcd-panel-footer{padding:14px 16px;border-top:1px solid var(--vcd-border);text-align:right}.vcd-panel-footer a{color:var(--vcd-red);text-decoration:none;font-weight:700}.vcd-shipment-filters{display:flex;gap:8px;margin:0 0 18px;flex-wrap:wrap}.vcd-shipment-filters a{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 14px;border:1px solid var(--vcd-border);border-radius:999px;background:#fff;color:var(--vcd-black);text-decoration:none;font-weight:700}.vcd-shipment-filters a.is-active{border-color:var(--vcd-red);background:var(--vcd-red);color:#fff}.vcd-empty{padding:24px 18px;color:var(--vcd-muted)} @media(max-width:980px){.vcd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}} /* v0.4.1 compatibility fixes for theme link/card styles */ body.woocommerce-account .woocommerce-MyAccount-content .vcd-stats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; align-items: stretch !important; margin: 0 0 22px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-stat-card, body.woocommerce-account .woocommerce-MyAccount-content a.vcd-stat-card { display: block !important; min-width: 0 !important; min-height: 190px !important; padding: 18px !important; margin: 0 !important; border: 1px solid var(--vcd-border) !important; border-radius: 14px !important; background: #fff !important; color: var(--vcd-black) !important; text-decoration: none !important; box-shadow: 0 8px 24px rgba(17, 19, 24, .04) !important; box-sizing: border-box !important; overflow: hidden !important; } body.woocommerce-account .woocommerce-MyAccount-content a.vcd-stat-card:hover, body.woocommerce-account .woocommerce-MyAccount-content a.vcd-stat-card:focus { color: var(--vcd-black) !important; text-decoration: none !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-stat-label { display: block !important; margin: 0 !important; color: var(--vcd-black) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.35 !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-stat-number, body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-points { display: inline-block !important; margin: 10px 0 14px !important; color: var(--vcd-black) !important; font-size: 30px !important; line-height: 1.1 !important; font-weight: 800 !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-stat-action { display: inline-block !important; color: var(--vcd-red) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.35 !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-card { display: block !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-line { display: flex !important; align-items: baseline !important; gap: 5px !important; margin-top: 0 !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-unit { color: var(--vcd-muted) !important; font-weight: 700 !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-tier { margin-top: 0 !important; color: var(--vcd-black) !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-filters { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin: 0 0 18px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-filters a, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-filters a:visited { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 38px !important; padding: 8px 14px !important; border: 1px solid var(--vcd-border) !important; border-radius: 999px !important; background: #fff !important; color: var(--vcd-black) !important; text-decoration: none !important; font-weight: 700 !important; line-height: 1 !important; opacity: 1 !important; visibility: visible !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-filters a:hover, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-filters a:focus { border-color: var(--vcd-red) !important; color: var(--vcd-red) !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-filters a.is-active, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-filters a.is-active:visited, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-filters a.is-active:hover, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-filters a.is-active:focus { border-color: var(--vcd-red) !important; background: var(--vcd-red) !important; color: #fff !important; opacity: 1 !important; visibility: visible !important; } @media (max-width: 1100px) { body.woocommerce-account .woocommerce-MyAccount-content .vcd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 620px) { body.woocommerce-account .woocommerce-MyAccount-content .vcd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-stat-card, body.woocommerce-account .woocommerce-MyAccount-content a.vcd-stat-card { min-height: 165px !important; padding: 14px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-stat-number, body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-points { font-size: 26px !important; } } /* v0.4.2 layout repair and membership presentation */ body.woocommerce-account .woocommerce-MyAccount-content .vcd-grid { display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr) !important; gap: 20px !important; align-items: start !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-panel { display: block !important; min-width: 0 !important; overflow: hidden !important; border: 1px solid var(--vcd-border) !important; border-radius: 14px !important; background: #fff !important; box-shadow: 0 8px 24px rgba(17, 19, 24, .04) !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-panel > header { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 58px !important; padding: 16px 18px !important; margin: 0 !important; border-bottom: 1px solid var(--vcd-border) !important; background: #fff !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-panel > header h3 { margin: 0 !important; color: var(--vcd-black) !important; font-size: 20px !important; line-height: 1.2 !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipments > header { background: linear-gradient(135deg, var(--vcd-red-dark), var(--vcd-red)) !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipments > header h3 { color: #fff !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-account-overview { display: block !important; width: 100% !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-account-overview > div { display: grid !important; grid-template-columns: 145px minmax(0, 1fr) !important; align-items: center !important; gap: 16px !important; padding: 14px 18px !important; margin: 0 !important; border-bottom: 1px solid var(--vcd-border) !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-account-overview > div:last-child { border-bottom: 0 !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-account-overview span { color: var(--vcd-muted) !important; font-weight: 500 !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-account-overview strong { min-width: 0 !important; color: var(--vcd-black) !important; font-weight: 700 !important; overflow-wrap: anywhere !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-primary-button { display: block !important; margin: 16px 18px 18px !important; padding: 13px 16px !important; border-radius: 9px !important; background: var(--vcd-red) !important; color: #fff !important; text-align: center !important; text-decoration: none !important; font-weight: 700 !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-quick-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; padding: 16px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-quick-actions a, body.woocommerce-account .woocommerce-MyAccount-content .vcd-quick-actions a:visited { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 56px !important; padding: 12px !important; margin: 0 !important; border: 1px solid var(--vcd-border) !important; border-radius: 10px !important; background: #fff !important; color: var(--vcd-red) !important; text-align: center !important; text-decoration: none !important; font-weight: 700 !important; line-height: 1.25 !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-quick-actions a:hover, body.woocommerce-account .woocommerce-MyAccount-content .vcd-quick-actions a:focus { border-color: var(--vcd-red) !important; background: #fff7f7 !important; color: var(--vcd-red) !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-card .vcd-stat-icon { display: grid !important; place-items: center !important; width: 42px !important; height: 42px !important; margin: 0 0 12px !important; border-radius: 50% !important; background: #f3e9ff !important; color: #7b2cbf !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-card .vcd-membership-tier { margin-top: 8px !important; color: var(--vcd-black) !important; font-size: 14px !important; font-weight: 700 !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-card .vcd-membership-next { margin-top: 8px !important; color: var(--vcd-muted) !important; font-size: 13px !important; font-weight: 600 !important; } @media (max-width: 980px) { body.woocommerce-account .woocommerce-MyAccount-content .vcd-grid { grid-template-columns: 1fr !important; } } @media (max-width: 620px) { body.woocommerce-account .woocommerce-MyAccount-content .vcd-account-overview > div { grid-template-columns: 1fr !important; gap: 4px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-quick-actions { grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 12px !important; } } /* v0.4.3 visual cleanup: explicit text colors + Velocity red panel headings */ /* Force readable text throughout the portal so theme white-text rules cannot leak in. */ body.woocommerce-account .woocommerce-MyAccount-content, body.woocommerce-account .woocommerce-MyAccount-content p, body.woocommerce-account .woocommerce-MyAccount-content span, body.woocommerce-account .woocommerce-MyAccount-content strong, body.woocommerce-account .woocommerce-MyAccount-content small, body.woocommerce-account .woocommerce-MyAccount-content label, body.woocommerce-account .woocommerce-MyAccount-content div { color: var(--vcd-black); } /* Restore intended muted text where needed. */ body.woocommerce-account .woocommerce-MyAccount-content .vcd-welcome p, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-main span, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-meta small, body.woocommerce-account .woocommerce-MyAccount-content .vcd-account-overview span, body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-next, body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-unit, body.woocommerce-account .woocommerce-MyAccount-content .vcd-page-heading p, body.woocommerce-account .woocommerce-MyAccount-content .vcd-customer-shipment-card span:not(.vcd-badge):not(.vcd-chevron), body.woocommerce-account .woocommerce-MyAccount-content .vcd-customer-shipment-right small, body.woocommerce-account .woocommerce-MyAccount-content .vcd-detail-field span, body.woocommerce-account .woocommerce-MyAccount-content .vcd-detail-heading small, body.woocommerce-account .woocommerce-MyAccount-content .vcd-detail-heading > div > span, body.woocommerce-account .woocommerce-MyAccount-content .vcd-timeline-item > span { color: var(--vcd-muted) !important; } /* Strong red header bars across dashboard panels/tables. */ body.woocommerce-account .woocommerce-MyAccount-content .vcd-panel > header, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipments > header { background: linear-gradient(135deg, var(--vcd-red-dark), var(--vcd-red)) !important; border-bottom: 0 !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-panel > header h3, body.woocommerce-account .woocommerce-MyAccount-content .vcd-panel > header a, body.woocommerce-account .woocommerce-MyAccount-content .vcd-panel > header span, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipments > header h3, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipments > header a { color: #ffffff !important; } /* Prevent text-selection/highlight weirdness from looking like part of the design. */ body.woocommerce-account .woocommerce-MyAccount-content h1, body.woocommerce-account .woocommerce-MyAccount-content h2, body.woocommerce-account .woocommerce-MyAccount-content h3, body.woocommerce-account .woocommerce-MyAccount-content h4 { color: var(--vcd-black) !important; background: transparent; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-panel > header h3 { color: #ffffff !important; } /* Make account values and quick action text explicitly readable. */ body.woocommerce-account .woocommerce-MyAccount-content .vcd-account-overview strong { color: var(--vcd-black) !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-quick-actions a, body.woocommerce-account .woocommerce-MyAccount-content .vcd-quick-actions a:visited, body.woocommerce-account .woocommerce-MyAccount-content .vcd-quick-actions a:hover, body.woocommerce-account .woocommerce-MyAccount-content .vcd-quick-actions a:focus { color: var(--vcd-red) !important; background: #ffffff !important; } /* Give the quick-action buttons a little more definition. */ body.woocommerce-account .woocommerce-MyAccount-content .vcd-quick-actions a { box-shadow: 0 2px 8px rgba(17, 19, 24, .04) !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-quick-actions a:hover, body.woocommerce-account .woocommerce-MyAccount-content .vcd-quick-actions a:focus { background: #fff7f7 !important; border-color: var(--vcd-red) !important; } /* Ensure Recent Shipments empty state remains dark text on white. */ body.woocommerce-account .woocommerce-MyAccount-content .vcd-empty-state, body.woocommerce-account .woocommerce-MyAccount-content .vcd-empty-state * { color: var(--vcd-black) !important; } /* Make WooCommerce info/error notices readable inside the portal. */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error { color: var(--vcd-black) !important; background: #ffffff !important; } /* Red-accent shipment filter pills. */ body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-filters a, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-filters a:visited { color: var(--vcd-black) !important; background: #fff !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-filters a.is-active, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-filters a.is-active:visited, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-filters a.is-active:hover, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-filters a.is-active:focus { color: #ffffff !important; background: var(--vcd-red) !important; } /* Keep stat card content readable and branded. */ body.woocommerce-account .woocommerce-MyAccount-content .vcd-stat-card, body.woocommerce-account .woocommerce-MyAccount-content .vcd-stat-card * { color: var(--vcd-black); } body.woocommerce-account .woocommerce-MyAccount-content .vcd-stat-card .vcd-stat-action { color: var(--vcd-red) !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-stat-card .vcd-membership-unit, body.woocommerce-account .woocommerce-MyAccount-content .vcd-stat-card .vcd-membership-next { color: var(--vcd-muted) !important; } /* v0.4.4 final color and membership-card compatibility layer */ /* White content areas always use dark readable text. */ body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard, body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-stat-card, body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-panel, body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-panel > *:not(header), body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipments-page, body.woocommerce-account .woocommerce-MyAccount-content .vcd-customer-shipment-detail { color: #111318 !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-panel > *:not(header) *, body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-stat-card *, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipments-page *, body.woocommerce-account .woocommerce-MyAccount-content .vcd-customer-shipment-detail * { color: inherit; } /* Red table/panel headers with white type. */ body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-panel > header { background: #e30613 !important; color: #ffffff !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-panel > header *, body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-panel > header h3, body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-panel > header a { color: #ffffff !important; } /* Explicit readable colors for common body elements. */ body.woocommerce-account .woocommerce-MyAccount-content .vcd-empty-state, body.woocommerce-account .woocommerce-MyAccount-content .vcd-account-overview strong, body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-tier { color: #111318 !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-account-overview span, body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-unit, body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-next, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-meta small, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-main span { color: #667085 !important; } /* Quick Actions are clearly visible as bordered white buttons with red labels. */ body.woocommerce-account .woocommerce-MyAccount-content .vcd-quick-actions a, body.woocommerce-account .woocommerce-MyAccount-content .vcd-quick-actions a:visited { background: #ffffff !important; color: #e30613 !important; border: 1px solid #e7e7ea !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-quick-actions a:hover, body.woocommerce-account .woocommerce-MyAccount-content .vcd-quick-actions a:focus { background: #fff6f6 !important; color: #b9000a !important; border-color: #e30613 !important; } /* Membership card text cannot inherit white from the theme. */ body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-card, body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-card .vcd-stat-label, body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-card .vcd-membership-points, body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-card .vcd-membership-tier { color: #111318 !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-card .vcd-membership-unit, body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-card .vcd-membership-next { color: #667085 !important; } /* Make progress visible even when progress is small. */ body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-progress { display: block !important; width: 100% !important; height: 8px !important; background: #eceef1 !important; overflow: hidden !important; border-radius: 999px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-membership-progress > span { display: block !important; height: 100% !important; background: #e30613 !important; border-radius: 999px !important; } /* Shipment filter selected state remains visible. */ body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-filters a.is-active, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-filters a.is-active:visited, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-filters a.is-active:hover, body.woocommerce-account .woocommerce-MyAccount-content .vcd-shipment-filters a.is-active:focus { background: #e30613 !important; border-color: #e30613 !important; color: #ffffff !important; } /* v0.4.6 - compact main dashboard only. Other WooCommerce My Account endpoints are not targeted. */ @media (min-width: 981px) { body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-welcome { margin-bottom: 10px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-welcome h2 { margin-bottom: 4px !important; font-size: 30px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-welcome p { margin-bottom: 0 !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-stats { gap: 12px !important; margin-bottom: 12px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-stat-card, body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard a.vcd-stat-card { min-height: 135px !important; padding: 12px 14px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-stat-icon { width: 32px !important; height: 32px !important; margin-bottom: 6px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-stat-number, body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-membership-points { margin: 5px 0 7px !important; font-size: 25px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-membership-progress { height: 6px !important; margin-top: 6px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-membership-next { margin-top: 4px !important; font-size: 12px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-grid { gap: 12px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-panel > header { min-height: 44px !important; padding: 10px 15px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-panel > header h3 { font-size: 17px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-shipment-row { padding: 9px 12px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-account-overview > div { padding: 8px 13px !important; grid-template-columns: 115px minmax(0, 1fr) !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-primary-button { margin: 9px 13px 12px !important; padding: 9px 13px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-quick-actions { gap: 8px !important; padding: 10px !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard .vcd-quick-actions a { min-height: 42px !important; padding: 8px !important; font-size: 13px !important; } } /* v0.4.7 - no-scroll desktop mode for MAIN DASHBOARD ONLY */ @media (min-width: 981px) { body.vcd-main-dashboard-page { height: 100vh !important; overflow-y: hidden !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard { max-height: calc(100vh - 130px) !important; overflow: hidden !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-welcome { margin-bottom: 8px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-welcome h2 { margin: 0 0 2px !important; font-size: 28px !important; line-height: 1.05 !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-welcome p { margin: 0 !important; font-size: 13px !important; line-height: 1.15 !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-stats { gap: 10px !important; margin-bottom: 10px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-stat-card, body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard a.vcd-stat-card { min-height: 115px !important; padding: 9px 11px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-stat-icon { width: 27px !important; height: 27px !important; margin-bottom: 4px !important; font-size: 12px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-stat-label { font-size: 12px !important; line-height: 1.1 !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-stat-number, body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-membership-points { margin: 3px 0 4px !important; font-size: 21px !important; line-height: 1 !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-stat-action, body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-membership-tier, body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-membership-next { font-size: 11px !important; line-height: 1.05 !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-membership-progress { height: 5px !important; margin-top: 4px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-grid { gap: 9px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-panel > header { min-height: 38px !important; padding: 8px 12px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-panel > header h3 { font-size: 15px !important; line-height: 1 !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-shipment-row { padding: 7px 10px !important; gap: 8px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-package-icon { width: 29px !important; height: 29px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-account-overview > div { padding: 6px 10px !important; grid-template-columns: 105px minmax(0, 1fr) !important; font-size: 12px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-primary-button { margin: 7px 10px 9px !important; padding: 7px 10px !important; font-size: 12px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-quick-actions { gap: 6px !important; padding: 8px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-quick-actions a { min-height: 34px !important; padding: 6px !important; font-size: 11px !important; } /* The footer itself can cause a page scrollbar even if the dashboard fits. */ body.vcd-main-dashboard-page footer, body.vcd-main-dashboard-page #colophon, body.vcd-main-dashboard-page .site-footer, body.vcd-main-dashboard-page .elementor-location-footer { display: none !important; } } /* Keep mobile/tablet normally scrollable. */ @media (max-width: 980px) { body.vcd-main-dashboard-page { height: auto !important; overflow-y: auto !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard { max-height: none !important; overflow: visible !important; } } /* v0.4.8 - larger no-scroll dashboard sizing Keeps the v0.4.7 dashboard-only no-scroll behavior, but uses more of the available desktop viewport so the dashboard does not look undersized. */ @media (min-width: 981px) { body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard { max-height: calc(100vh - 120px) !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-welcome { margin-bottom: 12px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-welcome h2 { font-size: 34px !important; line-height: 1.08 !important; margin: 0 0 4px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-welcome p { font-size: 15px !important; line-height: 1.2 !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-stats { gap: 14px !important; margin-bottom: 14px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-stat-card, body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard a.vcd-stat-card { min-height: 145px !important; padding: 14px 16px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-stat-icon { width: 36px !important; height: 36px !important; margin-bottom: 7px !important; font-size: 14px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-stat-label { font-size: 14px !important; line-height: 1.15 !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-stat-number, body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-membership-points { margin: 6px 0 7px !important; font-size: 28px !important; line-height: 1 !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-stat-action { font-size: 13px !important; line-height: 1.15 !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-membership-tier, body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-membership-next { font-size: 12px !important; line-height: 1.15 !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-membership-progress { height: 6px !important; margin-top: 7px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-grid { gap: 14px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-panel > header { min-height: 48px !important; padding: 11px 14px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-panel > header h3 { font-size: 18px !important; line-height: 1.1 !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-shipment-row { padding: 10px 12px !important; gap: 10px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-package-icon { width: 34px !important; height: 34px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-account-overview > div { padding: 9px 12px !important; grid-template-columns: 115px minmax(0, 1fr) !important; font-size: 13px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-primary-button { margin: 10px 12px 12px !important; padding: 9px 12px !important; font-size: 13px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-quick-actions { gap: 9px !important; padding: 10px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-quick-actions a { min-height: 42px !important; padding: 8px !important; font-size: 12px !important; } } /* Keep smaller laptop heights slightly tighter so the dashboard still fits. */ @media (min-width: 981px) and (max-height: 760px) { body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-welcome h2 { font-size: 30px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-stat-card, body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard a.vcd-stat-card { min-height: 130px !important; padding: 11px 13px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-panel > header { min-height: 42px !important; padding: 9px 12px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-account-overview > div { padding: 7px 10px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard .vcd-quick-actions a { min-height: 36px !important; } } /* v0.4.9 - reclaim empty space above the MAIN dashboard only. Keeps v0.4.8 sizing, but raises the WooCommerce account area on desktop and gives the dashboard more usable viewport height. */ @media (min-width: 981px) { body.vcd-main-dashboard-page .woocommerce { margin-top: -42px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-navigation, body.vcd-main-dashboard-page .woocommerce-MyAccount-content { margin-top: 0 !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard { max-height: calc(100vh - 72px) !important; } } /* Do not raise the layout as aggressively on shorter laptop screens. */ @media (min-width: 981px) and (max-height: 760px) { body.vcd-main-dashboard-page .woocommerce { margin-top: -28px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard { max-height: calc(100vh - 82px) !important; } } /* Mobile/tablet positioning remains untouched. */ @media (max-width: 980px) { body.vcd-main-dashboard-page .woocommerce { margin-top: initial !important; } } /* v0.5.1 - corrected full portal sidebar. Built on the working v0.4.9 layout. No extra grid child is added. */ @media (min-width: 981px) { body.woocommerce-account .woocommerce { grid-template-columns: 250px minmax(0, 1fr) !important; gap: 26px !important; align-items: start !important; } body.woocommerce-account .woocommerce-MyAccount-navigation { width: 250px !important; min-width: 250px !important; min-height: calc(100vh - 110px) !important; position: sticky !important; top: 18px !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; margin: 0 !important; border: 0 !important; border-radius: 14px !important; background: #111318 !important; box-shadow: 0 14px 36px rgba(17,19,24,.14) !important; } body.woocommerce-account .woocommerce-MyAccount-navigation .vcd-sidebar-profile { flex: 0 0 auto !important; display: block !important; padding: 22px 18px 18px !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; background: #111318 !important; } body.woocommerce-account .woocommerce-MyAccount-navigation .vcd-sidebar-brand { display: flex !important; flex-direction: column !important; margin-bottom: 18px !important; line-height: 1 !important; } body.woocommerce-account .woocommerce-MyAccount-navigation .vcd-sidebar-brand-main { color: #fff !important; font-size: 23px !important; font-weight: 900 !important; letter-spacing: -.04em !important; } body.woocommerce-account .woocommerce-MyAccount-navigation .vcd-sidebar-brand-sub { margin-top: 4px !important; color: #e30613 !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .16em !important; } body.woocommerce-account .woocommerce-MyAccount-navigation .vcd-sidebar-vx { margin-bottom: 6px !important; color: #aeb4be !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .06em !important; } body.woocommerce-account .woocommerce-MyAccount-navigation .vcd-sidebar-greeting { color: #fff !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1.2 !important; } body.woocommerce-account .woocommerce-MyAccount-navigation ul { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; margin: 0 !important; padding: 12px 0 !important; background: #111318 !important; } body.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 2px 9px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body.woocommerce-account .woocommerce-MyAccount-navigation li a, body.woocommerce-account .woocommerce-MyAccount-navigation li a:visited { position: relative !important; display: flex !important; align-items: center !important; min-height: 46px !important; padding: 11px 13px 11px 40px !important; border-radius: 9px !important; background: transparent !important; color: #d7dbe1 !important; text-decoration: none !important; font-size: 14px !important; font-weight: 700 !important; } body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover, body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus { background: rgba(255,255,255,.07) !important; color: #fff !important; } body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:hover, body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:focus { background: #e30613 !important; color: #fff !important; box-shadow: 0 5px 14px rgba(227,6,19,.22) !important; } body.woocommerce-account .woocommerce-MyAccount-navigation li a::before { position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; width: 18px !important; text-align: center !important; color: currentColor !important; font-size: 15px !important; line-height: 1 !important; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before { content: "▦" !important; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--shipments a::before, body.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before { content: "□" !important; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before { content: "⌖" !important; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before { content: "○" !important; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "↪" !important; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: auto !important; padding-top: 8px !important; border-top: 1px solid rgba(255,255,255,.10) !important; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: #ff8b92 !important; } /* Keep the content exactly in the second grid column. */ body.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2 !important; width: auto !important; min-width: 0 !important; margin: 0 !important; } /* The dashboard remains on the v0.4.9 sizing/positioning branch. */ body.vcd-main-dashboard-page .woocommerce { margin-top: -12px !important; } } @media (max-width: 980px) { body.woocommerce-account .woocommerce-MyAccount-navigation .vcd-sidebar-profile { display: none !important; } } /* v0.5.2 - full-width desktop portal layout Uses the available browser width instead of the theme's narrow content container. */ @media (min-width: 981px) { body.woocommerce-account main, body.woocommerce-account .site-main, body.woocommerce-account #primary, body.woocommerce-account .content-area, body.woocommerce-account .entry-content, body.woocommerce-account .page-content, body.woocommerce-account .elementor-widget-container:has(.woocommerce) { max-width: none !important; } body.woocommerce-account .woocommerce { width: calc(100vw - 32px) !important; max-width: none !important; margin-left: 16px !important; margin-right: 16px !important; grid-template-columns: 250px minmax(0, 1fr) !important; gap: 24px !important; box-sizing: border-box !important; } body.woocommerce-account .woocommerce-MyAccount-navigation { width: 250px !important; min-width: 250px !important; margin-left: 0 !important; align-self: stretch !important; } body.woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; max-width: none !important; min-width: 0 !important; margin-right: 0 !important; } /* Let the dashboard cards and panels expand naturally across the larger canvas. */ body.woocommerce-account .woocommerce-MyAccount-content .vcd-dashboard { width: 100% !important; max-width: none !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-stats { width: 100% !important; } body.woocommerce-account .woocommerce-MyAccount-content .vcd-grid { width: 100% !important; grid-template-columns: minmax(0, 1.55fr) minmax(340px, .85fr) !important; } /* Remove leftover centered-container spacing from common WordPress/Elementor wrappers. */ body.woocommerce-account .container, body.woocommerce-account .site-content, body.woocommerce-account .content-wrap, body.woocommerce-account .ast-container, body.woocommerce-account .elementor-section.elementor-section-boxed > .elementor-container, body.woocommerce-account .e-con.e-con-boxed > .e-con-inner { max-width: none !important; width: 100% !important; } /* Keep the portal below the website header but remove the large left/right gutters. */ body.vcd-main-dashboard-page .woocommerce { margin-top: -12px !important; } } /* Larger desktop screens can use a slightly wider sidebar and roomier content. */ @media (min-width: 1440px) { body.woocommerce-account .woocommerce { width: calc(100vw - 40px) !important; margin-left: 20px !important; margin-right: 20px !important; grid-template-columns: 265px minmax(0, 1fr) !important; gap: 28px !important; } body.woocommerce-account .woocommerce-MyAccount-navigation { width: 265px !important; min-width: 265px !important; } } /* Mobile/tablet remain untouched and scroll normally. */ @media (max-width: 980px) { body.woocommerce-account .woocommerce { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } /* v0.5.3 - balanced desktop dashboard width Keep the sidebar near the left edge, but stop dashboard panels from stretching all the way across very wide monitors. */ @media (min-width: 981px) { /* Keep the overall portal shell full-width enough for the sidebar placement. */ body.vcd-main-dashboard-page .woocommerce { width: calc(100vw - 32px) !important; max-width: none !important; margin-left: 16px !important; margin-right: 16px !important; grid-template-columns: 250px minmax(0, 1fr) !important; gap: 24px !important; } /* Cap only the main dashboard content so it feels intentional on large screens. */ body.vcd-main-dashboard-page .woocommerce-MyAccount-content { width: 100% !important; max-width: 1320px !important; justify-self: start !important; margin-left: 0 !important; margin-right: auto !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard { width: 100% !important; max-width: 1320px !important; margin: 0 !important; } /* Give Recent Shipments more room and keep Account compact. */ body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-grid { width: 100% !important; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .65fr) !important; gap: 16px !important; } /* Stop the account card from becoming disproportionately wide. */ body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-grid > .vcd-panel:nth-child(2) { max-width: 430px !important; width: 100% !important; justify-self: stretch !important; } /* Quick Actions should align with the Recent Shipments column, not span the entire screen. */ body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-grid > .vcd-panel:nth-child(3) { max-width: none !important; width: 100% !important; } } /* On very large monitors, keep a comfortable right-side breathing room. */ @media (min-width: 1600px) { body.vcd-main-dashboard-page .woocommerce-MyAccount-content { max-width: 1380px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard { max-width: 1380px !important; } } /* Smaller desktops can still use all available room. */ @media (min-width: 981px) and (max-width: 1300px) { body.vcd-main-dashboard-page .woocommerce-MyAccount-content, body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard { max-width: none !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .75fr) !important; } } /* v0.5.4 - fluid desktop layout for normal and zoomed/minimized views. Avoid fixed max-width caps that make the portal look tiny on very wide CSS viewports. */ @media (min-width: 981px) { body.woocommerce-account .woocommerce { width: 100vw !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: clamp(28px, 4vw, 80px) !important; box-sizing: border-box !important; grid-template-columns: 250px minmax(0, 1fr) !important; gap: clamp(24px, 2.4vw, 46px) !important; align-items: start !important; } body.woocommerce-account .woocommerce-MyAccount-navigation { width: 250px !important; min-width: 250px !important; margin-left: 0 !important; } body.woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding-right: 0 !important; justify-self: stretch !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard { width: 100% !important; max-width: none !important; margin: 0 !important; } /* Keep some right-side breathing room by using the shell padding instead of a fixed content cap. */ body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-stats, body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-grid { width: 100% !important; max-width: none !important; } /* Responsive main dashboard proportions. */ body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-grid { grid-template-columns: minmax(0, 1.65fr) minmax(320px, .7fr) !important; gap: clamp(16px, 1.6vw, 28px) !important; } /* Keep the account card from visually dominating on wide screens. */ body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-grid > .vcd-panel:nth-child(2) { width: 100% !important; max-width: 460px !important; justify-self: stretch !important; } /* Remove previous hard caps from v0.5.3. */ body.vcd-main-dashboard-page .woocommerce-MyAccount-content, body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard { max-width: none !important; } } /* Wide / zoomed-out browser view: grow the sidebar slightly and keep content proportional. */ @media (min-width: 1800px) { body.woocommerce-account .woocommerce { grid-template-columns: 270px minmax(0, 1fr) !important; padding-right: 5vw !important; gap: 2.5vw !important; } body.woocommerce-account .woocommerce-MyAccount-navigation { width: 270px !important; min-width: 270px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-grid { grid-template-columns: minmax(0, 1.75fr) minmax(340px, .65fr) !important; } } /* Standard laptop desktop widths. */ @media (min-width: 981px) and (max-width: 1399px) { body.woocommerce-account .woocommerce { grid-template-columns: 230px minmax(0, 1fr) !important; gap: 20px !important; padding-right: 24px !important; } body.woocommerce-account .woocommerce-MyAccount-navigation { width: 230px !important; min-width: 230px !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-grid { grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr) !important; gap: 14px !important; } } /* Tablet/mobile unchanged. */ @media (max-width: 980px) { body.woocommerce-account .woocommerce { width: 100% !important; padding-right: 0 !important; } } /* v0.5.5 - restore normal scrolling while preserving the existing portal layout */ html, body.vcd-main-dashboard-page { height: auto !important; min-height: 100% !important; overflow-y: auto !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content, body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard { max-height: none !important; overflow: visible !important; } /* Restore the site footer if an earlier no-scroll version hid it. */ body.vcd-main-dashboard-page footer, body.vcd-main-dashboard-page #colophon, body.vcd-main-dashboard-page .site-footer, body.vcd-main-dashboard-page .elementor-location-footer { display: revert !important; } /* v0.6.0 Pre-Alert portal */ .vcd-prealert-page,.vcd-prealerts-page{width:100%;max-width:980px} .vcd-prealert-heading,.vcd-prealerts-top{margin-bottom:20px} .vcd-prealert-heading h2,.vcd-prealerts-top h2{margin:0 0 6px;font-size:30px} .vcd-prealert-heading p,.vcd-prealerts-top p{margin:0;color:var(--vcd-muted)} .vcd-prealert-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:24px;border:1px solid var(--vcd-border);border-radius:14px;background:#fff} .vcd-prealert-field:nth-child(4),.vcd-prealert-submit{grid-column:1/-1} .vcd-prealert-field label{display:block;margin-bottom:7px;font-weight:700;color:var(--vcd-black)} .vcd-prealert-field input{width:100%!important;box-sizing:border-box!important} .vcd-prealert-field input[type=text],.vcd-prealert-field input[type=number]{min-height:48px;padding:10px 13px;border:1px solid var(--vcd-border);border-radius:9px;background:#fff} .vcd-prealert-field input[type=file]{padding:12px;border:1px dashed #cdd1d7;border-radius:9px;background:#fafafa} .vcd-prealert-field small{display:block;margin-top:6px;color:var(--vcd-muted)} .vcd-prealert-money{display:grid;grid-template-columns:auto 1fr;align-items:center;border:1px solid var(--vcd-border);border-radius:9px;overflow:hidden} .vcd-prealert-money>span{padding:0 13px;color:var(--vcd-muted);font-weight:700} .vcd-prealert-money input{border:0!important;border-left:1px solid var(--vcd-border)!important;border-radius:0!important} .vcd-prealert-submit{min-height:50px;border:0;border-radius:9px;background:var(--vcd-red);color:#fff;font-weight:800;cursor:pointer} .vcd-prealerts-top{display:flex;justify-content:space-between;align-items:center;gap:16px} .vcd-prealert-new-button{display:inline-flex;min-height:44px;align-items:center;padding:10px 16px;border-radius:9px;background:var(--vcd-red);color:#fff!important;text-decoration:none;font-weight:800} .vcd-prealert-list{display:grid;gap:12px} .vcd-prealert-card{display:grid;grid-template-columns:minmax(0,1fr) 130px 210px;gap:18px;align-items:center;padding:17px 18px;border:1px solid var(--vcd-border);border-radius:12px;background:#fff} .vcd-prealert-card strong,.vcd-prealert-card span,.vcd-prealert-card small{display:block} .vcd-prealert-tracking{margin-top:4px;color:var(--vcd-red);font-weight:700;overflow-wrap:anywhere} .vcd-prealert-card small{margin-top:5px;color:var(--vcd-muted)} .vcd-prealert-card-status{text-align:right} .vcd-prealert-card-status a{display:inline-block;margin-top:8px;color:var(--vcd-red);font-weight:700;text-decoration:none} .vcd-prealert-status{display:inline-block!important;padding:6px 10px;border-radius:999px;background:#fff1df;color:#a95f00;font-size:12px;font-weight:800} .vcd-prealert-status.received-miami{background:#ffe6e8;color:#b9000a} .vcd-prealert-status.matched{background:#e8eefc;color:#264a9b} .vcd-prealert-status.completed{background:#e4f5e9;color:#147a39} .vcd-prealert-empty{padding:28px;border:1px solid var(--vcd-border);border-radius:12px;background:#fff} @media(max-width:650px){ .vcd-prealert-form{grid-template-columns:1fr;padding:16px} .vcd-prealert-field:nth-child(4),.vcd-prealert-submit{grid-column:auto} .vcd-prealerts-top{display:block} .vcd-prealert-new-button{margin-top:12px;width:100%;box-sizing:border-box;justify-content:center} .vcd-prealert-card{grid-template-columns:1fr;gap:10px} .vcd-prealert-card-status{text-align:left} } /* v0.6.1 pre-alert / shipment bridge */ @media (min-width:981px) { body.woocommerce-account .woocommerce-MyAccount-navigation-link--pre-alert a::before { content:"+" !important; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--pre-alerts a::before { content:"≡" !important; } } .vcd-create-from-prealert .velocity-shipment-form{max-width:860px} /* ========================================================= v0.6.7 - Full-screen Velocity customer portal shell ========================================================= */ /* Canonical Velocity design tokens. Older CSS used both short and vcd-prefixed names. */ :root { --vcd-red: #e30613; --vcd-red-dark: #b9000a; --vcd-black: #111318; --vcd-muted: #667085; --vcd-border: #e7e7ea; } /* Logged-in account pages behave as an application portal, not a boxed website page. */ body.woocommerce-account.logged-in { background: #f5f6f8 !important; } body.woocommerce-account.logged-in #page, body.woocommerce-account.logged-in .site, body.woocommerce-account.logged-in .site-content, body.woocommerce-account.logged-in .ast-container, body.woocommerce-account.logged-in #primary, body.woocommerce-account.logged-in .content-area, body.woocommerce-account.logged-in .site-main, body.woocommerce-account.logged-in article, body.woocommerce-account.logged-in .entry-content, body.woocommerce-account.logged-in .page-content, body.woocommerce-account.logged-in .elementor, body.woocommerce-account.logged-in .elementor-section-wrap, body.woocommerce-account.logged-in .elementor-widget-wrap, body.woocommerce-account.logged-in .elementor-widget-container, body.woocommerce-account.logged-in .e-con, body.woocommerce-account.logged-in .e-con-inner { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* The logged-in customer area is the portal itself, so remove the normal site chrome. */ body.woocommerce-account.logged-in #masthead, body.woocommerce-account.logged-in .site-header, body.woocommerce-account.logged-in header.site-header, body.woocommerce-account.logged-in .elementor-location-header, body.woocommerce-account.logged-in #colophon, body.woocommerce-account.logged-in .site-footer, body.woocommerce-account.logged-in footer.site-footer, body.woocommerce-account.logged-in .elementor-location-footer { display: none !important; } body.woocommerce-account.logged-in .site-content, body.woocommerce-account.logged-in .ast-container, body.woocommerce-account.logged-in #primary, body.woocommerce-account.logged-in .content-area, body.woocommerce-account.logged-in .site-main, body.woocommerce-account.logged-in article, body.woocommerce-account.logged-in .entry-content, body.woocommerce-account.logged-in .page-content { padding: 0 !important; } @media (min-width: 981px) { body.woocommerce-account.logged-in .woocommerce { display: grid !important; grid-template-columns: 270px minmax(0, 1fr) !important; gap: 0 !important; align-items: stretch !important; width: 100% !important; max-width: none !important; min-height: 100vh !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { grid-column: 1 !important; width: 270px !important; min-width: 270px !important; min-height: 100vh !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; position: sticky !important; top: 0 !important; align-self: start !important; overflow-y: auto !important; box-shadow: 8px 0 28px rgba(17,19,24,.08) !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content { grid-column: 2 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 100vh !important; margin: 0 !important; padding: 32px clamp(28px, 3vw, 60px) 46px !important; background: #f5f6f8 !important; box-sizing: border-box !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-dashboard, body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-shipments-page, body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-detail, body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-prealert-page, body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-prealerts-page { width: 100% !important; max-width: none !important; margin: 0 !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-stats { width: 100% !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-grid { width: 100% !important; max-width: none !important; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr) !important; gap: 20px !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-grid > .vcd-panel:nth-child(2) { width: 100% !important; max-width: 430px !important; } /* Cancel old dashboard-only vertical nudges and height caps. */ body.vcd-main-dashboard-page .woocommerce { margin-top: 0 !important; } body.vcd-main-dashboard-page .woocommerce-MyAccount-content, body.vcd-main-dashboard-page .woocommerce-MyAccount-content .vcd-dashboard { max-height: none !important; overflow: visible !important; } } /* Pre-alert pages should use the same portal canvas instead of the old 980px cap. */ body.woocommerce-account.logged-in .vcd-prealert-page, body.woocommerce-account.logged-in .vcd-prealerts-page { width: 100% !important; max-width: none !important; } /* Make the pre-alert submit/upload controls visibly interactive in their resting state. */ body.woocommerce-account.logged-in .vcd-prealert-submit, body.woocommerce-account.logged-in .vcd-prealert-submit:visited { background: #e30613 !important; border: 1px solid #e30613 !important; color: #ffffff !important; opacity: 1 !important; box-shadow: 0 7px 16px rgba(227,6,19,.18) !important; } body.woocommerce-account.logged-in .vcd-prealert-submit:hover, body.woocommerce-account.logged-in .vcd-prealert-submit:focus { background: #b9000a !important; border-color: #b9000a !important; color: #ffffff !important; } body.woocommerce-account.logged-in .vcd-prealert-field input[type="file"] { background: #ffffff !important; color: #111318 !important; border: 1px dashed #c7cbd1 !important; } body.woocommerce-account.logged-in .vcd-prealert-field input[type="file"]::file-selector-button { margin-right: 12px; padding: 9px 14px; border: 0; border-radius: 7px; background: #111318; color: #ffffff; font-weight: 700; cursor: pointer; } body.woocommerce-account.logged-in .vcd-prealert-field input[type="file"]::file-selector-button:hover { background: #e30613; } body.woocommerce-account.logged-in .vcd-prealert-field input[type="file"]::-webkit-file-upload-button { margin-right: 12px; padding: 9px 14px; border: 0; border-radius: 7px; background: #111318; color: #ffffff; font-weight: 700; cursor: pointer; } /* Mobile/tablet: still full-width, normally scrollable, with the existing bottom navigation. */ @media (max-width: 980px) { body.woocommerce-account.logged-in .woocommerce { display: block !important; width: 100% !important; max-width: none !important; min-height: 100vh !important; margin: 0 !important; padding: 0 0 82px !important; background: #f5f6f8 !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 20px 16px 28px !important; box-sizing: border-box !important; } body.woocommerce-account.logged-in .vcd-prealert-page, body.woocommerce-account.logged-in .vcd-prealerts-page, body.woocommerce-account.logged-in .vcd-shipments-page, body.woocommerce-account.logged-in .vcd-dashboard { width: 100% !important; max-width: none !important; } } /* ========================================================= v0.6.8 - fixed portal sidebar + visual polish ========================================================= */ @media (min-width: 981px) { /* Remove the leftover WooCommerce/page heading so the portal starts cleanly. */ body.woocommerce-account.logged-in .entry-header, body.woocommerce-account.logged-in .entry-title, body.woocommerce-account.logged-in .page-title { display: none !important; } /* Use a true app-shell layout: fixed sidebar, independently scrolling content. */ body.woocommerce-account.logged-in .woocommerce { display: block !important; width: 100% !important; min-height: 100vh !important; margin: 0 !important; padding: 0 !important; background: #f4f6f9 !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { position: fixed !important; z-index: 1000 !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 272px !important; min-width: 272px !important; height: 100vh !important; min-height: 100vh !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: 0 !important; background: radial-gradient(circle at 10% 0%, rgba(227,6,19,.16), transparent 28%), linear-gradient(180deg, #111318 0%, #0d0f14 100%) !important; box-shadow: 10px 0 32px rgba(15,23,42,.11) !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation .vcd-sidebar-profile { padding: 25px 22px 21px !important; background: transparent !important; border-bottom: 1px solid rgba(255,255,255,.09) !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation .vcd-sidebar-brand-main { font-size: 24px !important; letter-spacing: -.025em !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation .vcd-sidebar-brand-sub { color: #ff3845 !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation .vcd-sidebar-vx { display: inline-flex !important; align-items: center !important; width: fit-content !important; margin: 0 0 9px !important; padding: 5px 8px !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 999px !important; background: rgba(255,255,255,.055) !important; color: #c9ced7 !important; letter-spacing: .05em !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul { height: calc(100vh - 164px) !important; min-height: 0 !important; padding: 15px 11px 14px !important; overflow: hidden !important; box-sizing: border-box !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li { margin: 2px 0 !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li a, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li a:visited { min-height: 44px !important; padding: 10px 14px 10px 43px !important; border-radius: 10px !important; color: #c9ced7 !important; transition: background-color .16s ease, color .16s ease, transform .16s ease !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li a:hover, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li a:focus { background: rgba(255,255,255,.07) !important; color: #ffffff !important; transform: translateX(2px) !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li.is-active a, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li.is-active a:hover, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li.is-active a:focus { background: linear-gradient(135deg, #e30613, #f21f2c) !important; color: #ffffff !important; box-shadow: 0 7px 18px rgba(227,6,19,.25) !important; transform: none !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: auto !important; padding-top: 8px !important; } /* Content scrolls normally while the sidebar remains locked in place. */ body.woocommerce-account.logged-in .woocommerce-MyAccount-content { display: block !important; width: calc(100% - 272px) !important; max-width: none !important; min-width: 0 !important; min-height: 100vh !important; margin: 0 0 0 272px !important; padding: 34px clamp(30px, 3.2vw, 62px) 56px !important; background: radial-gradient(circle at 88% 0%, rgba(227,6,19,.035), transparent 22%), #f4f6f9 !important; box-sizing: border-box !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-dashboard, body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-shipments-page, body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-detail, body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-prealert-page, body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-prealerts-page { width: 100% !important; max-width: 1500px !important; margin: 0 auto !important; } /* Stronger hierarchy at the top of the dashboard. */ body.woocommerce-account.logged-in .vcd-welcome { position: relative !important; margin: 0 0 20px !important; padding: 4px 0 4px 18px !important; } body.woocommerce-account.logged-in .vcd-welcome::before { content: "" !important; position: absolute !important; left: 0 !important; top: 2px !important; bottom: 2px !important; width: 4px !important; border-radius: 999px !important; background: linear-gradient(180deg, #e30613, #ff4b57) !important; } body.woocommerce-account.logged-in .vcd-welcome h2 { font-size: clamp(30px, 2.2vw, 38px) !important; letter-spacing: -.025em !important; } /* More polished stat cards inspired by modern courier dashboards. */ body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-stats { gap: 16px !important; margin-bottom: 18px !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-stat-card, body.woocommerce-account.logged-in .woocommerce-MyAccount-content a.vcd-stat-card { position: relative !important; min-height: 148px !important; padding: 18px 19px !important; border: 1px solid rgba(215,219,226,.9) !important; border-radius: 16px !important; background: linear-gradient(180deg, #ffffff 0%, #fdfdfd 100%) !important; box-shadow: 0 8px 24px rgba(15,23,42,.055) !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content a.vcd-stat-card:hover, body.woocommerce-account.logged-in .woocommerce-MyAccount-content a.vcd-stat-card:focus { transform: translateY(-3px) !important; border-color: rgba(227,6,19,.28) !important; box-shadow: 0 14px 32px rgba(15,23,42,.09) !important; } body.woocommerce-account.logged-in .vcd-stat-card::after { content: "" !important; position: absolute !important; left: 18px !important; right: 18px !important; bottom: 0 !important; height: 3px !important; border-radius: 999px 999px 0 0 !important; background: linear-gradient(90deg, rgba(227,6,19,.86), rgba(227,6,19,0)) !important; opacity: .55 !important; } body.woocommerce-account.logged-in .vcd-stat-icon { display: grid !important; place-items: center !important; width: 36px !important; height: 36px !important; margin-bottom: 10px !important; border-radius: 11px !important; background: #fff1f2 !important; color: #e30613 !important; } body.woocommerce-account.logged-in .vcd-membership-card .vcd-stat-icon { background: #f2eaff !important; color: #7b2cbf !important; } /* Panels feel less flat and rows react on hover. */ body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-panel, body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-listbox, body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-detail-head, body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-detail-field, body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-section, body.woocommerce-account.logged-in .vcd-prealert-form, body.woocommerce-account.logged-in .vcd-prealert-card { border: 1px solid rgba(215,219,226,.92) !important; border-radius: 16px !important; box-shadow: 0 9px 26px rgba(15,23,42,.05) !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vcd-panel > header { min-height: 52px !important; padding: 13px 17px !important; background: linear-gradient(135deg, #dd0714 0%, #f01422 100%) !important; } body.woocommerce-account.logged-in .vcd-shipment-row, body.woocommerce-account.logged-in .vcd-row, body.woocommerce-account.logged-in .vcd-listrow { transition: background-color .15s ease, transform .15s ease !important; } body.woocommerce-account.logged-in .vcd-shipment-row:hover, body.woocommerce-account.logged-in .vcd-row:hover, body.woocommerce-account.logged-in .vcd-listrow:hover { background: #fafbfc !important; } body.woocommerce-account.logged-in .vcd-primary-button, body.woocommerce-account.logged-in .vcd-button, body.woocommerce-account.logged-in .vcd-prealert-submit, body.woocommerce-account.logged-in .vcd-prealert-new-button { border-radius: 10px !important; background: linear-gradient(135deg, #df0714, #f21f2c) !important; box-shadow: 0 8px 18px rgba(227,6,19,.18) !important; transition: transform .15s ease, box-shadow .15s ease !important; } body.woocommerce-account.logged-in .vcd-primary-button:hover, body.woocommerce-account.logged-in .vcd-button:hover, body.woocommerce-account.logged-in .vcd-prealert-submit:hover, body.woocommerce-account.logged-in .vcd-prealert-new-button:hover { transform: translateY(-1px) !important; box-shadow: 0 11px 22px rgba(227,6,19,.24) !important; } } /* Keep the current compact mobile portal behavior. */ @media (max-width: 980px) { body.woocommerce-account.logged-in .entry-header, body.woocommerce-account.logged-in .entry-title, body.woocommerce-account.logged-in .page-title { display: none !important; } } /* ========================================================= v0.6.10 - Visible Sidebar Home Button ========================================================= */ @media (min-width: 981px) { body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation a.vcd-sidebar-home, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation a.vcd-sidebar-home:link, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation a.vcd-sidebar-home:visited { display: flex !important; align-items: center !important; gap: 11px !important; margin: 14px 14px 8px !important; padding: 12px 14px !important; min-height: 48px !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 11px !important; background: #20242b !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-decoration: none !important; opacity: 1 !important; visibility: visible !important; font-size: 14px !important; font-weight: 750 !important; line-height: 1.2 !important; box-sizing: border-box !important; transition: background .18s ease, border-color .18s ease, transform .18s ease !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation a.vcd-sidebar-home span { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation a.vcd-sidebar-home:hover, body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation a.vcd-sidebar-home:focus { background: #e30613 !important; border-color: #e30613 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; transform: translateY(-1px) !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation .vcd-sidebar-home-icon { display: grid !important; place-items: center !important; width: 26px !important; height: 26px !important; flex: 0 0 26px !important; border-radius: 8px !important; background: rgba(255,255,255,.13) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: 17px !important; font-weight: 800 !important; } }