/* ============================================================================
   MeshyFlix — customer area: cart, checkout, order, My Account.
   Tokens come from system.css. The contract is /DESIGN-SYSTEM.md — read it
   before editing. Radii: 8 / 14 / 999 only. Every border var(--hairline).
   Durations: --t-quick / --t-base / --t-slow only.

   Lime appears on exactly four things down here:
     · the one filled action per screen (Proceed to checkout / Place order / …)
     · focus rings
     · the token balance
     · the order total
   Nothing else. If you are about to add a fifth, don't.
   ========================================================================== */

.s3-account,
.woocommerce-cart .s3-page,
.woocommerce-checkout .s3-page{
  /* The single value in this file that system.css does not define. A failed
     payment or a rejected coupon has to be legible as a failure, and the
     palette has no semantic colour. Used in three places only: error notices,
     failed/cancelled order status, negative ledger deltas. */
  --s3-bad: #FF8A82;

  /* Sticky panels clear the 68px nav (nav.css) plus a gap. */
  --s3-stick: 96px;
}
body.admin-bar .s3-account,
body.admin-bar.woocommerce-cart .s3-page,
body.admin-bar.woocommerce-checkout .s3-page{ --s3-stick: 128px }
@media screen and (max-width:782px){
  body.admin-bar .s3-account,
  body.admin-bar.woocommerce-cart .s3-page,
  body.admin-bar.woocommerce-checkout .s3-page{ --s3-stick: 142px }
}

/* ---------------------------------------------------------------- shells ---
   page.php wraps cart and checkout in a narrow prose column with a display
   headline. Neither is right for a purchase flow, and .s3-prose a paints every
   descendant link lime — which would land lime text on the lime CTA. Both are
   neutralised here rather than in page.php, which this surface does not own. */

/* page.php picks its own measure class (.s3-wrap-narrow today, .s3-container
   before that) and this surface does not own that file — so the width is taken
   from whatever single wrapper it emits rather than from a class name that
   keeps moving. */
.woocommerce-cart .s3-page > *,
.woocommerce-checkout .s3-page > *{
  max-width:var(--w-wide);
}
.woocommerce-cart .s3-page,
.woocommerce-checkout .s3-page{ padding-block:clamp(36px,5vw,64px) clamp(60px,8vw,104px) }

/* The cart is a catalogue view and takes the wide measure. The checkout is a
   FORM, and a form column is sized by the longest thing anyone types into it,
   not by the monitor. At --w-wide the details column ran 820px, so a postcode
   field was 820px across — the single loudest "unstyled WooCommerce" tell on
   the page. Capping the whole checkout here rather than on .s3-checkout keeps
   the h1 that page.php renders above it on the same left edge as the form. */
.woocommerce-checkout .s3-page > *{ max-width:min(1120px, 100%) }

.woocommerce-cart .s3-prose,
.woocommerce-checkout .s3-prose{
  max-width:none; color:var(--text); font-size:16px; line-height:1.6;
}

.woocommerce-cart .s3-page-head,
.woocommerce-checkout .s3-page-head{ margin-bottom:clamp(24px,3vw,36px) }
.woocommerce-cart .s3-page-head .s3-h1,
.woocommerce-checkout .s3-page-head .s3-h1{
  font-size:clamp(28px,3.2vw,40px); line-height:1.06; letter-spacing:-.035em;
  max-width:none; margin:0;
}

.s3-account{ padding-block:clamp(36px,5vw,64px) clamp(60px,8vw,104px) }
.s3-account-wrap{
  width:100%; max-width:var(--w-wide); margin-inline:auto; padding-inline:var(--gutter);
}
.s3-account-head{ margin-bottom:clamp(24px,3vw,36px) }
.s3-account-title{
  font-size:clamp(28px,3.2vw,40px); line-height:1.06; letter-spacing:-.035em;
  font-weight:500; color:var(--text); margin:0;
}
.s3-account-sub{ margin:10px 0 0; color:var(--muted); font-size:15px; max-width:56ch }
.s3-account-back{
  display:inline-block; margin-bottom:12px; color:var(--muted); font-size:14px;
  font-weight:500; text-decoration:none; transition:color var(--t-quick) var(--ease);
}
.s3-account-back::before{ content:"← "; }
.s3-account-back:hover{ color:var(--text) }

/* ------------------------------------------------- link colour discipline ---
   The regression this block exists to prevent: a blanket rule such as
   `.woocommerce-MyAccount-content a{color:var(--accent)}` — main.css has
   carried one — paints lime text onto the lime CTA and the button vanishes.

   Two defences, because one is not enough when the sheet that would cause it
   is owned by someone else:

   1. The filled CTA's text colour is pinned. It cannot be reached, whatever
      any other stylesheet does now or later. Unlike the !important rules in
      the legacy-defence block at the foot of this file, this one is permanent.
   2. Everything else gets a deliberate default at a specificity that matches
      the aggressive upstream selector, so ordinary links read as text rather
      than as actions. Both selectors below exclude .s3-btn, so neither can
      ever touch a button. */

.s3-account a.s3-btn-primary,
.woocommerce-cart a.s3-btn-primary,
.woocommerce-checkout a.s3-btn-primary{ color:var(--accent-ink) !important }

.s3-acct-content a:not(.s3-btn):not(.button):not(.s3-dl-file),
.woocommerce-cart .s3-prose a:not(.s3-btn):not(.button),
.woocommerce-checkout .s3-prose a:not(.s3-btn):not(.button){ color:var(--text) }

/* The links that are meant to sit back. One notch more specific than the
   default above, and later in the file than any sheet that could fight it. */
.s3-acct-content a.s3-panel-link:not(.s3-btn),
.s3-acct-content a.s3-auth-lost:not(.s3-btn),
.s3-acct-content a.s3-dl-file:not(.s3-btn),
.woocommerce-cart .s3-prose a.s3-disclose-link:not(.s3-btn),
.woocommerce-cart .s3-prose a.s3-ci-remove:not(.s3-btn),
.woocommerce-checkout .s3-prose a.s3-disclose-link:not(.s3-btn),
.woocommerce-checkout .s3-prose a.s3-ci-remove:not(.s3-btn),
.woocommerce-cart .s3-prose .s3-terms a:not(.s3-btn),
.woocommerce-checkout .s3-prose .s3-terms a:not(.s3-btn),
.woocommerce-cart .s3-prose .s3-summary-row a:not(.s3-btn),
.woocommerce-checkout .s3-prose .s3-summary-row a:not(.s3-btn){ color:var(--muted) }

/* Title links dim on hover; they never light up. main.css still carries legacy
   `… h3 a:hover{color:var(--accent)}` rules that would otherwise win on
   specificity, so these are scoped one level deeper. */
.s3-acct-content .s3-dl-name a:hover,
.s3-acct-content .s3-order-title a:hover,
.s3-acct-content .s3-order-item-name a:hover{ color:var(--muted) }

/* ------------------------------------------------------------ primitives ---
   Buttons: system.css owns .s3-btn and its variants. Only the two sizes the
   customer area needs are added here. */

.s3-btn-sm{ padding:0 14px; height:34px; border-radius:var(--r-chip); font-size:13px }
.s3-btn-block{ width:100%; justify-content:center }

/* Fields. 14px labels in --muted, input on --surface-2, hairline border,
   accent focus ring. */
/* ---------------------------------------------------------- field layout ---
   FLEX, not grid, and the reason is worth keeping.

   WooCommerce tags almost every billing field .form-row-wide, because core's
   checkout is one narrow column where that is the right answer. Ours is not,
   so the short fields have to be paired — and which fields exist, and in what
   ORDER, is decided per country by the locale table: Germany drops the state
   row and puts the postcode before the city, Ireland adds a county, the US
   makes state a select. A two-column grid cannot survive that. Any half-width
   field that ends up alone before a full-width one leaves a visible hole, and
   `grid-auto-flow: dense` fixes the hole by reordering the fields away from
   their tab order, which is worse than the hole.

   Flex wrapping has no such failure. `flex-grow:1` on a half means a field
   that ends up alone on its line simply fills it, so every locale lays itself
   out correctly with no per-country rules and no gaps. */
.s3-fields{ display:flex; flex-wrap:wrap; gap:16px }
.s3-fields > .form-row{ flex:1 1 100%; min-width:0 }

/* The short ones. Two fit a line; one on its own grows to fill it. Chosen by
   what the field HOLDS rather than by the class Woo happened to tag it with —
   a postcode is short in every locale, a street address is not.

   Written as [id="…"] rather than #… deliberately: an id selector outranks
   everything else in this file and could not then be answered by the one-line
   stacking rule in the phone breakpoint. As attribute selectors they all sit
   at the same specificity as `.s3-fields > .form-row`, so source order is the
   only thing deciding — which is the whole of the reasoning, in order. */
.s3-fields > .form-row-first,
.s3-fields > .form-row-last,
.s3-fields > [id="billing_city_field"],
.s3-fields > [id="billing_state_field"],
.s3-fields > [id="billing_postcode_field"],
.s3-fields > [id="billing_phone_field"],
.s3-fields > [id="billing_email_field"]{ flex:1 1 calc(50% - 8px) }

/* Long ones keep the full line even where a locale has tagged them
   .form-row-first / -last and caught the rule above. */
.s3-fields > [id="billing_company_field"],
.s3-fields > [id="billing_country_field"],
.s3-fields > [id="billing_address_1_field"],
.s3-fields > [id="billing_address_2_field"]{ flex:1 1 100% }

.s3-fields .form-row,
.s3-form .form-row{ margin:0 }

.s3-account label,
.woocommerce-cart label,
.woocommerce-checkout label:not(.s3-check-inline):not(.woocommerce-form__label-for-checkbox){
  display:block; margin-bottom:7px;
  font-size:14px; font-weight:500; line-height:1.4; color:var(--muted);
}
.s3-account .required,
.woocommerce-checkout .required{ color:var(--faint); text-decoration:none; border:0 }
.s3-field-hint{
  display:block; margin-top:7px; font-size:13px; line-height:1.5; color:var(--faint);
}

.s3-input,
.s3-account input[type=text], .s3-account input[type=email], .s3-account input[type=tel],
.s3-account input[type=password], .s3-account input[type=number], .s3-account input[type=search],
.s3-account textarea, .s3-account select,
.woocommerce-cart input[type=text], .woocommerce-cart input[type=number],
.woocommerce-checkout input[type=text], .woocommerce-checkout input[type=email],
.woocommerce-checkout input[type=tel], .woocommerce-checkout input[type=password],
.woocommerce-checkout input[type=number], .woocommerce-checkout textarea,
.woocommerce-checkout select{
  width:100%; box-sizing:border-box;
  padding:12px 14px; min-height:48px;
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--hairline); border-radius:var(--r-chip);
  font-family:var(--font);
  /* 16px is a floor, not a preference. Below it iOS Safari re-scales the whole
     viewport the moment a field takes focus and the reader has to pinch back
     out — on every one of the eleven billing fields in turn. It used to be
     pinned at 16 only under a 900px breakpoint, which left an iPad in
     landscape, and any desktop Safari window narrower than its own zoom
     threshold, still zooming. There is no width at which 15px is worth the
     risk, so the floor is unconditional. */
  font-size:16px; line-height:1.4;
  transition:border-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
  appearance:none;
}
.s3-account textarea, .woocommerce-checkout textarea{ min-height:96px; resize:vertical }

.s3-account input:focus, .s3-account textarea:focus, .s3-account select:focus,
.woocommerce-cart input:focus,
.woocommerce-checkout input:focus, .woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(207,254,37,.14);
}
.s3-account input::placeholder, .woocommerce-cart input::placeholder,
.woocommerce-checkout input::placeholder, .woocommerce-checkout textarea::placeholder{ color:var(--faint) }

.s3-account select, .woocommerce-checkout select{
  padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,rgba(242,245,240,.62) 50%),
                   linear-gradient(135deg,rgba(242,245,240,.62) 50%,transparent 50%);
  /* Centred off the box rather than off a measured top offset, so the chevron
     stays put when the field height changes. */
  background-position:calc(100% - 19px) calc(50% - 2px), calc(100% - 14px) calc(50% - 2px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}

/* Woo marks invalid fields on the wrapper, not the input. */
.woocommerce-invalid input.s3-input,
.woocommerce-invalid input.input-text,
.woocommerce-invalid select,
.woocommerce-invalid .select2-selection{ border-color:var(--s3-bad) }
.woocommerce-checkout .woocommerce-invalid label{ color:var(--s3-bad) }

/* Checkboxes */
.s3-check label,
.s3-check-inline,
.woocommerce-form__label-for-checkbox{
  display:flex; align-items:flex-start; gap:10px; margin:0;
  font-size:14px; line-height:1.5; color:var(--muted); cursor:pointer;
}
.s3-check input[type=checkbox],
.s3-check-inline input[type=checkbox],
.woocommerce-form__label-for-checkbox input[type=checkbox]{
  flex:none; width:17px; height:17px; margin-top:1px;
  accent-color:var(--accent); cursor:pointer;
  /* accent-color only paints the CHECKED box. Unchecked, the browser draws its
     light-scheme control — a white square on a near-black panel, which read as
     the loudest thing on the sign-in screen. This is the switch that tells it
     to draw the dark one. */
  color-scheme:dark;
}

/* Password reveal. WooCommerce injects this button into the password field and
   styles it in woocommerce.css, which this theme does not load — so it arrives
   as a bare 16x6 lozenge floating above the field.

   It used to be rebuilt here as a ring and a pupil, which read as a radio
   button rather than a control that shows a password. It is now an eye, and an
   eye with a line through it once the password is showing. The glyphs are mask
   shapes, not pictures: the fill is currentColor, so the icon takes its colour
   from the tokens like everything else. The `black` inside each data URI is
   only there to make the stroke opaque — a mask reads alpha, never hue.

   woocommerce.js appends exactly one of these per `.password-input`, and the
   templates in woocommerce/myaccount/ write that wrapper by hand so the script
   cannot wrap a second time. See form-login.php for the full note. */
.password-input{ position:relative; display:block }
.password-input input{ padding-right:56px }
.show-password-input{
  position:absolute; right:2px; top:50%; transform:translateY(-50%);
  display:grid; place-items:center;
  width:48px; height:46px; padding:0;
  background:none; border:0; cursor:pointer; color:var(--faint);
  transition:color var(--t-quick) var(--ease);
}
.show-password-input:hover{ color:var(--text) }
.show-password-input::before{
  content:""; display:block; width:20px; height:20px; background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:20px 20px;   mask-size:20px 20px;
  -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='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%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='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.show-password-input.display-password{ color:var(--text) }
.show-password-input.display-password::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='M10.6 6.1A9.6 9.6 0 0 1 12 6c6.4 0 10 6 10 6a15.9 15.9 0 0 1-2.7 3.4'/%3E%3Cpath d='M6.6 6.6A15.9 15.9 0 0 0 2 12s3.6 6 10 6a9.7 9.7 0 0 0 4-.8'/%3E%3Cpath d='M14.1 14.1a3 3 0 1 1-4.2-4.2'/%3E%3Cpath d='m3 3 18 18'/%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='M10.6 6.1A9.6 9.6 0 0 1 12 6c6.4 0 10 6 10 6a15.9 15.9 0 0 1-2.7 3.4'/%3E%3Cpath d='M6.6 6.6A15.9 15.9 0 0 0 2 12s3.6 6 10 6a9.7 9.7 0 0 0 4-.8'/%3E%3Cpath d='M14.1 14.1a3 3 0 1 1-4.2-4.2'/%3E%3Cpath d='m3 3 18 18'/%3E%3C/svg%3E");
}

/* Inline field messages. Written by the templates' own validators (one small
   script per form, no dependency) into the row the field sits in, and read out
   by role="alert". WooCommerce only reports these after a round trip. */
.s3-field-err{
  display:block; margin-top:7px;
  font-size:13px; line-height:1.5; color:var(--s3-bad);
}
.s3-field.is-invalid > label{ color:var(--s3-bad) }

/* WooCommerce's own strength readout, which arrives with no styling because
   woocommerce.css is disabled. It is a live value, which is the one reason
   anything down here is allowed to go lime: `strong` is the state that unlocks
   the button, so it is worth the accent and nothing else in this block is. */
.woocommerce-password-strength{
  margin-top:8px; padding:9px 13px;
  background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-chip);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  font-variant-numeric:tabular-nums; color:var(--muted);
}
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad{ color:var(--s3-bad); border-color:var(--s3-bad) }
.woocommerce-password-strength.strong{ color:var(--accent); border-color:var(--accent) }
.woocommerce-password-hint{
  display:block; margin-top:7px;
  font-family:var(--font); font-size:13px; line-height:1.5;
  letter-spacing:0; text-transform:none; color:var(--faint);
}

/* The meter disables the submit while the password is too weak. Without a
   disabled state that reads as a dead button rather than a locked one. */
.s3-btn[disabled], .s3-btn.disabled{ opacity:.45; cursor:not-allowed }
.s3-btn[disabled]:hover, .s3-btn.disabled:hover{ background:var(--accent) }
.s3-btn-glass[disabled]:hover, .s3-btn-glass.disabled:hover{ background:var(--glass-1) }

/* selectWoo / select2 — the country field. Woo's own stylesheet is disabled,
   so the base widget arrives unstyled and needs rebuilding from scratch. */
.select2-container--default .select2-selection--single{
  height:auto; padding:11px 14px; background:var(--surface-2);
  border:1px solid var(--hairline); border-radius:var(--r-chip);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--text); font-size:15px; line-height:1.4; padding:0;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{ color:var(--faint) }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:100%; right:10px }
.select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color:var(--muted) transparent transparent; border-width:5px 4px 0;
}
.select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(207,254,37,.14);
}
.select2-dropdown{
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-chip);
  color:var(--text); overflow:hidden;
}
.select2-container--default .select2-search--dropdown{ padding:8px }
.select2-container--default .select2-search--dropdown .select2-search__field{
  background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-chip);
  color:var(--text); padding:9px 11px; font-family:var(--font); font-size:14px;
}
.select2-container--default .select2-results__option{
  padding:9px 13px; font-size:14px; color:var(--muted); background:transparent;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true]{
  background:var(--glass-2); color:var(--text);
}

/* Panels — one interaction language: the hairline brightens, nothing moves. */
.s3-panel{
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-card);
  padding:clamp(18px,2.2vw,26px); margin:0 0 16px;
  transition:border-color var(--t-base) var(--ease);
}
.s3-panel:last-child{ margin-bottom:0 }
.s3-panel-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:16px }
.s3-panel-title{ margin:0 0 16px; font-size:16px; font-weight:500; letter-spacing:-.01em; color:var(--text) }
.s3-panel-head .s3-panel-title{ margin:0 }
.s3-panel-link{ font-size:14px; font-weight:500; color:var(--muted); text-decoration:none; transition:color var(--t-quick) var(--ease) }
.s3-panel-link:hover{ color:var(--text) }
.s3-panel-empty{ margin:0; color:var(--faint); font-size:14px; line-height:1.6 }
.s3-panel-foot{ margin:16px 0 0; padding-top:16px; border-top:1px solid var(--hairline); font-size:14px; color:var(--muted) }
.s3-panel-foot a{ color:var(--text); text-decoration:underline; text-underline-offset:3px }
.s3-panel-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px }
.s3-panel-alert{ border-color:var(--s3-bad) }
.s3-panel-alert p{ margin:0; color:var(--muted); font-size:15px; line-height:1.6 }

.s3-narrow{ max-width:var(--w-narrow) }
.s3-lede-sm{ margin:0 0 18px; color:var(--muted); font-size:15px; line-height:1.6; max-width:56ch }

/* Empty states */
.s3-empty{
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  padding:clamp(40px,6vw,72px) 24px;
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-card);
}
.s3-empty svg{ color:var(--faint) }
.s3-empty h2{ margin:0; font-size:20px; font-weight:500; letter-spacing:-.02em; color:var(--text) }
.s3-empty p{ margin:0; max-width:46ch; color:var(--muted); font-size:15px; line-height:1.6 }
.s3-empty .s3-btn{ margin-top:8px }

/* Status */
.s3-status{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.s3-status::before{
  content:""; width:6px; height:6px; border-radius:var(--r-pill); background:var(--faint);
}
.s3-status-processing::before, .s3-status-pending::before, .s3-status-on-hold::before{ background:var(--accent) }
.s3-status-failed::before, .s3-status-cancelled::before{ background:var(--s3-bad) }
.s3-status-failed, .s3-status-cancelled{ color:var(--s3-bad) }

/* WooCommerce notices — no plugin boxes, no icons, no coloured rails. */
.woocommerce-notices-wrapper:empty{ display:none }
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.woocommerce-NoticeGroup > ul{
  list-style:none; margin:0 0 16px; padding:14px 18px;
  background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-card);
  color:var(--text); font-size:14px; line-height:1.6;
}
.woocommerce-message li, .woocommerce-info li, .woocommerce-error li,
.woocommerce-NoticeGroup li{ margin:0; padding:0; list-style:none }
.woocommerce-message li + li, .woocommerce-error li + li{ margin-top:6px }
.woocommerce-error{ border-color:var(--s3-bad); color:var(--s3-bad) }
.woocommerce-message a:not([class]), .woocommerce-info a:not([class]){
  color:var(--text); text-decoration:underline; text-underline-offset:3px;
}
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button{
  display:inline-flex; align-items:center; height:32px; padding:0 14px; margin-left:10px;
  background:var(--glass-1); color:var(--text); border:1px solid var(--hairline);
  border-radius:var(--r-chip); font-size:13px; font-weight:500; text-decoration:none;
}

/* Inline coupon / login disclosure */
.s3-disclose{ margin:0 }
.s3-disclose-link{
  font-size:14px; font-weight:500; color:var(--muted); text-decoration:none;
  border-bottom:1px solid var(--hairline); padding-bottom:2px;
  transition:color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease);
}
.s3-disclose-link:hover{ color:var(--text); border-color:var(--hairline-2) }

.s3-inline-form{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:4px 0 0 }
/* Still 16px: it is an input, and iOS does not care that it is a small one. */
.s3-inline-form .s3-input{ width:auto; flex:1 1 220px; min-height:48px; padding:10px 14px; font-size:16px }

/* ================================================================== CART == */

.s3-cart{ display:grid; grid-template-columns:minmax(0,1fr) 344px; gap:28px; align-items:start }
.s3-cart-main{ min-width:0 }

.s3-cart-items{ list-style:none; margin:0; padding:0 }
.s3-ci{
  display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:18px; align-items:start;
  padding:20px 0; border-bottom:1px solid var(--hairline);
}
.s3-ci:first-child{ padding-top:0 }
.s3-ci:last-child{ border-bottom:0 }

.s3-ci-thumb{
  display:block; width:96px; aspect-ratio:1; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-card);
  transition:border-color var(--t-base) var(--ease);
}
.s3-ci-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.s3-ci:hover .s3-ci-thumb{ border-color:var(--hairline-2) }

.s3-ci-body{ min-width:0 }
.s3-ci-name{ margin:0 0 8px; font-size:17px; font-weight:500; letter-spacing:-.01em; line-height:1.3 }
.s3-ci-name a{ color:var(--text); text-decoration:none; transition:color var(--t-quick) var(--ease) }
.s3-ci-name a:hover{ color:var(--muted) }

.s3-ci-attrs{ list-style:none; margin:0 0 8px; padding:0; display:flex; flex-wrap:wrap; gap:6px }
.s3-ci-attrs p{ margin:0; display:inline }
.s3-ci-attr{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border:1px solid var(--hairline); border-radius:var(--r-chip);
  background:var(--glass-1);
}
.s3-ci-attr-k{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint) }
.s3-ci-attr-v{ font-size:13px; font-weight:500; color:var(--text) }

.s3-ci-spec{
  display:flex; flex-wrap:wrap; gap:4px 12px; margin:0 0 10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  font-variant-numeric:tabular-nums; color:var(--muted);
}
.s3-ci-spec span + span::before{ content:"·"; margin-right:12px; color:var(--faint) }
.s3-ci-tokens{ color:var(--text) }

.s3-ci-remove{
  display:inline-block; font-size:13px; color:var(--faint); text-decoration:none;
  border-bottom:1px solid transparent; transition:color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease);
}
.s3-ci-remove:hover{ color:var(--s3-bad); border-bottom-color:currentColor }

.s3-ci-side{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; text-align:right }
.s3-ci-qty-fixed{
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  font-variant-numeric:tabular-nums; color:var(--faint);
}
.s3-ci-total{
  font-family:var(--mono); font-size:16px; font-variant-numeric:tabular-nums;
  color:var(--text); white-space:nowrap;
}
.s3-ci-total del{ color:var(--faint); margin-right:6px }

.quantity{ display:inline-flex; align-items:center }
.quantity input[type=number]{ width:74px; min-height:38px; padding:8px 10px; text-align:center; font-family:var(--mono) }

.s3-cart-actions{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  padding-top:20px; margin-top:4px; border-top:1px solid var(--hairline);
}
.s3-coupon{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.s3-coupon .s3-input{ width:auto; flex:0 1 200px; min-height:48px; padding:10px 14px; font-size:16px }
.s3-cart-update{ font-size:14px }

/* Summary panel — cart and checkout share it. */
.s3-cart-aside{ position:sticky; top:var(--s3-stick) }
.s3-summary{
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-card);
  padding:22px;
}
.s3-summary-title{ margin:0 0 16px; font-size:16px; font-weight:500; letter-spacing:-.01em; color:var(--text) }

.s3-summary-rows{ margin:0; display:grid; gap:2px }
.s3-summary-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:9px 0 }
.s3-summary-row dt{ margin:0; font-size:14px; color:var(--muted) }
.s3-summary-row dd{
  margin:0; font-family:var(--mono); font-size:14px; font-variant-numeric:tabular-nums;
  color:var(--text); white-space:nowrap;
}
.s3-summary-row a{ color:var(--muted); font-size:12px; text-decoration:underline; text-underline-offset:3px }
.s3-summary-total{
  margin-top:6px; padding-top:16px; border-top:1px solid var(--hairline);
}
.s3-summary-total dt{ font-size:15px; font-weight:500; color:var(--text) }
/* Live value: the number the buyer is committing to. */
.s3-summary-total dd{ font-size:24px; letter-spacing:-.02em; color:var(--accent) }
.s3-summary-total dd .woocommerce-Price-currencySymbol{ font-size:.75em }

.s3-summary-cta{ margin-top:18px }
.s3-summary-note{ margin:14px 0 0; font-size:13px; line-height:1.5; color:var(--faint) }

/* ============================================================== CHECKOUT == */

/* The two disclosures Woo puts above the form. They were two 13px links loose
   on the page background, directly under the h1, reading as leftovers from
   something else. They are real controls, so they get a real bar: one hairline
   row that the login and coupon forms drop out of when opened. */
.s3-checkout-pre{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
  margin-bottom:clamp(20px,2.4vw,28px); padding:13px 18px;
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-chip);
}
.s3-checkout-pre:empty{ display:none }
.s3-checkout-pre .woocommerce-notices-wrapper,
.s3-checkout-pre form.checkout_coupon,
.s3-checkout-pre form.woocommerce-form-login{ flex:1 0 100% }
.s3-checkout-pre .s3-disclose{ display:flex; align-items:center }
/* One divider between them, drawn by the second item so it never leads. */
.s3-checkout-pre .s3-disclose + .s3-disclose{
  padding-left:22px; border-left:1px solid var(--hairline);
}
.s3-checkout-pre .s3-disclose-link{
  font-size:14px; font-weight:500; text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--hairline-2);
  transition:color var(--t-quick) var(--ease), text-decoration-color var(--t-quick) var(--ease);
}
.s3-checkout-pre .s3-disclose-link:hover{ color:var(--text); text-decoration-color:currentColor }

/* Column 2 is fixed because the panel holds prices, and a price column that
   resizes with the viewport makes the number move for no reason. Column 1 is
   whatever is left of the 1120px cap — about 620px, which is a form measure. */
.s3-checkout-grid{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:28px; align-items:start }
.s3-checkout-main{ min-width:0; display:flex; flex-direction:column; gap:16px }
.s3-checkout-main .col2-set{ display:flex; flex-direction:column; gap:16px }
.s3-checkout-main .col-1,
.s3-checkout-main .col-2{ width:auto; float:none; display:flex; flex-direction:column; gap:16px }
/* WooCommerce 8.5+ opens the billing column with <wc-order-attribution-inputs>,
   a custom element holding nothing but hidden inputs. It measures 0px tall and
   is invisible — but as a flex child it still claims a 16px gap, which pushed
   the first card down by a row nobody could see. */
.s3-checkout-main wc-order-attribution-inputs{ display:none }

/* Each group of fields is a block, not a run of labels floating on the page.
   Same surface, hairline and radius as the order panel opposite, so the two
   columns read as one object rather than as a form beside a card. */
.s3-fieldset{
  margin:0; padding:clamp(20px,2.4vw,26px);
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-card);
}
.s3-fieldset:last-child{ margin-bottom:0 }
/* The account-page variant is a bare group inside a panel that already has all
   of the above; it must not gain a second border. */
.s3-fieldset-plain{ border:0; padding:0; margin:0; background:none }
.s3-fieldset-title{ margin:0 0 6px; font-size:19px; font-weight:500; letter-spacing:-.02em; color:var(--text) }
.s3-fieldset-note{ margin:0 0 20px; font-size:14px; line-height:1.5; color:var(--muted) }
.s3-fieldset-title + .s3-fields{ margin-top:20px }

/* The account offer, nested inside the billing card by form-billing.php. A
   rule separates it from the fields above; it is not a second card. */
.s3-checkout-main .woocommerce-account-fields{
  margin-top:20px; padding-top:20px; border-top:1px solid var(--hairline);
}
.s3-checkout-main .woocommerce-account-fields .create-account.s3-fields{ margin-top:16px }

.s3-checkout-aside{ position:sticky; top:var(--s3-stick); min-width:0 }
.s3-checkout-panel{
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-card);
  padding:22px;
}

.s3-review-items{ list-style:none; margin:0 0 4px; padding:0 }
.s3-review-item{
  display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:14px; align-items:start;
  padding:14px 0; border-bottom:1px solid var(--hairline);
}
.s3-review-item:first-child{ padding-top:0 }
.s3-review-thumb{
  position:relative; display:block; width:52px; aspect-ratio:1; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-chip);
}
.s3-review-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.s3-review-qty{
  position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 5px;
  display:grid; place-items:center; border-radius:var(--r-pill);
  background:var(--surface-3); border:1px solid var(--hairline);
  font-family:var(--mono); font-size:10px; color:var(--text);
}
.s3-review-body{ min-width:0; display:block }
.s3-review-name{ display:block; font-size:14px; font-weight:500; color:var(--text); line-height:1.35; margin-bottom:6px }
.s3-review-body .s3-ci-attrs{ margin:0 }
.s3-review-body .s3-ci-attr{ padding:3px 8px }
.s3-review-body .s3-ci-attr-v{ font-size:12px }
.s3-review-price{
  font-family:var(--mono); font-size:14px; font-variant-numeric:tabular-nums;
  color:var(--text); white-space:nowrap;
}

.s3-review .s3-summary-rows{ margin-top:14px }

/* Payment */
.s3-payment{ margin-top:20px; padding-top:20px; border-top:1px solid var(--hairline) }
.s3-payment-title{ margin:0 0 12px; font-size:14px; font-weight:500; color:var(--muted) }
.s3-methods{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:8px }
.s3-method{
  border:1px solid var(--hairline); border-radius:var(--r-chip); background:var(--surface-2);
  padding:0; overflow:hidden; transition:border-color var(--t-quick) var(--ease);
}
.s3-method:hover{ border-color:var(--hairline-2) }
.s3-method .s3-method-input{ position:absolute; opacity:0; width:1px; height:1px }
.s3-method-label{
  display:flex !important; align-items:center; gap:10px; margin:0 !important;
  padding:14px 16px; cursor:pointer;
  font-size:15px !important; font-weight:500 !important; color:var(--text) !important;
}
.s3-method-label::before{
  content:""; flex:none; width:16px; height:16px; border-radius:var(--r-pill);
  border:1px solid var(--hairline-2); background:transparent;
  transition:border-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
}
.s3-method:has(.s3-method-input:checked){ border-color:var(--accent) }
.s3-method:has(.s3-method-input:checked) .s3-method-label::before{
  border-color:var(--accent); box-shadow:inset 0 0 0 4px var(--accent);
}
.s3-method:has(.s3-method-input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px }
.s3-method-icon{ margin-left:auto; display:inline-flex; gap:6px; align-items:center }
.s3-method-icon img{ max-height:22px; width:auto; display:block }
.s3-method-box{
  padding:0 16px 16px; margin:0; color:var(--muted); font-size:13.5px; line-height:1.6;
}
.s3-method-box p:last-child{ margin-bottom:0 }
.s3-methods-empty{
  padding:14px 16px; border:1px solid var(--hairline); border-radius:var(--r-chip);
  color:var(--muted); font-size:14px; line-height:1.6;
}

.s3-terms{ margin:0 0 16px; font-size:13px; line-height:1.6; color:var(--faint) }
.s3-terms a{ color:var(--muted); text-decoration:underline; text-underline-offset:3px }
.s3-terms a:hover{ color:var(--text) }
.s3-place-order{ margin:0 }
.s3-place-order noscript{ display:block; margin-bottom:12px; font-size:13px; color:var(--muted) }

/* Woo blocks the payment panel during AJAX with an overlay + spinner. */
.blockUI.blockOverlay{ background:var(--bg) !important; opacity:.55 !important }

/* Login form dropped in by woocommerce_login_form() (global/form-login.php).
   Scoped to the purchase flow. `.woocommerce-form-login` is also the class on
   the my-account login form, and unscoped this put a bordered box inside the
   sign-in panel — the second of the two stacked boxes that screen used to be. */
.woocommerce-checkout .woocommerce-form-login,
.woocommerce-cart .woocommerce-form-login{
  padding:18px; background:var(--surface-1);
  border:1px solid var(--hairline); border-radius:var(--r-card);
}
.woocommerce-checkout .woocommerce-form-login .form-row,
.woocommerce-cart .woocommerce-form-login .form-row{ margin-bottom:14px }
.woocommerce-form-login .woocommerce-form-login__submit{
  display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 20px;
  background:var(--glass-1); color:var(--text); border:1px solid var(--hairline);
  border-radius:var(--r-chip); font-family:var(--font); font-size:14px; font-weight:500; cursor:pointer;
  transition:background var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease);
}
.woocommerce-form-login .woocommerce-form-login__submit:hover{ background:var(--glass-2); border-color:var(--hairline-2) }
.woocommerce-form-login .lost_password a{ color:var(--muted); font-size:13px }

/* order-pay: Woo renders its own table there and we do not override it. */
.woocommerce-checkout .shop_table{
  width:100%; border-collapse:collapse; margin-bottom:20px;
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-card);
}
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td{
  padding:13px 16px; text-align:left; border-bottom:1px solid var(--hairline);
  font-size:14px; color:var(--muted); font-weight:400;
}
.woocommerce-checkout .shop_table thead th{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
}
.woocommerce-checkout .shop_table td:last-child,
.woocommerce-checkout .shop_table th:last-child{ text-align:right; font-variant-numeric:tabular-nums }
.woocommerce-checkout .shop_table tr:last-child td,
.woocommerce-checkout .shop_table tr:last-child th{ border-bottom:0 }

/* =============================================== THANK YOU / ORDER DETAIL == */

.s3-thanks, .s3-order-detail{ max-width:var(--w-base) }
.s3-thanks-head{ margin-bottom:24px }
/* Not accent: a confirmation glyph is neither an action nor a live value. */
.s3-thanks-mark{
  display:inline-grid; place-items:center; width:44px; height:44px; margin-bottom:14px;
  border-radius:var(--r-pill); background:var(--surface-2);
  border:1px solid var(--hairline); color:var(--text);
}
.s3-thanks-title{ margin:0 0 8px; font-size:clamp(24px,2.6vw,32px); font-weight:500; letter-spacing:-.03em; line-height:1.1; color:var(--text) }
.s3-thanks-lede{ margin:0; color:var(--muted); font-size:16px; line-height:1.6; max-width:56ch }

.s3-order-meta{ display:flex; flex-wrap:wrap; gap:20px 40px; margin:0 }
.s3-order-meta-item{ margin:0 }
.s3-order-meta-item dt{ display:block; margin-bottom:6px }
.s3-order-meta-item dd{
  margin:0; font-family:var(--mono); font-size:15px; font-variant-numeric:tabular-nums; color:var(--text);
}
/* Live value. */
.s3-order-meta-total dd{ color:var(--accent) }

.s3-order-items{ list-style:none; margin:0; padding:0 }
.s3-order-item{
  display:grid; grid-template-columns:80px minmax(0,1fr) auto; gap:16px; align-items:start;
  padding:16px 0; border-bottom:1px solid var(--hairline);
}
.s3-order-item:first-child{ padding-top:0 }
.s3-order-item:last-child{ border-bottom:0 }
.s3-order-thumb{
  display:block; width:80px; aspect-ratio:1; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-chip);
}
.s3-order-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.s3-order-item-body{ min-width:0 }
.s3-order-item-name{ margin:0 0 8px; font-size:16px; font-weight:500; letter-spacing:-.01em; line-height:1.3 }
.s3-order-item-name a{ color:var(--text); text-decoration:none }
.s3-order-item-name a:hover{ color:var(--muted) }
.s3-order-item-side{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right }

.s3-order-detail .s3-summary-rows,
.s3-thanks .s3-summary-rows{ margin-top:16px; padding-top:8px; border-top:1px solid var(--hairline) }
/* The lime total on these screens is the one in the meta strip above. Two of
   them on one page is two claims to being the number that matters. */
.s3-order-detail .s3-summary-total dd,
.s3-thanks .s3-summary-total dd{ color:var(--text); font-size:20px }

.s3-address{ font-style:normal; color:var(--muted); font-size:15px; line-height:1.75; margin:0 }
.s3-order-contact{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 32px }
.s3-order-contact li{ font-size:14px; color:var(--text) }
.s3-order-contact .s3-readout{ display:block; margin-bottom:4px }

.s3-notes{ list-style:none; margin:0; padding:0; display:grid; gap:16px }
.s3-note-row{ padding-left:16px; border-left:1px solid var(--hairline) }
.s3-note-body{ margin-top:6px; color:var(--muted); font-size:14px; line-height:1.6 }
.s3-note-body p:last-child{ margin-bottom:0 }

/* ============================================================ MY ACCOUNT == */

.s3-acct{ display:grid; grid-template-columns:224px minmax(0,1fr); gap:32px; align-items:start }
.s3-acct-nav{ position:sticky; top:var(--s3-stick) }
.s3-acct-content{ min-width:0 }

/* Body-copy links: underlined so they read as links without accent. Buttons
   always carry a class, so :not([class]) can never reach one. */
.s3-acct-content a:not([class]){ text-decoration:underline; text-underline-offset:3px }

.s3-acct-menu{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:2px }
.s3-acct-menu li a{
  display:block; padding:10px 14px; border-radius:var(--r-chip);
  font-size:14px; font-weight:500; color:var(--muted); text-decoration:none;
  border-left:2px solid transparent;
  transition:background var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.s3-acct-menu li a:hover{ background:var(--glass-1); color:var(--text) }
.s3-acct-menu li.is-active a{ background:var(--glass-1); color:var(--text); border-left-color:var(--accent) }

/* The balance widget must stay inside the <nav>. Rendered through
   woocommerce_after_account_navigation it becomes a direct grid child and
   takes the content column with it. */
.s3-acct-balance{
  display:block; padding:16px 18px; text-decoration:none;
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-card);
  transition:border-color var(--t-base) var(--ease);
}
.s3-acct-balance:hover{ border-color:var(--hairline-2) }
.s3-acct-balance-label{ display:block; font-size:13px; color:var(--muted) }
.s3-acct-balance-val{
  display:flex; align-items:center; gap:7px; margin-top:4px;
  font-family:var(--mono); font-size:24px; font-variant-numeric:tabular-nums;
  color:var(--accent); /* live value */
}

/* Dashboard */
.s3-dash-head{ margin-bottom:20px }
.s3-dash-hello{ margin:0; font-size:22px; font-weight:500; letter-spacing:-.02em; color:var(--text) }
.s3-dash-sub{
  margin:6px 0 0; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--faint);
}

.s3-wallet{ display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:28px; align-items:start }
.s3-wallet-main{ min-width:0 }
.s3-wallet-value{
  margin:8px 0 0; font-family:var(--mono); font-size:clamp(36px,4.4vw,54px); line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  color:var(--accent); /* live value */
}
.s3-wallet-note{ margin:10px 0 0; font-size:14px; color:var(--muted) }
.s3-wallet-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px }
.s3-wallet-side{ display:grid; gap:14px; padding-left:24px; border-left:1px solid var(--hairline) }
.s3-kv b{
  display:block; margin-top:4px; font-family:var(--mono); font-size:20px; font-weight:400;
  font-variant-numeric:tabular-nums; color:var(--text);
}
.s3-spark{ display:flex; align-items:flex-end; gap:3px; height:38px }
.s3-spark i{ flex:1; background:var(--hairline-2); min-height:2px }

.s3-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:16px 0 }
.s3-tile{
  display:block; padding:18px; text-decoration:none;
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-card);
  transition:border-color var(--t-base) var(--ease);
}
.s3-tile:hover{ border-color:var(--hairline-2) }
.s3-tile-val{
  display:block; font-family:var(--mono); font-size:26px; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--text);
}
.s3-tile-label{ display:block; margin-top:6px; font-size:13px; color:var(--muted) }

.s3-dash-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.s3-dash-cols .s3-panel{ margin:0 }

.s3-jobs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.s3-job{ display:block; text-decoration:none }
.s3-job-thumb{
  position:relative; display:block; aspect-ratio:1; margin-bottom:8px;
  background:var(--surface-2) center/cover no-repeat;
  border:1px solid var(--hairline); border-radius:var(--r-chip);
  transition:border-color var(--t-base) var(--ease);
}
.s3-job:hover .s3-job-thumb{ border-color:var(--hairline-2) }
.s3-job-status{
  position:absolute; top:7px; right:7px; width:6px; height:6px;
  border-radius:var(--r-pill); background:var(--faint);
}
.s3-st-processing, .s3-st-queued{ background:var(--accent) }
.s3-st-failed, .s3-st-canceled{ background:var(--s3-bad) }
.s3-job-name{ display:block; font-size:13px; color:var(--text); line-height:1.35 }
.s3-job-meta{
  display:block; margin-top:3px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--faint);
}

.s3-feed{ list-style:none; margin:0; padding:0 }
.s3-feed-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--hairline);
}
.s3-feed-row:last-child{ border-bottom:0 }
.s3-feed-body b{ display:block; font-size:14px; font-weight:500; color:var(--text) }
.s3-feed-body em{
  display:block; margin-top:2px; font-style:normal;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--faint);
}
.s3-feed-amt{ font-family:var(--mono); font-size:14px; font-variant-numeric:tabular-nums; color:var(--text) }
.s3-feed-amt.is-out{ color:var(--muted) }

.s3-orderlist{ list-style:none; margin:0; padding:0 }
.s3-orderline{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:16px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--hairline); text-decoration:none;
}
.s3-orderlist li:last-child .s3-orderline{ border-bottom:0 }
.s3-orderline-id{ font-family:var(--mono); font-size:14px; color:var(--text) }
.s3-orderline-date{ font-family:var(--mono); font-size:12px; color:var(--faint) }
.s3-orderline-total{ font-family:var(--mono); font-size:14px; font-variant-numeric:tabular-nums; color:var(--text) }

/* Orders list */
.s3-orders{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.s3-order{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:20px; align-items:start;
  padding:20px; background:var(--surface-1);
  border:1px solid var(--hairline); border-radius:var(--r-card);
  transition:border-color var(--t-base) var(--ease);
}
.s3-order:hover{ border-color:var(--hairline-2) }
.s3-order-thumbs{ display:flex }
.s3-order-thumbs-i{
  width:56px; height:56px; flex:none; display:grid; place-items:center;
  background:var(--surface-2) center/cover no-repeat;
  border:1px solid var(--hairline); border-radius:var(--r-chip);
  color:var(--faint);
}
.s3-order-thumbs-i + .s3-order-thumbs-i{ margin-left:-14px }
.s3-order-title{ margin:0 0 4px; font-size:16px; font-weight:500; letter-spacing:-.01em }
.s3-order-title a{ color:var(--text); text-decoration:none }
.s3-order-title a:hover{ color:var(--muted) }
.s3-order-sub{
  margin:0 0 8px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--faint);
  display:flex; flex-wrap:wrap; gap:8px;
}
.s3-order-names{ margin:0; font-size:14px; color:var(--muted); line-height:1.5 }
.s3-order-side{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; text-align:right }
.s3-order-total{ font-family:var(--mono); font-size:17px; font-variant-numeric:tabular-nums; color:var(--text) }
.s3-order-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:2px }

.s3-pager{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:20px }
.s3-pager-pos{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--faint) }

/* My models */
.s3-dl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px }
.s3-dl{
  display:flex; gap:16px; padding:16px;
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-card);
  transition:border-color var(--t-base) var(--ease);
}
.s3-dl:hover{ border-color:var(--hairline-2) }
.s3-dl-thumb{
  display:grid; place-items:center; width:84px; height:84px; flex:none;
  background:var(--surface-2) center/cover no-repeat;
  border:1px solid var(--hairline); border-radius:var(--r-chip); color:var(--faint);
}
.s3-dl-body{ flex:1; min-width:0 }
.s3-dl-name{ margin:0 0 6px; font-size:15px; font-weight:500; line-height:1.3 }
.s3-dl-name a{ color:var(--text); text-decoration:none }
.s3-dl-name a:hover{ color:var(--muted) }
.s3-dl-files{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px }
.s3-dl-file{
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px;
  background:var(--glass-1); border:1px solid var(--hairline); border-radius:var(--r-chip);
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--muted); text-decoration:none;
  transition:border-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.s3-dl-file:hover{ border-color:var(--hairline-2); color:var(--text) }
.s3-dl-expiry{ margin:10px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--faint) }

/* Long forms sit narrow, not at panel width. */
.s3-form{
  max-width:var(--w-narrow);
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-card);
  padding:clamp(20px,2.4vw,28px);
}
.s3-form-title{ margin:0 0 6px; font-size:19px; font-weight:500; letter-spacing:-.02em; color:var(--text) }
.s3-form-title + .s3-fields, .s3-form-title + fieldset{ margin-top:18px }
.s3-form-note{ margin:0 0 18px; font-size:14px; line-height:1.5; color:var(--muted) }
.s3-form .s3-fields + .s3-form-title{ margin-top:28px }
.s3-form-actions{ margin:24px 0 0; display:flex; flex-wrap:wrap; gap:12px; align-items:center }
.s3-addresses{ display:grid; gap:12px }

/* ============================================================== sign-in ====
   Log in and create an account are ONE panel divided by ONE hairline, not two
   cards that happen to sit next to each other. The two columns are deliberately
   unequal — the register side is wider because it also carries the factual list
   of what an account is for, and an even split would have said the two do the
   same amount of work.

   Accent budget on this screen, in full:
     · Log in — the single filled action
     · focus rings
     · the strength meter reading `strong`, which is a live value
   The Create-account button is the glass ladder. Nothing else here is lime, and
   every link below states its own colour so no upstream `a{color:accent}` rule
   can reach a button. */

.s3-auth{
  max-width:var(--w-narrow);
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--r-card);
  overflow:hidden;
}
.s3-auth-single{ max-width:min(560px, 100%) }
.s3-auth-pair{
  /* Centred. Without the auto margin the panel hugged the left edge and left a
     third of a wide screen empty beside it. */
  max-width:min(1060px, 100%);
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
}
/* The rule between the columns runs the full height of the taller one, so the
   pair reads as one divided panel rather than two boxes of different lengths. */
.s3-auth-pair > .s3-auth-col{ align-self:stretch }
.s3-auth-col{ min-width:0; padding:clamp(22px,2.6vw,34px) }
.s3-auth-pair > .s3-auth-col + .s3-auth-col{ border-left:1px solid var(--hairline) }

/* Both columns are link targets — /studio/ sends people straight to #signup.
   Without this the fragment jump parks the column heading underneath the
   sticky nav and the reader arrives at a form with no title on it. */
.s3-auth-col[id]{ scroll-margin-top:calc(var(--s3-stick, 96px) + 12px) }

/* "You are on this side." One notch up the surface ladder, set when the reader
   arrives on #signup or is looking at a registration that came back with an
   error. No accent: it is a location, not an action. */
.s3-auth.is-signup .s3-auth-register{ background:var(--surface-2) }

.s3-auth-title{
  margin:0 0 6px; font-size:20px; line-height:1.25; letter-spacing:-.02em;
  font-weight:500; color:var(--text);
}
.s3-auth-note{ margin:0 0 22px; font-size:14px; line-height:1.55; color:var(--muted); max-width:44ch }

.s3-authform{ margin:0 }
.s3-authform .s3-field{ margin:0 0 18px }
.s3-authform .s3-field:last-of-type{ margin-bottom:0 }

/* 16px at every width on this surface. iOS re-scales the viewport for anything
   smaller and the reader has to pinch back out — on the one screen where they
   are least likely to persist. The rest of the customer area keeps its tuned
   15px and only drops to 16px on a phone; sign-up does not get to be the
   exception, because sign-up is where people leave.

   Three selectors deep on purpose. The field block above is written as
   `.s3-account input[type=password]`, which an attribute selector scores at
   (0,2,1) — a plain `.s3-authform .s3-input` is (0,2,0) and silently loses to
   it, which is exactly how this rule failed the first time. */
.s3-auth .s3-authform input.s3-input{ font-size:16px; min-height:50px }
.s3-auth .s3-authform .s3-pw > input.s3-input{ padding-right:56px }

.s3-auth-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:16px 0 0;
}
.s3-auth-lost{ font-size:13px; color:var(--muted); text-decoration:none; white-space:nowrap }
.s3-auth-lost:hover{ color:var(--text) }

.s3-auth .s3-form-actions{ margin-top:20px }

.s3-auth-cross{
  margin:18px 0 0; font-size:14px; line-height:1.5; color:var(--faint);
}
.s3-auth-cross a{ color:var(--text); text-decoration:underline; text-underline-offset:3px }
.s3-auth-cross a:hover{ color:var(--muted) }

/* What the account is for. Facts with no adjectives — the wallet really does
   start at zero, and saying so here is cheaper than a support ticket later. */
.s3-auth-gets{ margin-top:26px; padding-top:22px; border-top:1px solid var(--hairline) }
.s3-auth-gets-title{
  margin:0 0 14px; font-size:13px; font-weight:500; letter-spacing:.02em; color:var(--muted);
}
.s3-auth-gets-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.s3-auth-gets-list li{
  margin:0; padding:0; font-size:14px; line-height:1.55; color:var(--muted);
}
.s3-auth-gets-list strong{ font-weight:500; color:var(--text) }
.s3-auth-formats{
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--text);
  white-space:nowrap;
}
.s3-auth-gets-link{
  display:inline-block; color:var(--text);
  text-decoration:underline; text-underline-offset:3px;
}
.s3-auth-gets-link:hover{ color:var(--muted) }

/* WooCommerce hangs its privacy sentence off `woocommerce_register_form` at
   priority 20, so it lands between the password field and the button. It
   arrives at prose size and full contrast, which made it the largest block of
   text in the column. It is a footnote; it is set as one. */
.s3-authform .woocommerce-privacy-policy-text{ margin:18px 0 0 }
.s3-authform .woocommerce-privacy-policy-text p{
  margin:0; font-size:13px; line-height:1.55; color:var(--faint);
}
.s3-authform .woocommerce-privacy-policy-text a{
  color:var(--muted); text-decoration:underline; text-underline-offset:3px;
}
.s3-authform .woocommerce-privacy-policy-text a:hover{ color:var(--text) }

/* The filled action's text colour is pinned for the same reason it is pinned
   on the account pages above: a blanket link rule elsewhere once painted lime
   text onto the lime button and it vanished. This selector cannot be reached. */
.s3-auth a.s3-btn-primary{ color:var(--accent-ink) !important }

/* ========================================================= studio gate =====
   What a logged-out visitor sees at /studio/. "Open Studio" is the site's main
   call to action, so this is where most sign-ups begin — it is an entry point,
   not a locked door. Markup comes from the plugin
   (Core\Shortcode::login_gate); every figure in it is read live from the same
   sources /pricing/ uses.

   Here the filled action is Create an account: it is the only screen on the
   site whose entire job is the first purchase decision. */

.meshy-signin{ padding-block:clamp(44px,6vw,92px) }
.meshy-signin-wrap{
  width:100%; max-width:var(--w-base); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,72px); align-items:start;
}
.meshy-signin-intro{ min-width:0 }
.meshy-signin-title{
  margin:0 0 16px; font-size:clamp(30px,3.4vw,52px); line-height:1.06;
  letter-spacing:-.035em; font-weight:500; color:var(--text); max-width:15ch;
}
.meshy-signin-lede{ margin:0; font-size:17px; line-height:1.6; color:var(--muted); max-width:52ch }

.meshy-signin-does{
  list-style:none; margin:32px 0 0; padding:0;
  border-top:1px solid var(--hairline);
}
.meshy-signin-does li{
  display:grid; grid-template-columns:minmax(0,15ch) minmax(0,1fr); gap:8px 22px;
  margin:0; padding:15px 0; border-bottom:1px solid var(--hairline);
}
.meshy-signin-k{ font-size:15px; font-weight:500; color:var(--text) }
.meshy-signin-v{ font-size:15px; line-height:1.5; color:var(--muted) }
.meshy-signin-formats{
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--text);
  align-self:center;
}

.meshy-signin-panel{
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--r-card);
  padding:clamp(22px,2.6vw,32px); position:sticky; top:var(--s3-stick, 96px);
}
.meshy-signin-panel-title{
  margin:0 0 16px; font-size:13px; font-weight:500; letter-spacing:.02em; color:var(--muted);
}

/* The cost ladder as a readable control rather than a buried table. Figures are
   mono and tabular so the column lines up; the total carries the hairline. */
.meshy-signin-cost{ margin:0 0 20px }
.meshy-signin-cost-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--hairline);
}
.meshy-signin-cost-row:first-child{ border-top:1px solid var(--hairline) }
.meshy-signin-cost-row dt{ font-size:14px; line-height:1.4; color:var(--muted) }
.meshy-signin-cost-row dd{
  margin:0; font-family:var(--mono); font-size:13px; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; color:var(--text); white-space:nowrap;
}
.meshy-signin-cost-row.is-total dt{ color:var(--text) }
.meshy-signin-cost-row.is-pack{ border-bottom:0 }
.meshy-signin-cost-row.is-pack dt{ color:var(--faint); white-space:nowrap }
/* The only row whose value is allowed to wrap: it carries three facts. */
.meshy-signin-cost-row.is-pack dd{ color:var(--muted); white-space:normal; text-align:right }

.meshy-signin-zero{
  margin:0 0 22px; font-size:13px; line-height:1.6; color:var(--faint);
}
.meshy-signin-actions{ display:grid; gap:10px }
.meshy-signin-fine{ margin:16px 0 0; font-size:13px; line-height:1.55; color:var(--faint) }

/* Same pin as above: nothing may repaint the filled action's text. */
.meshy-signin a.s3-btn-primary{ color:var(--accent-ink) !important }
.meshy-signin a.s3-btn{ text-decoration:none }

/* ============================================================ responsive == */

@media (max-width:1080px){
  .s3-checkout-grid{ grid-template-columns:minmax(0,1fr) 340px; gap:24px }
  .s3-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

@media (max-width:940px){
  .s3-acct{ grid-template-columns:1fr; gap:20px }
  .s3-acct-nav{ position:static }
  .s3-acct-menu{ grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; gap:4px; padding-bottom:4px }
  .s3-acct-menu li a{ border-left:0; border-bottom:2px solid transparent; border-radius:var(--r-chip); white-space:nowrap }
  .s3-acct-menu li.is-active a{ border-left:0; border-bottom-color:var(--accent) }

  .s3-cart, .s3-checkout-grid{ grid-template-columns:1fr }
  .s3-cart-aside, .s3-checkout-aside{ position:static }
  .s3-wallet{ grid-template-columns:1fr }
  .s3-wallet-side{ padding-left:0; border-left:0; padding-top:18px; border-top:1px solid var(--hairline) }
  .s3-dash-cols{ grid-template-columns:1fr }

  /* The pair stacks. The divider is the same hairline, turned through 90° —
     the panel stays one object rather than splitting into two cards. */
  .s3-auth-pair{ grid-template-columns:1fr }
  .s3-auth-pair > .s3-auth-col + .s3-auth-col{
    border-left:0; border-top:1px solid var(--hairline);
  }

  .meshy-signin-wrap{ grid-template-columns:1fr; gap:32px }
  .meshy-signin-panel{ position:static }
}

@media (max-width:640px){
  /* One field per line. The basis is reset rather than the flex-direction so
     the flex-grow that fills a lone half-field keeps working. */
  .s3-fields > .form-row{ flex-basis:100% }

  /* The disclosure bar stacks; its vertical divider would then be a rule down
     the left of the second row, which is nonsense. */
  .s3-checkout-pre{ padding:14px 16px; gap:12px }
  .s3-checkout-pre .s3-disclose{ flex:1 0 100% }
  .s3-checkout-pre .s3-disclose + .s3-disclose{ padding-left:0; border-left:0 }
  .s3-ci{ grid-template-columns:72px minmax(0,1fr); gap:14px }
  .s3-ci-thumb{ width:72px }
  .s3-ci-side{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between }
  .s3-order{ grid-template-columns:1fr; gap:14px }
  .s3-order-side{ align-items:flex-start; text-align:left }
  .s3-order-actions{ justify-content:flex-start }
  .s3-order-item{ grid-template-columns:64px minmax(0,1fr) }
  .s3-order-thumb{ width:64px }
  .s3-order-item-side{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between }
  .s3-jobs{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .s3-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .s3-cart-actions{ flex-direction:column; align-items:stretch }
  .s3-coupon{ width:100% }
  .s3-coupon .s3-input{ flex:1 1 auto }
  .s3-dl{ flex-direction:column }
  .s3-order-meta{ gap:16px 28px }

  /* At 390px a 15ch label column plus a 22px gutter leaves the description
     about 190px, which breaks every one of these rows onto three lines. The
     term goes above its value instead. */
  .meshy-signin-does li{ grid-template-columns:1fr; gap:3px }
  .meshy-signin-formats{ align-self:start }
  .meshy-signin-title{ max-width:none }
}

/* ------------------------------------------------------------ touch sizing --
   The 16px floor that used to live here is now unconditional — see the field
   block near the top of this file. What is left is the other thing a purchase
   flow owes a phone: the small text links here — remove, apply, forgot
   password — are 17-22px tall. They get a 44px hit box from a pseudo-element,
   so the type stays exactly where it is and nothing in the layout moves. */

/* select2 renders the country field's visible box itself, in its own markup,
   so the floor has to be restated for it. Unconditional, like the rest. */
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-search--dropdown .select2-search__field{
  font-size:16px;
}

@media (max-width:900px){
  .select2-container--default .select2-selection--single{ padding-block:12px }

  /* 44px hit boxes for the small controls. */
  .s3-ci-remove,
  .s3-panel-link,
  .s3-auth-lost,
  .s3-disclose-link,
  .s3-account-back{ position:relative }
  .s3-ci-remove::after,
  .s3-panel-link::after,
  .s3-auth-lost::after,
  .s3-disclose-link::after,
  .s3-account-back::after{
    content:""; position:absolute; left:-10px; right:-10px; top:50%;
    height:44px; transform:translateY(-50%);
  }
  .s3-check label,
  .s3-check-inline,
  .woocommerce-form__label-for-checkbox{ min-height:44px; align-items:center }
  .s3-check input[type=checkbox],
  .s3-check-inline input[type=checkbox],
  .woocommerce-form__label-for-checkbox input[type=checkbox]{
    width:22px; height:22px; margin-top:0;
  }
  .s3-acct-menu li a{ display:flex; align-items:center; min-height:44px }
  /* Per-format download chips. They wrap, so growing them costs nothing. */
  .s3-dl-file{ min-height:40px; align-items:center }
}

/* --------------------------------------------------------- reduced motion --
   system.css already zeroes durations globally. Position:sticky is a scroll
   effect rather than an animation, so it is released here too — a panel that
   moves under a reader who asked for stillness is the same problem. */
@media (prefers-reduced-motion: reduce){
  .s3-cart-aside, .s3-checkout-aside, .s3-acct-nav{ position:static }
}

/* ============================================ holding off legacy main.css ==
   main.css is mid-migration and still carries a block of pre-system rules that
   reach into this surface and win on specificity — including a bare-element
   `input{... !important}` and a two-column grid on `.woocommerce` that would
   squeeze the whole account into a 250px track. Everything below exists only
   to hold those off. Each rule can be deleted the day its counterpart leaves
   main.css; none of it is design, all of it is defence. */

/* `.woocommerce-account .woocommerce{display:grid;grid-template-columns:250px 1fr}`
   turns the shortcode wrapper into a grid whose single child — our whole
   account — lands in the 250px track. */
.woocommerce-account .woocommerce{ display:block; gap:0 }

/* `.woocommerce-MyAccount-content{background;border;padding}` would wrap the
   content column in a panel that then contains more panels. */
.s3-acct .woocommerce-MyAccount-content{ background:none; border:0; border-radius:0; padding:0 }

/* `.woocommerce-MyAccount-navigation ul{background;border;padding}` boxes the
   nav list; ours is a plain list with an active rail. */
.s3-acct-nav .s3-acct-menu{ background:none; border:0; padding:0 }

/* `.woocommerce .cart-collaterals{margin-top:28px}` drops the summary panel
   28px below the first cart item. */
.woocommerce .cart-collaterals.s3-cart-aside{ margin-top:0 }

/* `.cart_totals table, .woocommerce-checkout-review-order-table{background}` */
.s3-checkout-panel .s3-review{ background:none }

/* `.single_add_to_cart_button, button.button, .button, input.button, a.button`
   sets a pill radius, its own padding and a translateY hover. Buttons in this
   surface are .s3-btn and keep the system geometry — including "nothing moves". */
.s3-account .s3-btn,
.woocommerce-cart .s3-btn,
.woocommerce-checkout .s3-btn{
  border-radius:var(--r-card); padding:14px 26px; height:auto;
  font-size:15px; line-height:1; box-shadow:none; transform:none;
}
.s3-account .s3-btn:hover,
.woocommerce-cart .s3-btn:hover,
.woocommerce-checkout .s3-btn:hover{ box-shadow:none; transform:none }
.s3-account .s3-btn-sm,
.woocommerce-cart .s3-btn-sm,
.woocommerce-checkout .s3-btn-sm{ padding:0 14px; height:34px; border-radius:var(--r-chip); font-size:13px }

/* Apply-coupon is the one small button that sits ON a field's baseline rather
   than in a row of its own, so it takes the field's height instead of the chip
   height pinned above. One notch more specific than that pin, because the pin
   is defence against main.css and cannot simply be reordered. */
.s3-account .s3-coupon .s3-btn-sm,
.woocommerce-cart .s3-coupon .s3-btn-sm,
.woocommerce-checkout .s3-coupon .s3-btn-sm,
.woocommerce-cart .s3-inline-form .s3-btn-sm,
.woocommerce-checkout .s3-inline-form .s3-btn-sm{
  height:48px; padding:0 20px; font-size:14px;
}
.s3-account .s3-btn-bare,
.woocommerce-cart .s3-btn-bare,
.woocommerce-checkout .s3-btn-bare{ background:none; padding-inline:0; height:auto; font-size:14px }
.s3-account .s3-btn-primary:hover,
.woocommerce-cart .s3-btn-primary:hover,
.woocommerce-checkout .s3-btn-primary:hover{ background:#DDFF52 }

/* The bare-element `input,textarea,select,.select2-selection{... !important}`
   block. !important can only be answered with !important at a higher
   specificity — the brief asks for --surface-2 fields and this is the only way
   to get them while that rule stands. Delete with it. */
.s3-account input[type=text], .s3-account input[type=email], .s3-account input[type=tel],
.s3-account input[type=password], .s3-account input[type=number],
.s3-account textarea, .s3-account select,
.woocommerce-cart input[type=text], .woocommerce-cart input[type=number],
.woocommerce-checkout input[type=text], .woocommerce-checkout input[type=email],
.woocommerce-checkout input[type=tel], .woocommerce-checkout input[type=password],
.woocommerce-checkout input[type=number], .woocommerce-checkout textarea,
.woocommerce-checkout select,
.s3-account .select2-container .select2-selection,
.woocommerce-checkout .select2-container .select2-selection{
  background:var(--surface-2) !important;
  border:1px solid var(--hairline) !important;
  border-radius:var(--r-chip) !important;
  color:var(--text) !important;
  padding:12px 14px !important;
}
.s3-account input:focus, .s3-account textarea:focus, .s3-account select:focus,
.woocommerce-cart input:focus,
.woocommerce-checkout input:focus, .woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus{ border-color:var(--accent) !important }
.woocommerce-invalid input.input-text,
.woocommerce-invalid select,
.woocommerce-invalid .select2-selection{ border-color:var(--s3-bad) !important }
.s3-account .s3-coupon .s3-input,
.woocommerce-cart .s3-coupon .s3-input,
.woocommerce-checkout .s3-inline-form .s3-input{ padding:10px 14px !important }

/* `.s3-check input{position:absolute; opacity:0; pointer-events:none}`.

   In main.css that is half of a component: the marketplace filter chip hides
   the native box and draws its own in a sibling `.s3-check-box` span. The
   purchase flow uses the same class name for a plain checkbox with no such
   span — so the rule deleted the control and left the label sitting on its
   own. "Create an account" had no visible box at all, and a site that turns on
   the terms checkbox would have shipped a REQUIRED tickbox nobody could see or
   find. The native control is restored; account.css draws it with
   accent-color and color-scheme, further up this file. */
.s3-account .s3-check input[type=checkbox],
.woocommerce-cart .s3-check input[type=checkbox],
.woocommerce-checkout .s3-check input[type=checkbox]{
  position:static; opacity:1; pointer-events:auto;
}

/* `.s3-feed-amt.is-in{color:var(--accent)}` and blue `.s3-st-processing` dots
   predate the accent rule. */
.s3-feed .s3-feed-amt.is-in{ color:var(--text) }
.s3-job .s3-job-status.s3-st-processing,
.s3-job .s3-job-status.s3-st-queued{ background:var(--accent); box-shadow:none }
.s3-job .s3-job-status.s3-st-completed{ background:var(--faint); box-shadow:none }
.s3-job .s3-job-status.s3-st-failed,
.s3-job .s3-job-status.s3-st-canceled{ background:var(--s3-bad); box-shadow:none }

/* `.woocommerce-Addresses{grid-template-columns:repeat(2,1fr)}` — there is only
   ever one address here. */
.s3-addresses.woocommerce-Addresses{ grid-template-columns:1fr }

/* main.css sets a reading treatment on `.s3-prose h2/h3/ul/ol/li`, and page.php
   renders the whole cart, checkout and account inside `.s3-prose`. Every list
   in this surface was therefore indented 22px and every row carried an 8px
   margin it did not ask for, and every component heading — the cart item name,
   the checkout fieldset title, the summary title — was rendering at the prose
   28px with a 36px top margin. On a phone that alone wrapped the cart item
   title onto two lines and pushed the price row out of the card.

   Each rule below restates a value already declared above, one selector deeper
   so it outranks `.s3-prose <element>`. Deletable the day the prose block
   stops reaching in. */

.s3-prose .s3-cart-items,
.s3-prose .s3-ci-attrs,
.s3-prose .s3-review-items,
.s3-prose .s3-methods,
.s3-prose .s3-order-items,
.s3-prose .s3-orders,
.s3-prose .s3-orderlist,
.s3-prose .s3-order-contact,
.s3-prose .s3-notes,
.s3-prose .s3-acct-menu,
.s3-prose .s3-feed,
.s3-prose .s3-jobs{ padding-left:0 }

.s3-prose .s3-cart-items,
.s3-prose .s3-order-items,
.s3-prose .s3-orders,
.s3-prose .s3-orderlist,
.s3-prose .s3-order-contact,
.s3-prose .s3-notes,
.s3-prose .s3-acct-menu,
.s3-prose .s3-feed,
.s3-prose .s3-jobs{ margin-bottom:0 }
.s3-prose .s3-review-items{ margin-bottom:4px }
.s3-prose .s3-ci-attrs{ margin-bottom:8px }
.s3-prose .s3-review-body .s3-ci-attrs{ margin-bottom:0 }
.s3-prose .s3-methods{ margin-bottom:18px }

.s3-prose .s3-ci,
.s3-prose .s3-ci-attr,
.s3-prose .s3-review-item,
.s3-prose .s3-method,
.s3-prose .s3-methods-empty,
.s3-prose .s3-order,
.s3-prose .s3-order-item,
.s3-prose .s3-note-row,
.s3-prose .s3-feed-row,
.s3-prose .s3-acct-menu li,
.s3-prose .s3-jobs li{ margin-bottom:0 }

/* `.s3-prose p{margin:0 0 18px}` is (0,1,1) and outranks a single class, so
   every explanatory line in the purchase flow inherits a bottom margin it did
   not ask for — including the one under the place-order button, which then
   left a gap at the foot of the panel. */
.s3-prose .s3-fieldset-note{ margin:0 0 20px }
.s3-prose .s3-summary-note{ margin:14px 0 0 }
.s3-prose .s3-terms{ margin:0 0 16px }
.s3-prose .s3-method-box p:last-child{ margin-bottom:0 }

.s3-prose .s3-ci-name{ font-size:17px; line-height:1.3; margin:0 0 8px }
.s3-prose .s3-fieldset-title{ font-size:19px; margin:0 0 6px }
.s3-prose .s3-summary-title{ font-size:16px; margin:0 0 16px }
.s3-prose .s3-panel-title{ font-size:16px; margin:0 0 16px }
.s3-prose .s3-panel-head .s3-panel-title{ margin:0 }
.s3-prose .s3-payment-title{ font-size:14px; margin:0 0 12px }
.s3-prose .s3-empty h2{ font-size:20px; margin:0 }

/* The small button is pinned to 34px in the legacy-defence block above, which
   is later in the file than the touch-sizing section and therefore wins it on
   source order. Apply-coupon is the one place it appears on a phone, so the
   height is restated here, after the rule it has to beat. */
@media (max-width:900px){
  .s3-account .s3-btn-sm,
  .woocommerce-cart .s3-btn-sm,
  .woocommerce-checkout .s3-btn-sm{ height:44px }
}

/* ------------------------------------------------------ sign-in defences ---
   Three upstream rules reach into the sign-in surface and win on !important or
   on source order. Each of these exists only to hold one of them off, and each
   can be deleted the day its counterpart leaves main.css.

   1. `input[type=password]{ … padding:12px 14px !important }` is declared bare,
      with no scope at all. It flattens the right-hand gutter that the reveal
      button sits in, so the eye lands on top of the last characters of the
      password. !important can only be answered with !important. */
.s3-authform .password-input > input.s3-input,
.password-input > input.input-text{ padding-right:56px !important }

/* 2. Same rule pins the border, so an invalid field cannot go red without it. */
.s3-field.is-invalid input.s3-input,
.s3-field.is-invalid input.input-text{ border-color:var(--s3-bad) !important }

/* 3. `.woocommerce form .form-row{margin-bottom:14px}` is (0,2,1) and outranks
      a two-class selector, so the row spacing has to carry a third class. */
.s3-authform .form-row.s3-field{ margin:0 0 18px }
.s3-authform .form-row.s3-field:last-of-type{ margin-bottom:0 }
.s3-authform .form-row.s3-auth-row{ margin:16px 0 0 }

/* The "what the account is for" list spans the pair. Inside the register column
   it stretched that side to nearly twice the login form's height and left a
   large hollow under Log in. */
.s3-auth-pair > .s3-auth-gets-wide{
  grid-column:1 / -1;
  border-top:1px solid var(--hairline);
  padding:26px 32px 30px;
}
.s3-auth-pair > .s3-auth-gets-wide .s3-auth-gets-list{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 34px;
}
.s3-auth-pair{ align-items:start }
@media (max-width:820px){
  .s3-auth-pair > .s3-auth-gets-wide{ padding:22px 22px 26px }
  .s3-auth-pair > .s3-auth-gets-wide .s3-auth-gets-list{ grid-template-columns:1fr }
}