/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

/* === pixl-portal v2 === */
/* WooCommerce client portal (login + My Account) restyle, matched to the
   pixl.my static site. Scoped to body.woocommerce-account plus site-wide
   header/topbar/footer selectors (only 4 pages exist on this install). */

:root {
  --paper: #F7F8F6;
  --ink: #161B1A;
  --ink-soft: #5A6663;
  --teal: #0B7A6E;
  --teal-bright: #11AEA0;
  --hairline: rgba(22, 27, 26, .14);
  --error: #B3372F;
  --font: "Satoshi", "Segoe UI", system-ui, sans-serif;
  --container: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

/* ---------- Base ---------- */
body.woocommerce-account { font-family: var(--font); font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem); line-height: 1.65; color: var(--ink); background: var(--paper); }
body.woocommerce-account ::selection { background: var(--teal); color: #FFFFFF; }
body.woocommerce-account :focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* ---------- Topbar (site-wide, PHP-emitted) ---------- */
#pixl-topbar { background: var(--teal); height: 40px; }
#pixl-topbar .pixl-topbar-inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); height: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; }
#pixl-topbar a { font-size: .85rem; font-weight: 500; color: #FFFFFF; text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; }
#pixl-topbar a:hover, #pixl-topbar a:focus-visible { border-bottom-color: #FFFFFF; }
#pixl-topbar :focus-visible { outline-color: #FFFFFF; }

/* ---------- Header ---------- */
body.woocommerce-account .site-header { background: var(--paper); border-bottom: 1px solid var(--hairline); }
body.woocommerce-account .site-branding { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); height: 64px; display: flex; align-items: center; }
body.woocommerce-account .site-branding img.custom-logo { display: none; }
body.woocommerce-account .site-branding a { text-decoration: none; }
body.woocommerce-account .site-title,
body.woocommerce-account .custom-logo-link { font-family: var(--font); font-size: 1.6rem; font-weight: 900; letter-spacing: -.02em; line-height: 1; color: var(--ink); text-transform: lowercase; }
body.woocommerce-account .site-title::after,
body.woocommerce-account .custom-logo-link::after { content: ""; display: inline-block; width: .34em; height: .34em; margin-left: .18em; vertical-align: baseline; background: var(--teal-bright); }

body.woocommerce-account .page-header,
body.woocommerce-account .entry-title,
body.woocommerce-account .woocommerce > h2 { display: none; }

body.woocommerce-account .page-content { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); padding-block: clamp(2rem, 5vw, 3.5rem) clamp(4rem, 8vw, 6rem); }

body.woocommerce-account .site-description { display: none; }

/* ---------- Hero (PHP-emitted, both variants) ---------- */
#pixl-portal-hero { position: relative; padding-top: clamp(3rem, 6vw, 6rem); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
#pixl-portal-hero h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 900; letter-spacing: -.03em; line-height: .98; color: var(--ink); }
#pixl-portal-hero .accent { color: var(--teal); }
#pixl-portal-hero .sub { max-width: 34ch; margin-top: .9rem; font-size: 1.05rem; color: var(--ink-soft); }

#pixl-portal-hero .px { display: none; position: fixed; pointer-events: none; background: var(--ink); z-index: 1; }
#pixl-portal-hero::before,
#pixl-portal-hero::after { content: ""; display: none; position: fixed; pointer-events: none; z-index: 1; }
@media (min-width: 64rem) {
  /* logged-out only: the motif must never float over dashboard content */
  body:not(.logged-in) #pixl-portal-hero .px,
  body:not(.logged-in) #pixl-portal-hero::before,
  body:not(.logged-in) #pixl-portal-hero::after { display: block; }
  #pixl-portal-hero::before { top: 14%; right: 12%; width: 64px; height: 64px; background: #D9DDDB; }
  #pixl-portal-hero::after { top: 60%; right: 22%; width: 22px; height: 22px; background: var(--teal); }
  #pixl-portal-hero .px-1 { top: 26%; right: 8%; width: 30px; height: 30px; background: var(--teal-bright); }
  #pixl-portal-hero .px-2 { top: 42%; right: 18%; width: 14px; height: 14px; background: var(--ink); }
  #pixl-portal-hero .px-3 { top: 70%; right: 9%; width: 40px; height: 40px; background: #7CCFC7; }
  #pixl-portal-hero .px-4 { top: 84%; right: 26%; width: 18px; height: 18px; background: #D9DDDB; }
}

/* ---------- Login form (logged-out) ---------- */
body.woocommerce-account .woocommerce-form-login { max-width: 30rem; }
body.woocommerce-account .woocommerce-form-row label { display: block; margin-bottom: .4rem; font-size: .9rem; font-weight: 500; color: var(--ink); }
body.woocommerce-account .woocommerce-form-row .required { color: var(--teal); }
body.woocommerce-account .woocommerce-Input.input-text { width: 100%; background: #FFFFFF; border: 1px solid var(--hairline); padding: .8rem .9rem; font-family: var(--font); font-size: 1rem; color: var(--ink); border-radius: 0; }
body.woocommerce-account .woocommerce-Input.input-text:focus { border-color: var(--teal); outline: 2px solid var(--teal); outline-offset: 3px; }
body.woocommerce-account .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink-soft); margin-bottom: 1rem; }
body.woocommerce-account .woocommerce-form-login__submit { display: block; width: 100%; padding: .95rem 1.9rem; background: var(--ink); color: var(--paper); border: none; border-radius: 0; font-family: var(--font); font-size: 1rem; font-weight: 500; cursor: pointer; }
body.woocommerce-account .woocommerce-form-login__submit:hover,
body.woocommerce-account .woocommerce-form-login__submit:focus-visible { background: var(--teal); color: #FFFFFF; }
body.woocommerce-account .woocommerce-form-login__submit:active { transform: translateY(1px); }
body.woocommerce-account .woocommerce-LostPassword a { display: inline-block; margin-top: 1rem; font-size: .9rem; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); }
body.woocommerce-account .woocommerce-LostPassword a:hover,
body.woocommerce-account .woocommerce-LostPassword a:focus-visible { color: var(--teal); border-bottom-color: var(--teal); }

/* ---------- Logged-in dashboard grid ---------- */
body.logged-in.woocommerce-account .page-content .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: 0 3rem; align-items: start; }
/* Woo prints its notices wrapper as the first child of .woocommerce - span it
   across both grid columns or it collapses into the 240px nav track. */
body.logged-in.woocommerce-account .page-content .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; }
body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation-link a { display: block; padding: .7rem 0; border-bottom: 1px solid var(--hairline); color: var(--ink-soft); font-weight: 500; text-decoration: none; }
body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover { color: var(--ink); }
body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a { color: var(--ink); }
body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .55em; background: var(--teal); vertical-align: middle; }

/* ---------- Dashboard content: tables, buttons, notices ---------- */
body.woocommerce-account table.shop_table { width: 100%; border-collapse: collapse; font-size: .95rem; }
body.woocommerce-account table.shop_table th,
body.woocommerce-account table.shop_table td { text-align: left; padding: .85rem .6rem; border: none; border-bottom: 1px solid var(--hairline); }
body.woocommerce-account table.shop_table th { font-weight: 700; color: var(--ink); font-size: .9rem; }
body.woocommerce-account table.shop_table td { color: var(--ink-soft); }
body.woocommerce-account table.shop_table .button,
body.woocommerce-account .woocommerce-Button,
body.woocommerce-account a.button { display: inline-block; padding: .45rem .9rem; background: var(--ink); color: var(--paper); font-size: .85rem; font-weight: 500; text-decoration: none; border: none; border-radius: 0; }
body.woocommerce-account table.shop_table .button:hover,
body.woocommerce-account .woocommerce-Button:hover,
body.woocommerce-account a.button:hover,
body.woocommerce-account table.shop_table .button:focus-visible,
body.woocommerce-account .woocommerce-Button:focus-visible { background: var(--teal); color: #FFFFFF; }

body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error { list-style: none; background: var(--paper); border: 1px solid var(--hairline); border-left: 3px solid var(--teal); padding: 1rem 1.2rem; margin-bottom: 1.5rem; color: var(--ink); border-radius: 0; }
body.woocommerce-account .woocommerce-error { border-left-color: var(--error); }
body.woocommerce-account .woocommerce-pagination a { color: var(--ink); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--hairline); }
body.woocommerce-account .woocommerce-pagination a:hover { color: var(--teal); border-bottom-color: var(--teal); }

/* address / edit-account forms (shared woocommerce .form-row) */
body.woocommerce-account .form-row label { display: block; margin-bottom: .4rem; font-size: .9rem; font-weight: 500; }
body.woocommerce-account .form-row input.input-text,
body.woocommerce-account .form-row select { width: 100%; background: #FFFFFF; border: 1px solid var(--hairline); padding: .7rem .8rem; font-family: var(--font); font-size: 1rem; color: var(--ink); border-radius: 0; }
body.woocommerce-account .form-row input.input-text:focus,
body.woocommerce-account .form-row select:focus { border-color: var(--teal); outline: 2px solid var(--teal); outline-offset: 3px; }

/* ---------- Footer ---------- */
body.woocommerce-account .site-footer { border-top: 1px solid var(--hairline); padding-block: 2rem; text-align: center; font-size: .85rem; color: var(--ink-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 48rem) {
  body.logged-in.woocommerce-account .page-content .woocommerce { grid-template-columns: 1fr; gap: 2rem 0; }
}
@media (max-width: 30rem) {
  body.woocommerce-account .site-branding,
  body.woocommerce-account .page-content,
  #pixl-topbar .pixl-topbar-inner { padding-inline: 1.25rem; }
}

/* === pixl-portal v2.1 fixes === */
body.woocommerce-account .site-header { padding: 0; }
body.woocommerce-account .site-branding { justify-content: flex-start; text-align: left; width: 100%; }
body.woocommerce-account .site-title { margin: 0; font-size: 1.6rem; font-weight: 900; letter-spacing: -.02em; }
body.woocommerce-account .site-title a { color: var(--ink); text-decoration: none; font-weight: 900; }
body.woocommerce-account .site-title a:hover,
body.woocommerce-account .site-title a:focus-visible { color: var(--ink); }
body.woocommerce-account .site-title::after { vertical-align: 0; }
body.woocommerce-account form.woocommerce-form-login { background: #FFFFFF; border: 1px solid var(--hairline); border-radius: 0; padding: 1.75rem; }
body.woocommerce-account .woocommerce a { color: var(--ink); }
body.woocommerce-account .woocommerce a:hover { color: var(--teal); }

/* === pixl-portal v2.2 === */
body.woocommerce-account .site-branding { align-items: flex-start; }

/* === pixl-portal v2.3: explicit dashboard grid + spacing rhythm === */
/* Robust placement: don't depend on Woo's child order (an extra child was
   shifting auto-placement). Everything spans full width by default; nav and
   content are pinned side-by-side on row 2 explicitly. */
body.logged-in.woocommerce-account .page-content .woocommerce > * { grid-column: 1 / -1; min-width: 0; }
body.logged-in.woocommerce-account .page-content .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; }
body.logged-in.woocommerce-account .page-content .woocommerce > .woocommerce-MyAccount-content { grid-column: 2; grid-row: 2; min-width: 0; }

/* Consistent vertical rhythm. Login page keeps an airy hero; the dashboard
   is tighter so work starts above the fold. */
#pixl-portal-hero { padding-top: clamp(2rem, 4vw, 4rem); }
body.logged-in.woocommerce-account #pixl-portal-hero { padding-top: clamp(1rem, 2.5vw, 2rem); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
body.logged-in.woocommerce-account .page-content { padding-block-start: 1.25rem; }
body.woocommerce-account .woocommerce-form-row,
body.woocommerce-account .form-row { margin: 0 0 1.15rem; }
body.woocommerce-account .woocommerce-MyAccount-content > *:first-child { margin-top: 0; }
body.woocommerce-account .woocommerce-MyAccount-content p { margin: 0 0 1rem; max-width: 65ch; }
body.woocommerce-account .woocommerce-MyAccount-content p:last-child { margin-bottom: 0; }
body.woocommerce-account .woocommerce-MyAccount-navigation-link:first-child a { padding-top: 0; }

/* Mobile: stack nav above content again (explicit rows must unpin). */
@media (max-width: 48rem) {
  body.logged-in.woocommerce-account .page-content .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; }
  body.logged-in.woocommerce-account .page-content .woocommerce > .woocommerce-MyAccount-content { grid-column: 1; grid-row: 3; }
}

/* === pixl-portal v2.4: two-column login hero (headline left, card right) === */
@media (min-width: 64rem) {
  body.woocommerce-account:not(.logged-in) .page-content { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: center; }
  body.woocommerce-account:not(.logged-in) #pixl-portal-hero { padding-top: 0; margin-bottom: 0; }
  body.woocommerce-account:not(.logged-in) .page-content > .woocommerce { justify-self: end; width: 100%; max-width: 30rem; position: relative; z-index: 2; }
  body.woocommerce-account:not(.logged-in) .woocommerce-form-login { max-width: none; }
  /* motif recedes behind the card; nudge the two card-zone squares outward */
  #pixl-portal-hero .px, #pixl-portal-hero::before, #pixl-portal-hero::after { z-index: 0; }
  #pixl-portal-hero::after { right: 3%; top: 72%; }
  #pixl-portal-hero .px-2 { right: 44%; top: 86%; }
  #pixl-portal-hero .px-4 { right: 40%; top: 12%; }
}

/* === pixl-portal v2.5: composition height + motif tidy === */
@media (min-width: 64rem) {
  body.woocommerce-account:not(.logged-in) .page-content { min-height: calc(100vh - 300px); }
  #pixl-portal-hero .px-2 { right: 7%; top: 40%; }
}

/* === pixl-portal v2.6: own header, nav width fix, notice icon fix === */
/* Theme header + old topbar retired; #pixl-header replaces both. */
body.woocommerce-account .site-header, #pixl-topbar { display: none; }
#pixl-header { background: var(--paper); border-bottom: 1px solid var(--hairline); }
#pixl-header .pixl-header-inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); height: 64px; display: flex; align-items: center; justify-content: space-between; }
#pixl-header .pixl-wordmark { font-family: var(--font); font-size: 1.6rem; font-weight: 900; letter-spacing: -.02em; line-height: 1; color: var(--ink); text-decoration: none; }
#pixl-header .pixl-wordmark::after { content: ""; display: inline-block; width: .34em; height: .34em; margin-left: .18em; background: var(--teal-bright); }
#pixl-header .pixl-header-logout { font-size: .9rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
#pixl-header .pixl-header-logout:hover, #pixl-header .pixl-header-logout:focus-visible { color: var(--teal); border-bottom-color: var(--teal); }

/* Kill Woo's float/width layout inside the grid tracks (root cause of the
   narrow nav, wrapped tabs, marker-on-its-own-line, and short notices). */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; }
body.logged-in.woocommerce-account .page-content .woocommerce { grid-template-columns: 260px 1fr; }

/* Active marker inline-left, never wrapping. */
body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation-link a { display: flex; align-items: center; gap: .55em; white-space: nowrap; }
body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a::before { margin-right: 0; flex: none; }

/* Woo/WCS notice glyphs stamp over the text with our compact padding. */
body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-info::before,
body.woocommerce-account .woocommerce-error::before { content: none; display: none; }

/* No storefront: hide notice buttons that point at the shop. */
body.woocommerce-account .woocommerce-info a.button[href*="/shop"],
body.woocommerce-account .woocommerce-message a.button[href*="/shop"] { display: none; }

/* === pixl-portal v2.7: button text visibility === */
/* v2.1's generic ".woocommerce a" ink color outranked the earlier button
   rule by order, giving ink-on-ink buttons. Restore button text with
   higher specificity, all states. */
body.woocommerce-account .woocommerce a.button,
body.woocommerce-account .woocommerce .woocommerce-Button,
body.woocommerce-account .woocommerce button.button,
body.woocommerce-account .woocommerce input.button,
body.woocommerce-account .woocommerce table.shop_table a.button { color: var(--paper); }
body.woocommerce-account .woocommerce a.button:hover,
body.woocommerce-account .woocommerce a.button:focus-visible,
body.woocommerce-account .woocommerce .woocommerce-Button:hover,
body.woocommerce-account .woocommerce .woocommerce-Button:focus-visible,
body.woocommerce-account .woocommerce button.button:hover,
body.woocommerce-account .woocommerce input.button:hover,
body.woocommerce-account .woocommerce table.shop_table a.button:hover { color: #FFFFFF; }