/* =====================================================================
   GOKUDO account pages (wc-account.php and woocommerce/myaccount/*.php).
   These are routed by is_account_page(), not by slug (see inc/routing.php),
   and load on the 'account' context in inc/assets.php.
   They share their visual language with cart and checkout.
   Logged out: login and register panels. Logged in: side navigation plus
   content (dashboard, orders, addresses, account details).
   The shared banner, footer, wrap, and label live in base.css, loaded
   site-wide.
   ===================================================================== */

/* The page head (breadcrumb, title) lives in components.css. Account uses
   the shared values verbatim, with no overrides. */

.account-body{padding:64px 0 110px}

/* ---- WooCommerce notices: login failed, registered, saved ---- */
.gokudo-account .woocommerce-message,
.gokudo-account .woocommerce-info,
.gokudo-account .woocommerce-error,
.gokudo-account .woocommerce-error li{list-style:none}
.gokudo-account .woocommerce-message,
.gokudo-account .woocommerce-info,
.gokudo-account .woocommerce-error{margin:0 0 30px;padding:16px 20px;background:var(--surface);border:1px solid var(--line);
	border-left:3px solid var(--blue);font-size:14px;color:var(--ink)}
.gokudo-account .woocommerce-error{border-left-color:var(--ink);background:var(--bg2)}
.gokudo-account .woocommerce-message a,
.gokudo-account .woocommerce-info a,
.gokudo-account .woocommerce-error a{color:var(--blue);font-weight:600}
/* A notice with a button. WooCommerce floats the button right, so the text stays on the
   first line and not at the middle of the box. A flex row centers both. The clearfix
   pseudo-elements become empty flex items, so they go. Before Safari 15.4 and Chrome 105,
   :has() does not match and the notice keeps the float. */
.gokudo-account :is(.woocommerce-message,.woocommerce-info):has(> .button){display:flex;align-items:center;gap:20px}
.gokudo-account :is(.woocommerce-message,.woocommerce-info):has(> .button)::before,
.gokudo-account :is(.woocommerce-message,.woocommerce-info):has(> .button)::after{display:none}
.gokudo-account :is(.woocommerce-message,.woocommerce-info) > .button{order:1;flex:none;float:none;margin:0 0 0 auto}

/* ============ LOGIN / REGISTER (logged out) ============
   A single column focused on login, with a link to switch to register. Only the
   .is-active panel shows by default. Progressive enhancement: switching is enabled
   only after JS is ready (.is-ready). Without JS both panels render stacked with a
   divider, so the page still works. */
.gk-auth{max-width:460px;margin:0 auto}
.gk-pane{padding:0}
.gk-pane + .gk-pane{margin-top:48px;padding-top:48px;border-top:1px solid var(--line)}
.gk-auth.is-ready .gk-pane{display:none}
.gk-auth.is-ready .gk-pane.is-active{display:block}
.gk-auth.is-ready .gk-pane + .gk-pane{margin-top:0;padding-top:0;border-top:none}

/* Switch link at the foot of the panel */
.gk-switch{margin-top:26px;padding-top:22px;border-top:1px solid var(--line2);font-size:13.5px;color:var(--muted)}
body.gk-page .gk-switch a{display:inline-block;margin-left:8px;color:var(--blue);font-family:var(--label);font-size:11px;
	letter-spacing:.14em;text-transform:uppercase;font-weight:700;transition:.2s}
.gk-switch a .arr{display:inline-block}
body.gk-page .gk-switch a:hover{color:var(--ink)}

.ga-head{margin-bottom:32px}
.ga-head h2{font-family:var(--display);font-weight:900;font-size:clamp(30px,3.6vw,42px);line-height:.92;text-transform:uppercase;letter-spacing:var(--track-md)}
.ga-lead{color:var(--muted);font-size:14.5px;line-height:1.6;margin-top:12px;max-width:340px}

/* Form fields, matching the checkout inputs */
.gk-form .woocommerce-form-row,
.gk-form .form-row{margin:0 0 18px;padding:0;display:block}
/* The label treatment itself lives in components.css. It must outscore Kadence's
   specificity of (0,2,2). A rule of this weight alone cannot reach that. The
   checkout needs the same rule. */
.gk-form label .required{color:var(--danger);text-decoration:none;border:none}
.gk-form .input-text{width:100%;background:var(--surface);border:1px solid var(--line);padding:14px 16px;
	font-family:var(--body);font-size:14.5px;color:var(--ink);transition:border-color .2s;border-radius:0}
.gk-form .input-text:focus{outline:none;border-color:var(--blue)}
.gk-form-foot{display:flex;flex-direction:column;gap:16px;margin-top:24px}
/* "Remember me" is body copy next to a checkbox, not a field label. It opts out of
   the treatment in components.css and states its own style. The selector needs
   (0,3,2) specificity, the same as that rule. A selector of one class alone cannot
   outscore Kadence's (0,2,2). Without that specificity, the label renders 15.3px
   bold uppercase in navy, like the field labels above it.
   !important stays on display alone: WooCommerce's own stylesheet sets form-row labels
   to display:block, which stacks the checkbox above its text. */
body.gk-page .gk-form label.gk-remember{display:flex!important;flex-direction:row;align-items:center;gap:9px;
	font-family:var(--body);font-size:13px;font-weight:400;line-height:1.6;letter-spacing:0;
	text-transform:none;color:var(--muted);margin:0;cursor:pointer}
.gk-remember input{width:16px;height:16px;accent-color:var(--blue)}
.gk-auth-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;
	border:none;cursor:pointer;font-size:12px;letter-spacing:.22em;padding:18px 20px;transition:.25s}
.gk-lost{margin-top:16px}
body.gk-page .gk-lost a{font-family:var(--label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
	text-decoration:underline;text-underline-offset:3px;transition:color .2s}
body.gk-page .gk-lost a:hover{color:var(--blue)}
.gk-reg-note{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0 0 8px;padding:14px 16px;background:var(--bg2);border:1px solid var(--line2)}

/* ============ MY ACCOUNT (logged in) ============ */
.gk-account{display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:start}
/* WooCommerce gives the content area width:68% + float:left. Inside a grid, the width
   still applies and squeezes the content, leaving the right side empty. The rule below
   stretches it to 1fr. */
.gokudo-account .woocommerce-MyAccount-content{float:none!important;width:auto!important}

/* Side nav: one label per item. The current item gets a var(--blue) bar on the left. */
.gk-acct-nav{border-top:1px solid var(--line)}
.gk-acct-nav ul{list-style:none;margin:0;padding:0}
.gk-acct-nav li{border-bottom:1px solid var(--line2)}
.gk-acct-nav a{display:block;padding:19px 4px 19px 18px;color:var(--muted);
	border-left:2px solid transparent;transition:color .18s,border-color .18s}
.gk-acct-nav a .lbl{font-family:var(--label);font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;line-height:1.2}
.gk-acct-nav a:hover{color:var(--ink);border-left-color:var(--ink)}
.gk-acct-nav .is-active a{color:var(--blue);border-left-color:var(--blue)}
/* Log out sits under the list, not in it. The size is that of .gk-auth-btn. */
.gk-acct-nav .gk-acct-logout{display:flex;justify-content:center;margin-top:24px;border-left:none;
	font-size:12px;letter-spacing:.22em;line-height:1.2;padding:18px 20px;transition:.25s}

/* Dashboard: membership identity */
.gk-dash-hi{margin-bottom:38px}
.gk-dash-hi h2{font-family:var(--display);font-weight:900;font-size:clamp(34px,4.4vw,56px);line-height:.9;text-transform:uppercase;letter-spacing:var(--track-md)}
.gd-hi-meta{margin-top:16px;font-size:11px;letter-spacing:.16em;color:var(--faint)}
.gd-hi-name{color:var(--blue)}
.gd-hi-since{color:var(--ink)}

/* Stat snapshot */
.gk-dash-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:24px}
.gd-stat{background:var(--surface);padding:36px 30px;display:flex;flex-direction:column;gap:12px;text-decoration:none}
.gd-stat-v{font-family:var(--display);font-size:64px;line-height:.85;letter-spacing:var(--track-lg);color:var(--ink)}
.gd-stat-v.gd-stat-han{font-family:var(--han);font-size:54px;color:var(--blue)}
.gd-stat-k{font-size:11px;letter-spacing:.16em;color:var(--blue)}

/* Recent orders */
.gk-dash-recent{margin-bottom:24px}
.gd-recent-lab{font-size:11px;letter-spacing:.18em;color:var(--faint);margin-bottom:14px}
.gd-recent-card{display:flex;align-items:center;gap:28px;background:var(--surface);border:1px solid var(--line);padding:26px 30px;transition:border-color .2s;text-decoration:none}
.gd-recent-card:hover{border-color:var(--ink)}
.gd-recent-thumb{flex:none;width:104px;height:82px;background:var(--bg2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.gd-recent-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.gd-recent-noimg{font-family:var(--display);font-weight:900;font-size:38px;color:var(--wash-sm)}
.gd-recent-info{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.gd-recent-no{font-size:11.5px;letter-spacing:.1em;color:var(--faint)}
.gd-recent-name{font-family:var(--display);font-weight:900;font-size:32px;line-height:.95;text-transform:uppercase;letter-spacing:var(--track-md);color:var(--ink)}
.gd-recent-more{font-weight:400}
.gd-recent-status{font-family:var(--label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:7px}
.gd-recent-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}
.gd-ostat--processing::before{background:var(--blue)}
.gd-ostat--shipped::before{background:var(--gold)}
.gd-ostat--delivered::before,.gd-ostat--completed::before{background:var(--success)}
.gd-ostat--cancelled::before,.gd-ostat--refunded::before{background:var(--faint)}
.gd-recent-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.gd-recent-total{font-family:var(--display);font-size:32px;line-height:1;letter-spacing:var(--track-md);color:var(--ink)}
.gd-recent-go{font-size:10px;letter-spacing:.14em;color:var(--blue);transition:color .2s}
.gd-recent-card:hover .gd-recent-go{color:var(--ink)}
.gd-recent-empty{background:var(--bg2);border:1px solid var(--line2);padding:26px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.gd-recent-empty p{color:var(--muted);font-size:15px}

/* Address and account cards. The address view (my-address.php) uses the same cards:
   .gk-addr and the .gk-addr-* parts follow the .gd-mini rules here. */
.gk-dash-grid,.gk-addr{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.gk-dash-grid{margin-bottom:20px}
.gd-mini,.gk-addr-card{background:var(--surface);padding:32px 32px 28px;display:flex;flex-direction:column;gap:12px}
.gd-mini-k,.gk-addr-k{font-size:11px;letter-spacing:.16em;color:var(--faint)}
/* .gk-addr-k is an h2. It takes the weight and line height of the card, as the span of
   .gd-mini-k does, and not those of a heading. */
.gk-addr-k{margin:0;font-weight:inherit;line-height:inherit}
/* margin:0 cancels the address{margin-bottom:1.5em} rule of Kadence. That rule outscores
   the universal-selector reset in base.css. */
.gd-mini-body,.gk-addr-body{margin:0;font-size:15.5px;line-height:1.7;color:var(--muted);font-style:normal}
.gd-mini-empty,.gk-addr-empty{font-size:14px;color:var(--faint)}
.gd-mini-go,.gk-addr-go{font-size:10px;letter-spacing:.14em;transition:color .2s}
body.gk-page :is(.gd-mini-go,.gk-addr-go){color:var(--blue)}
body.gk-page .gd-mini:hover .gd-mini-go,
body.gk-page .gk-addr-card:hover .gk-addr-go{color:var(--ink)}
/* A store that ships only to the billing address has one card. It keeps the width of
   one column. */
.gk-addr--one{grid-template-columns:1fr;max-width:50%}

/* Shortcut */
.gk-dash-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
/* background/color/font-family/text-transform/font-weight and the hover swap to
   var(--ink) are shared with the other primary CTA buttons across the site and live
   in components.css */
.gd-cta-btn{display:inline-flex;align-items:center;gap:14px;
	font-size:13px;letter-spacing:.2em;padding:20px 34px;transition:.25s}

/* ============ SHARED CONTENT AREA (orders table / addresses / account details) ============ */
/* The lead paragraph, such as the status line of the view order endpoint. WooCommerce
   prints the notices wrapper before it, empty when there is no notice. */
.gk-acct-content>:is(p:first-child,.woocommerce-notices-wrapper:first-child+p){color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:24px}

/* Orders table */
.gokudo-account .woocommerce-orders-table,
.gokudo-account table.shop_table{width:100%;border-collapse:collapse;border:1px solid var(--line);background:var(--surface)}
.gokudo-account table.shop_table th,
.gokudo-account table.shop_table td{padding:14px 16px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--line2);vertical-align:middle}
.gokudo-account table.shop_table thead th{font-family:var(--label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700}
/* Exception: no link mark. The View button in the same row goes to the same order. */
.gokudo-account table.shop_table .woocommerce-orders-table__cell-order-number a{font-weight:700;color:var(--ink)}
/* WooCommerce emits these per order row. They carry Kadence's .button class, so the
   border-radius reset is stated here. */
.gokudo-account .woocommerce-button,
.gokudo-account .button{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
	font-size:11px;letter-spacing:.16em;padding:11px 18px;transition:.2s;border-radius:0}

.gokudo-account address{font-style:normal;line-height:1.8;color:var(--muted);font-size:14px}

/* Account details and edit-address forms, matching the checkout inputs */
.gokudo-account .woocommerce-EditAccountForm .form-row,
.gokudo-account .woocommerce-address-fields .form-row,
.gokudo-account .edit-account .form-row{margin:0 0 18px}
/* The field labels of the two forms are var(--ink), not the var(--faint) of the shared
   field label in components.css. The selector must outscore
   `.woocommerce form .form-row label` in woocommerce.min.css at (0,2,2), which sets
   Kadence's navy, 15.3px, bold, and a 2.4 line height. This one scores (0,4,2), so it
   also states the weight and the line height. A label that owns a checkbox stays out. */
body.gk-page.gokudo-account :is(.woocommerce-EditAccountForm,.woocommerce-address-fields) .form-row label:not(.woocommerce-form__label-for-checkbox){
	display:block;font-family:var(--label);font-size:10px;font-weight:400;line-height:1.6;
	letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
/* The heading of the billing and shipping forms, in the style of the section headings
   of the checkout form (.gk-co-fields h3 in checkout.css). WooCommerce gives the <h2> no
   class, and the form is the only one on the account with a heading of its own. */
.gokudo-account .gk-acct-content > form > h2{font-family:var(--label);font-size:12px;line-height:1.6;letter-spacing:.22em;
	text-transform:uppercase;color:var(--ink);font-weight:700;padding-bottom:16px;border-bottom:1px solid var(--line);margin:0 0 24px}
/* The show-password eye takes the label color. WooCommerce fills it with Kadence's slate
   (--global-palette6) at (0,2,1). */
body.gk-page.gokudo-account .woocommerce-EditAccountForm .show-password-input::after{background-color:var(--ink)}
.gokudo-account fieldset legend{display:block;font-family:var(--label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
/* This is the size of .gd-cta-btn. The fieldset
   ends the account details form, and its margin keeps the button off the box. */
.gokudo-account .woocommerce-EditAccountForm fieldset{margin-bottom:32px}
.gokudo-account .woocommerce-address-fields__field-wrapper{margin-bottom:32px}
body.gokudo-account button.button:is([name=save_account_details],[name=save_address]){
	font-size:13px;letter-spacing:.2em;padding:20px 34px}
.gokudo-account .input-text,
.gokudo-account select{width:100%;background:var(--surface);border:1px solid var(--line);padding:14px 16px;font-family:var(--body);font-size:14.5px;color:var(--ink);border-radius:0;transition:border-color .2s}
.gokudo-account .input-text:focus,
.gokudo-account select:focus{outline:none;border-color:var(--blue)}
.gokudo-account fieldset{border:1px solid var(--line2);padding:22px;margin:26px 0 0}
.gokudo-account .woocommerce-form-row-first,.gokudo-account .form-row-first{float:left;width:calc(50% - 9px)}
.gokudo-account .woocommerce-form-row-last,.gokudo-account .form-row-last{float:right;width:calc(50% - 9px)}
.gokudo-account .clear{clear:both}
.gokudo-account span.password-input,.gokudo-account span.woocommerce-input-wrapper{display:block}

/* ============ ORDER ACTIONS (shipping / confirm delivery / cancel and return requests) ============ */
.gk-order-ops{margin-top:30px}
.gk-ship-info{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--bg2);border:1px solid var(--line2);padding:16px 20px;margin-bottom:20px}
.gk-ship-k{font-size:10px;color:var(--faint)}
.gk-ship-v{font-size:14px;font-weight:600;color:var(--ink)}
.gk-track{margin-left:auto;font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-weight:700;transition:.2s}
.gk-track:hover{color:var(--ink)}
.gk-op-note{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--blue);padding:14px 18px;font-size:13.5px;color:var(--muted);margin-bottom:18px}
body.gk-page .gk-op-note a{text-decoration:underline;text-underline-offset:3px}
.gk-op-row{display:flex;gap:12px;flex-wrap:wrap}
/* The :focus and :active states hold the resting fill, on the ghost button and on the
   primary below it. base.css says why. */
.gk-op-btn,.gk-op-btn:is(:focus,:active){display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line);color:var(--ink);cursor:pointer;
	font-family:var(--label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:14px 20px;font-weight:700;transition:.2s;text-decoration:none}
.gk-op-btn:hover{border-color:var(--ink);background:var(--ink);color:var(--on-dark)}
/* This button is the only primary in this group that carries a border, so the border
   follows the fill here. */
.gk-op-btn.gk-op-primary{border-color:var(--blue)}
.gk-op-btn.gk-op-primary:hover{border-color:var(--gold)}
.gk-reason-form{margin-top:20px;background:var(--surface);border:1px solid var(--line);padding:22px 24px}
.gk-reason-form>label.label{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.gk-reason-form textarea{width:100%;border:1px solid var(--line);padding:12px 14px;font-family:var(--body);font-size:14px;color:var(--ink);border-radius:0;resize:vertical}
.gk-reason-form textarea:focus{outline:none;border-color:var(--blue)}
.gk-reason-opts{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.gk-radio{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);cursor:pointer}
.gk-radio input{width:16px;height:16px;accent-color:var(--blue)}
.gk-reason-other{margin-top:10px}
.gk-reason-foot{display:flex;gap:14px;align-items:center;margin-top:16px}
/* This one marks its states on the text color alone, so all three hold the empty
   ground. base.css says why the states have to be named. */
.gk-op-cancel,.gk-op-cancel:is(:hover,:focus,:active){background:none;border:none;color:var(--faint);cursor:pointer;font-family:var(--label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;transition:.2s}
.gk-op-cancel:hover{color:var(--ink)}

/* Status dots in the orders list. Every status gets a dot, var(--muted) by default, as
   .gd-recent-status does on the dashboard. The rules below color the named statuses. */
.gokudo-account .woocommerce-orders-table__cell-order-status::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;vertical-align:middle;background:var(--muted)}
.gokudo-account .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status::before{background:var(--blue)}
.gokudo-account .woocommerce-orders-table__row--status-shipped .woocommerce-orders-table__cell-order-status::before{background:var(--gold)}
.gokudo-account .woocommerce-orders-table__row--status-delivered .woocommerce-orders-table__cell-order-status::before,
.gokudo-account .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status::before{background:var(--success)}
.gokudo-account .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status::before,
.gokudo-account .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status::before{background:var(--faint)}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
	.gk-account{grid-template-columns:1fr;gap:36px}
	/* The list becomes a grid of 2 equal columns, ruled like the dashboard cards. An odd
	   last item takes the full row, so no cell stays empty. */
	.gk-acct-nav{border-top:none}
	.gk-acct-nav ul{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
	.gk-acct-nav li{border-bottom:none;background:var(--surface)}
	.gk-acct-nav li:last-child:nth-child(odd){grid-column:1/-1}
	.gk-acct-nav a{padding:16px 16px 16px 18px}
	.gk-acct-nav .gk-acct-logout{margin-top:16px}
}
@media(max-width:560px){
	.gk-dash-stat{grid-template-columns:1fr}
	.gk-dash-grid,.gk-addr{grid-template-columns:1fr}
	.gk-addr--one{max-width:none}
	.gd-recent-card{flex-wrap:wrap}
	.gd-recent-side{width:100%;align-items:flex-start;text-align:left;flex-direction:row;justify-content:space-between;padding-top:8px}
	.gokudo-account .woocommerce-form-row-first,.gokudo-account .form-row-first,
	.gokudo-account .woocommerce-form-row-last,.gokudo-account .form-row-last{float:none;width:100%}
}