/* === Esther shared form controls (cart / checkout / account) === */

/* Inputs: stacked label-above-input style with bottom-border underline focus */
.esther-form-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-block-end: var(--s-5);
}

.esther-form-row__label,
.esther-form-row label,
form.checkout .form-row > label,
form.woocommerce-cart-form .form-row > label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.esther-form-row__required,
.esther-form-row .required,
.woocommerce form .required,
form.checkout .required,
form.woocommerce-cart-form .required {
  color: var(--color-accent);
  text-decoration: none;
}

/* Inputs */
.esther-form-row input[type="text"],
.esther-form-row input[type="email"],
.esther-form-row input[type="tel"],
.esther-form-row input[type="number"],
.esther-form-row input[type="password"],
.esther-form-row select,
.esther-form-row textarea,
form.checkout .input-text,
form.checkout select,
form.woocommerce-cart-form .input-text,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  appearance: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: var(--s-3) var(--s-4);
  font: inherit;
  color: var(--color-text);
  width: 100%;
  transition: border-color var(--t-base);
}

.esther-form-row input:focus,
.esther-form-row select:focus,
.esther-form-row textarea:focus,
form.checkout .input-text:focus,
form.checkout select:focus,
.woocommerce form .form-row input.input-text:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Select chevron */
.esther-form-row select,
form.checkout select,
.woocommerce form .form-row select {
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
                    linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
  background-position: calc(100% - 1rem) 50%, calc(100% - 0.7rem) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: var(--s-7);
}

/* Checkboxes & radios — kept native shape but recolored */
.esther-form-row input[type="checkbox"],
.esther-form-row input[type="radio"],
form.checkout input[type="checkbox"],
form.checkout input[type="radio"] {
  accent-color: var(--color-accent);
  width: 1rem;
  height: 1rem;
}

/* Inline checkbox label (e.g., "create account") */
.woocommerce-form__label-for-checkbox,
.esther-form-row--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-small);
  color: var(--color-text);
  text-transform: none;
  letter-spacing: 0;
}

/* Validation messages from WC */
.woocommerce-invalid input.input-text,
.woocommerce-invalid select {
  border-color: #c1352c;
}

/* === WC notices (success / info / error) === */
.woocommerce-notices-wrapper,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: 0;
  padding: var(--s-4);
  font-size: var(--fs-small);
  color: var(--color-text);
  margin-block-end: var(--s-5);
  list-style: none;
}

.woocommerce-error {
  border-inline-start-color: #c1352c;
}

.woocommerce-message a.button,
.woocommerce-info a.button {
  background: transparent;
  color: var(--color-accent);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  padding: 0;
  border: none;
  margin-inline-start: var(--s-3);
}

/* .esther-button styles live in base.css (global) so shop + other pages can use them. */

/* === Cart + checkout page wrappers === */
.esther-page {
  padding-block: var(--s-7);
}
.esther-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
}
@media (min-width: 768px) {
  .esther-container { padding-inline: var(--container-pad-desktop); }
}

.esther-page__header {
  margin-block-end: var(--s-6);
}
.esther-page__title {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--lh-tight);
}

/* Cart layout — 2-col on desktop, stacked on tablet/mobile */
.esther-cart__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 1024px) {
  .esther-cart__layout {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--s-7);
    align-items: start;
  }
}

.esther-cart__rows { display: flex; flex-direction: column; }

/* Hide the WC shipping calculator on cart until we design it properly */
.woocommerce-shipping-calculator { display: none; }

/* === Checkout layout === */
.esther-checkout__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 1024px) {
  .esther-checkout__layout {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: var(--s-7);
    align-items: start;
  }
}

/* The col2-set wrapper WC outputs — neutralize its old float-grid styles */
.esther-checkout .col2-set {
  display: block;
  width: 100%;
}
.esther-checkout .col2-set .col-1,
.esther-checkout .col2-set .col-2 {
  width: 100%;
  float: none;
}

/* Hide order-review duplicate heading when WC inserts it */
.esther-checkout #order_review_heading { position: absolute; left: -9999px; }

/* Suppress default WC stylesheet's checkout-payment block borders */
.esther-checkout .woocommerce-checkout-payment {
  background: transparent;
  border-radius: 0;
}

/* === Collapsible prompts at top of checkout === */
.esther-checkout-prompt {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-accent);
  padding: var(--s-3) var(--s-4);
  margin-block-end: var(--s-4);
  font-size: var(--fs-small);
}
.esther-checkout-prompt summary {
  cursor: pointer;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  list-style: none;
}
.esther-checkout-prompt summary::-webkit-details-marker { display: none; }
.esther-checkout-prompt[open] summary { margin-block-end: var(--s-3); }
.esther-checkout-prompt .form-row { margin-block-end: var(--s-2); }
.esther-checkout-prompt .clear { clear: both; }