/*
 * The account pages - Sprint 4, Phase A (D-180).
 *
 * WHAT THIS FILE IS FOR. `/my-account/` was WooCommerce's default markup inside OceanWP's generic page
 * wrapper: no heading, Open Sans headings, the theme's inherited `letter-spacing: 1px`, 40px inputs,
 * and the login form sitting flush against the page edge. This stylesheet gives it the language every
 * other page of the shop already speaks.
 *
 * IT DEFINES NO NEW TOKENS AND NO NEW BUTTON. The wrapper carries `.irkn-land`, so `--irkn-blue`,
 * `--irkn-ink`, `--irkn-line`, the radii, the shadow and the shared `.irkn-btn` rules in
 * `assets/landing.css` apply here exactly as they do on the product page and the catalogue.
 * `includes/account.php` puts that wrapper on the page.
 *
 * Non-negotiable rules, the same ones the rest of the design is held to:
 *   - no horizontal scrolling at 360, 768 or 1440
 *   - no tap target under 44px
 *   - inputs at 16px, so a phone does not zoom on focus
 *   - the call accent #e8590c is used for the "call us" action ONLY - it is not used here at all
 *   - exactly one <h1> on the page, and it is the page's own name
 *
 * SCOPING: every rule is under `.irkn-acct`. Nothing here can repaint the cart, the checkout or a
 * product page.
 */

/* ---------------------------------------------------------------------------
   1. The wrapper
   --------------------------------------------------------------------------- */

/*
 * OceanWP's content area already supplies the page gutter, so the grey band and the vertical padding
 * `.irkn-land` carries for page sections are removed - the same correction `assets/product.css` makes,
 * for the same reason (otherwise the content is indented twice).
 */
.irkn-acct {
	background: transparent;
	padding: 0;
	/*
	 * 1240px is the shop's content edge, not a new number: the header's row and the catalogue pages'
	 * inner content both compute to 1240px at 1440 (header wrap 1280 minus its 2 x 20px, `.irkn-arch`
	 * 1320 minus its 2 x 40px). OceanWP's page container is WIDER than that (measured 1283px starting
	 * at x = 71), so without this the account page would sit 22px left of every other page - the same
	 * misalignment D-096 had to fix for the footer.
	 */
	max-width: 1240px;
	margin: 0 auto clamp(24px, 4vw, 40px);
}

.irkn-acct .irkn-acct__title {
	margin: 0 0 clamp(14px, 2vw, 22px);
	/* The catalogue pages' heading, exactly: `.irkn-arch__title` computes to 30px / 800 at 1440. */
	font-size: clamp(21px, 2.6vw, 30px);
	font-weight: 800;
	line-height: 1.15;
	/* The theme sets letter-spacing: 1px and it INHERITS - the D-095 family. */
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--irkn-ink);
}

/* ---------------------------------------------------------------------------
   2. Logged out: the two cards, "Prisijungti" and "Registruotis"
   --------------------------------------------------------------------------- */

/*
 * WooCommerce's own markup is `.u-columns.col2-set` with two floated columns, and OceanWP pins each
 * column to 560px.
 *
 * FLEX, NOT GRID, AND THE REASON IS MEASURED: a `repeat(auto-fit, minmax(320px, 1fr))` grid created a
 * THIRD track in a 1240px box and left the two cards 395px wide with 423px of empty space beside them
 * (measured on the clone 2026-10-21). Flex with a 320px basis stretches honestly whether there are one
 * or two children, which also keeps the registration-off state correct without a selector that has to
 * know which state it is in.
 */
.irkn-acct .u-columns.col2-set {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(16px, 2.4vw, 28px);
	align-items: stretch;
}

.irkn-acct .u-columns.col2-set .u-column1,
.irkn-acct .u-columns.col2-set .u-column2 {
	float: none;
	width: auto;
	/*
	 * 620px is the widest a single form should get: a login form stretched to the full 1240px content
	 * edge reads as a mistake. The basis shrinks honestly below that (measured 311px at 360).
	 */
	flex: 0 1 620px;
	min-width: 0;
	margin: 0;
	background: #fff;
	border: 1px solid var(--irkn-line);
	border-radius: var(--irkn-r-lg);
	padding: clamp(18px, 2.4vw, 28px);
	box-shadow: var(--irkn-sh);
}

.irkn-acct h2 {
	margin: 0 0 clamp(12px, 1.6vw, 18px);
	font-size: clamp(18px, 1.9vw, 21px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--irkn-ink);
}

/*
 * OCEANWP'S OWN RULES MUST NOT WIN HERE, AND THIS IS THE BLOCK THAT PROVES IT.
 *
 * Measured on the clone 2026-10-21, with registration switched on: WooCommerce rendered the register
 * form - `u-column2` and `#reg_email` were both in the HTML - and the browser computed
 * `display: none` for it. OceanWP hides the second login column and reveals it from **its own tab
 * bar**, which is the bar `includes/account.php` removes because it is hard-coded English. So the
 * registration form existed, was valid, and could not be seen: the D-052 family's quietest form.
 *
 * WHY THESE SELECTORS LOOK ODD: OceanWP's rule is
 * `.account-original-style .woocommerce #customer_login .col-2` - it carries an ID, and an ID beats
 * any number of classes. So this is not `!important`; it is the same rule said more precisely:
 * the ID is kept and a class is added to it.
 *
 * The second rule undoes OceanWP's `width: 560px; margin: 0 auto` on each login column, which would
 * otherwise leave a hole inside the grid track instead of filling it.
 */
.irkn-acct .woocommerce #customer_login > div.u-column1,
.irkn-acct .woocommerce #customer_login > div.u-column2 {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}

.irkn-acct .woocommerce #customer_login .col-2.u-column2 {
	display: block;
}

/*
 * AND THE CARD HEADINGS TOO. `#customer_login h2 { display: none }` is the same OceanWP rule set:
 * the tab bar WAS the heading, so without the tabs the page shows two unlabelled forms - measured in
 * a screenshot on the clone 2026-10-21. WooCommerce's own `<h2>Prisijungti</h2>` and
 * `<h2>Registruotis</h2>` are translated and were already in the markup; they only needed to be
 * allowed back on screen.
 */
.irkn-acct .woocommerce #customer_login .u-column1 h2,
.irkn-acct .woocommerce #customer_login .u-column2 h2 {
	display: block;
}

/* OceanWP zeroes the last paragraph of each column; the lost-password link needs its own line.
 * Its rule is `.account-original-style .woocommerce #customer_login .col-1 p:last-child` - one ID,
 * four classes counting `:last-child`, one element. This one carries five classes and two elements,
 * so it wins on its own merits rather than by `!important`. */
.irkn-acct .woocommerce #customer_login div.u-column1 p.woocommerce-LostPassword {
	margin: 16px 0 0;
}

/* Same 44px target as the switch link - measured 203 x 20px as a plain inline link. */
.irkn-acct .woocommerce #customer_login p.woocommerce-LostPassword a {
	display: inline-block;
	padding: 12px 0;
}

/*
 * One width for both submit buttons - and the reason the first attempt did not work.
 *
 * Measured on the clone 2026-10-21: with `width: 100%` on both buttons, the register button filled
 * its card (548px) and the login button measured 264px. The button was NOT the problem: OceanWP sets
 * `.col-1 .form-row { display: inline-block }`, so the button's own paragraph was shrink-to-fit and
 * `100%` meant 100% of 264px. **A percentage is only as wide as the box it is asked about.**
 *
 * The selectors carry the element name to outrank OceanWP's two-class rule without `!important`.
 */
.irkn-acct .woocommerce #customer_login .u-column1 p.form-row,
.irkn-acct .woocommerce #customer_login .u-column2 p.form-row {
	display: block;
}

.irkn-acct .woocommerce #customer_login .woocommerce-form-login__submit,
.irkn-acct .woocommerce #customer_login .woocommerce-form-register__submit {
	width: 100%;
}

/* ---------------------------------------------------------------------------
   2b. One view at a time - either the login card or the registration card
   --------------------------------------------------------------------------- */

/*
 * The owner asked on 2026-10-21 for the signed-out page to show the login form and a line offering
 * registration, rather than both forms side by side. WooCommerce renders both in one block and has no
 * switch of its own, so the VIEW is chosen by `?action=register` (see includes/account.php) and these
 * two rules do the showing and hiding.
 *
 * `display: none` is the right tool: a card that is not the current view must also leave the tab order
 * and be invisible to a screen reader, which `visibility` or an off-screen position would not do.
 *
 * Specificity, again, is not `!important`: each hide rule carries the ID plus `div`, so it outranks the
 * `display: block` this file sets to undo OceanWP's hiding of the registration column.
 */
.irkn-acct:not(.irkn-acct--register) .woocommerce #customer_login div.u-column2 {
	display: none;
}

.irkn-acct--register .woocommerce #customer_login div.u-column1 {
	display: none;
}

/* The line that offers the other view: "Neturite paskyros? Registruokitės" and its mirror. */
.irkn-acct__switch {
	max-width: 620px;
	margin: clamp(16px, 2vw, 22px) auto 0;
	text-align: center;
	font-size: 15px;
	line-height: 1.5;
	color: var(--irkn-ink2);
}

/*
 * The link inside that line gets a 44px tap target.
 *
 * Measured on the clone 2026-10-21: as a plain inline link it was 107 x 20px. That breaks the shop's
 * own rule (no target under 44px) AND it is the only way a phone visitor can reach the registration
 * form - the one place where an undersized link costs a customer rather than a click.
 */
.irkn-acct__switch a {
	display: inline-block;
	padding: 12px 2px;
}

/* ---------------------------------------------------------------------------
   3. Forms - login, registration, address, account details
   --------------------------------------------------------------------------- */

.irkn-acct form {
	margin: 0;
}

.irkn-acct .woocommerce-form-row,
.irkn-acct .form-row {
	margin: 0 0 16px;
	display: block;
}

.irkn-acct label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: normal;
	color: var(--irkn-ink);
}

.irkn-acct input[type="text"],
.irkn-acct input[type="email"],
.irkn-acct input[type="password"],
.irkn-acct input[type="tel"],
.irkn-acct input[type="search"],
.irkn-acct select,
.irkn-acct textarea,
.irkn-acct .select2-container .select2-selection--single {
	width: 100%;
	max-width: 100%;
	/* 16px is not a design choice: below it, iOS zooms the page on focus. */
	font-size: 16px;
	line-height: 1.4;
	color: var(--irkn-ink);
	background: #fff;
	border: 1px solid var(--irkn-line);
	border-radius: 12px;
	padding: 12px 14px;
	min-height: 48px;
	box-sizing: border-box;
	letter-spacing: normal;
}

.irkn-acct select {
	/* The parent theme stretches selects to 100%; that is correct here, but the arrow needs room. */
	padding-right: 36px;
}

.irkn-acct input[type="text"]:focus,
.irkn-acct input[type="email"]:focus,
.irkn-acct input[type="password"]:focus,
.irkn-acct input[type="tel"]:focus,
.irkn-acct select:focus,
.irkn-acct textarea:focus {
	border-color: var(--irkn-blue);
	outline: 2px solid var(--irkn-blue-lt);
	outline-offset: 0;
}

.irkn-acct textarea {
	min-height: 120px;
	resize: vertical;
}

/*
 * The "remember me" checkbox and its label. The label is a block from the rules above, so it is
 * pulled back into one line with the box, and the pair is given a 44px row.
 */
.irkn-acct .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: 0 0 12px;
	font-weight: 500;
	cursor: pointer;
}

.irkn-acct .woocommerce-form-login__rememberme input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	flex: 0 0 auto;
}

.irkn-acct .woocommerce-form__label-for-checkbox span {
	font-size: 15px;
}

/* ---------------------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------------------- */

.irkn-acct button[type="submit"],
.irkn-acct .woocommerce-button,
.irkn-acct .button,
.irkn-acct a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 22px;
	background: var(--irkn-blue);
	color: #fff;
	border: 1px solid var(--irkn-blue);
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	/* The theme's 1.5px tracking on buttons is not part of this design - the D-095 family. */
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
}

.irkn-acct button[type="submit"]:hover,
.irkn-acct .woocommerce-button:hover,
.irkn-acct .button:hover,
.irkn-acct a.button:hover {
	background: var(--irkn-blue-2);
	border-color: var(--irkn-blue-2);
	color: #fff;
}

/* The verification prompt's button sits inside a notice, so it must not inherit the notice's colour. */
.irkn-acct .woocommerce-message .button,
.irkn-acct .woocommerce-info .button {
	margin-left: 8px;
}

/* ---------------------------------------------------------------------------
   5. Links and notices
   --------------------------------------------------------------------------- */

.irkn-acct a {
	color: var(--irkn-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.irkn-acct .woocommerce-form-login__submit,
.irkn-acct .woocommerce-form-register__submit {
	margin-top: 4px;
}

.irkn-acct .woocommerce-LostPassword {
	margin: 14px 0 0;
	font-size: 15px;
}

.irkn-acct .woocommerce-privacy-policy-text {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--irkn-ink2);
	line-height: 1.5;
}

.irkn-acct .woocommerce-privacy-policy-text p {
	margin: 0;
}

/*
 * The mandatory privacy tick. Its label is deliberately NOT the block label the rules above create:
 * the box and its sentence sit on one line, and the whole row is a 44px target - the sentence ends in a
 * link, and a thumb must be able to hit the sentence as easily as the box.
 */
.irkn-acct .irkn-acct__consent {
	margin: 0 0 16px;
}

.irkn-acct .irkn-acct__consent label.irkn-acct__consentlabel {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 44px;
	padding: 10px 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--irkn-ink);
	cursor: pointer;
}

.irkn-acct .irkn-acct__consent input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	flex: 0 0 auto;
}

.irkn-acct .woocommerce-message,
.irkn-acct .woocommerce-info,
.irkn-acct .woocommerce-error,
.irkn-acct .woocommerce-noreviews {
	list-style: none;
	margin: 0 0 16px;
	padding: 14px 16px;
	background: var(--irkn-blue-lt);
	border: 1px solid var(--irkn-line);
	border-left: 4px solid var(--irkn-blue);
	border-radius: 12px;
	color: var(--irkn-ink);
	font-size: 15px;
	line-height: 1.5;
	/*
	 * A SENTENCE MUST STAY A SENTENCE. The theme uppercases and letter-spaces anything it treats as a
	 * notice, which turned "Your account is using a temporary password" into a shouted block (the
	 * owner's screenshot of 2026-10-21). Both are reset here, not on the wrapper, because they are
	 * set on the element by the parent theme - the D-095 family.
	 */
	text-transform: none;
	letter-spacing: normal;
}

.irkn-acct .woocommerce-error {
	border-left-color: #b3261e;
	background: #fdf2f1;
}

.irkn-acct .woocommerce-message::before,
.irkn-acct .woocommerce-info::before,
.irkn-acct .woocommerce-error::before {
	content: none;
}

.irkn-acct .woocommerce-error li {
	margin: 0 0 6px;
}

.irkn-acct .woocommerce-error li:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   6. Logged in: the navigation column and the content card
   --------------------------------------------------------------------------- */

/*
 * `.logged-in` is in the selector on purpose: the shortcode wrapper is the same element in both
 * states, and a grid would put the "not logged in" cards into a 240px column.
 */
.logged-in.woocommerce-account .irkn-acct .woocommerce {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: clamp(16px, 2.4vw, 32px);
	align-items: start;
}

/* Notices sit above both columns. */
.logged-in.woocommerce-account .irkn-acct .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.logged-in.woocommerce-account .irkn-acct .woocommerce::before,
.logged-in.woocommerce-account .irkn-acct .woocommerce::after {
	content: none;
}

.irkn-acct .woocommerce-MyAccount-navigation {
	padding: 0;
}

/*
 * ⚠️ OCEANWP SETS EXPLICIT PERCENTAGES ON THE LOGGED-IN LAYOUT, AND THEY SURVIVE INSIDE A GRID.
 *
 * Measured on the clone 2026-10-21 with a real logged-in customer: OceanWP wraps the menu in its own
 * `.woocommerce-MyAccount-tabs` div and gives that div `width: 18%; float: left`, and gives
 * `.woocommerce-MyAccount-content` `width: 76%; float: right`. Inside the grid those percentages resolve
 * against the GRID TRACK, not the page: the menu column is 240px, so the menu became **43px wide**, and
 * the content 76% of 968px = **736px** - a two-column layout with two holes in it.
 *
 * `float` is ignored on a grid item, but `width` is not. So the fix is a width reset, not a float reset.
 * The selector carries five classes to outrank the parent theme without `!important`.
 */
.logged-in.woocommerce-account .irkn-acct .woocommerce > .woocommerce-MyAccount-tabs,
.logged-in.woocommerce-account .irkn-acct .woocommerce > .woocommerce-MyAccount-navigation,
.logged-in.woocommerce-account .irkn-acct .woocommerce > .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	max-width: none;
	min-width: 0;
}

/* The menu column is a card. OceanWP's wrapper sits between the grid and the nav, so both are covered. */
.irkn-acct .woocommerce-MyAccount-tabs {
	background: #fff;
	border: 1px solid var(--irkn-line);
	border-radius: var(--irkn-r-lg);
	padding: 10px;
	box-shadow: var(--irkn-sh);
	/* OceanWP leaves a 41px right margin on this wrapper - measured 2026-10-21 at 768px. */
	margin: 0;
}

.irkn-acct .woocommerce-MyAccount-tabs .oceanwp-user-profile {
	margin: 0 0 10px;
	padding: 6px 6px 12px;
	border-bottom: 1px solid var(--irkn-line);
}

/*
 * One logout, not two. OceanWP's profile block carries its own logout link, and the account menu carries
 * another with the same purpose. The menu's is kept (it is the one styled with everything else and the
 * one that reads `Atsijungti`); the duplicate is removed from view but stays in the markup, so nothing
 * breaks if the theme changes.
 */
.irkn-acct .woocommerce-MyAccount-tabs .oceanwp-user-profile a {
	display: none;
}

.irkn-acct .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.irkn-acct .woocommerce-MyAccount-navigation li {
	margin: 0;
	display: block;
}

.irkn-acct .woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 14px;
	border-radius: 10px;
	color: var(--irkn-ink2);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	letter-spacing: normal;
}

.irkn-acct .woocommerce-MyAccount-navigation a:hover {
	background: var(--irkn-bg);
	color: var(--irkn-blue);
}

.irkn-acct .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--irkn-blue-lt);
	color: var(--irkn-blue);
	font-weight: 700;
}

.irkn-acct .woocommerce-MyAccount-content {
	background: #fff;
	border: 1px solid var(--irkn-line);
	border-radius: var(--irkn-r-lg);
	padding: clamp(16px, 2.2vw, 28px);
	box-shadow: var(--irkn-sh);
	/* A wide order table scrolls INSIDE the card instead of pushing the whole page sideways. */
	overflow-x: auto;
	min-width: 0;
}

.irkn-acct .woocommerce-MyAccount-content p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--irkn-ink);
}

.irkn-acct .woocommerce-MyAccount-content fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 12px;
}

.irkn-acct .woocommerce-MyAccount-content legend {
	font-weight: 700;
	font-size: 16px;
	margin: 0 0 10px;
}

/* ---------------------------------------------------------------------------
   7. Tables - orders, addresses
   --------------------------------------------------------------------------- */

.irkn-acct table.shop_table,
.irkn-acct table.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 16px;
	font-size: 15px;
}

.irkn-acct table.shop_table th,
.irkn-acct table.shop_table td {
	padding: 12px 10px;
	border-bottom: 1px solid var(--irkn-line);
	text-align: left;
	vertical-align: middle;
	color: var(--irkn-ink);
	letter-spacing: normal;
}

.irkn-acct table.shop_table thead th {
	font-size: 13px;
	font-weight: 700;
	color: var(--irkn-ink2);
	text-transform: none;
	letter-spacing: normal;
	background: var(--irkn-bg);
}

.irkn-acct table.shop_table tfoot th,
.irkn-acct table.shop_table tfoot td {
	background: var(--irkn-bg);
	font-weight: 700;
}

.irkn-acct .woocommerce-orders-table__cell-order-actions .button {
	min-height: 44px;
	padding: 10px 16px;
	font-size: 14px;
}

/* Address cards use WooCommerce's own `addresses` markup. */
.irkn-acct .u-columns.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(14px, 2vw, 24px);
}

.irkn-acct .woocommerce-Address {
	float: none;
	width: auto;
	margin: 0;
	padding: 16px;
	border: 1px solid var(--irkn-line);
	border-radius: var(--irkn-r);
	background: #fff;
}

.irkn-acct .woocommerce-Address address {
	font-style: normal;
	line-height: 1.6;
	margin: 8px 0 12px;
}

.irkn-acct .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.irkn-acct .woocommerce-Address-title h2,
.irkn-acct .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 18px;
}

/* ---------------------------------------------------------------------------
   8. Phones and tablets
   --------------------------------------------------------------------------- */

/*
 * 900px is the width at which the shop's header switches to its phone layout, so the account page
 * changes at the same point rather than inventing a second breakpoint.
 */
@media (max-width: 899px) {
	.logged-in.woocommerce-account .irkn-acct .woocommerce {
		grid-template-columns: 1fr;
	}

	/*
	 * The navigation turns into a wrapping list of chips above the content. `min-height: 44px` stays,
	 * because these are still tap targets on a phone.
	 */
	.irkn-acct .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.irkn-acct .woocommerce-MyAccount-navigation a {
		padding: 10px 12px;
		font-size: 14px;
	}

	.irkn-acct .woocommerce-MyAccount-content {
		padding: 16px;
	}
}

@media (max-width: 420px) {
	.irkn-acct .woocommerce-MyAccount-navigation {
		padding: 8px;
	}

	.irkn-acct .woocommerce-MyAccount-navigation a {
		font-size: 13px;
	}

	.irkn-acct table.shop_table th,
	.irkn-acct table.shop_table td {
		padding: 10px 8px;
		font-size: 14px;
	}
}