/* ========================================================================== [account_login] — вхід / реєстрація у попапі Elementor (inc/woocommerce/account.php) Кнопки — класи Elementor (Site Settings → Buttons). Поля — свої, на токенах. ========================================================================== */ .account-login{ --al-gap:14px; --al-field:48px; display:flex;flex-direction:column;gap:var(--al-gap); color:var(--theme-text); font:400 14px/1.4 var(--theme-font), sans-serif; } /* вкладки */ .account-login__tabs{ display:flex;gap:4px;padding:4px; border-radius:999px;background:var(--theme-surface-alt); } .account-login button.account-login__tab{ /* скид стилів кнопок Elementor */ all:unset;box-sizing:border-box; flex:1;padding:10px 12px; border-radius:999px;text-align:center;cursor:pointer; font:500 14px/1 var(--theme-font), sans-serif;color:var(--theme-text-muted); transition:background-color .2s ease,color .2s ease; } .account-login button.account-login__tab.is-active{background:var(--theme-light);color:var(--theme-text-strong);box-shadow:var(--theme-shadow)} /* форма */ .account-login__form{display:flex;flex-direction:column;gap:var(--al-gap);margin:0} .account-login__form[hidden]{display:none} .account-login__field{display:flex;flex-direction:column;gap:6px;margin:0} .account-login__field label{font-size:13px;color:var(--theme-text-muted)} .account-login .account-login__field input{ /* !important — інакше перемагають поля з Kit Elementor (.elementor-kit-N input…: свій радіус, рамка, 12px). Вигляд — як у полях вікна «Вказати адресу». 16px — iOS не збільшує сторінку при фокусі. */ box-sizing:border-box !important;width:100% !important;min-height:var(--al-field) !important;margin:0 !important;padding:0 16px !important; border:1px solid var(--theme-line) !important;border-radius:var(--theme-radius-lg) !important; background:var(--theme-light) !important;color:var(--theme-text) !important; font:400 16px/1.2 var(--theme-font), sans-serif !important;letter-spacing:0 !important; box-shadow:none !important;-webkit-appearance:none;appearance:none; } .account-login .account-login__field input:focus{border-color:var(--theme-text-strong) !important;outline:none} /* попап із формою входу — заокруглений, навіть якщо в налаштуваннях попапу радіус не задано */ .elementor-popup-modal .dialog-widget-content:has(.account-login){border-radius:var(--theme-radius-lg) !important;overflow:hidden} /* [account_login guest="button"] — для бокового меню: текст + кнопка, форма відкривається попапом */ .account-login--teaser{align-items:center;gap:16px;text-align:center} .account-login__teaser{margin:0;max-width:300px;font-size:14px;line-height:1.45;color:var(--theme-text)} .account-login--teaser .account-login__open{align-self:center} .account-login__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font-size:13px} .account-login__remember{display:inline-flex;align-items:center;gap:8px;cursor:pointer} .account-login__remember input{margin:0;accent-color:var(--theme-text-strong)} .account-login__lost{color:var(--theme-text-muted);text-decoration:underline;text-underline-offset:3px} .account-login__lost:hover{color:var(--theme-text)} .account-login__hint, .account-login__privacy{margin:0;font-size:13px;color:var(--theme-text-muted)} .account-login__privacy p{margin:0} .account-login__error{ margin:0;padding:10px 14px;border-radius:var(--theme-radius); background:var(--theme-accent-soft);color:var(--theme-error);font-size:13px; } .account-login__error[hidden]{display:none} /* кнопка — вигляд з Elementor, тут лише ширина й стан */ .account-login .account-login__submit{display:flex;justify-content:center;width:100%;box-sizing:border-box} .account-login__form.is-busy .account-login__submit{opacity:var(--theme-disabled-opacity);pointer-events:none} /* ---------- залогінений: три круглі кнопки (ACCOUNT_ACTIONS) + «Вийти» ---------- Як у меню sushiicons: кружечок з іконкою, підпис, під «Кабінетом» — телефон. */ .account-login--in{align-items:center} .account-actions{ --aa-size:64px; /* ← ПРОЄКТ діаметр кружечка */ --aa-bg:var(--theme-light); /* ← ПРОЄКТ фон кружечка (панель — бежева) */ --aa-color:var(--theme-text-strong); /* ← ПРОЄКТ іконка */ display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px; width:100%;max-width:360px;margin:4px auto 0; } .account-actions__item{ display:flex;flex-direction:column;align-items:center;gap:8px; color:var(--theme-text);text-decoration:none;text-align:center; } .account-actions__icon{ display:grid;place-items:center; width:var(--aa-size);height:var(--aa-size); border-radius:50%;background:var(--aa-bg);color:var(--aa-color); box-shadow:var(--theme-shadow); transition:transform .2s ease,background-color .2s ease,color .2s ease; } .account-actions__icon svg{width:26px;height:26px} .account-actions__item:hover .account-actions__icon{transform:translateY(-2px);background:var(--theme-text-strong);color:var(--theme-on-accent)} .account-actions__label{font-size:14px;font-weight:500;line-height:1.2;color:var(--theme-text)} .account-actions__sub{margin-top:-4px;font-size:12px;line-height:1.2;color:var(--theme-text-muted)} .account-login__hello{margin:0;color:var(--theme-text)} .account-login__logout{align-self:center;font-size:13px;color:var(--theme-text-muted);text-decoration:underline;text-underline-offset:3px} .account-login__logout:hover{color:var(--theme-text)} /* ========================================================================== Сторінка кабінету — [woocommerce_my_account] (inc/woocommerce/account.php) Зліва картка користувача + меню-картки з іконками, справа — біла картка розділу. Контейнер Elementor зі шорткодом — без фону (картки білі самі, сторінка бежева). ========================================================================== */ .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation){ /* саме обгортка кабінету, а не інші .woocommerce на сторінці */ --ac-side:360px; /* ← ПРОЄКТ ширина лівої колонки */ --ac-gap:16px; /* ← ПРОЄКТ між картками меню */ --ac-col-gap:40px; /* ← ПРОЄКТ між колонками */ --ac-card:var(--e-global-color-5c0a9bc, #F1EDE9); /* ← ПРОЄКТ фон карток — бежевий фон сайту (Kit) */ --ac-shadow:none; /* ← ПРОЄКТ тінь карток; var(--theme-shadow) — повернути */ --ac-radius:var(--theme-radius-lg); --ac-icon:var(--theme-text-strong); display:grid;grid-template-columns:minmax(0, var(--ac-side)) minmax(0, 1fr); grid-template-rows:auto auto 1fr; /* високий розділ справа не розсуває картку користувача й меню — запас іде в останній рядок */ column-gap:var(--ac-col-gap);align-items:start; color:var(--theme-text);font-family:var(--theme-font), sans-serif; } /* WooCommerce виводить картку користувача (наш хук) ПЕРЕД