/* Haute Optique — My Account (design system). Self-contained; scoped to
   .woocommerce-account. Works with XStore's Elementor account widget (nav +
   content are siblings in one .elementor-widget-container) AND the shortcode
   fallback (.woocommerce wrapping .ho-acc-nav + content). */

.woocommerce-account{
	--ho-card:#fff; --ho-border:#e8e8e8; --ho-ink:#1a1a1a; --ho-muted:#6b6b6b;
	--ho-tile:#f2f2f2; --ho-green:#2d6a5a; --ho-red:#e8453c;
	--ho-radius:14px; --ho-shadow:0 2px 16px rgba(0,0,0,.06);
	font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ---- Two-column layout (nav sidebar + content) ---- */
.woocommerce-account .elementor-widget-container:has(> .woocommerce-MyAccount-navigation-wrapper),
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-content){
	display:grid !important;
	grid-template-columns:270px minmax(0,1fr);
	gap:26px;
	align-items:start;
}
.woocommerce-account .woocommerce-MyAccount-content{
	width:auto !important; float:none !important; margin:0 !important; padding:0 !important;
	background:transparent !important; border:none !important; min-width:0;
}

/* ---- Sidebar card (XStore nav wrapper OR our .ho-acc-nav) ---- */
.woocommerce-MyAccount-navigation-wrapper,
.ho-acc-nav{
	background:var(--ho-card) !important; border:1px solid var(--ho-border) !important;
	border-radius:var(--ho-radius) !important; box-shadow:var(--ho-shadow) !important;
	padding:22px !important; width:auto !important; float:none !important; margin:0 !important;
	position:sticky; top:24px;
}

/* User info block */
.MyAccount-user-info,
.ho-acc-me{ display:flex; align-items:center; gap:13px; padding-bottom:18px; border-bottom:1px solid var(--ho-border); margin-bottom:14px; }
.MyAccount-user-info img,
.ho-acc-avatar{ width:50px; height:50px; border-radius:50%; flex-shrink:0; }
.ho-acc-avatar{ background:var(--ho-ink); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; }
.MyAccount-user-name{ font-weight:700; font-size:15px; line-height:1.2; }
.MyAccount-user-info > div > div:last-child{ color:var(--ho-muted); font-size:12.5px; margin-top:3px; word-break:break-word; }
.ho-acc-me-txt b{ display:block; font-size:15px; }
.ho-acc-me-txt span{ display:block; color:var(--ho-muted); font-size:12.5px; margin-top:3px; word-break:break-word; }

/* Nav list */
.woocommerce-MyAccount-navigation ul,
.ho-acc-nav .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.woocommerce-MyAccount-navigation li{ margin:0 !important; border:none !important; padding:0 !important; }
.woocommerce-MyAccount-navigation li a{
	display:flex !important; align-items:center; gap:12px; padding:11px 14px !important; margin:0 !important;
	border-radius:10px; font-size:14px; font-weight:500; color:#333; text-decoration:none; transition:background .15s;
}
.woocommerce-MyAccount-navigation li a:hover{ background:var(--ho-tile); }
.woocommerce-MyAccount-navigation li.is-active a{ background:var(--ho-ink) !important; color:#fff !important; padding:11px 14px !important; }
.woocommerce-MyAccount-navigation li a i,
.woocommerce-MyAccount-navigation li a svg{ width:19px; height:19px; font-size:18px; line-height:1; flex-shrink:0; stroke-width:1.5; }
.woocommerce-MyAccount-navigation li.is-active a i,
.woocommerce-MyAccount-navigation li.is-active a svg{ color:#fff; stroke:#fff; }

/* Logout in red */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout{ margin-top:8px; border-top:1px solid var(--ho-border) !important; padding-top:8px !important; }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a{ color:var(--ho-red); }

/* Prochainement nav items (custom endpoints prefixed ho_soon_) */
.woocommerce-MyAccount-navigation li[class*="--ho_soon_"] a{ color:#9a9a9a; pointer-events:none; }
.woocommerce-MyAccount-navigation li[class*="--ho_soon_"] a::after{
	content:"Prochainement"; margin-left:auto; font-size:8.5px; font-weight:700; letter-spacing:.04em;
	text-transform:uppercase; background:#f0f0f0; color:#8a8a8a; border:1px solid #e2e2e2;
	padding:3px 7px; border-radius:999px;
}
/* Placeholder icons are injected as inline <svg> by inc/account.php (JS),
   sized by the generic nav svg rule above; kept at .5 opacity here. */
.woocommerce-MyAccount-navigation li[class*="--ho_soon_"] a svg{ width:19px; height:19px; flex-shrink:0; stroke:#9a9a9a; }

/* ---- Dashboard hero ---- */
.ho-acc-hero{ background:var(--ho-card); border:1px solid var(--ho-border); border-radius:var(--ho-radius); box-shadow:var(--ho-shadow); padding:26px 28px; margin-bottom:24px; }
.ho-acc-hero h2{ margin:0 0 4px; font-size:22px; font-weight:700; }
.ho-acc-hero p{ margin:0 0 20px; color:var(--ho-muted); font-size:14px; }
.ho-acc-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ho-stat{ background:var(--ho-tile); border-radius:12px; padding:16px 18px; }
.ho-stat .n{ font-size:24px; font-weight:800; letter-spacing:-.02em; }
.ho-stat .l{ font-size:12.5px; color:var(--ho-muted); margin-top:2px; }

/* ---- Section titles ---- */
.ho-acc-sectitle{ display:flex; align-items:center; gap:10px; margin:30px 2px 14px; flex-wrap:wrap; }
.ho-acc-sectitle h3{ font-size:16px; font-weight:700; margin:0; }
.ho-acc-hint{ font-size:12.5px; color:var(--ho-muted); }
.ho-soon-pill{ font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; background:#f0f0f0; color:#8a8a8a; border:1px solid #e2e2e2; padding:3px 9px; border-radius:999px; }

/* ---- Cards ---- */
.ho-acc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ho-card{
	background:var(--ho-card); border:1px solid var(--ho-border); border-radius:var(--ho-radius);
	box-shadow:var(--ho-shadow); padding:20px; display:flex; flex-direction:column; gap:12px;
	position:relative; overflow:hidden; text-decoration:none; color:var(--ho-ink);
	transition:transform .15s, box-shadow .15s;
}
a.ho-card:hover{ transform:translateY(-2px); box-shadow:0 8px 26px rgba(0,0,0,.10); }
.ho-card-ic{ width:44px; height:44px; border-radius:12px; background:var(--ho-tile); display:flex; align-items:center; justify-content:center; }
.ho-card-ic svg{ width:22px; height:22px; stroke:var(--ho-ink); stroke-width:1.4; fill:none; }
.ho-card h4{ margin:0; font-size:15px; font-weight:700; }
.ho-card p{ margin:0; font-size:13px; color:var(--ho-muted); line-height:1.5; flex:1; }
.ho-go{ font-size:13px; font-weight:600; color:var(--ho-ink); display:inline-flex; align-items:center; gap:6px; }
.ho-go-arrow{ width:15px; height:15px; stroke:var(--ho-ink); stroke-width:2; fill:none; }
.ho-card--logout .ho-go, .ho-card--logout .ho-go-arrow{ color:var(--ho-red); stroke:var(--ho-red); }

.ho-card--soon{ cursor:default; background:#fcfcfc; }
.ho-card--soon .ho-card-ic{ background:#f4f4f4; }
.ho-card--soon .ho-card-ic svg{ stroke:#9a9a9a; }
.ho-card--soon h4{ color:#555; }
.ho-soon-badge{ position:absolute; top:14px; right:14px; font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:4px 8px; border-radius:999px; background:#f0f0f0; color:#8a8a8a; border:1px solid #e2e2e2; }

/* ---- Other endpoints get a clean content card ---- */
.woocommerce-account.woocommerce-orders .woocommerce-MyAccount-content,
.woocommerce-account.woocommerce-view-order .woocommerce-MyAccount-content,
.woocommerce-account.woocommerce-edit-address .woocommerce-MyAccount-content,
.woocommerce-account.woocommerce-edit-account .woocommerce-MyAccount-content,
.woocommerce-account.woocommerce-downloads .woocommerce-MyAccount-content,
.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content{
	background:var(--ho-card) !important; border:1px solid var(--ho-border) !important;
	border-radius:var(--ho-radius) !important; box-shadow:var(--ho-shadow) !important;
	padding:26px 28px !important;
}

/* ---- Responsive ---- */
@media (max-width:900px){
	.woocommerce-account .elementor-widget-container:has(> .woocommerce-MyAccount-navigation-wrapper),
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-content){ grid-template-columns:1fr; }
	.woocommerce-MyAccount-navigation-wrapper, .ho-acc-nav{ position:static; }
	.ho-acc-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){ .ho-acc-grid, .ho-acc-stats{ grid-template-columns:1fr; } }

/* ---- Logged-out gateway (Connexion / Créer un compte) — woocommerce/myaccount/form-login.php ---- */
.ho-gate-wrap{ max-width:1000px; margin:0 auto; padding:28px 4px 8px; font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.ho-gate-wrap .ho-ph{ margin-bottom:28px; text-align:center; }
.ho-gate-wrap .ho-ph h1{ font-size:28px; font-weight:700; letter-spacing:-.02em; line-height:1.2; color:var(--ho-ink); }
.ho-gate-wrap .ho-ph p{ color:var(--ho-muted); font-size:14.5px; margin-top:8px; max-width:480px; margin-left:auto; margin-right:auto; }

.ho-gate{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }
.ho-gate.ho-gate--single{ grid-template-columns:minmax(0,420px); justify-content:center; }
.ho-gate-card{
	background:var(--ho-card); border:1px solid var(--ho-border); border-radius:var(--ho-radius);
	box-shadow:var(--ho-shadow); padding:30px 30px 28px; display:flex; flex-direction:column;
}
.ho-gate-card form{ display:flex !important; flex-direction:column !important; flex:1 !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; }
.ho-gate-ic{ width:44px; height:44px; border-radius:12px; background:var(--ho-tile); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.ho-gate-ic svg{ width:22px; height:22px; stroke:var(--ho-ink); stroke-width:1.5; fill:none; }
.ho-gate-card h2{ font-size:19px; font-weight:700; margin:0; color:var(--ho-ink); }
.ho-gate-sub{ font-size:13px; color:var(--ho-muted); margin-top:5px; margin-bottom:0; line-height:1.5; }

.ho-gate-card .ho-field{ width:100% !important; max-width:none !important; float:none !important; margin:20px 0 0 !important; padding:0 !important; clear:both !important; box-sizing:border-box !important; }
.ho-gate-card .ho-field label{ display:block; font-size:12.5px; font-weight:500; color:var(--ho-muted); margin-bottom:6px; }
.ho-gate-card .ho-field .woocommerce-Input,
.ho-gate-card .ho-field input{
	width:100% !important; max-width:none !important; float:none !important; box-sizing:border-box !important;
	padding:13px 18px; border:1px solid var(--ho-border); border-radius:999px;
	font-size:14.5px; color:var(--ho-ink); background:#fff; outline:none;
	transition:border-color .15s,box-shadow .15s; font-family:inherit;
}
.ho-gate-card .ho-field input:focus{ border-color:var(--ho-ink); box-shadow:0 0 0 3px rgba(0,0,0,.1); }
/* #username/#password are WooCommerce's standard ids — also targeted (narrower) by the
   header "Se connecter" login popup, which otherwise wins on ID specificity. */
.ho-gate-card #username,
.ho-gate-card #password{ width:100% !important; max-width:none !important; float:none !important; box-sizing:border-box !important; }
.ho-gate-card .ho-field-pw .ho-input-wrap{ position:relative; display:block !important; width:100% !important; }
.ho-gate-card .ho-field-pw input{ padding-right:46px; }
/* hide the browser's own native password-reveal icon (Edge) so it doesn't double up with ours */
.ho-gate-card input[type="password"]::-ms-reveal,
.ho-gate-card input[type="password"]::-ms-clear{ display:none; width:0; height:0; }
.ho-pw-toggle{
	position:absolute; right:6px; top:50%; transform:translateY(-50%); width:34px; height:34px;
	border:none; background:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
	color:#9aa0a8; transition:background .15s,color .15s; padding:0; cursor:pointer;
}
.ho-pw-toggle:hover{ background:var(--ho-tile); color:var(--ho-ink); }

.ho-field-note{ font-size:11.5px; color:#8a8f96; margin-top:10px; line-height:1.5; display:flex; gap:6px; align-items:flex-start; }
.ho-field-note svg{ flex:none; margin-top:1px; color:#9aa0a8; }

.ho-row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; flex-wrap:wrap; }
.ho-remember{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ho-muted); cursor:pointer; user-select:none; }
.ho-remember input{ width:16px; height:16px; accent-color:var(--ho-ink); cursor:pointer; margin:0; }
.ho-forgot{ font-size:12.5px; font-weight:600; color:var(--ho-muted); text-decoration:underline; text-underline-offset:2px; }
.ho-forgot:hover{ color:var(--ho-ink); }

.ho-gate-spacer{ flex:1; }
.ho-cta{
	width:100%; background:#000 !important; color:#fff !important; border:none !important; border-radius:999px !important;
	padding:16px 24px !important; font-size:15px !important; font-weight:600 !important; display:flex !important;
	align-items:center !important; justify-content:center !important; gap:8px; transition:background .18s,box-shadow .18s;
	box-shadow:0 4px 16px rgba(0,0,0,.18); margin-top:24px; text-transform:none !important; letter-spacing:normal !important;
	font-family:inherit !important; cursor:pointer;
}
.ho-cta:hover{ background:#222 !important; box-shadow:0 6px 22px rgba(0,0,0,.24); }
.ho-gate-card .ho-legal{ font-size:11px !important; color:#9aa0a8 !important; margin-top:14px !important; margin-bottom:0 !important; line-height:1.5 !important; text-align:center !important; }
.ho-legal a{ text-decoration:underline; text-underline-offset:2px; color:#8a8f96; }

.ho-gate-or{ display:none; text-align:center; font-size:12px; font-weight:600; color:#b7bcc4; letter-spacing:.06em; text-transform:uppercase; margin:4px 0; }

/* Back-to-login link on the lost-password / reset-password cards */
.ho-back-link{
	display:flex; align-items:center; justify-content:center; gap:7px;
	margin-top:18px; font-size:12.5px; font-weight:600; color:var(--ho-muted); text-decoration:none;
}
.ho-back-link svg{ flex:none; stroke:currentColor; }
.ho-back-link:hover{ color:var(--ho-ink); }

.ho-benefits{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:28px; }
.ho-benefit{ background:var(--ho-tile); border-radius:10px; padding:14px 16px; display:flex; gap:11px; align-items:center; }
.ho-benefit svg{ flex:none; width:22px; height:22px; stroke:#444; stroke-width:1.5; fill:none; }
.ho-benefit span{ font-size:12.5px; font-weight:600; color:var(--ho-ink); line-height:1.35; }

@media (max-width:760px){
	.ho-gate-wrap{ padding:20px 2px 8px; }
	.ho-gate{ grid-template-columns:1fr; gap:0; }
	.ho-gate-or{ display:block; }
	.ho-benefits{ grid-template-columns:1fr; }
	.ho-gate-wrap .ho-ph h1{ font-size:24px; }
}