/** * My Account — complete restyle. * * WooCommerce's default myaccount CSS uses float+width%, which fights any * grid layout the theme tries to lay over the top. Every rule in this * file explicitly re-overrides Woo's defaults with high specificity * (`.woocommerce-account .woocommerce ...`) so the theme layout wins on * every page (dashboard, orders, order detail, downloads, addresses, * edit address, edit account, lost password, view subscriptions). */ /* ------------------------------------------------------------------- * Kill Woo's float+width defaults on every myaccount grid child * ---------------------------------------------------------------- */ body .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation, body .woocommerce-account.logged-in .woocommerce > .wi-account-nav, body .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content{ float:none!important;width:auto!important;margin:0!important;padding-left:0;padding-right:0 } /* ------------------------------------------------------------------- * Content pane — a card * ---------------------------------------------------------------- */ body .woocommerce-account.logged-in .woocommerce-MyAccount-content{ background:#fff;border:1px solid var(--border);border-radius:24px; padding:32px 34px;min-height:460px; box-shadow:0 1px 0 rgba(0,0,0,.03),0 20px 40px rgba(24,16,32,.05); min-width:0 } body .woocommerce-account.logged-in .woocommerce-MyAccount-content h1{ font:800 26px/1.2 var(--disp);letter-spacing:-.02em;margin:0 0 6px;color:var(--strong) } body .woocommerce-account.logged-in .woocommerce-MyAccount-content h2{ font:800 20px/1.25 var(--disp);letter-spacing:-.01em;margin:22px 0 12px;color:var(--strong) } body .woocommerce-account.logged-in .woocommerce-MyAccount-content h3{ font:800 16px/1.3 var(--disp);color:var(--strong);margin:18px 0 8px } body .woocommerce-account.logged-in .woocommerce-MyAccount-content p{ font:400 14.5px/1.55 var(--body);color:var(--text);margin:0 0 14px } /* Notices — warm cream card, coloured for info / success / error */ body .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message, body .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info, body .woocommerce-account .woocommerce-MyAccount-content .woocommerce-error, body .woocommerce-account .woocommerce-MyAccount-content .woocommerce-notice, body .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message{ list-style:none;margin:0 0 22px;padding:14px 18px; background:var(--cream);border:1px solid rgba(198,90,28,.16);border-radius:16px; font:500 14px var(--ui);color:var(--strong); display:flex;align-items:center;gap:12px;flex-wrap:wrap } body .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message{background:#eaf6ec;border-color:rgba(46,125,67,.22);color:#2e7d43} body .woocommerce-account .woocommerce-MyAccount-content .woocommerce-error{background:#fdecec;border-color:rgba(226,84,90,.25);color:#a23036} body .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button, body .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button, body .woocommerce-account .woocommerce-MyAccount-content .woocommerce-error .button{ margin-left:auto;background:var(--orange-deep);color:#fff;padding:7px 14px;border-radius:999px; font:700 12px var(--ui);text-decoration:none;order:99;white-space:nowrap } /* Dashboard intro links row */ body .woocommerce-account .woocommerce-MyAccount-content > p a{ color:var(--orange-deep);font-weight:600;text-decoration:none } body .woocommerce-account .woocommerce-MyAccount-content > p a:hover{text-decoration:underline} /* ------------------------------------------------------------------- * Orders table * ---------------------------------------------------------------- */ body .woocommerce-account .woocommerce-MyAccount-content table.shop_table, body .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table, body .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details, body .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads{ width:100%!important;border-collapse:separate;border-spacing:0; background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden; margin:0 0 22px;font:500 14px var(--ui);color:var(--strong) } body .woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th{ background:var(--page);text-align:left; font:700 11px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--soft); padding:14px 16px;border-bottom:1px solid var(--border);border-top:0;border-right:0;border-left:0 } body .woocommerce-account .woocommerce-MyAccount-content table.shop_table td{ padding:16px;border-top:1px solid var(--border);border-right:0;border-left:0;border-bottom:0; vertical-align:middle;background:transparent } body .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:first-child td{border-top:0} body .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:hover td{background:rgba(198,90,28,.03)} /* Order status pill */ body .woocommerce-account .woocommerce-orders-table__cell-order-status{color:var(--strong)} /* Actions column */ body .woocommerce-account .woocommerce-orders-table__cell-order-actions{text-align:right} body .woocommerce-account .woocommerce-orders-table__cell-order-actions a.button, body .woocommerce-account .woocommerce-orders-table__cell-order-actions .button{ background:var(--cream);color:var(--orange-deep);padding:8px 14px;border-radius:999px; font:700 12.5px var(--ui);text-decoration:none;border:0;display:inline-flex;align-items:center } body .woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:hover{background:var(--orange);color:#fff} /* Buttons in general */ body .woocommerce-account .woocommerce-MyAccount-content .button, body .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button, body .woocommerce-account .woocommerce-MyAccount-content button[type="submit"]{ display:inline-flex;align-items:center;justify-content:center;padding:11px 22px;border-radius:999px; background:linear-gradient(180deg,var(--orange),var(--orange-deep));color:#fff!important; font:800 14px var(--ui);text-decoration:none;border:0;cursor:pointer;letter-spacing:.02em; box-shadow:0 6px 18px rgba(198,90,28,.24); transition:transform .18s ease,box-shadow .18s ease,filter .18s ease } body .woocommerce-account .woocommerce-MyAccount-content .button:hover, body .woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover{ transform:translateY(-2px);box-shadow:0 10px 24px rgba(198,90,28,.34);filter:brightness(1.03) } /* ------------------------------------------------------------------- * Addresses — 2-column card grid (defeats Woo float:left/right) * Maximum specificity + !important so no plugin float can leak in. * ---------------------------------------------------------------- */ body.woocommerce-account .woocommerce-MyAccount-content .u-columns, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses, body.woocommerce-account .woocommerce-MyAccount-content .col2-set{ display:grid!important; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important; gap:20px!important;margin:6px 0 22px!important; overflow:visible!important;float:none!important;width:auto!important } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses::before, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses::after, body.woocommerce-account .woocommerce-MyAccount-content .u-columns::before, body.woocommerce-account .woocommerce-MyAccount-content .u-columns::after, body.woocommerce-account .woocommerce-MyAccount-content .col2-set::before, body.woocommerce-account .woocommerce-MyAccount-content .col2-set::after{ content:none!important;display:none!important } body.woocommerce-account .woocommerce-MyAccount-content .u-column1, body.woocommerce-account .woocommerce-MyAccount-content .u-column2, body.woocommerce-account .woocommerce-MyAccount-content .col-1, body.woocommerce-account .woocommerce-MyAccount-content .col-2, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address{ float:none!important;clear:none!important; width:100%!important;max-width:100%!important;margin:0!important;padding:24px!important; background:#fff!important;border:1px solid var(--border)!important;border-radius:20px!important; box-shadow:0 1px 0 rgba(0,0,0,.02),0 12px 30px -20px rgba(24,16,32,.1)!important; min-width:0!important;display:flex!important;flex-direction:column!important;gap:14px!important } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .title{ display:flex!important;align-items:center!important;justify-content:space-between!important; gap:12px!important;margin:0!important;flex-wrap:nowrap!important } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .title h2, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .title h3{ margin:0!important;font:800 16px/1.2 var(--disp)!important;color:var(--strong)!important; letter-spacing:-.01em!important;flex:1!important;min-width:0!important } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .title .edit{ display:inline-flex!important;align-items:center!important;gap:6px!important; background:var(--cream)!important;color:var(--orange-deep)!important; padding:8px 14px!important;border-radius:999px!important; font:700 12.5px/1 var(--ui)!important;letter-spacing:.02em!important; text-decoration:none!important;border:1px solid rgba(198,90,28,.2)!important; white-space:nowrap!important;box-shadow:none!important;flex:none!important;margin:0!important } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .title .edit:hover{ background:var(--orange)!important;color:#fff!important;border-color:var(--orange)!important; text-decoration:none!important;transform:none!important } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address{ font:400 14.5px/1.7 var(--body)!important;color:var(--text)!important; font-style:normal!important;margin:0!important;padding:14px 0 0!important; border-top:1px solid var(--border)!important } /* ------------------------------------------------------------------- * Forms — edit account, edit address, add payment * ---------------------------------------------------------------- */ body .woocommerce-account .woocommerce-MyAccount-content form .form-row, body .woocommerce-account .woocommerce-MyAccount-content form p.form-row{ display:flex;flex-direction:column;margin:0 0 16px;float:none;width:auto } body .woocommerce-account .woocommerce-MyAccount-content form .form-row-first, body .woocommerce-account .woocommerce-MyAccount-content form .form-row-last{ width:calc(50% - 8px);display:inline-flex } body .woocommerce-account .woocommerce-MyAccount-content form .form-row-wide{width:100%} body .woocommerce-account .woocommerce-MyAccount-content form label{ font:600 12px var(--ui);color:var(--strong);letter-spacing:.05em; text-transform:uppercase;margin:0 0 6px } body .woocommerce-account .woocommerce-MyAccount-content form label .required{color:var(--coral-deep);margin-left:2px} body .woocommerce-account .woocommerce-MyAccount-content form input, body .woocommerce-account .woocommerce-MyAccount-content form select, body .woocommerce-account .woocommerce-MyAccount-content form textarea{ width:100%;min-height:46px;padding:11px 15px;border-radius:12px; border:1.5px solid var(--border);background:#fff;font:500 14.5px var(--ui);color:var(--strong); transition:border-color .18s ease,box-shadow .18s ease,background .18s ease } body .woocommerce-account .woocommerce-MyAccount-content form input:focus, body .woocommerce-account .woocommerce-MyAccount-content form select:focus, body .woocommerce-account .woocommerce-MyAccount-content form textarea:focus{ outline:0;border-color:var(--orange);background:#fffdf8; box-shadow:0 0 0 3px rgba(198,90,28,.14) } body .woocommerce-account .woocommerce-MyAccount-content form fieldset{ border:1px solid var(--border);border-radius:16px;padding:18px 20px;margin:22px 0 } body .woocommerce-account .woocommerce-MyAccount-content form fieldset legend{ padding:0 6px;font:700 12px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--strong) } /* Select2 override */ body .woocommerce-account .woocommerce-MyAccount-content .select2-container .select2-selection{ min-height:46px;padding:8px 15px;border-radius:12px;border:1.5px solid var(--border);background:#fff } body .woocommerce-account .woocommerce-MyAccount-content .select2-selection__arrow{top:11px;right:10px} /* ------------------------------------------------------------------- * Downloads (empty state) * ---------------------------------------------------------------- */ body .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message--info, body .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info:only-child{ text-align:center;padding:36px 24px;flex-direction:column;gap:14px } body .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info:only-child .button{ margin-left:0;order:0 } /* ------------------------------------------------------------------- * Order detail page * ---------------------------------------------------------------- */ body .woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details table.shop_table tfoot th{ background:var(--page);font:700 12px var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--soft); padding:14px 16px;text-align:left;border-top:1px solid var(--border);border-bottom:0 } body .woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details table.shop_table tfoot td{ padding:14px 16px;border-top:1px solid var(--border);text-align:right;color:var(--strong) } body .woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details address{ background:var(--page);padding:18px;border-radius:16px;border:1px solid var(--border) } /* ------------------------------------------------------------------- * Responsive * ---------------------------------------------------------------- */ /* Hide the mobile 3-dot toggle on desktop. */ .wi-account-menu-toggle{display:none} @media(max-width:900px){ html,body{overflow-x:hidden;max-width:100vw} /* Kill the page wrapper's 24px side padding on My Account so cards sit right at the viewport edges. */ body.woocommerce-account .c, body.woocommerce-account main .c, body.woocommerce-account main > .c{padding:0!important;max-width:100%!important} body.woocommerce-account.logged-in .woocommerce{ grid-template-columns:minmax(0,1fr)!important; padding:0!important;margin:0!important;max-width:100%!important; box-sizing:border-box!important;gap:14px!important } body.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content{ border-radius:0!important;border-left:0!important;border-right:0!important; padding:22px 16px!important } body.woocommerce-account.logged-in .wi-account-nav{ border-radius:0!important;border-left:0!important;border-right:0!important; padding:12px 16px!important;margin:0!important;position:static!important } /* Header row inside the nav card: avatar + name/email left, 3-dot toggle right. */ body.woocommerce-account.logged-in .wi-account-me{ display:flex!important;align-items:center;gap:12px; padding:2px 0!important;margin:0!important;border-bottom:0!important } body.woocommerce-account.logged-in .wi-account-who{flex:1;min-width:0} /* 3-dot toggle button */ .wi-account-menu-toggle{ display:inline-flex!important;flex-direction:column;justify-content:center;align-items:center;gap:3px; width:40px;height:40px;padding:0;flex:none; background:var(--page,#fdfbf7);border:1px solid var(--border);border-radius:12px; cursor:pointer;transition:background .15s ease,border-color .15s ease } .wi-account-menu-toggle:hover{background:var(--cream);border-color:var(--orange-deep)} .wi-account-menu-toggle span{ display:block!important;width:4px;height:4px;border-radius:999px;background:var(--strong); transition:background .15s ease } .wi-account-menu-toggle[aria-expanded="true"]{background:var(--orange);border-color:var(--orange)} .wi-account-menu-toggle[aria-expanded="true"] span{background:#fff} /* Nav list hidden by default on mobile; toggled open by the button */ body.woocommerce-account.logged-in .wi-account-nav > ul, body.woocommerce-account.logged-in .wi-account-nav ul#wi-account-nav-list{ display:none!important } body.woocommerce-account.logged-in .wi-account-nav.is-open > ul, body.woocommerce-account.logged-in .wi-account-nav.is-open ul#wi-account-nav-list{ display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important; gap:6px!important;margin:12px 0 0!important;padding:12px 0 0!important; border-top:1px solid var(--border); grid-auto-flow:row!important;overflow:visible!important } body.woocommerce-account.logged-in .wi-account-nav ul li{width:100%!important;flex:0 0 auto!important} body.woocommerce-account.logged-in .wi-account-nav ul li a{ width:100%!important;padding:12px 14px!important;border-radius:12px!important; font-size:14.5px!important;min-height:44px!important;justify-content:flex-start!important; white-space:normal!important } body .woocommerce-account.logged-in .woocommerce > .wi-account-nav, body .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation{ grid-column:auto!important } body .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content{ grid-column:auto!important;padding:22px 20px;border-radius:20px } } @media(max-width:720px){ body .woocommerce-account .woocommerce-MyAccount-content form .form-row-first, body .woocommerce-account .woocommerce-MyAccount-content form .form-row-last{width:100%} /* Orders table → cards */ body .woocommerce-account .woocommerce-MyAccount-content table.shop_table, body .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table{ display:block;background:transparent!important;border:0!important;box-shadow:none; overflow:visible;padding:0 } body .woocommerce-account .woocommerce-MyAccount-content table.shop_table thead{display:none} body .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody, body .woocommerce-account .woocommerce-MyAccount-content table.shop_table tr{display:block} body .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr{ background:#fff;border:1px solid var(--border);border-radius:16px; padding:14px 16px;margin-bottom:12px } body .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr td{ display:flex;justify-content:space-between;align-items:center;gap:12px; border:0;padding:8px 0;font-size:13.5px } body .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr td::before{ content:attr(data-title); font:700 11px var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--soft); flex:none;min-width:80px } body .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions{ justify-content:flex-end;padding-top:12px!important;border-top:1px dashed var(--border)!important } } @media(max-width:480px){ body .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content{padding:20px 16px;border-radius:18px} body .woocommerce-account.logged-in .woocommerce-MyAccount-content h1{font-size:22px} } /* ------------------------------------------------------------------- * Standalone dashboard toolbar — a proper page header with the brand * mark on the left and quick-nav links on the right. * ---------------------------------------------------------------- */ .wi-aff-toolbar{ display:flex;align-items:center;justify-content:space-between;gap:16px; margin:0 0 22px;padding:14px 20px; background:#fff;border:1px solid var(--border);border-radius:18px; box-shadow:0 1px 0 rgba(0,0,0,.03),0 12px 30px -18px rgba(24,16,32,.12); flex-wrap:wrap } .wi-aff-toolbar-brand{ display:flex;align-items:center;gap:12px;min-width:0 } .wi-aff-toolbar-mark{ display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:12px; background:linear-gradient(135deg,var(--orange),var(--orange-deep)); color:#fff;flex:none;box-shadow:0 6px 16px rgba(198,90,28,.28) } .wi-aff-toolbar-titles{display:flex;flex-direction:column;gap:2px;min-width:0} .wi-aff-toolbar-titles b{ font:800 15px var(--disp);color:var(--strong);letter-spacing:-.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis } .wi-aff-toolbar-titles small{ font:500 12px var(--ui);color:var(--soft); white-space:nowrap;overflow:hidden;text-overflow:ellipsis } .wi-aff-toolbar-links{ display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap } .wi-aff-toolbar-link{ display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px; background:var(--page,#fdfbf7);border:1px solid var(--border); font:700 12.5px var(--ui);color:var(--strong);text-decoration:none; transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease } .wi-aff-toolbar-link:hover{ background:var(--cream);border-color:var(--orange-deep);color:var(--orange-deep); text-decoration:none;transform:translateY(-1px) } .wi-aff-toolbar-link--strong{ background:linear-gradient(180deg,var(--orange),var(--orange-deep)); color:#fff;border-color:transparent; box-shadow:0 6px 14px rgba(198,90,28,.24) } .wi-aff-toolbar-link--strong:hover{color:#fff;background:var(--orange-deep);transform:translateY(-1px);border-color:transparent} @media(max-width:640px){ .wi-aff-toolbar{padding:12px 14px;gap:10px} .wi-aff-toolbar-titles b{font-size:14px} .wi-aff-toolbar-links{width:100%;justify-content:flex-start} .wi-aff-toolbar-link{padding:7px 12px;font-size:12px} } /* ------------------------------------------------------------------- * Share tab — copy link / message / WhatsApp for every shareable target * ---------------------------------------------------------------- */ .wi-share{display:grid;gap:22px} .wi-share-hero{ display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start; padding:22px 24px } .wi-share-hero-left h3{margin:0 0 6px;font:800 18px var(--disp);color:var(--strong)} .wi-share-hero-left p{margin:0;font:400 14px/1.55 var(--body);color:var(--text)} .wi-share-code{ background:var(--cream);color:var(--orange-deep);padding:3px 10px;border-radius:999px; font:800 12px var(--ui);letter-spacing:.06em } .wi-share-hero-right{display:flex;flex-direction:column;gap:6px} .wi-share-msg-label{font:700 11px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)} .wi-share-msg{ width:100%;min-height:78px;padding:12px 14px;border-radius:12px; border:1.5px solid var(--border);background:#fff;color:var(--strong); font:14px/1.55 var(--ui);resize:vertical; transition:border-color .18s ease,box-shadow .18s ease } .wi-share-msg:focus,.wi-share-msg.is-focus{ outline:0;border-color:var(--orange);box-shadow:0 0 0 3px rgba(198,90,28,.14) } .wi-share-hero-right small{color:var(--soft);font:12px/1.5 var(--ui)} @media(max-width:820px){ .wi-share-hero{grid-template-columns:1fr;padding:18px 18px} } .wi-share-group{display:grid;gap:14px} .wi-share-group-title{ margin:0;font:700 12px var(--ui);letter-spacing:.1em;text-transform:uppercase; color:var(--soft) } .wi-share-grid{ display:grid;gap:14px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) } .wi-share-card{ display:flex;flex-direction:column;overflow:hidden; background:#fff;border:1px solid var(--border);border-radius:18px; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease } .wi-share-card:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -12px rgba(24,16,32,.16); border-color:rgba(198,90,28,.24) } .wi-share-card-thumb{ height:120px;background-size:cover;background-position:center; background-color:var(--cream) } .wi-share-card-thumb--empty{ display:flex;align-items:center;justify-content:center; font-size:44px } .wi-share-card-body{ padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1 } .wi-share-card-body b{ font:700 14.5px var(--ui);color:var(--strong);letter-spacing:-.01em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden } .wi-share-card-body small{font:12px var(--ui);color:var(--soft)} .wi-share-card-url{ background:var(--page,#fdfbf7);border-radius:8px;padding:6px 10px; font:12px var(--ui);color:var(--soft); overflow:hidden;text-overflow:ellipsis;white-space:nowrap } .wi-share-card-url span{display:block;overflow:hidden;text-overflow:ellipsis} .wi-share-card-body b{line-height:1.3} .wi-share-card-body small{font:600 13px var(--ui);color:var(--strong)} .wi-share-card-actions{display:flex;gap:6px;flex-wrap:nowrap;margin-top:auto} .wi-share-card-actions .btn{ flex:1;min-width:0;justify-content:center;gap:5px; padding:9px 10px!important;min-height:36px; font:700 12px var(--ui)!important;letter-spacing:.01em; white-space:nowrap;line-height:1 } .wi-share-card-actions .btn span{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap } .wi-share-card-actions .btn svg{flex:none} .wi-share-wa{ background:#25d366!important;color:#fff!important;border:0!important } .wi-share-wa:hover{background:#20b95a!important} [data-wi-share-copy="url"]{ background:#fff!important;color:var(--strong)!important;border:1.5px solid var(--border)!important } [data-wi-share-copy="url"]:hover{border-color:var(--orange)!important;color:var(--orange-deep)!important} [data-wi-share-copy="msg"]{ background:var(--orange)!important;color:#fff!important;border:0!important } [data-wi-share-copy="msg"]:hover{background:var(--orange-deep)!important} @media(max-width:420px){ .wi-share-card-actions .btn span{display:none} .wi-share-card-actions .btn{min-width:36px} } [data-wi-share-copy].is-ok{ background:#eaf6ec!important;color:#2e7d43!important;border-color:transparent!important } /* Product search + infinite scroll */ .wi-share-products-head{ display:flex;align-items:center;justify-content:space-between; gap:14px;flex-wrap:wrap;margin-bottom:6px } .wi-share-search{ position:relative;display:flex;align-items:center; background:#fff;border:1.5px solid var(--border);border-radius:999px; padding:0 12px;min-width:240px;flex:1;max-width:360px } .wi-share-search svg{color:var(--soft);flex:none} .wi-share-search input{ flex:1;min-width:0;border:0;background:transparent;padding:10px 8px; font:14px var(--ui);color:var(--strong);outline:none } .wi-share-search:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px rgba(198,90,28,.14)} .wi-share-search-clear{ border:0;background:transparent;cursor:pointer;color:var(--soft); font:400 20px/1 var(--ui);padding:0 6px;border-radius:999px } .wi-share-search-clear:hover{color:var(--strong);background:var(--page,#fdfbf7)} .wi-share-empty{ text-align:center;color:var(--soft);font:14px var(--ui); padding:28px 12px;margin:0 } .wi-share-more{ display:flex;align-items:center;justify-content:center;gap:10px; padding:20px 12px;color:var(--soft);font:600 13px var(--ui) } .wi-share-more-spinner{ width:16px;height:16px;border-radius:999px; border:2px solid var(--border);border-top-color:var(--orange); animation:wi-spin .8s linear infinite;flex:none;opacity:0 } .wi-share-more.is-loading .wi-share-more-spinner{opacity:1} @media(max-width:640px){ .wi-share-products-head{flex-direction:column;align-items:stretch} .wi-share-search{max-width:none} } /* ---------- Mobile tab bar: professional icon-first layout ---------- */ @media(max-width:640px){ .wi-aff-tabs{ gap:4px;padding:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scrollbar-width:none } .wi-aff-tabs::-webkit-scrollbar{display:none} .wi-aff-tab{ flex:1 0 auto; min-width:74px; max-width:none; flex-direction:column; gap:4px;padding:10px 8px; font-size:11px;letter-spacing:.02em; scroll-snap-align:start } .wi-aff-tab svg{width:20px;height:20px} .wi-aff-tab span{ max-width:100%;font-size:11px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis } .wi-aff-tab em{ position:absolute;top:4px;right:4px; padding:1px 5px;font-size:9px; background:var(--coral-deep);color:#fff!important } .wi-aff-tab em.is-alert{background:var(--coral-deep);color:#fff!important} .wi-aff-tab.is-on em, .wi-aff-tab.is-on em.is-alert{background:#fff;color:var(--orange-deep)!important} .wi-aff-tab{position:relative} } @media(max-width:400px){ .wi-aff-tab{min-width:64px;padding:9px 6px} .wi-aff-tab svg{width:18px;height:18px} .wi-aff-tab span{font-size:10.5px} } /* ------------------------------------------------------------------- * Dashboard tab bar * ---------------------------------------------------------------- */ .wi-aff-tabs{ display:flex;gap:4px;flex-wrap:wrap; margin:22px 0 18px;padding:6px; background:#fff;border:1px solid var(--border);border-radius:16px; box-shadow:0 1px 0 rgba(0,0,0,.03),0 12px 30px -18px rgba(24,16,32,.12) } .wi-aff-tab{ display:inline-flex;align-items:center;gap:8px; padding:10px 16px;border-radius:12px; background:transparent;border:0;cursor:pointer; font:700 13px var(--ui);color:var(--soft);letter-spacing:.01em; transition:background .18s ease,color .18s ease; position:relative;flex:1;justify-content:center;min-width:0 } .wi-aff-tab svg{color:currentColor;flex:none} .wi-aff-tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wi-aff-tab em{ font-style:normal;font:700 11px var(--ui); padding:2px 8px;border-radius:999px; background:var(--page,#fdfbf7);color:var(--soft) } .wi-aff-tab em.is-alert{background:var(--cream);color:var(--orange-deep)} .wi-aff-tab:hover{background:var(--page,#fdfbf7);color:var(--strong)} .wi-aff-tab.is-on{ background:linear-gradient(180deg,var(--orange),var(--orange-deep)); color:#fff; box-shadow:0 6px 16px rgba(198,90,28,.22) } .wi-aff-tab.is-on em, .wi-aff-tab.is-on em.is-alert{background:rgba(255,255,255,.24);color:#fff} .wi-aff-tab:focus-visible{outline:2px solid var(--orange);outline-offset:2px} @media(max-width:640px){ .wi-aff-tabs{gap:2px;padding:4px} .wi-aff-tab{padding:9px 10px;font-size:12px} .wi-aff-tab em{padding:1px 6px;font-size:10px} } /* Tab panels — a small margin, no other framing (each panel's inner sections carry their own borders). */ .wi-aff-panel{display:block} .wi-aff-panel[hidden]{display:none!important} .wi-aff-panel > *:first-child{margin-top:0} .wi-aff-panel > *+*{margin-top:18px} /* Admin preview banner — sits above the dashboard when a shop manager opens someone else's dashboard via "View dashboard". */ .wi-aff-preview-banner{ display:flex;align-items:center;justify-content:space-between;gap:14px; margin:0 0 16px;padding:12px 18px; background:linear-gradient(180deg,#fff8e1,#fff3d6); border:1px solid #f3d68a;color:#8a5b0f; border-radius:14px;font:600 13px var(--ui); flex-wrap:wrap } .wi-aff-preview-banner a{ color:#8a5b0f;text-decoration:none;font-weight:700; padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.6); border:1px solid rgba(138,91,15,.24) } .wi-aff-preview-banner a:hover{background:#fff} /* ------------------------------------------------------------------- * Contrast fix — the my-account "p" reset above was overriding the * white terms text on the dark purple hero card. Force white back on. * ---------------------------------------------------------------- */ body .woocommerce-account.logged-in .woocommerce-MyAccount-content .wi-hero-card p, body .woocommerce-account.logged-in .woocommerce-MyAccount-content .wi-hero-card-terms{ color:rgba(255,255,255,.88)!important } body .woocommerce-account.logged-in .woocommerce-MyAccount-content .wi-hero-card a, body .woocommerce-account.logged-in .woocommerce-MyAccount-content .wi-hero-card b{color:#fff!important} /* ------------------------------------------------------------------- * Full-page influence view (?wi_full=1) — no sidebar, full width * ---------------------------------------------------------------- */ body.wi-aff-full .wi-page-title{display:none} body.wi-aff-full.logged-in .woocommerce-account.logged-in .woocommerce{ grid-template-columns:minmax(0,1fr)!important; max-width:1200px } body.wi-aff-full .wi-account-nav, body.wi-aff-full .woocommerce-MyAccount-navigation{display:none!important} body.wi-aff-full .woocommerce-MyAccount-content{ max-width:none!important;padding:28px 32px!important } /* Standalone dashboard route — the Influence endpoint always renders as a full-page experience: no WC My Account sidebar, no other tabs, just the dashboard. Anything the WC template would have output is suppressed because our template_redirect short-circuits before it. */ body.wi-aff-standalone .wi-page-title, body.wi-aff-standalone .woocommerce-account, body.wi-aff-standalone .woocommerce-MyAccount-navigation, body.wi-aff-standalone .wi-account-nav{display:none!important} .wi-aff-standalone-view{ padding:32px 0 64px; background:linear-gradient(180deg,var(--page,#fdfbf7) 0%,#fff 240px) } .wi-aff-standalone-view .c{max-width:1200px;padding:0 24px} @media(max-width:720px){ .wi-aff-standalone-view{padding:18px 0 44px} .wi-aff-standalone-view .c{padding:0 14px} } /* ================================================================ * Dashboard summary — compact points card at the top of My Account * ================================================================ */ .wi-dash-points{ display:grid;grid-template-columns:1.05fr 1fr;gap:20px; margin:0 0 26px;align-items:stretch } @media(max-width:820px){.wi-dash-points{grid-template-columns:1fr}} .wi-dash-points-hero{ background:linear-gradient(160deg,#5a3ea3 0%,#3f2678 100%); color:#fff;border-radius:22px;padding:24px 26px; position:relative;overflow:hidden; box-shadow:0 12px 30px -14px rgba(63,38,120,.32); display:flex;flex-direction:column;gap:10px } .wi-dash-points-hero::after{ content:"";position:absolute;right:-40px;bottom:-40px; width:160px;height:160px;border-radius:999px; background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%); pointer-events:none } .wi-dash-points-head{display:flex;justify-content:space-between;align-items:center;gap:12px} .wi-dash-points-kicker{ font:700 10.5px var(--ui);letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.72) } .wi-dash-points-tier{ font:700 11.5px var(--ui);letter-spacing:.06em;text-transform:uppercase; background:rgba(255,255,255,.18);color:#fff; padding:5px 10px;border-radius:999px } .wi-dash-points-figure{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:4px} .wi-dash-points-figure strong{font:800 46px/1 var(--disp);letter-spacing:-.03em;color:#fff} .wi-dash-points-figure span{font:500 13.5px var(--ui);color:rgba(255,255,255,.85)} .wi-dash-points-bar{ position:relative;height:7px;border-radius:999px; background:rgba(255,255,255,.16);overflow:hidden;margin-top:6px } .wi-dash-points-bar span{ position:absolute;left:0;top:0;height:100%;border-radius:999px; background:linear-gradient(90deg,var(--orange),var(--orange-deep)); transition:width .5s cubic-bezier(.4,0,.2,1) } .wi-dash-points-next{font:600 12.5px var(--ui);color:rgba(255,255,255,.88)} .wi-dash-points-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px} .wi-dash-points-btn{ display:inline-flex;align-items:center;justify-content:center; padding:10px 18px;border-radius:999px; background:#fff;color:#3f2678; font:800 12.5px var(--ui);letter-spacing:.02em;text-decoration:none; transition:transform .18s ease,box-shadow .18s ease } .wi-dash-points-btn:hover{ transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18); color:#3f2678;text-decoration:none } .wi-dash-points-link{ font:600 12.5px var(--ui);color:rgba(255,255,255,.88);text-decoration:none } .wi-dash-points-link:hover{color:#fff;text-decoration:underline} .wi-dash-points-side{ background:#fff;border:1px solid var(--border);border-radius:22px; padding:22px 24px;box-shadow:0 1px 0 rgba(0,0,0,.03); display:flex;flex-direction:column;gap:10px } .wi-dash-points-side h3{font:700 14px var(--disp);color:var(--strong);margin:0} .wi-dash-points-side h3 + ul{margin:-4px 0 4px} .wi-dash-points-side ul{list-style:none;padding:0;margin:0;display:grid;gap:8px} .wi-dash-points-side li{ display:flex;justify-content:space-between;gap:12px; font:500 13px var(--ui);color:var(--text) } .wi-dash-points-side li b{color:var(--strong);font-weight:700} .wi-dash-points-recent li span{display:flex;flex-direction:column;gap:1px} .wi-dash-points-recent li small{color:var(--soft);font:400 11.5px var(--ui)} .wi-dash-points-recent li b.is-plus{color:#2E7D43} .wi-dash-points-recent li b.is-minus{color:#a23036} /* ================================================================ * Influence Points tab — purple hero + white "How to earn" card * ================================================================ */ .wi-points{display:block} .wi-points-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:22px; align-items:start } @media(max-width:820px){.wi-points-grid{grid-template-columns:1fr}} /* --- Purple hero card --- */ .wi-points-hero{ background:linear-gradient(160deg,#5a3ea3 0%,#3f2678 100%); color:#fff; border-radius:22px; padding:26px 28px; box-shadow:0 12px 30px -12px rgba(63,38,120,.36); position:relative;overflow:hidden } .wi-points-hero::after{ content:"";position:absolute;right:-40px;bottom:-40px; width:180px;height:180px;border-radius:999px; background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%); pointer-events:none } .wi-points-hero-label{ display:inline-block; font:700 11px var(--ui);letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.72);margin-bottom:12px } .wi-points-hero-figure{ display:block; font:800 clamp(46px,7vw,68px)/1 var(--disp); letter-spacing:-.03em;color:#fff; margin-bottom:14px } .wi-points-hero-value{ font:500 13.5px/1.55 var(--ui);color:rgba(255,255,255,.85); margin-bottom:20px } .wi-points-tier{ position:relative;height:8px;border-radius:999px; background:rgba(255,255,255,.16);overflow:hidden; margin-bottom:8px } .wi-points-tier-bar{ position:absolute;left:0;top:0;height:100%; background:linear-gradient(90deg,var(--orange),var(--orange-deep)); border-radius:999px; transition:width .5s cubic-bezier(.4,0,.2,1) } .wi-points-tier-label{ font:600 12.5px var(--ui);color:rgba(255,255,255,.88) } .wi-points-tier-label--top{font-weight:700} .wi-points-hero-cta{ display:inline-flex;align-items:center;justify-content:center; margin-top:18px;padding:10px 20px;border-radius:999px; background:#fff;color:#3f2678; font:800 13px var(--ui);letter-spacing:.02em; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease } .wi-points-hero-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.18); color:#3f2678;text-decoration:none } /* --- White "How to earn" + history card --- */ .wi-points-earn{ background:#fff;border:1px solid var(--border);border-radius:22px; padding:24px 26px; box-shadow:0 1px 0 rgba(0,0,0,.03) } .wi-points-earn h3{ font:800 16px var(--disp);color:var(--strong); margin:0 0 12px;letter-spacing:-.01em } .wi-points-earn-list,.wi-points-history-list{ list-style:none;margin:0;padding:0 } .wi-points-earn-list li,.wi-points-history-list li{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:10px 0;border-top:1px solid rgba(0,0,0,.05); font:14px var(--ui);color:var(--text) } .wi-points-earn-list li:first-child, .wi-points-history-list li:first-child{border-top:0} .wi-points-earn-list b, .wi-points-history-list b{ font:800 13.5px var(--ui);color:var(--strong); white-space:nowrap } .wi-points-history-list li span{ display:flex;flex-direction:column;gap:2px;min-width:0 } .wi-points-history-list li small{ font:400 11.5px var(--ui);color:var(--soft) } .wi-points-history-list b.is-plus{color:#2E7D43} .wi-points-history-list b.is-minus{color:#a23036} .wi-points-empty{ margin:0;padding:14px 0; font:400 13.5px var(--ui);color:var(--soft);font-style:italic } /* History card — full width below the hero + earn row */ .wi-points-history-wrap{margin-top:20px} .wi-points-history-wrap > h3:first-child{margin-top:0!important} /* History section — heading with record-count pill + AJAX pager */ .wi-points-hist-head{ display:flex;align-items:center;gap:10px;flex-wrap:wrap } .wi-points-hist-count{ display:inline-flex;align-items:center; padding:3px 10px;border-radius:999px; background:var(--cream);border:1px solid var(--border); font:700 11px var(--ui);letter-spacing:.04em;text-transform:uppercase; color:var(--text) } .wi-points-history{ background:#fff;border:1px solid var(--border);border-radius:16px; padding:6px 16px;margin-top:8px; transition:opacity .2s ease } .wi-points-history.is-loading{opacity:.5;pointer-events:none} .wi-points-history .wi-points-history-list{max-height:520px;overflow-y:auto;padding-right:4px} .wi-points-history .wi-points-history-list::-webkit-scrollbar{width:6px} .wi-points-history .wi-points-history-list::-webkit-scrollbar-thumb{background:var(--lilac);border-radius:6px} .wi-points-pager{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 4px 8px; border-top:1px solid var(--border);margin-top:8px } .wi-points-pager-btn{ appearance:none;-webkit-appearance:none; border:1.5px solid var(--lilac);background:#fff;color:var(--strong); border-radius:999px;padding:8px 16px;cursor:pointer; font:700 12.5px var(--ui);letter-spacing:.02em; transition:background .15s ease,border-color .15s ease,color .15s ease } .wi-points-pager-btn:hover:not(:disabled){background:var(--orange);border-color:var(--orange);color:#fff} .wi-points-pager-btn:disabled{opacity:.4;cursor:not-allowed} .wi-points-pager-meta{ font:700 12.5px var(--ui);color:var(--strong);letter-spacing:.02em } @media(max-width:480px){ .wi-points-hero{padding:22px 20px;border-radius:18px} .wi-points-earn{padding:20px;border-radius:18px} } /* ================================================================ * My Account — pill nav (matches Points tab UI) * ================================================================ */ body .woocommerce-account.logged-in .woocommerce-MyAccount-navigation.wi-account-nav{ background:transparent;border:0;padding:0;box-shadow:none } body .woocommerce-account.logged-in .wi-account-nav ul{ display:flex;flex-wrap:wrap;gap:8px; padding:0;margin:0;list-style:none } body .woocommerce-account.logged-in .wi-account-nav ul li{ list-style:none;margin:0;padding:0 } body .woocommerce-account.logged-in .wi-account-nav ul li a{ display:inline-flex;align-items:center;gap:6px; padding:9px 16px;border-radius:999px; background:#fff;border:1px solid var(--border); font:600 13.5px var(--ui);color:var(--strong); text-decoration:none; transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease } body .woocommerce-account.logged-in .wi-account-nav ul li a:hover{ background:var(--cream);border-color:var(--orange-deep);color:var(--orange-deep); transform:translateY(-1px) } body .woocommerce-account.logged-in .wi-account-nav ul li.is-active > a, body .woocommerce-account.logged-in .wi-account-nav ul li.woocommerce-MyAccount-navigation-link--is-active > a{ background:var(--orange);color:#fff;border-color:var(--orange); box-shadow:0 6px 14px rgba(198,90,28,.22) } body .woocommerce-account.logged-in .wi-account-nav ul li i{ display:inline-flex;align-items:center;justify-content:center } /* ================================================================= * My Account — mobile polish * Larger touch targets, scroll-snap nav, generous card padding, * comfortable tap-friendly buttons everywhere. * ============================================================== */ /* Tablet + mobile: nav becomes a horizontal scroll strip */ @media(max-width:900px){ body .woocommerce-account.logged-in .wi-account-nav{ margin:0 -16px 18px;padding:0 16px 4px; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none } body .woocommerce-account.logged-in .wi-account-nav::-webkit-scrollbar{display:none} body .woocommerce-account.logged-in .wi-account-nav ul{ flex-wrap:nowrap;gap:8px;padding-bottom:2px } body .woocommerce-account.logged-in .wi-account-nav ul li{ flex:0 0 auto;scroll-snap-align:start } body .woocommerce-account.logged-in .wi-account-nav ul li a{ white-space:nowrap;padding:11px 18px;font-size:14px;min-height:44px } } /* Phone: cards, headings, spacing tuned for a narrow viewport */ @media(max-width:640px){ body .woocommerce-account.logged-in .woocommerce{padding:0 14px!important} body .woocommerce-account.logged-in .woocommerce-MyAccount-content{ padding:20px 16px;border-radius:18px } body .woocommerce-account.logged-in .woocommerce-MyAccount-content h1{font:800 22px/1.2 var(--disp)} body .woocommerce-account.logged-in .woocommerce-MyAccount-content h2{font:800 18px/1.25 var(--disp);margin:18px 0 10px} body .woocommerce-account.logged-in .woocommerce-MyAccount-content h3{font:800 15px/1.3 var(--disp);margin:16px 0 8px} body .woocommerce-account.logged-in .woocommerce-MyAccount-content p{font-size:14px} /* Every actionable control is at least 44px tall & spans width when there's no room to sit side-by-side. */ body .woocommerce-account.logged-in .woocommerce-MyAccount-content .button, body .woocommerce-account.logged-in .woocommerce-MyAccount-content .btn, body .woocommerce-account.logged-in .woocommerce-MyAccount-content button[type=submit], body .woocommerce-account.logged-in .woocommerce-MyAccount-content input[type=submit]{ min-height:46px;padding:0 22px;font-size:14.5px; width:100%;justify-content:center } /* Inline pairs (Save / Cancel) still sit next to each other via flex */ body .woocommerce-account.logged-in .woocommerce-MyAccount-content .form-row + .form-row{margin-top:12px} /* Address / edit-account forms — single column, full-width fields */ body .woocommerce-account.logged-in .woocommerce-MyAccount-content input[type=text], body .woocommerce-account.logged-in .woocommerce-MyAccount-content input[type=email], body .woocommerce-account.logged-in .woocommerce-MyAccount-content input[type=tel], body .woocommerce-account.logged-in .woocommerce-MyAccount-content input[type=password], body .woocommerce-account.logged-in .woocommerce-MyAccount-content input[type=number], body .woocommerce-account.logged-in .woocommerce-MyAccount-content select, body .woocommerce-account.logged-in .woocommerce-MyAccount-content textarea{ min-height:46px;font-size:15px;padding:12px 14px;border-radius:12px } body .woocommerce-account.logged-in .woocommerce-MyAccount-content textarea{min-height:110px} } /* Orders "cards" — action buttons stack full-width instead of squeezing */ @media(max-width:640px){ body .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr td.woocommerce-orders-table__cell-order-actions{ display:flex;flex-direction:column;gap:8px; padding-top:12px;border-top:1px dashed var(--border) } body .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr td.woocommerce-orders-table__cell-order-actions::before{display:none} body .woocommerce-account .woocommerce-MyAccount-content table.shop_table .button, body .woocommerce-account .woocommerce-MyAccount-content table.shop_table a.button{ width:100%;justify-content:center;min-height:44px } } /* Dashboard "points" hero card — tighter padding but keep the CTA comfortably tappable */ @media(max-width:640px){ .wi-dash-points{gap:14px;margin-bottom:22px} .wi-dash-points-hero{padding:20px 18px;border-radius:18px} .wi-dash-points-hero .wi-dash-points-figure strong{font-size:36px} .wi-dash-points-btn{width:100%;min-height:46px;padding:12px 18px;justify-content:center} .wi-dash-points-actions{gap:8px} .wi-dash-points-side{padding:18px 16px;border-radius:18px} } /* Points tab — hero card, tier and history collapse cleanly */ @media(max-width:640px){ .wi-points-hero-figure{font-size:44px!important;margin-bottom:12px!important} .wi-points-hero-cta{width:100%;justify-content:center;min-height:46px} .wi-points-history{padding:4px 12px} .wi-points-pager{flex-wrap:wrap;gap:8px} .wi-points-pager-btn{flex:1;min-height:44px} .wi-points-pager-meta{flex-basis:100%;text-align:center;order:-1} } /* Woo notices — better tap targets on the "Continue shopping" button */ @media(max-width:640px){ body .woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-message, body .woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-info, body .woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-error{ flex-direction:column;align-items:stretch;gap:10px;padding:14px 16px } body .woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-message .button, body .woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-info .button{ width:100%;justify-content:center;min-height:44px;order:2 } } /* Standalone affiliate view — mobile-friendly */ @media(max-width:640px){ body.wi-aff-standalone .wi-aff-standalone-view .c{padding:0 14px} body.wi-aff-standalone .wi-aff{padding:20px 16px!important;border-radius:18px} }