/*!
 * ANP Market Day — My Account.
 *
 * Written against WooCommerce's own class names rather than replacing its templates, so an update
 * to WooCommerce changes the markup underneath and this keeps working. Everything is scoped under
 * `.amd-account` (a body class) so nothing here can reach the rest of the shop.
 *
 * Colours and type come from the palette on :root, set in chrome.css.
 */

/* ---------- the frame ------------------------------------------------------------------------ */

.amd-account .woocommerce { max-width: 1120px; margin-inline: auto; }

/* Logged in, the screen is a sidebar of tabs and a panel. The panel is a `minmax(0, 1fr)` column so
   a wide orders table shrinks inside it rather than pushing the layout sideways. */
.amd-account-in .woocommerce {
  display: grid; grid-template-columns: 252px minmax(0, 1fr);
  gap: 28px; align-items: start;
}
.amd-account-in .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
/* WooCommerce lays these out the pre-grid way — `float` plus `width: 30%` and `68%`. Inside a grid
   the floats are ignored but the percentages are not, so each column sat at a third of the track it
   had been given: a 63px sidebar beside a 571px panel in a 1120px row. The widths go back to the
   grid, which is the thing that actually knows how wide the columns are. */
.amd-account .woocommerce .woocommerce-MyAccount-navigation,
.amd-account .woocommerce .woocommerce-MyAccount-content {
  width: auto; float: none; min-width: 0;
}

@media (max-width: 860px) {
  .amd-account-in .woocommerce { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- greeting ------------------------------------------------------------------------- */

/* The greeting is printed inside the same element that becomes the sidebar-and-panel grid, so it
   has to be told to span the row — left to itself it took the panel's column and pushed the tabs
   and the panel down into a second row at the wrong widths. */
.amd-account .amd-acc-hello { grid-column: 1 / -1; margin-bottom: 18px; }
.amd-account .amd-acc-hello h2 {
  margin: 6px 0 4px; font: 600 clamp(26px, 3vw, 34px)/1.12 var(--slab); color: var(--green-ink);
}
.amd-account .amd-acc-hello p { margin: 0; font-size: 15px; color: var(--ink-2); }

/* ---------- the tabs -------------------------------------------------------------------------- */

.amd-account .woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: 8px;
  background: var(--white); border-radius: 20px; box-shadow: 0 0 0 1px var(--line);
  display: grid; gap: 2px;
}
.amd-account .woocommerce-MyAccount-navigation li { margin: 0; }
.amd-account .woocommerce-MyAccount-navigation a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: 13px;
  font: 600 14.5px/1.2 var(--sans); color: var(--charcoal); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.amd-account .woocommerce-MyAccount-navigation a:hover { background: var(--paper); color: var(--green-ink); }
.amd-account .woocommerce-MyAccount-navigation .is-active > a {
  background: var(--green); color: #fff;
}
/* Signing out is not one of the places you can be, so it sits apart from the rest. */
.amd-account .woocommerce-MyAccount-navigation .amd-acc-customer-logout {
  margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line);
}
.amd-account .woocommerce-MyAccount-navigation .amd-acc-customer-logout a { color: var(--brown); }

@media (max-width: 860px) {
  /* A row of pills that scrolls, rather than a tall list above every page. The row is short — six
     items — so it never approaches the width that widens a phone's layout viewport. */
  .amd-account .woocommerce-MyAccount-navigation ul {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; padding: 6px;
  }
  .amd-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
  .amd-account .woocommerce-MyAccount-navigation li { flex: none; }
  .amd-account .woocommerce-MyAccount-navigation a { padding: 9px 14px; border-radius: 999px; white-space: nowrap; font-size: 13.5px; }
  .amd-account .woocommerce-MyAccount-navigation .amd-acc-customer-logout { margin: 0; padding: 0; border: 0; }
}

/* ---------- the panel ------------------------------------------------------------------------- */

.amd-account .woocommerce-MyAccount-content {
  background: var(--white); border-radius: 22px; box-shadow: 0 0 0 1px var(--line);
  padding: clamp(20px, 3vw, 32px);
}
.amd-account .woocommerce-MyAccount-content > p { color: var(--ink-2); }
.amd-account .woocommerce-MyAccount-content > p:first-of-type { margin-top: 0; }
.amd-account .woocommerce-MyAccount-content h2,
.amd-account .woocommerce-MyAccount-content h3,
.amd-account .woocommerce-MyAccount-content legend {
  font: 600 20px/1.2 var(--slab); color: var(--green-ink); margin: 0 0 14px; text-transform: none; letter-spacing: normal;
}
.amd-account .woocommerce-MyAccount-content a { color: var(--green-dk); }

/* ---------- orders ---------------------------------------------------------------------------- */

.amd-account .woocommerce-orders-table { width: 100%; border-collapse: collapse; margin: 0; }
.amd-account .woocommerce-orders-table th,
.amd-account .woocommerce-orders-table td {
  padding: 13px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle;
}
.amd-account .woocommerce-orders-table thead th {
  font: 700 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brown);
  border-bottom-width: 1.5px;
}
.amd-account .woocommerce-orders-table tbody td { font: 500 14.5px/1.35 var(--sans); color: var(--charcoal); }
.amd-account .woocommerce-orders-table tbody tr:last-child td { border-bottom: 0; }
.amd-account .woocommerce-orders-table__cell-order-number a { font-weight: 700; text-decoration: none; }

/* The status reads as a state, not a word in a row. */
.amd-account .woocommerce-orders-table__cell-order-status {
  font: 700 11.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--brown);
}
.amd-account .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status { color: var(--green-dk); }
.amd-account .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.amd-account .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status { color: #9B2C2C; }

.amd-account .woocommerce-orders-table__cell-order-actions { text-align: right; white-space: nowrap; }

/* On a phone each order becomes a card: the table's own header labels are repeated by WooCommerce
   in a `data-title` attribute, which is what makes this readable without a second markup path. */
@media (max-width: 640px) {
  .amd-account .woocommerce-orders-table thead { display: none; }
  .amd-account .woocommerce-orders-table,
  .amd-account .woocommerce-orders-table tbody,
  .amd-account .woocommerce-orders-table tr,
  .amd-account .woocommerce-orders-table td { display: block; width: auto; }
  .amd-account .woocommerce-orders-table tr {
    border: 1px solid var(--line); border-radius: 16px; padding: 6px 14px; margin-bottom: 12px; background: var(--paper);
  }
  .amd-account .woocommerce-orders-table td {
    border-bottom: 1px dashed var(--line); padding: 9px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
  }
  .amd-account .woocommerce-orders-table tr td:last-child { border-bottom: 0; }
  .amd-account .woocommerce-orders-table td::before {
    content: attr(data-title);
    font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brown);
    flex: none;
  }
  .amd-account .woocommerce-orders-table__cell-order-actions { text-align: right; }
}

/* ---------- addresses ------------------------------------------------------------------------- */

/* WooCommerce clears its old float layout with `::before`/`::after` carrying `content: ""`. A
   pseudo-element with content becomes a grid item, so the first of them took column one and pushed
   the real cards diagonally — billing top right, shipping below it on the left. They have no job
   in a grid. The same applies to the login and register pair, which uses the same wrapper. */
.amd-account .u-columns::before,
.amd-account .u-columns::after,
.amd-account .woocommerce-Addresses::before,
.amd-account .woocommerce-Addresses::after,
.amd-account .woocommerce::before,
.amd-account .woocommerce::after { content: none; display: none; }

/* The two address panels ARE the columns: WooCommerce puts `woocommerce-Address` on the same
   element as `u-column1`/`col-1`, and its own stylesheet floats those and sets them to 48%. Those
   rules carry three classes, so these have to reach the same weight or the cards come out at half
   width and staggered down the page. */
.amd-account .woocommerce-MyAccount-content .woocommerce-Addresses {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; align-items: start;
}
@media (max-width: 720px) {
  .amd-account .woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: 1fr; }
}
.amd-account .woocommerce-MyAccount-content .woocommerce-Addresses > .woocommerce-Address,
.amd-account .woocommerce-MyAccount-content .woocommerce-Address {
  width: auto; float: none; margin: 0;
  background: var(--paper); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); padding: 18px 20px;
}
/* Heading and its edit link on one line, the link kept whole rather than broken word by word. */
.amd-account .woocommerce-Address-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.amd-account .woocommerce-Address-title .edit { white-space: nowrap; flex: none; }
.amd-account .woocommerce-Address-title h2,
.amd-account .woocommerce-Address-title h3 { margin: 0 0 10px; font-size: 17px; }
.amd-account .woocommerce-Address-title .edit { font: 700 13px var(--sans); color: var(--green-dk); text-decoration: none; }
.amd-account .woocommerce-Address address { font-style: normal; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* ---------- forms ----------------------------------------------------------------------------- */

/* WooCommerce wraps every field in `<span class="woocommerce-input-wrapper">`. A span is inline, so
   it takes the input's own width and the input never fills its row — which is why first and last
   name sat as two small boxes in a wide column. */
.amd-account .woocommerce-input-wrapper { display: block; width: 100%; padding: 0; margin: 0; }
.amd-account .woocommerce-MyAccount-content input,
.amd-account .woocommerce-MyAccount-content select { margin: 0; }

.amd-account .woocommerce-MyAccount-content form { margin: 0; }
.amd-account .form-row,
.amd-account .woocommerce-form-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 0; }
.amd-account .woocommerce-address-fields__field-wrapper,
.amd-account .woocommerce-EditAccountForm > p.form-row { margin-bottom: 0; }

.amd-account .form-row label,
.amd-account .woocommerce-form-row label {
  font: 700 12px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--brown);
}
.amd-account .form-row label .required,
.amd-account .woocommerce-form-row label .required { color: var(--pumpkin); text-decoration: none; border: 0; }
.amd-account .form-row .optional { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2); }

.amd-account .woocommerce-MyAccount-content input[type="text"],
.amd-account .woocommerce-MyAccount-content input[type="email"],
.amd-account .woocommerce-MyAccount-content input[type="tel"],
.amd-account .woocommerce-MyAccount-content input[type="password"],
.amd-account .woocommerce-MyAccount-content select,
.amd-account .woocommerce-form input[type="text"],
.amd-account .woocommerce-form input[type="email"],
.amd-account .woocommerce-form input[type="password"],
.amd-account .select2-container .select2-selection--single {
  width: 100%; box-sizing: border-box; height: auto; min-height: 46px;
  padding: 11px 14px; border: 0; border-radius: 12px;
  background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line);
  font: 500 15px/1.3 var(--sans); color: var(--charcoal);
  -webkit-appearance: none; appearance: none;
}
.amd-account .woocommerce-MyAccount-content input:focus,
.amd-account .woocommerce-MyAccount-content select:focus,
.amd-account .woocommerce-form input:focus { outline: 3px solid var(--pumpkin); outline-offset: 2px; }
.amd-account .woocommerce-MyAccount-content input::placeholder { color: var(--ink-2); opacity: .7; }

/* WooCommerce gives these rows `width: 47%` and floats them, which is how it made two columns
   before grid existed. Inside a real grid that leaves each field at just under half of its own
   column, so the widths are handed back and the grid does the work. */
.amd-account .woocommerce-MyAccount-content .form-row,
.amd-account .woocommerce-MyAccount-content .woocommerce-form-row,
.amd-account .woocommerce-address-fields__field-wrapper > .form-row,
.amd-account .woocommerce-EditAccountForm > .form-row { width: auto; float: none; padding: 0; }

/* Two fields to a row where WooCommerce asks for it, and one on a phone. */
.amd-account .woocommerce-address-fields__field-wrapper,
.amd-account fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; border: 0; padding: 0; margin: 0 0 6px; }
.amd-account .form-row-wide,
.amd-account .woocommerce-form-row--wide,
.amd-account fieldset > legend { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .amd-account .woocommerce-address-fields__field-wrapper,
  .amd-account fieldset { grid-template-columns: 1fr; }
}

.amd-account fieldset {
  margin-top: 8px; padding-top: 16px; border-top: 1px dashed var(--line);
}
.amd-account .woocommerce-MyAccount-content em,
.amd-account .woocommerce-MyAccount-content .description { font-style: normal; font-size: 13px; color: var(--ink-2); }

/* ---------- buttons --------------------------------------------------------------------------- */

.amd-account .woocommerce-MyAccount-content .button,
.amd-account .woocommerce-MyAccount-content button[type="submit"],
.amd-account .woocommerce-Button,
.amd-account .woocommerce-form-login__submit,
.amd-account .woocommerce-form-register__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 24px; border: 0; border-radius: 999px;
  background: var(--green); color: #fff;
  font: 700 15px/1 var(--sans); text-decoration: none; cursor: pointer;
  /* Colour only. The theme animates a transform on its own buttons, which read here as the button
     shrinking under the pointer. */
  transition: background .15s ease, color .15s ease;
  transform: none !important;
}
.amd-account .woocommerce-MyAccount-content .button:hover,
.amd-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.amd-account .woocommerce-Button:hover { background: var(--green-dk); color: #fff; }

/* The per-order actions are secondary to the order itself. */
.amd-account .woocommerce-orders-table__cell-order-actions .button,
.amd-account .woocommerce-orders-table__cell-order-actions .woocommerce-button {
  background: transparent; color: var(--brown); box-shadow: inset 0 0 0 2px var(--brown);
  min-height: 0; padding: 8px 16px; font-size: 13.5px;
}
.amd-account .woocommerce-orders-table__cell-order-actions .button:hover,
.amd-account .woocommerce-orders-table__cell-order-actions .woocommerce-button:hover { background: var(--brown); color: #fff; }

/* ---------- notices --------------------------------------------------------------------------- */

.amd-account .woocommerce-message,
.amd-account .woocommerce-info,
.amd-account .woocommerce-error {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
  margin: 0 0 18px; padding: 14px 18px; border: 0; border-radius: 16px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
  font: 500 14.5px/1.45 var(--sans); color: var(--ink-2); list-style: none;
}
.amd-account .woocommerce-message { box-shadow: inset 0 0 0 1px rgba(0, 150, 57, .4); color: var(--green-ink); }
.amd-account .woocommerce-error { box-shadow: inset 0 0 0 1px rgba(155, 44, 44, .35); color: #7B2222; }
.amd-account .woocommerce-message::before,
.amd-account .woocommerce-info::before,
.amd-account .woocommerce-error::before { content: none; }
/* WooCommerce writes the action BEFORE the sentence. Visually it belongs after it, at the end of
   the row — `order` moves it without touching the markup, and it keeps its own line on a phone. */
.amd-account .woocommerce-message .button,
.amd-account .woocommerce-info .button,
.amd-account .woocommerce-error .button { order: 2; margin-left: auto; flex: none; }
.amd-account .woocommerce-message > *:not(.button),
.amd-account .woocommerce-info > *:not(.button) { order: 1; }
@media (max-width: 560px) {
  .amd-account .woocommerce-message .button,
  .amd-account .woocommerce-info .button { margin-left: 0; width: 100%; }
}

/* ---------- signed out: login and register ----------------------------------------------------- */

/* Two panels, side by side — stated rather than left to `auto-fit`, which counted a third track
   and left the pair at two thirds of the width with a gap beside them. */
.amd-account:not(.amd-account-in) .u-columns.col2-set {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0; align-items: start;
}
@media (max-width: 720px) {
  .amd-account:not(.amd-account-in) .u-columns.col2-set { grid-template-columns: 1fr; }
}
.amd-account:not(.amd-account-in) .u-column1,
.amd-account:not(.amd-account-in) .u-column2 {
  width: auto; float: none; margin: 0;
  background: var(--white); border-radius: 22px; box-shadow: 0 0 0 1px var(--line);
  padding: clamp(20px, 3vw, 30px);
}
.amd-account:not(.amd-account-in) .u-columns > div > h2 {
  margin: 0 0 4px; font: 600 24px/1.15 var(--slab); color: var(--green-ink); text-transform: none; letter-spacing: normal;
}
.amd-account:not(.amd-account-in) .woocommerce-form { margin: 14px 0 0; border: 0; padding: 0; }
.amd-account .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.amd-account .woocommerce-form-login__rememberme input { width: auto; min-height: 0; }
.amd-account .woocommerce-LostPassword { margin: 10px 0 0; font-size: 14px; }
.amd-account .woocommerce-privacy-policy-text p { font-size: 13px; color: var(--ink-2); }
.amd-account .cf-turnstile { margin: 4px 0 10px; }

/* The password field's reveal control sits inside the field, so the field leaves room for it. */
.amd-account .woocommerce-form .password-input { display: block; position: relative; }
.amd-account .woocommerce-form .password-input input { padding-right: 46px; }
.amd-account .woocommerce-form .show-password-input {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%); cursor: pointer;
}

/* ---------- odds and ends ----------------------------------------------------------------------- */

.amd-account .woocommerce-MyAccount-content mark { background: none; color: var(--green-ink); font-weight: 700; }
.amd-account .woocommerce-MyAccount-content .woocommerce-Price-amount { font-weight: 700; color: var(--green-ink); white-space: nowrap; }
.amd-account .clear { display: none; }


/* ---------- tab icons ---------------------------------------------------------------------------
   Drawn with a mask rather than put in the link text: WooCommerce escapes the label, so markup
   placed there is printed to the page as characters. A mask also takes the link's own colour, so
   the icon turns white on the active tab without a second set of files. Each icon is matched to
   the endpoint class, not the label, so translating the site cannot mismatch them. */
.amd-account .woocommerce-MyAccount-navigation a::before {
  content: ""; flex: none; width: 18px; height: 18px;
  background-color: var(--brown);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.amd-account .woocommerce-MyAccount-navigation .is-active > a::before { background-color: #fff; }
.amd-account .amd-acc-dashboard > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 4l9 7v8a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 4l9 7v8a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.amd-account .amd-acc-orders > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16l-1.2 11.1A2 2 0 0 1 16.8 20H7.2a2 2 0 0 1-2-1.9L4 7zm4 0a4 4 0 0 1 8 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16l-1.2 11.1A2 2 0 0 1 16.8 20H7.2a2 2 0 0 1-2-1.9L4 7zm4 0a4 4 0 0 1 8 0'/%3E%3C/svg%3E"); }
.amd-account .amd-acc-downloads > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10m0 0 4-4m-4 4-4-4M5 19h14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10m0 0 4-4m-4 4-4-4M5 19h14'/%3E%3C/svg%3E"); }
.amd-account .amd-acc-edit-address > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11zm0-8.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11zm0-8.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E"); }
.amd-account .amd-acc-payment-methods > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18v10H3zM3 11h18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18v10H3zM3 11h18'/%3E%3C/svg%3E"); }
.amd-account .amd-acc-edit-account > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-8 8a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-8 8a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.amd-account .amd-acc-customer-logout > a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 12H4m0 0 4-4m-4 4 4 4M10 4h9v16h-9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 12H4m0 0 4-4m-4 4 4 4M10 4h9v16h-9'/%3E%3C/svg%3E"); }

/* WooCommerce's dashboard opens by greeting the customer again, immediately under our own
   greeting. Only the dashboard puts a paragraph straight into the panel — every other tab leads
   with a table, a form or a notice — so the first one here is that greeting and nothing else.
   Matching on position rather than on the sign-out link inside it: that link is
   `wp-login.php?action=logout`, which says nothing about accounts, and this needs no `:has()`. */
.amd-account-in .woocommerce-MyAccount-content > p:first-of-type { display: none; }


/* ---------- payment methods ---------------------------------------------------------------------
   The card form is rendered by Stripe into the panel. Left alone it keeps its own narrow measure in
   the middle of a wide card, which reads as unfinished; it fills the panel like every other form. */
.amd-account .woocommerce-MyAccount-content form[id*="add_payment_method"],
.amd-account #add_payment_method,
.amd-account .woocommerce-PaymentMethods,
.amd-account .wc-stripe-elements-field,
.amd-account .woocommerce-MyAccount-content .payment_methods,
.amd-account .woocommerce-MyAccount-content .payment_box { width: 100%; max-width: none; box-sizing: border-box; }
.amd-account .woocommerce-MyAccount-content ul.payment_methods { list-style: none; margin: 0 0 18px; padding: 0; }
.amd-account .woocommerce-MyAccount-content .payment_box { background: var(--paper); border-radius: 16px; padding: 18px; margin-top: 10px; }
.amd-account .woocommerce-MyAccount-content .wc-stripe-elements-field,
.amd-account .woocommerce-MyAccount-content .StripeElement {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px;
  background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); border: 0;
}
.amd-account .woocommerce-MyAccount-content .form-row.place-order,
.amd-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods + p { margin-top: 16px; }
.amd-account .woocommerce-MyAccount-content #wc-stripe-payment-request-wrapper { width: 100%; }

/* ---------- choices ------------------------------------------------------------------------------
   Radio and checkbox rows read as a list of options rather than as run-on text. */
.amd-account .woocommerce-MyAccount-content input[type="radio"],
.amd-account .woocommerce-MyAccount-content input[type="checkbox"] {
  width: auto; min-height: 0; margin: 0 8px 0 0; accent-color: var(--green); flex: none;
}
.amd-account .woocommerce-MyAccount-content label:has(> input[type="radio"]),
.amd-account .woocommerce-MyAccount-content label:has(> input[type="checkbox"]) {
  display: flex; align-items: center; gap: 8px;
  font: 500 14.5px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--charcoal);
  padding: 7px 0;
}
.amd-account .woocommerce-MyAccount-content .mailchimp-newsletter label { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* ---------- nothing in the panel may be narrower than the panel ---------------------------------- */
.amd-account .woocommerce-MyAccount-content > form,
.amd-account .woocommerce-MyAccount-content > div,
.amd-account .woocommerce-MyAccount-content > table { width: 100%; box-sizing: border-box; }


/* The panel ended hard against the footer. */
.amd-account .woocommerce { margin-bottom: clamp(48px, 6vw, 88px); }

/* ---------- notice buttons keep their shape under the pointer ----------
 *
 * WooCommerce's own stylesheet carries this:
 *
 *   div.woocommerce-info a.button:hover { padding: 0 }
 *
 * At rest the button took our padding and looked right; the moment the pointer touched it, that
 * rule won and the button collapsed to the size of its own text — the "shrink and go glitchy" on
 * both "Confirm email address" and "Browse products". It wins because the padding we set lives on
 * a plain `.button` rule (three classes) while theirs carries `:hover` (three classes and two
 * elements), so it only ever beats us in that one state.
 *
 * The fix is to say the geometry for the hovered state as well, at a weight that holds. Colour
 * still changes on hover; the shape no longer does, which is the whole point of a button.
 */
.amd-account .woocommerce-MyAccount-content .button:hover,
.amd-account .woocommerce-MyAccount-content .button:focus,
.amd-account .woocommerce-MyAccount-content .button:active,
.amd-account .woocommerce-info .button:hover,
.amd-account .woocommerce-info .button:focus,
.amd-account .woocommerce-info .button:active,
.amd-account .woocommerce-message .button:hover,
.amd-account .woocommerce-message .button:focus,
.amd-account .woocommerce-error .button:hover,
.amd-account .woocommerce-error .button:focus {
  min-height: 46px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 0;
  transform: none !important;
}

/* The order-actions buttons are smaller by design; keep their own geometry on hover too. */
.amd-account .woocommerce-orders-table__cell-order-actions .button:hover,
.amd-account .woocommerce-orders-table__cell-order-actions .button:focus,
.amd-account .woocommerce-orders-table__cell-order-actions .woocommerce-button:hover,
.amd-account .woocommerce-orders-table__cell-order-actions .woocommerce-button:focus {
  min-height: 0;
  padding: 8px 16px;
}