/* ============================================================================
   Gessura — customer area: cart, checkout, order, My Account, sign-in,
   and the studio's logged-out gate.

   v5 «Monochrome premium». Tokens come from system.css and ONLY from
   system.css: coal ground, bone type, one mint accent, radii ∈ {0, 6, 12}.
   The canon on this surface, in full:

   · Boxless everything — sections sit on hairline rules, never in cards.
     The only filled surfaces are inputs (#101013, the footer prompt field)
     and the primary button's graphite plate (#1B1B1F).
   · Numbers are thin and large (Poppins 200); labels are caps micro-stamps.
   · One primary action per screen; it wears the running light ring.
   · Mint appears ONLY on: the ring, carets/markers of the current place,
     live prices (the payable total, the token balance), focus and hovers.

   The class hooks (`s3-*`, `.meshy-signin-*`) are load-bearing: the templates
   under woocommerce/ and the PLUGIN's login gate (Core\Shortcode) emit them.
   Restyle them here; never rename them.
   ========================================================================== */

body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
.s3-account,
.s3-studio-app {
  /* Sticky panels clear the 72px bar (nav.css) plus a breath. */
  --s3-stick: 96px;
  /* The two filled surfaces this sheet is allowed. */
  --s3-well: #101013;   /* input fill — the footer prompt field */
  --s3-plate: #1B1B1F;  /* primary button plate — g3-btn-primary */
}
body.admin-bar.woocommerce-cart,
body.admin-bar.woocommerce-checkout,
body.admin-bar.woocommerce-account,
body.admin-bar .s3-account,
body.admin-bar .s3-studio-app { --s3-stick: 128px; }

/* ---------------------------------------------------------------- shells ---
   page.php renders the cart and checkout shortcodes inside its reading
   column: main.g3-page > .g3-pagehead/.g3-page-body > .g3-read > .g3-prose.
   A purchase flow is a worksheet, not an essay — the measure is widened here
   and the prose treatment neutralised further down, because this surface
   does not own page.php. */

.woocommerce-cart .g3-page,
.woocommerce-checkout .g3-page { padding-top: 72px; }

.woocommerce-cart .g3-page .g3-read {
  width: var(--w-base);
}
/* A checkout is a FORM; its column is sized by what people type into it. */
.woocommerce-checkout .g3-page .g3-read {
  width: min(1160px, 92vw);
}

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

/* The pagehead h1 drops to the section register and thins to the house
   weight — "Cart" at 92px would out-shout the marketplace itself. */
.woocommerce-cart .g3-pagehead .g3-h1,
.woocommerce-checkout .g3-pagehead .g3-h1 {
  font-size: clamp(34px, 3.6vw, 58px);
  font-weight: 300;
  letter-spacing: -.01em;
}
.woocommerce-cart .g3-pagehead,
.woocommerce-checkout .g3-pagehead { padding: clamp(40px, 5vw, 72px) 0 clamp(28px, 3.4vw, 48px); }

/* The first 72px clear the fixed bar: ScrollSmoother pins its wrapper to the
   viewport, so the body's own padding-top never reaches this content. */
.s3-account { padding-block: calc(72px + clamp(40px, 5vw, 72px)) clamp(72px, 9vw, 130px); }
body.admin-bar .s3-account { padding-block-start: calc(104px + clamp(40px, 5vw, 72px)); }
@media (max-width: 560px) {
  .s3-account { padding-block-start: 108px; }
}
.s3-account-wrap {
  width: 100%;
  max-width: var(--w-base);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.s3-account-head { margin-bottom: clamp(30px, 4vw, 56px); }
.s3-account-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 4vw, 68px);
  line-height: 1.04;
  letter-spacing: -.015em;
  font-weight: 200;
  color: var(--bone);
  margin: 0;
}
.s3-account-sub {
  margin: 14px 0 0;
  color: var(--bone-soft);
  font-size: 15px;
  line-height: 1.7;
  max-width: 56ch;
}
.s3-account-back {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--bone-faint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--t-quick) var(--ease);
}
.s3-account-back::before { content: "← "; }
.s3-account-back:hover { color: var(--bone); }

/* ------------------------------------------------- link colour discipline ---
   Body links in the account read as bone, not as actions. The primary's
   text colour is pinned so no later sheet can paint it away. */

.s3-account a.s3-btn-primary,
.woocommerce-cart a.s3-btn-primary,
.woocommerce-checkout a.s3-btn-primary,
.meshy-signin a.s3-btn-primary { color: var(--bone) !important; }

.s3-acct-content a:not(.s3-btn):not(.button):not(.s3-dl-file) { color: var(--bone); }
.s3-acct-content a:not([class]) { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline-2); }
.s3-acct-content a:not([class]):hover { text-decoration-color: var(--ember); }
/* Title links are headings first: the underline stays on body copy only. */
.s3-acct-content .s3-order-item-name a,
.s3-acct-content .s3-order-title a,
.s3-acct-content .s3-dl-name a { text-decoration: none; }

/* ------------------------------------------------------------ primitives ---
   Buttons. system.css owns .g3-btn; the customer area and the plugin gate
   emit .s3-btn, so the same law is restated on that hook: the primary is
   the graphite plate wearing the running light ring, "glass" (the
   historical name for the secondary rung) is the quiet hairline outline,
   bare is a text control. Nothing moves on hover. */

.s3-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 24px;
  border-radius: var(--r-ctl);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transform: none;
  transition: background var(--t-quick) var(--ease),
              color var(--t-quick) var(--ease),
              border-color var(--t-quick) var(--ease);
}
.s3-btn:hover { box-shadow: none; transform: none; }

.s3-btn-primary {
  background: var(--s3-plate);
  color: var(--bone);
  border-color: rgba(255, 255, 255, .12);
}
.s3-btn-primary:hover {
  background: #242429;
  border-color: rgba(255, 255, 255, .22);
}
/* The running light — the same 1px conic ring system.css draws on
   .g3-btn-primary. @property --g3a and the g3-ring-run keyframes are
   registered there, so this ring only restates the pattern on the s3 hook. */
.s3-btn-primary::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--r-ctl) + 1px);
  padding: 1px;
  background: conic-gradient(from var(--g3a),
    transparent 0turn,
    transparent .62turn,
    rgba(245, 246, 247, .25) .78turn,
    rgba(245, 246, 247, .95) .87turn,
    var(--ember) .94turn,
    transparent 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  animation: g3-ring-run 5s linear infinite;
}
.s3-btn-primary:hover::after,
.s3-btn-primary:focus-visible::after { animation-duration: 1.6s; }
@media (prefers-reduced-motion: reduce) {
  .s3-btn-primary::after { animation: none; opacity: .7; }
}

/* The secondary rung — a quiet hairline outline. */
.s3-btn-glass {
  background: transparent;
  color: var(--bone);
  border-color: var(--hairline-2);
}
.s3-btn-glass:hover { border-color: rgba(255, 255, 255, .4); }

.s3-btn-bare {
  background: none;
  border-color: transparent;
  color: var(--bone-soft);
  padding-inline: 0;
  font-size: 14px;
  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-btn-bare:hover { color: var(--bone); text-decoration-color: var(--ember); background: none; }

.s3-btn-sm { min-height: 38px; padding: 6px 16px; font-size: 14px; }
.s3-btn-block { width: 100%; justify-content: center; }

.s3-btn[disabled], .s3-btn.disabled, .s3-btn.is-disabled { opacity: .45; cursor: not-allowed; }
.s3-btn-primary[disabled]:hover, .s3-btn-primary.disabled:hover { background: var(--s3-plate); border-color: rgba(255, 255, 255, .12); }
.s3-btn-glass[disabled]:hover, .s3-btn-glass.disabled:hover { background: transparent; border-color: var(--hairline-2); }

/* Mono readout — a technical label beside a number or a date. */
.s3-readout {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--bone-faint);
}

/* ---------------------------------------------------------- field layout ---
   FLEX, not grid — the reason is worth keeping. WooCommerce tags almost every
   billing field .form-row-wide; which short fields exist, and in what ORDER,
   is decided per country by the locale table. A two-column grid cannot
   survive that: a lone half-field leaves a hole, and `dense` fixes the hole
   by breaking the tab order. Flex wrapping has no such failure — a half that
   ends up alone simply grows to fill its line. */

.s3-fields { display: flex; flex-wrap: wrap; gap: 18px; }
.s3-fields > .form-row { flex: 1 1 100%; min-width: 0; }

/* The short ones: chosen by what the field HOLDS, not the class Woo tagged.
   Attribute selectors, not #ids, so the phone breakpoint can answer them. */
.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% - 9px); }

/* Long ones keep the full line even where a locale tagged them -first/-last. */
.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; }

/* Labels are caps micro-stamps — the g3-stamp register. */
.s3-account label,
.woocommerce-cart label,
.woocommerce-checkout label:not(.s3-check-inline):not(.woocommerce-form__label-for-checkbox) {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--bone-soft);
}
.s3-account .required,
.woocommerce-checkout .required { color: var(--bone-faint); text-decoration: none; border: 0; }
.s3-account .optional,
.woocommerce-checkout .optional { color: var(--bone-faint); font-weight: 400; letter-spacing: .06em; }
.s3-field-hint {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bone-faint);
}
.s3-field-hint-block { margin: 0 0 18px; }

/* Fields: the coal well, hairline, mint focus ring — the footer prompt
   field's construction, restated as a form control.
   16px is a floor, not a preference — below it iOS Safari re-scales the whole
   viewport the moment a field takes focus. Unconditional at every width. */
.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: 11px 14px;
  min-height: 48px;
  background: var(--s3-well);
  color: var(--bone);
  border: 1px solid var(--hairline);
  border-radius: var(--r-ctl);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
  appearance: none;
  color-scheme: dark;
}
.s3-account textarea, .woocommerce-checkout textarea { min-height: 96px; resize: vertical; }

.s3-account input:hover, .s3-account textarea:hover, .s3-account select:hover,
.woocommerce-cart input:hover,
.woocommerce-checkout input:hover, .woocommerce-checkout textarea:hover,
.woocommerce-checkout select:hover { border-color: var(--hairline-2); }

.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(--ember);
  box-shadow: 0 0 0 1px var(--ember);
}
.s3-account input::placeholder, .woocommerce-cart input::placeholder,
.woocommerce-checkout input::placeholder, .woocommerce-checkout textarea::placeholder { color: var(--bone-faint); }

/* Selects draw their own bone chevron. */
.s3-account select, .woocommerce-checkout select {
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--bone-soft) 50%),
                    linear-gradient(135deg, var(--bone-soft) 50%, transparent 50%);
  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(--danger); }
.woocommerce-checkout .woocommerce-invalid label { color: var(--danger); }

/* Checkboxes — native controls painted with the accent. */
.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.55;
  color: var(--bone-soft);
  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: 2px;
  accent-color: var(--ember);
  cursor: pointer;
  color-scheme: dark;
}

/* Password reveal. woocommerce.js injects this button bare (its stylesheet is
   disabled), so it is rebuilt as an eye. The glyphs are mask shapes — the fill
   is currentColor, so the icon takes the bone like everything else. */
.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: 46px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--bone-faint);
  transition: color var(--t-quick) var(--ease);
}
.show-password-input:hover { color: var(--bone); }
.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(--bone); }
.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. */
.s3-field-err {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--danger);
}
.s3-field.is-invalid > label { color: var(--danger); }
.s3-field.is-invalid input.s3-input,
.s3-field.is-invalid input.input-text { border-color: var(--danger); }

/* WooCommerce's password strength readout (its stylesheet is disabled).
   A live value: `strong` is the state that unlocks the button, so it is
   allowed the mint. */
.woocommerce-password-strength {
  margin-top: 8px;
  padding: 9px 13px;
  background: var(--s3-well);
  border: 1px solid var(--hairline);
  border-radius: var(--r-ctl);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  color: var(--bone-soft);
}
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad { color: var(--danger); border-color: var(--danger); }
.woocommerce-password-strength.strong { color: var(--ember-hi); border-color: var(--ember); }
.woocommerce-password-hint {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bone-faint);
}

/* selectWoo / select2 — the country field arrives unstyled; rebuilt to match
   the wells around it. */
.select2-container--default .select2-selection--single {
  height: auto;
  padding: 12px 14px;
  background: var(--s3-well);
  border: 1px solid var(--hairline);
  border-radius: var(--r-ctl);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--bone);
  font-size: 16px;
  line-height: 1.4;
  padding: 0;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--bone-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(--bone-soft) transparent transparent;
  border-width: 5px 4px 0;
}
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--ember);
  box-shadow: 0 0 0 1px var(--ember);
}
.select2-dropdown {
  background: var(--coal-2);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-ctl);
  color: var(--bone);
  overflow: hidden;
}
.select2-container--default .select2-search--dropdown { padding: 8px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--s3-well);
  border: 1px solid var(--hairline);
  border-radius: var(--r-ctl);
  color: var(--bone);
  padding: 9px 11px;
  font-family: var(--font-body);
  font-size: 16px;
}
.select2-container--default .select2-results__option {
  padding: 9px 13px;
  font-size: 14px;
  color: var(--bone-soft);
  background: transparent;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true] {
  background: var(--coal-3);
  color: var(--bone);
}

/* Sections — boxless: a hairline overhead, a caps stamp, the content.
   The card is gone; the rule does its work. */
.s3-panel {
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  padding: clamp(20px, 2.4vw, 30px) 0 clamp(8px, 1vw, 12px);
  margin: 0 0 clamp(18px, 2.4vw, 30px);
}
.s3-panel:last-child { margin-bottom: 0; }
.s3-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.s3-panel-title {
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.s3-panel-head .s3-panel-title { margin: 0; }
.s3-panel-link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-2);
  padding-bottom: 2px;
  transition: color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease);
}
.s3-panel-link:hover { color: var(--bone); border-color: var(--ember); }
.s3-panel-empty { margin: 0; color: var(--bone-faint); font-size: 14px; line-height: 1.7; }
.s3-panel-foot {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  color: var(--bone-soft);
}
.s3-panel-foot a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline-2); }
.s3-panel-foot a:hover { text-decoration-color: var(--ember); }
.s3-panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.s3-panel-alert { border-top-color: var(--danger); }
.s3-panel-alert p { margin: 0; color: var(--bone-soft); font-size: 15px; line-height: 1.7; }
.s3-panel-alert .s3-panel-title { color: var(--danger); }

.s3-narrow { max-width: 620px; }
.s3-lede-sm { margin: 0 0 22px; color: var(--bone-soft); font-size: 15px; line-height: 1.7; max-width: 56ch; }

/* Empty states — an invitation on the open floor, not an apology in a box. */
.s3-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: clamp(48px, 7vw, 100px) 24px;
  background: none;
  border: 0;
  border-block: 1px solid var(--hairline);
  border-radius: 0;
}
.s3-empty svg { color: var(--bone-faint); }
.s3-empty h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 200;
  letter-spacing: -.01em;
  color: var(--bone);
}
.s3-empty p { margin: 0; max-width: 46ch; color: var(--bone-soft); font-size: 15px; line-height: 1.7; }
.s3-empty .s3-btn { margin-top: 10px; }

/* Status — a caps readout with a state dot. Mint only for the in-flight
   states (they are live), danger for the failed ones, quiet for settled. */
.s3-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-soft);
  white-space: nowrap;
}
.s3-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bone-faint); }
.s3-status-processing, .s3-status-pending, .s3-status-on-hold { color: var(--ember-hi); }
.s3-status-processing::before, .s3-status-pending::before, .s3-status-on-hold::before { background: var(--ember); }
.s3-status-completed { color: var(--bone); }
.s3-status-completed::before { background: var(--bone); }
.s3-status-failed, .s3-status-cancelled, .s3-status-refunded { color: var(--danger); }
.s3-status-failed::before, .s3-status-cancelled::before, .s3-status-refunded::before { background: var(--danger); }

/* WooCommerce notices — main.css paints them as cards; on this surface they
   flatten to a thin mint rule in the margin. */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-cart .woocommerce-message, .woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-message, .woocommerce-checkout .woocommerce-info,
.s3-account .woocommerce-message, .s3-account .woocommerce-info, .s3-account .g3-notice {
  background: none;
  border: 0;
  border-left: 2px solid var(--ember);
  border-radius: 0;
  padding: 4px 0 4px 18px;
  margin: 0 0 22px;
  color: var(--bone);
  font-size: 14.5px;
  line-height: 1.65;
}
.woocommerce-cart .woocommerce-error li,
.woocommerce-checkout .woocommerce-error li,
.s3-account .woocommerce-error li {
  background: none;
  border: 0;
  border-left: 2px solid var(--danger);
  border-radius: 0;
  padding: 4px 0 4px 18px;
  margin: 0;
  color: var(--bone);
  font-size: 14.5px;
  line-height: 1.65;
}
.woocommerce-error, .woocommerce-NoticeGroup > ul { list-style: none; padding: 0; margin: 0 0 22px; }
.woocommerce-message li, .woocommerce-info li, .woocommerce-error li,
.woocommerce-NoticeGroup li { list-style: none; }
.woocommerce-error li + li { margin-top: 10px; }
.woocommerce-message a:not([class]), .woocommerce-info a:not([class]) {
  color: var(--bone);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--hairline-2);
}
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 14px;
  margin-left: 10px;
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--hairline);
  border-radius: var(--r-ctl);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--t-quick) var(--ease);
}
.woocommerce-message .button:hover, .woocommerce-info .button:hover { border-color: var(--hairline-2); }

/* Inline coupon / login disclosure links */
.s3-disclose { margin: 0; }
.s3-disclose-link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-2);
  padding-bottom: 2px;
  transition: color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease);
}
.s3-disclose-link:hover { color: var(--bone); border-color: var(--ember); }

.s3-inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 0; }
.s3-inline-form .s3-input { width: auto; flex: 1 1 220px; min-height: 44px; }

/* ================================================================== CART ==
   A worksheet: hairline rows, square plates, thin figures. */

.s3-cart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(32px, 4.5vw, 80px);
  align-items: start;
}
.s3-cart-main { min-width: 0; }

.s3-cart-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.s3-ci {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
  padding: clamp(22px, 2.6vw, 32px) 0;
  border-bottom: 1px solid var(--hairline);
}

/* The render sits square in a hairline frame, flush like everywhere else. */
.s3-ci-thumb {
  display: block;
  width: 104px;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--coal-2);
  border: 1px solid var(--hairline);
  border-radius: 0;
  transition: border-color var(--t-quick) var(--ease);
}
.s3-ci-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.s3-ci:hover .s3-ci-thumb { border-color: var(--hairline-2); }

.s3-ci-body { min-width: 0; }
.s3-ci-name {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 300;
  letter-spacing: -.008em;
  line-height: 1.25;
}
.s3-ci-name a { color: var(--bone); text-decoration: none; transition: color var(--t-quick) var(--ease); }
.s3-ci-name a:hover { color: var(--ember-hi); }

.s3-ci-attrs { list-style: none; margin: 0 0 10px; 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: 8px;
  padding: 4px 10px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: transparent;
}
.s3-ci-attr-k {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.s3-ci-attr-v { font-size: 12.5px; font-weight: 500; color: var(--bone); }

.s3-ci-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  color: var(--bone-soft);
}
.s3-ci-spec span + span::before { content: "·"; margin-right: 12px; color: var(--bone-faint); }
.s3-ci-tokens { color: var(--ember-hi); } /* live value */

.s3-ci-remove {
  display: inline-block;
  font-size: 13px;
  color: var(--bone-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(--danger); 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(--font-mono);
  font-size: 12px;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  color: var(--bone-faint);
}
.s3-ci-total {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
  white-space: nowrap;
}
.s3-ci-total del { color: var(--bone-faint); margin-right: 6px; font-size: .8em; }

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

.s3-cart-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 22px;
  margin-top: 4px;
}

/* The coupon: an inline row — well and quiet button on one line. nowrap on
   purpose: a shrink-to-fit flex container that is allowed to wrap reports its
   largest child as its intrinsic width, and the Apply button then always
   falls under the field. It may wrap only on a phone, where it runs full
   width (see the 640px block). */
.s3-coupon { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; }
.s3-coupon .s3-input { width: auto; flex: 0 1 220px; min-height: 44px; }
.s3-coupon .s3-btn-sm, .s3-inline-form .s3-btn-sm { min-height: 44px; }
.s3-cart-update { font-size: 14px; }

/* Summary — cart and checkout share it. Boxless: a brighter rule overhead,
   hairline rows, one thin large number at the foot. */
.s3-cart-aside { position: sticky; top: var(--s3-stick); }
.s3-summary {
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline-2);
  border-radius: 0;
  padding: clamp(20px, 2.4vw, 28px) 0 0;
}
.s3-summary-title {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

.s3-summary-rows { margin: 0; display: grid; gap: 0; }
.s3-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
}
.s3-summary-row dt { margin: 0; font-size: 14px; color: var(--bone-soft); }
.s3-summary-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
  white-space: nowrap;
}
.s3-summary-row a { color: var(--bone-soft); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline-2); }
.s3-summary-row a:hover { color: var(--bone); }
/* Woo wraps the order total in <strong>; .g3-prose strong would repaint it
   bone-700 over the thin mint figure below. Inherit wins here. */
.s3-summary-row dd strong,
.s3-summary-row dd b {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
/* The number the buyer is committing to: thin, large, mint — the one live
   price on the screen. */
.s3-summary-total { border-bottom: 0; padding-top: 18px; align-items: baseline; }
.s3-summary-total dt { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-soft); }
.s3-summary-total dd {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ember-hi);
}
.s3-summary-total dd .woocommerce-Price-currencySymbol { font-size: .62em; }

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

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

/* The login and coupon disclosures, one quiet line between two hairlines. */
.s3-checkout-pre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  margin-bottom: clamp(24px, 3vw, 40px);
  padding: 14px 0;
  background: none;
  border: 0;
  border-block: 1px solid var(--hairline);
  border-radius: 0;
}
.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; }
.s3-checkout-pre .s3-disclose + .s3-disclose {
  padding-left: 26px;
  border-left: 1px solid var(--hairline);
}

/* Column 2 is fixed because it holds prices; column 1 is the form measure. */
.s3-checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: clamp(32px, 4vw, 72px); align-items: start; }
.s3-checkout-main { min-width: 0; display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.s3-checkout-main .col2-set { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.s3-checkout-main .col-1,
.s3-checkout-main .col-2 { width: auto; float: none; display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
/* WooCommerce 8.5+ opens the billing column with an invisible custom element
   that would still claim a flex gap. */
.s3-checkout-main wc-order-attribution-inputs { display: none; }

/* A group of fields is boxless: a thin heading, a quiet note, the wells. */
.s3-fieldset {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.s3-fieldset:last-child { margin-bottom: 0; }
/* Account-page variant: same thing — there is no card left to strip. */
.s3-fieldset-plain { border: 0; padding: 0; margin: 0; background: none; }
.s3-fieldset-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 300;
  letter-spacing: -.01em;
  color: var(--bone);
}
.s3-fieldset-note { margin: 0 0 24px; font-size: 14px; line-height: 1.65; color: var(--bone-soft); }
.s3-fieldset-title + .s3-fields { margin-top: 24px; }

/* The account offer, behind a rule under the billing fields. */
.s3-checkout-main .woocommerce-account-fields {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}
.s3-checkout-main .woocommerce-account-fields .create-account.s3-fields { margin-top: 18px; }

.s3-checkout-aside { position: sticky; top: var(--s3-stick); min-width: 0; }
.s3-checkout-panel {
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline-2);
  border-radius: 0;
  padding: clamp(20px, 2.4vw, 28px) 0 0;
}
.s3-checkout-panel .s3-summary-title {
  margin: 0 0 16px;
}

.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(--coal-2);
  border: 1px solid var(--hairline);
  border-radius: 0;
}
.s3-review-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.s3-review-qty {
  position: absolute;
  top: -1px;
  right: -1px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  background: var(--bone);
  color: var(--coal);
  font-family: var(--font-mono);
  font-size: 10px;
}
.s3-review-body { min-width: 0; display: block; }
.s3-review-name { display: block; font-size: 14px; font-weight: 400; color: var(--bone); 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: 11.5px; }
.s3-review-price {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
  white-space: nowrap;
}

.s3-review .s3-summary-rows { margin-top: 14px; }
/* The checkout total shares the register with the cart's, one step down —
   it sits in a narrower column. */
.s3-review .s3-summary-total dd { font-size: clamp(28px, 2.6vw, 38px); }

/* Payment — method rows on hairlines, a radio that is a radio. */
.s3-payment { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.s3-payment-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.s3-methods { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 0; }
.s3-method {
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: none;
  padding: 0;
  overflow: hidden;
  transition: border-color var(--t-quick) var(--ease);
}
.s3-method .s3-method-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.s3-method-label {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  padding: 15px 0;
  cursor: pointer;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--bone-soft) !important;
  transition: color var(--t-quick) var(--ease);
}
.s3-method-label:hover { color: var(--bone) !important; }
/* The one circle in the system: a radio is a radio. */
.s3-method-label::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  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) .s3-method-label { color: var(--bone) !important; }
.s3-method:has(.s3-method-input:checked) .s3-method-label::before {
  border-color: var(--ember);
  box-shadow: inset 0 0 0 4px var(--ember);
}
.s3-method:has(.s3-method-input:focus-visible) { outline: 2px solid var(--ember); 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 0 16px 28px;
  margin: 0;
  color: var(--bone-soft);
  font-size: 13.5px;
  line-height: 1.65;
}
.s3-method-box p:last-child { margin-bottom: 0; }
.s3-methods-empty {
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  color: var(--bone-soft);
  font-size: 14px;
  line-height: 1.65;
}

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

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

/* Login form dropped in by woocommerce_login_form() at cart/checkout. */
.woocommerce-checkout .woocommerce-form-login,
.woocommerce-cart .woocommerce-form-login {
  padding: 18px 0 6px;
  background: none;
  border: 0;
  border-radius: 0;
  max-width: 560px;
}
.woocommerce-checkout .woocommerce-form-login .form-row,
.woocommerce-cart .woocommerce-form-login .form-row { margin-bottom: 16px; }
.woocommerce-form-login .woocommerce-form-login__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 6px 20px;
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-ctl);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-quick) var(--ease);
}
.woocommerce-form-login .woocommerce-form-login__submit:hover { border-color: rgba(255, 255, 255, .4); }
.woocommerce-form-login .lost_password a { color: var(--bone-soft); font-size: 13px; }

/* order-pay: Woo renders its own table there — a hairline sheet. */
.woocommerce-checkout .shop_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 22px;
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
}
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
  padding: 13px 16px 13px 0;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
  color: var(--bone-soft);
  font-weight: 400;
}
.woocommerce-checkout .shop_table thead th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.woocommerce-checkout .shop_table td:last-child,
.woocommerce-checkout .shop_table th:last-child {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--bone);
  padding-right: 0;
}
.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: clamp(24px, 3vw, 40px); }
/* Not mint: 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: 16px;
  background: none;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-ctl);
  color: var(--bone);
}
.s3-thanks-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 200;
  letter-spacing: -.015em;
  line-height: 1.06;
  color: var(--bone);
}
.s3-thanks-lede { margin: 0; color: var(--bone-soft); font-size: 15.5px; line-height: 1.7; max-width: 56ch; }

.s3-order-meta { display: flex; flex-wrap: wrap; gap: 20px 48px; margin: 0; }
.s3-order-meta-item { margin: 0; }
.s3-order-meta-item dt { display: block; margin-bottom: 8px; }
.s3-order-meta-item dd {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
}
/* Live value. */
.s3-order-meta-total dd { color: var(--ember-hi); }

.s3-order-items { list-style: none; margin: 0; padding: 0; }
.s3-order-item {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 18px 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(--coal-2);
  border: 1px solid var(--hairline);
  border-radius: 0;
}
.s3-order-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.s3-order-item-body { min-width: 0; }
.s3-order-item-name {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -.005em;
  line-height: 1.3;
}
.s3-order-item-name a { color: var(--bone); text-decoration: none; }
.s3-order-item-name a:hover { color: var(--ember-hi); }
.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: 18px; padding-top: 8px; border-top: 1px solid var(--hairline); }
/* The mint total on these screens is the one in the meta strip above.
   Two claims to being the number that matters is one too many. */
.s3-order-detail .s3-summary-total dd,
.s3-thanks .s3-summary-total dd {
  color: var(--bone);
  font-size: clamp(22px, 2.2vw, 30px);
}

.s3-address { font-style: normal; color: var(--bone-soft); font-size: 15px; line-height: 1.8; margin: 0; }
.s3-order-contact { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 40px; }
.s3-order-contact li { font-size: 14px; color: var(--bone); }
.s3-order-contact .s3-readout { display: block; margin-bottom: 5px; }

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

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

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

/* The rail: quiet caps, no chrome. The current place carries a short mint
   dash — it is where you are, which is live. */
.s3-acct-menu {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 0;
  border-left: 0;
}
.s3-acct-menu li a {
  position: relative;
  display: block;
  padding: 10px 0 10px 22px;
  margin-left: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-faint);
  text-decoration: none;
  border-left: 0;
  transition: color var(--t-quick) var(--ease);
}
.s3-acct-menu li a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 1px;
  background: transparent;
  transition: background var(--t-quick) var(--ease);
}
.s3-acct-menu li a:hover { color: var(--bone); }
.s3-acct-menu li.is-active a { color: var(--bone); }
.s3-acct-menu li.is-active a::before { background: var(--ember); }

/* The balance widget stays inside the <nav> (grid reasons — see the template).
   Boxless: a rule, a stamp, the live number. */
.s3-acct-balance {
  display: block;
  padding: 18px 0 0;
  text-decoration: none;
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
}
.s3-acct-balance-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.s3-acct-balance-val {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ember-hi); /* live value */
  transition: color var(--t-quick) var(--ease);
}
.s3-acct-balance:hover .s3-acct-balance-val { color: var(--ember); }

/* Dashboard */
.s3-dash-head { margin-bottom: clamp(20px, 2.4vw, 30px); }
.s3-dash-hello {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 300;
  letter-spacing: -.01em;
  color: var(--bone);
}
.s3-dash-sub {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--bone-faint);
}

/* The wallet: a thin giant number on the open floor. */
.s3-wallet { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: clamp(28px, 3.4vw, 56px); align-items: start; }
.s3-wallet-main { min-width: 0; }
.s3-wallet-value {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(56px, 7vw, 112px);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
}
.s3-wallet-note { margin: 12px 0 0; font-size: 14px; color: var(--bone-soft); }
.s3-wallet-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.s3-wallet-side { display: grid; gap: 16px; padding-left: 28px; border-left: 1px solid var(--hairline); }
.s3-kv b {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
}
.s3-spark { display: flex; align-items: flex-end; gap: 3px; height: 38px; }
.s3-spark i { flex: 1; background: var(--hairline-2); min-height: 2px; }

/* Measured figures — hairline-ruled, thin numbers, caps labels. */
.s3-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 36px); margin: clamp(18px, 2.4vw, 30px) 0; }
.s3-tile {
  display: block;
  padding: 18px 0 4px;
  text-decoration: none;
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  transition: border-color var(--t-quick) var(--ease);
}
.s3-tile:hover { border-top-color: var(--hairline-2); }
.s3-tile-val {
  display: block;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
}
.s3-tile-label {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

.s3-dash-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 3.4vw, 56px); margin-bottom: 0; }
.s3-dash-cols .s3-panel { margin: 0 0 clamp(18px, 2.4vw, 30px); }

.s3-jobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.s3-job { display: block; text-decoration: none; }
.s3-job-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1;
  margin-bottom: 8px;
  background: var(--coal-2) center/cover no-repeat;
  border: 1px solid var(--hairline);
  border-radius: 0;
  transition: border-color var(--t-quick) var(--ease);
}
.s3-job:hover .s3-job-thumb { border-color: var(--hairline-2); }
.s3-job-status {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bone-faint);
}
.s3-st-processing, .s3-st-queued { background: var(--ember); }
.s3-st-completed { background: var(--bone-faint); }
.s3-st-failed, .s3-st-canceled { background: var(--danger); }
.s3-job-name { display: block; font-size: 13px; color: var(--bone-soft); line-height: 1.4; }
.s3-job:hover .s3-job-name { color: var(--bone); }
.s3-job-meta {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--bone-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: 12px 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: 400; color: var(--bone); }
.s3-feed-body em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--bone-faint);
}
.s3-feed-amt { font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--bone); }
.s3-feed-amt.is-out { color: var(--bone-soft); }

.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: 13px 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  transition: padding-left var(--t-base) var(--ease);
}
.s3-orderline:hover { padding-left: 10px; }
.s3-orderlist li:last-child .s3-orderline { border-bottom: 0; }
.s3-orderline-id { font-family: var(--font-mono); font-size: 13.5px; color: var(--bone); }
.s3-orderline-date { font-family: var(--font-mono); font-size: 12px; color: var(--bone-faint); }
.s3-orderline-total { font-family: var(--font-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--bone); }

/* Orders — ledger rows on hairlines, one per order. The hover is the
   homepage index row's: the line breathes left. */
.s3-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.s3-order {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(20px, 2.6vw, 36px);
  align-items: center;
  padding: clamp(20px, 2.6vw, 30px) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  transition: padding-left var(--t-base) var(--ease);
}
.s3-order:hover { padding-left: 14px; }
.s3-order-thumbs { display: flex; }
.s3-order-thumbs-i {
  width: 56px;
  height: 56px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--coal-2) center/cover no-repeat;
  border: 1px solid var(--hairline);
  border-radius: 0;
  color: var(--bone-faint);
}
.s3-order-thumbs-i + .s3-order-thumbs-i { margin-left: -14px; }
.s3-order-title {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -.005em;
}
.s3-order-title a { color: var(--bone); text-decoration: none; }
.s3-order-title a:hover { color: var(--ember-hi); }
.s3-order-sub {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--bone-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.s3-order-names { margin: 0; font-size: 14px; color: var(--bone-soft); line-height: 1.55; }
.s3-order-side { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; text-align: right; }
.s3-order-total {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
}
.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: 18px; margin-top: 26px; }
.s3-pager-pos { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--bone-faint); }

/* My models — download rows on hairlines: square render, thin name, the
   files as quiet controls. */
.s3-dl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
}
.s3-dl {
  display: flex;
  gap: clamp(18px, 2.2vw, 28px);
  padding: clamp(20px, 2.6vw, 30px) 0;
  background: none;
  border-bottom: 1px solid var(--hairline);
  min-width: 0;
}
.s3-dl-thumb {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  flex: none;
  background: var(--coal-2) center/cover no-repeat;
  border: 1px solid var(--hairline);
  border-radius: 0;
  color: var(--bone-faint);
}
.s3-dl-body { flex: 1; min-width: 0; }
.s3-dl-name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 300;
  letter-spacing: -.005em;
  line-height: 1.3;
}
.s3-dl-name a { color: var(--bone); text-decoration: none; }
.s3-dl-name a:hover { color: var(--ember-hi); }
.s3-dl-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* The download control: a quiet outline that brightens under the hand. */
.s3-dl-file {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  min-height: 36px;
  background: transparent;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-ctl);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--bone);
  text-decoration: none;
  transition: border-color var(--t-quick) var(--ease);
}
.s3-dl-file:hover { border-color: var(--ember); }
.s3-dl-expiry { margin: 12px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--bone-faint); }

/* Long forms sit narrow on the open floor — no card. */
.s3-form {
  max-width: 560px;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.s3-form-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 300;
  letter-spacing: -.008em;
  color: var(--bone);
}
.s3-form-title + .s3-fields, .s3-form-title + fieldset { margin-top: 22px; }
.s3-form-note { margin: 0 0 20px; font-size: 14px; line-height: 1.65; color: var(--bone-soft); }
.s3-form .s3-fields + .s3-form-title,
.s3-form fieldset + .s3-form-title,
.s3-form .s3-fields ~ .s3-form-title { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--hairline); }
.s3-form-actions { margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.s3-addresses { display: grid; gap: 0; }
.s3-addresses.woocommerce-Addresses { grid-template-columns: 1fr; }

/* ================================================================ sign-in ==
   Boxless: the two forms live on the open floor at the form measure.
   inner.js prepends a caps tab switch and the columns share one cell;
   without JS both render stacked over hairlines and everything submits. */

.s3-auth {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.s3-auth-single { max-width: 480px; }
.s3-auth-col { min-width: 0; padding: 0; }

.s3-auth-pair {
  max-width: 560px;
  margin-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  align-items: start;
}
.s3-auth-pair > .s3-auth-col { grid-column: 1; grid-row: 2; }
.s3-auth-pair > .s3-auth-gets-wide { grid-column: 1; grid-row: 4; }

/* Fragment jumps land under the fixed bar without this. */
.s3-auth-col[id] { scroll-margin-top: calc(var(--s3-stick, 96px) + 12px); }

/* The tab switch inner.js prepends: two caps stamps, the active one marked
   with the mint dash — it is a location, and the reader's location is live. */
.ms-auth-tabs {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  gap: 28px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 30px;
}
.ms-auth-tabs button {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--bone-faint);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 0;
  min-height: 40px;
  cursor: pointer;
  transition: color var(--t-quick) var(--ease);
}
.ms-auth-tabs button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -23px;
  width: 100%;
  height: 1px;
  background: transparent;
  transition: background var(--t-quick) var(--ease);
}
.ms-auth-tabs button:hover { color: var(--bone); }
.ms-auth-tabs button.is-on { color: var(--bone); }
.ms-auth-tabs button.is-on::after { background: var(--ember); }

/* With the tab switch in place the active tab already names the column, so
   the column's own title would say it twice. The note stays — it is the
   sentence, not the name. */
.s3-auth-pair:has(.ms-auth-tabs) .s3-auth-title { display: none; }

/* Once the tabs exist, the two columns share one cell and only the active one
   shows. Without JS (no .ms-auth-tabs) both stay visible, stacked by rows. */
.s3-auth-pair:has(.ms-auth-tabs) > .s3-auth-col {
  grid-row: 2;
  transition: opacity var(--t-base) var(--ease), visibility 0s var(--t-base);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.s3-auth-pair:has(.ms-auth-tabs) > .s3-auth-col.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--t-base) var(--ease), visibility 0s;
}
/* No-JS fallback: the second column stacks under the first behind a rule. */
.s3-auth-pair:not(:has(.ms-auth-tabs)) > .s3-auth-col + .s3-auth-col {
  grid-row: 3;
  margin-top: 34px;
  padding-top: 34px;
  border-top: 1px solid var(--hairline);
}

/* With the tab switch active only one column is on screen at a time, so each
   column's submit is that screen's single primary — the register button may
   take the plate and the ring it is denied when both columns show at once. */
.s3-auth-pair:has(.ms-auth-tabs) .s3-authform .s3-btn-glass,
.s3-auth-pair:has(.ms-auth-tabs) .s3-authform .s3-btn-glass[disabled] {
  background: var(--s3-plate);
  border-color: rgba(255, 255, 255, .12);
  color: var(--bone);
}
.s3-auth-pair:has(.ms-auth-tabs) .s3-authform .s3-btn-glass:hover {
  background: #242429;
  border-color: rgba(255, 255, 255, .22);
  color: var(--bone);
}
.s3-auth-pair:has(.ms-auth-tabs) .s3-authform .s3-btn-glass::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--r-ctl) + 1px);
  padding: 1px;
  background: conic-gradient(from var(--g3a),
    transparent 0turn,
    transparent .62turn,
    rgba(245, 246, 247, .25) .78turn,
    rgba(245, 246, 247, .95) .87turn,
    var(--ember) .94turn,
    transparent 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  animation: g3-ring-run 5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .s3-auth-pair:has(.ms-auth-tabs) .s3-authform .s3-btn-glass::after { animation: none; opacity: .7; }
}

.s3-auth-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -.012em;
  font-weight: 300;
  color: var(--bone);
}
.s3-auth-note { margin: 0 0 26px; font-size: 14px; line-height: 1.65; color: var(--bone-soft); max-width: 48ch; }

.s3-authform { margin: 0; }
.s3-authform .form-row.s3-field { margin: 0 0 20px; }
.s3-authform .form-row.s3-field:last-of-type { margin-bottom: 0; }
.s3-authform .form-row.s3-auth-row { margin: 18px 0 0; }

.s3-auth .s3-authform input.s3-input { font-size: 16px; min-height: 48px; }
.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: 18px 0 0;
}
.s3-auth-lost { font-size: 13px; color: var(--bone-soft); text-decoration: none; white-space: nowrap; transition: color var(--t-quick) var(--ease); }
.s3-auth-lost:hover { color: var(--bone); }

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

.s3-auth-cross { margin: 20px 0 0; font-size: 14px; line-height: 1.55; color: var(--bone-faint); }
.s3-auth-cross a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline-2); }
.s3-auth-cross a:hover { text-decoration-color: var(--ember); }

/* What the account is for — facts as quiet rows on hairlines. */
.s3-auth-gets { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--hairline); }
.s3-auth-pair > .s3-auth-gets-wide {
  margin: 40px 0 0;
  border-top: 1px solid var(--hairline);
  padding: 26px 0 0;
}
.s3-auth-gets-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.s3-auth-gets-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.s3-auth-gets-list li {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
  line-height: 1.65;
  color: var(--bone-soft);
}
.s3-auth-gets-list li:last-child { border-bottom: 0; }
.s3-auth-gets-list strong { font-weight: 500; color: var(--bone); }
.s3-auth-formats {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--bone);
  white-space: nowrap;
}
.s3-auth-gets-link { display: inline-block; color: var(--bone); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline-2); }
.s3-auth-gets-link:hover { text-decoration-color: var(--ember); }

/* WooCommerce's privacy sentence lands mid-form at prose size; it is a
   footnote and 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.6; color: var(--bone-faint); }
.s3-authform .woocommerce-privacy-policy-text a { color: var(--bone-soft); text-decoration: underline; text-underline-offset: 3px; }
.s3-authform .woocommerce-privacy-policy-text a:hover { color: var(--bone); }

/* ============================================================ studio gate ==
   What a logged-out visitor sees at /studio/ — a boxless invitation carrying
   the real cost ladder. Markup comes from the plugin (Core\Shortcode);
   the figures are live. The primary here is Create an account: this
   screen's whole job is the first decision. */

.s3-studio-app { position: relative; }
.meshy-signin { padding: calc(72px + clamp(48px, 7vw, 110px)) 0 clamp(72px, 9vw, 130px); }
body.admin-bar .meshy-signin { padding-top: calc(104px + clamp(48px, 7vw, 110px)); }

.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.15fr) minmax(0, .85fr);
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
.meshy-signin-intro { min-width: 0; }
.meshy-signin-title {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 96px);
  line-height: 1.02;
  letter-spacing: -.015em;
  font-weight: 200;
  color: var(--bone);
  max-width: 14ch;
  text-wrap: balance;
}
.meshy-signin-lede {
  margin: 0;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--bone-soft);
  max-width: 46ch;
}

/* What it does — wide quiet rows against hairlines, the index idiom. */
.meshy-signin-does {
  list-style: none;
  margin: clamp(36px, 4vw, 56px) 0 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.meshy-signin-does li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 28px;
  margin: 0;
  padding: clamp(16px, 1.8vw, 22px) 0;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left var(--t-base) var(--ease);
}
.meshy-signin-does li:hover { padding-left: 12px; }
.meshy-signin-k {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 24px);
  font-weight: 300;
  letter-spacing: -.005em;
  color: var(--bone);
}
.meshy-signin-v {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--bone-faint);
  text-align: right;
}
.meshy-signin-formats {
  font-family: var(--font-mono);
  letter-spacing: .06em;
  text-transform: none;
  color: var(--bone-soft);
  align-self: center;
}

/* The offer: a boxless ladder under a brighter rule, one unmistakable action. */
.meshy-signin-panel {
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline-2);
  border-radius: 0;
  padding: clamp(20px, 2.4vw, 28px) 0 0;
  position: sticky;
  top: var(--s3-stick, 96px);
}
.meshy-signin-panel-title {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

.meshy-signin-cost { margin: 0 0 20px; }
.meshy-signin-cost-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.meshy-signin-cost-row:first-child { border-top: 0; }
.meshy-signin-cost-row dt { font-size: 14px; line-height: 1.5; color: var(--bone-soft); }
.meshy-signin-cost-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
  white-space: nowrap;
}
.meshy-signin-cost-row.is-total dt { color: var(--bone); font-weight: 500; }
/* The end-to-end figure is the live price this screen exists to state. */
.meshy-signin-cost-row.is-total dd { color: var(--ember-hi); font-size: 15px; }
.meshy-signin-cost-row.is-pack { border-bottom: 0; }
.meshy-signin-cost-row.is-pack dt { color: var(--bone-faint); white-space: nowrap; }
.meshy-signin-cost-row.is-pack dd { color: var(--bone-soft); white-space: normal; text-align: right; }

.meshy-signin-zero { margin: 0 0 24px; font-size: 13px; line-height: 1.7; color: var(--bone-faint); }
.meshy-signin-actions { display: grid; gap: 10px; }
.meshy-signin-actions .s3-btn { width: 100%; }
.meshy-signin-fine { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--bone-faint); }

.meshy-signin a.s3-btn { text-decoration: none; }

/* =================================================== holding off .g3-prose ==
   main.css dresses .g3-prose h2/h3/p/ul/ol/li for long-form reading, and
   page.php renders the whole cart, checkout and thank-you screen inside
   .g3-prose. Left alone, every component heading in the purchase flow renders
   at prose size with a 1.6em top margin, every list indents, and every link —
   including the primary CTA — takes the prose underline. Each rule below
   restates a value already declared above, one selector deeper, so it outranks
   `.g3-prose <element>`. None of it is design; all of it is defence, and each
   line can go the day the purchase flows leave the prose column. */

.g3-prose ul[class*="s3-"],
.g3-prose ol[class*="s3-"] { margin: 0; padding-left: 0; color: inherit; }
.g3-prose ul[class*="s3-"] > li,
.g3-prose ol[class*="s3-"] > li,
.g3-prose li[class*="s3-"] { margin-bottom: 0; }
.g3-prose .s3-cart-items { margin: 0; }
.g3-prose .s3-methods { margin: 0 0 20px; }
.g3-prose .s3-review-items { margin: 0 0 4px; }

.g3-prose a[class*="s3-"] { text-decoration: none; }

/* main.css gives .g3-prose img a hairline border and 1.6em block margins —
   inside a 52–104px thumb frame that pushes the render out of its own
   square. Framed renders reset to flush. */
.g3-prose .s3-ci-thumb img,
.g3-prose .s3-review-thumb img,
.g3-prose .s3-order-thumb img {
  margin: 0;
  border: 0;
}

.g3-prose .s3-ci-name { font-size: clamp(18px, 1.8vw, 24px); margin: 0 0 10px; }
.g3-prose .s3-fieldset-title { font-size: clamp(22px, 2.2vw, 30px); margin: 0 0 8px; }
.g3-prose .s3-summary-title { font-size: 12px; margin: 0 0 16px; }
.g3-prose .s3-panel-title { font-size: 12px; margin: 0 0 20px; }
.g3-prose .s3-panel-head .s3-panel-title { margin: 0; }
.g3-prose .s3-payment-title { font-size: 12px; font-family: var(--font-body); margin: 0 0 8px; }
.g3-prose .s3-order-item-name { font-size: 18px; margin: 0 0 8px; }
.g3-prose .s3-thanks-title { font-size: clamp(30px, 3.4vw, 52px); margin: 0 0 10px; }
.g3-prose .s3-empty h2 { font-size: clamp(26px, 2.8vw, 40px); margin: 0; }

.g3-prose .s3-ci-spec { margin: 0 0 10px; color: var(--bone-soft); }
.g3-prose .s3-fieldset-note { margin: 0 0 24px; }
.g3-prose .s3-summary-note { margin: 14px 0 0; }
.g3-prose .s3-terms { margin: 0 0 16px; color: var(--bone-faint); }
.g3-prose .s3-order-names { margin: 0; }
.g3-prose .s3-order-sub { margin: 0 0 6px; }
.g3-prose .s3-thanks-lede { margin: 0; }
.g3-prose .s3-dl-expiry { margin: 12px 0 0; }
.g3-prose .s3-panel-empty { margin: 0; }
.g3-prose .s3-method-box p:last-child { margin-bottom: 0; }
.g3-prose .s3-empty p { margin: 0; color: var(--bone-soft); }

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

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

@media (max-width: 940px) {
  .s3-acct { grid-template-columns: 1fr; gap: 28px; }
  .s3-acct-nav { position: static; }
  .s3-acct-menu {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    gap: 22px;
    padding-bottom: 12px;
    border-left: 0;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .s3-acct-menu li a { padding: 10px 0; white-space: nowrap; }
  .s3-acct-menu li a::before {
    top: auto;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 1px;
  }
  /* The balance moves under the rail as its own quiet line. */
  .s3-acct-balance { border-top: 0; padding-top: 14px; display: flex; align-items: baseline; gap: 14px; }
  .s3-acct-balance-val { margin-top: 0; font-size: 24px; }

  .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: 20px; border-top: 1px solid var(--hairline); }
  .s3-dash-cols { grid-template-columns: 1fr; }

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

@media (max-width: 640px) {
  /* One field per line; the basis resets so lone halves keep growing. */
  .s3-fields > .form-row { flex-basis: 100%; }

  .s3-checkout-pre { padding: 14px 0; 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: 76px minmax(0, 1fr); gap: 14px; }
  .s3-ci-thumb { width: 76px; }
  .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; align-items: start; }
  .s3-order:hover { padding-left: 0; }
  .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%; flex-wrap: wrap; }
  .s3-coupon .s3-input { flex: 1 1 auto; }
  .s3-dl { flex-direction: column; }
  .s3-dl:hover { padding-left: 0; }
  .s3-order-meta { gap: 16px 32px; }
  .s3-orderline { grid-template-columns: auto 1fr auto; }
  .s3-orderline-date { display: none; }

  /* At 390px the label/value pair stacks; the row stays a row of two lines. */
  .meshy-signin-does li { flex-direction: column; align-items: flex-start; gap: 4px; }
  .meshy-signin-does li:hover { padding-left: 0; }
  .meshy-signin-v { text-align: left; }
  .meshy-signin-formats { align-self: start; }
  .meshy-signin-title { max-width: none; }
}

/* ---------------------------------------------------------- touch sizing --
   Small text links — remove, apply, forgot password — get a 44px hit box from
   a pseudo-element, so the type stays exactly where it is. */

.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; }

  .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; }
  .s3-btn-sm { min-height: 44px; }
  .s3-dl-file { min-height: 44px; align-items: center; }
}

/* --------------------------------------------------------- reduced motion --
   system.css zeroes durations globally. position:sticky is a scroll effect
   rather than an animation, so it is released here too. */
@media (prefers-reduced-motion: reduce) {
  .s3-cart-aside, .s3-checkout-aside, .s3-acct-nav, .meshy-signin-panel { position: static; }
  .s3-auth-pair:has(.ms-auth-tabs) > .s3-auth-col { transition: none; }
}