/* literally: UI kit. One button shape, prose, form fields, notices. WooCommerce's own buttons and fields take
   the same classes' look here, so the shop has one button and one field. */

/* The button: wobbly crayon outline on white; hover fills with the crayon's light color. The filled button
   (add to cart, checkout, place order) is water blue with white letters. */
.btn,
.button,
.wp-element-button,
.wc-block-components-button:not(.is-link) {
  --btn-bg: var(--paper);
  --btn-fg: var(--crayon-black);
  --btn-hover: var(--crayon-light);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 0; border-radius: var(--radius);
  font-family: var(--body); font-size: 1.0625rem; font-weight: 800; line-height: 1.2; text-decoration: none;
  cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn::before,
.button::before,
.wp-element-button::before,
.wc-block-components-button:not(.is-link)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: var(--line); border-radius: inherit; filter: url(#crayon-wobble);
}
.btn:hover,
.button:hover,
.wp-element-button:hover,
.wc-block-components-button:not(.is-link):hover { background: var(--btn-hover); color: var(--btn-fg); transform: rotate(-0.6deg); }

.btn--fill,
.button.alt,
.single_add_to_cart_button,
.checkout-button,
#place_order,
.wc-block-components-button.wc-block-cart__submit-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button {
  --btn-bg: var(--water-blue-ink);
  --btn-fg: #fff;
  --btn-hover: var(--crayon-black);
}
.button:disabled, .button.disabled, .wc-block-components-button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Words on a page */
.prose { max-width: var(--measure); }
.prose--wide { max-width: none; }
.prose > * + h2 { margin-top: var(--space-5); }
.prose > * + h3 { margin-top: var(--space-4); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 var(--space-2); }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--crayon); font-weight: 800; }
.prose strong { font-weight: 800; }
.prose hr {
  border: 0; height: 10px; margin: var(--space-5) 0; background: var(--shark-grey);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6c60-4 120 2 196-1s140-3 200 0' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6c60-4 120 2 196-1s140-3 200 0' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* Numbered steps (home: how a shirt is made): big hand-written numbers in the crayon colors */
.prose ol.steps {
  list-style: none; padding: 0; margin: 0 0 var(--space-4); counter-reset: step;
  display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr));
}
.prose ol.steps li { counter-increment: step; position: relative; padding-top: 3.4rem; margin: 0; max-width: 34ch; }
.prose ol.steps li::before {
  content: counter(step); position: absolute; top: 0; left: 0;
  font-family: var(--hand); font-size: 3.2rem; line-height: 1; color: var(--water-blue);
}
.prose ol.steps li:nth-child(2)::before { color: var(--sea-green); }
.prose ol.steps li:nth-child(3)::before { color: var(--mane-orange); }
@media (max-width: 760px) { .prose ol.steps { grid-template-columns: minmax(0, 1fr); } }
.crayon-underline { position: relative; display: inline-block; }
.crayon-underline::after { opacity: 1; bottom: -4px; }

/* Form fields: 16px+ text so iOS doesn't zoom, the crayon line, a clear focus ring */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"],
input[type="search"], input[type="url"], select, textarea,
.woocommerce .input-text {
  font: inherit; font-size: max(16px, 1rem); color: var(--crayon-black);
  background: var(--paper); border: var(--line-thin); border-radius: var(--radius-small);
  min-height: 48px; padding: 10px 14px; max-width: 100%;
}
select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M2 2.5c2.6 2.4 5 4.6 8 7.2 2.6-2.5 5.2-4.8 8-7.6' fill='none' stroke='%231e1e1e' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") right 16px center / 16px 10px no-repeat;
}
textarea { min-height: 140px; }
label { font-weight: 700; }

/* Notices: the same wobbly crayon outline as the buttons, no colored side rail (Nicholas, 17 Oct 2026) */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner {
  position: relative; isolation: isolate; list-style: none; margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3);
  background: var(--paper); border: 0; border-radius: var(--radius); box-shadow: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); justify-content: space-between;
}
.woocommerce-message::after, .woocommerce-info::after, .woocommerce-error::after, .wc-block-components-notice-banner::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: var(--line); border-color: var(--water-blue); border-radius: inherit; filter: url(#crayon-wobble);
}
.woocommerce-error::after, .wc-block-components-notice-banner.is-error::after { border-color: var(--mane-orange); }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none; }
.wc-block-components-notice-banner { border: 0 !important; }
.wc-block-components-notice-banner > svg { display: none; }