/*
 * happymonday/commerce — brand reskin of the four BoberStore page blocks.
 *
 * Covers: .boberstore-cart__*, .boberstore-checkout__*, .boberstore-thank-you__*,
 * .boberstore-account__*, .boberstore-contact__*
 *
 * Strategy: override via the same .boberstore-* selectors the plugin emits.
 * The plugin ships its own style.css (loaded earlier); this file sits after
 * happymonday-cart in the enqueue chain so it wins by source order at equal
 * specificity. We never edit plugin files.
 *
 * Token mapping (theme.json slug → brand role):
 *   bg-1      #FFF9F1  cream — page / card background
 *   bg-2      #b7d7ff  light-blue — panels (not used extensively here)
 *   bg-3      #edbccf  pink — accent panel / announce-band tint
 *   bg-4      #39111e  deep dark — feature bars (not used here)
 *   cta-1     #EDBCCF  pink — form-field focus ring, panel tint, account-offer bg
 *   cta-2     #ffffff  white — secondary button fill
 *   accent-1  #eb6b2f  ORANGE — primary CTA, price highlights, download buttons
 *   accent-2  #eebccf  pink-shade — secondary accent
 *   ink       #000000  black — text, borders, outlines
 *
 * --hm-* semantic aliases (tokens.css) are available on the front end.
 * Hex values appear only as fallbacks inside var().
 */

/* ============================================================================
   SHARED FORM FIELD BASELINE
   Reset the generic plain-box look the plugin ships, unify focus rings.
   ============================================================================ */

.boberstore-cart__coupon-input,
.boberstore-thank-you__pw-input {
  background: var(--wp--preset--color--bg-1, #fff9f1);
  border: 1.5px solid var(--hm-line, rgba(0, 0, 0, 0.18));
  border-radius: var(--hm-radius-sm, 6px);
  color: var(--wp--preset--color--ink, #000);
  font-family: var(--hm-font-body, sans-serif);
  font-size: var(--hm-fs-sm, 0.9rem);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.boberstore-cart__coupon-input:focus,
.boberstore-thank-you__pw-input:focus {
  outline: none;
  border-color: var(--wp--preset--color--accent-1, #eb6b2f);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent-1, #eb6b2f) 20%, transparent);
}

.boberstore-cart__coupon-input:focus-visible,
.boberstore-thank-you__pw-input:focus-visible {
  outline: 3px solid var(--wp--preset--color--ink, #000);
  outline-offset: 2px;
}

/* ============================================================================
   CART BLOCK  (.boberstore-cart)
   ============================================================================ */

/* Wrapper — a touch more breathing room */
.boberstore-cart {
  padding: var(--wp--preset--spacing--30, 1.75rem) var(--wp--preset--spacing--20, 1rem);
}

/* ---- Empty state ---------------------------------------------------------- */

.boberstore-cart__empty {
  color: var(--wp--preset--color--ink, #000);
}

.boberstore-cart__continue {
  color: var(--wp--preset--color--accent-1, #eb6b2f);
  font-weight: 600;
}

.boberstore-cart__continue:hover,
.boberstore-cart__continue:focus-visible {
  color: var(--wp--preset--color--ink, #000);
  text-decoration: none;
}

/* ---- Item list ------------------------------------------------------------ */

.boberstore-cart__items {
  border-top: 1px solid var(--hm-line, rgba(0, 0, 0, 0.14));
}

.boberstore-cart__item {
  border-bottom: 1px solid var(--hm-line, rgba(0, 0, 0, 0.1));
}

.boberstore-cart__item-title {
  font-family: var(--hm-font-body, sans-serif);
  font-weight: 600;
  color: var(--wp--preset--color--ink, #000);
}

.boberstore-cart__price-regular {
  color: var(--wp--preset--color--ink, #000);
}

/* Strikethrough regular price when sale is active */
.boberstore-cart__item-price s.boberstore-cart__price-regular {
  color: var(--hm-ink-soft, rgba(0, 0, 0, 0.45));
  text-decoration: line-through;
}

.boberstore-cart__price-sale {
  color: var(--wp--preset--color--accent-1, #eb6b2f);
  font-weight: 700;
}

/* Remove link */
.boberstore-cart__remove {
  color: var(--hm-text-muted, rgba(0, 0, 0, 0.55));
  font-size: var(--hm-fs-sm, 0.875rem);
  font-family: var(--hm-font-body, sans-serif);
  text-decoration: underline;
  transition: color 0.15s ease;
}

.boberstore-cart__remove:hover,
.boberstore-cart__remove:focus-visible {
  color: var(--wp--preset--color--accent-1, #eb6b2f);
  text-decoration: none;
  outline: none;
}

.boberstore-cart__remove:focus-visible {
  outline: 3px solid var(--wp--preset--color--ink, #000);
  outline-offset: 2px;
  border-radius: var(--hm-radius-sm, 6px);
}

/* ---- Coupon area ---------------------------------------------------------- */

.boberstore-cart__coupon {
  padding-top: var(--wp--preset--spacing--20, 1rem);
}

.boberstore-cart__coupon-applied {
  background: color-mix(in srgb, var(--wp--preset--color--bg-3, #edbccf) 20%, var(--wp--preset--color--bg-1, #fff9f1));
  border: 1px solid var(--wp--preset--color--bg-3, #edbccf);
  border-radius: var(--hm-radius-sm, 6px);
}

.boberstore-cart__coupon-code {
  color: var(--wp--preset--color--ink, #000);
  font-family: var(--hm-font-body, sans-serif);
  font-size: var(--hm-fs-sm, 0.875rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
}

.boberstore-cart__coupon-remove {
  color: var(--hm-text-muted, rgba(0, 0, 0, 0.55));
  font-size: var(--hm-fs-sm, 0.875rem);
  font-family: var(--hm-font-body, sans-serif);
  text-decoration: underline;
  transition: color 0.15s ease;
}

.boberstore-cart__coupon-remove:hover,
.boberstore-cart__coupon-remove:focus-visible {
  color: var(--wp--preset--color--accent-1, #eb6b2f);
  text-decoration: none;
}

.boberstore-cart__coupon-form {
  gap: 0.5rem;
}

/* Coupon apply button — ghost variant matching .hm-btn--ghost */
.boberstore-cart__coupon-apply {
  padding: 0.55em 1.1em;
  background: transparent;
  color: var(--wp--preset--color--ink, #000);
  border: 2px solid var(--wp--preset--color--ink, #000);
  border-radius: var(--hm-radius-pill, 999px);
  font-family: var(--hm-font-body, sans-serif);
  font-size: var(--hm-fs-sm, 0.875rem);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.boberstore-cart__coupon-apply:hover,
.boberstore-cart__coupon-apply:focus-visible {
  background: var(--wp--preset--color--bg-1, #fff9f1);
  color: var(--wp--preset--color--ink, #000);
  outline: 3px solid var(--wp--preset--color--ink, #000);
  outline-offset: 2px;
}

/* Coupon message states */
.boberstore-cart__coupon-message {
  font-size: var(--hm-fs-sm, 0.875rem);
}

.boberstore-cart__coupon-message.is-error {
  color: #b32d2e;
}

.boberstore-cart__coupon-message.is-success {
  color: #1d6a2e;
}

/* ---- Totals --------------------------------------------------------------- */

.boberstore-cart__totals {
  border-top: 2px solid var(--wp--preset--color--ink, #000);
}

.boberstore-cart__totals-row {
  font-size: var(--hm-fs-sm, 0.875rem);
  color: var(--wp--preset--color--ink, #000);
}

.boberstore-cart__totals-row dt {
  font-weight: 400;
  color: var(--hm-text-muted, rgba(0, 0, 0, 0.62));
}

.boberstore-cart__totals-row dd {
  font-weight: 600;
}

.boberstore-cart__totals-row--discount {
  color: var(--wp--preset--color--accent-1, #eb6b2f);
}

.boberstore-cart__totals-row--discount dt {
  color: var(--wp--preset--color--accent-1, #eb6b2f);
}

.boberstore-cart__totals-row--total {
  border-top: 1px solid var(--hm-line, rgba(0, 0, 0, 0.14));
  font-size: var(--hm-fs-base, 1rem);
}

.boberstore-cart__totals-row--total dt,
.boberstore-cart__totals-row--total dd {
  font-weight: 700;
  color: var(--wp--preset--color--ink, #000);
}

/* ---- Checkout CTA button — matches .hm-btn (orange fill, pill, black border, tilt hover) */
.boberstore-cart__checkout {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0.85em 1.6em;
  background: var(--wp--preset--color--cta-1, #edbccf);
  color: var(--wp--preset--color--ink, #000);
  font-family: var(--hm-font-body, sans-serif);
  font-weight: 700;
  font-size: var(--hm-fs-base, 1rem);
  text-decoration: none;
  border: 2px solid var(--wp--preset--color--ink, #000);
  border-radius: var(--hm-radius-pill, 999px);
  cursor: pointer;
  transition: transform 0.25s var(--fx-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.boberstore-cart__checkout:hover,
.boberstore-cart__checkout:focus-visible {
  background: var(--wp--preset--color--cta-1, #edbccf);
  color: var(--wp--preset--color--ink, #000);
  transform: rotate(-2deg);
  outline: none;
}

.boberstore-cart__checkout:focus-visible {
  outline: 3px solid var(--wp--preset--color--ink, #000);
  outline-offset: 2px;
}

.boberstore-cart__checkout:active {
  transform: rotate(-2deg) scale(0.97);
}

/* ---- Error region --------------------------------------------------------- */

.boberstore-cart__error {
  font-size: var(--hm-fs-sm, 0.875rem);
  color: #b32d2e;
}

@media (prefers-reduced-motion: reduce) {
  .boberstore-cart__checkout,
  .boberstore-cart__checkout:hover {
    transform: none !important;
  }
}

/* ============================================================================
   CHECKOUT BLOCK  (.boberstore-checkout)
   ============================================================================ */

.boberstore-checkout {
  padding: var(--wp--preset--spacing--30, 1.75rem) var(--wp--preset--spacing--20, 1rem);
  color: var(--wp--preset--color--ink, #000);
}

/* ---- Order summary aside — cream panel with soft blue-grey-ish border ----- */

.boberstore-checkout__summary {
  background: color-mix(in srgb, var(--wp--preset--color--bg-3, #edbccf) 15%, var(--wp--preset--color--bg-1, #fff9f1));
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--bg-3, #edbccf) 50%, transparent);
  border-radius: var(--hm-radius, 12px);
  padding: var(--wp--preset--spacing--20, 1rem) var(--wp--preset--spacing--20, 1.2rem);
  box-shadow: 0 4px 16px var(--hm-shadow-soft, rgba(0, 0, 0, 0.06));
}

.boberstore-checkout__summary-title {
  font-family: var(--hm-font-head, serif);
  font-weight: 600;
  color: var(--wp--preset--color--ink, #000);
  font-size: var(--hm-fs-lg, 1.15rem);
  margin-bottom: var(--wp--preset--spacing--20, 0.75rem);
}

.boberstore-checkout__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.boberstore-checkout__item {
  border-bottom: 1px solid var(--hm-line, rgba(0, 0, 0, 0.1));
  padding-block: 0.5rem;
  font-size: var(--hm-fs-sm, 0.9rem);
}

.boberstore-checkout__item:last-child {
  border-bottom: none;
}

.boberstore-checkout__item-title {
  font-weight: 500;
  color: var(--wp--preset--color--ink, #000);
}

.boberstore-checkout__item-price {
  color: var(--hm-text-muted, rgba(0, 0, 0, 0.62));
  font-variant-numeric: tabular-nums;
}

/* Totals in the aside */
.boberstore-checkout__totals {
  margin-top: var(--wp--preset--spacing--20, 0.75rem);
  padding-top: var(--wp--preset--spacing--20, 0.75rem);
  border-top: 1px solid var(--hm-line, rgba(0, 0, 0, 0.1));
}

.boberstore-checkout__total-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.3rem 0;
  font-size: var(--hm-fs-sm, 0.875rem);
}

.boberstore-checkout__total-row dt {
  color: var(--hm-text-muted, rgba(0, 0, 0, 0.62));
  font-weight: 400;
}

.boberstore-checkout__total-row dd {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.boberstore-checkout__total-row--grand {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 2px solid var(--wp--preset--color--ink, #000);
  font-size: var(--hm-fs-base, 1rem);
}

.boberstore-checkout__total-row--grand dt,
.boberstore-checkout__total-row--grand dd {
  font-weight: 700;
  color: var(--wp--preset--color--ink, #000);
}

/* Back-to-cart — a compact ghost pill in the theme's .hm-btn language
   (2px ink border, pill radius, bold, tilt hover) so it reads as a quiet
   sibling of the buy buttons rather than a stray text link. */
.boberstore-checkout__cart-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1.2em;
  background: transparent;
  color: var(--wp--preset--color--ink, #000);
  font-weight: 700;
  font-size: var(--hm-fs-sm, 0.875rem);
  text-decoration: none;
  border: 2px solid var(--wp--preset--color--ink, #000);
  border-radius: var(--hm-radius-pill, 999px);
  transition: transform 0.25s var(--fx-ease, ease), background-color 0.15s ease;
}

.boberstore-checkout__cart-link:hover {
  background: var(--hm-bg-1-deep, #f6ecdd);
  transform: rotate(-2deg);
}

.boberstore-checkout__cart-link:active {
  transform: rotate(-2deg) scale(0.97);
}

.boberstore-checkout__cart-link:focus-visible {
  outline: 3px solid var(--wp--preset--color--ink, #000);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .boberstore-checkout__cart-link,
  .boberstore-checkout__cart-link:hover,
  .boberstore-checkout__cart-link:active {
    transition: none;
    transform: none;
  }
}

/* ---- Payment mount area --------------------------------------------------- */

.boberstore-checkout__pay {
  background: var(--wp--preset--color--bg-1, #fff9f1);
}

.boberstore-checkout__status.is-error {
  color: #b32d2e;
  font-size: var(--hm-fs-sm, 0.875rem);
}

.boberstore-checkout__status.is-loading {
  color: var(--hm-text-muted, rgba(0, 0, 0, 0.62));
  font-size: var(--hm-fs-sm, 0.875rem);
}

/* Retry button — orange pill, matches .hm-btn */
.boberstore-checkout__retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7em 1.4em;
  background: var(--wp--preset--color--accent-1, #eb6b2f);
  color: var(--wp--preset--color--bg-1, #fff9f1);
  border: 2px solid var(--wp--preset--color--ink, #000);
  border-radius: var(--hm-radius-pill, 999px);
  font-family: var(--hm-font-body, sans-serif);
  font-size: var(--hm-fs-sm, 0.875rem);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.25s var(--fx-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.boberstore-checkout__retry:hover,
.boberstore-checkout__retry:focus-visible {
  filter: none;
  transform: rotate(-2deg);
  outline: none;
}

.boberstore-checkout__retry:focus-visible {
  outline: 3px solid var(--wp--preset--color--ink, #000);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .boberstore-checkout__retry,
  .boberstore-checkout__retry:hover {
    transform: none !important;
  }
}

/* ---- Empty checkout ------------------------------------------------------- */

.boberstore-checkout--empty {
  text-align: center;
}

.boberstore-checkout__empty-notice {
  font-size: var(--hm-fs-lg, 1.15rem);
  color: var(--wp--preset--color--ink, #000);
  margin-bottom: var(--wp--preset--spacing--20, 1rem);
}

/* ============================================================================
   THANK-YOU BLOCK  (.boberstore-thank-you)
   ============================================================================ */

.boberstore-thank-you {
  padding: var(--wp--preset--spacing--30, 2rem) var(--wp--preset--spacing--20, 1rem);
  color: var(--wp--preset--color--ink, #000);
}

/* ---- Spinner — uses brand orange accent ----------------------------------- */

.boberstore-thank-you__spinner {
  border-color: var(--hm-line, rgba(0, 0, 0, 0.14));
  border-top-color: var(--wp--preset--color--accent-1, #eb6b2f);
  width: 2.5rem;
  height: 2.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .boberstore-thank-you__spinner {
    animation: none;
    border-top-color: var(--hm-line, rgba(0, 0, 0, 0.14));
  }
}

/* ---- Confirmation heading ------------------------------------------------- */

.boberstore-thank-you__heading {
  font-family: var(--hm-font-head, serif);
  font-weight: 600;
  font-size: var(--hm-fs-2xl, 2.25rem);
  color: var(--wp--preset--color--ink, #000);
  margin-bottom: var(--wp--preset--spacing--20, 1rem);
}

.boberstore-thank-you__meta {
  font-size: var(--hm-fs-sm, 0.9rem);
  color: var(--hm-text-muted, rgba(0, 0, 0, 0.62));
}

.boberstore-thank-you__order-number {
  font-weight: 700;
  color: var(--wp--preset--color--ink, #000);
}

/* ---- Items list ----------------------------------------------------------- */

.boberstore-thank-you__items {
  border-top: 1px solid var(--hm-line, rgba(0, 0, 0, 0.12));
}

.boberstore-thank-you__item {
  border-bottom: 1px solid var(--hm-line, rgba(0, 0, 0, 0.1));
}

.boberstore-thank-you__item-title {
  font-weight: 600;
  color: var(--wp--preset--color--ink, #000);
}

/* ---- Download lists (UNIFIED across thank-you + account + email) ----------
   One file per line: display name on the left, a pink "Download" button (the
   shop's primary pink pill + black border) with a download icon on the right.
   Both blocks share these rules so the three surfaces look identical. The email
   can't use this stylesheet — its equivalent lives inline in
   theme/boberstore/emails/order.php. */

.boberstore-thank-you__downloads,
.boberstore-account__downloads {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.boberstore-thank-you__download-item,
.boberstore-account__download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.boberstore-thank-you__download-name,
.boberstore-account__download-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--hm-fs-sm, 0.9rem);
  font-weight: 600;
  color: var(--wp--preset--color--ink, #000);
  overflow-wrap: anywhere;
}

.boberstore-thank-you__download-btn,
.boberstore-account__download-link {
  --hm-icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.55em 1.1em;
  background: var(--wp--preset--color--cta-1, #edbccf);
  color: var(--wp--preset--color--ink, #000);
  border: 2px solid var(--wp--preset--color--ink, #000);
  border-radius: var(--hm-radius-pill, 999px);
  font-family: var(--hm-font-body, sans-serif);
  font-size: var(--hm-fs-sm, 0.875rem);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.25s var(--fx-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.boberstore-thank-you__download-btn::before,
.boberstore-account__download-link::before {
  content: "";
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--hm-icon-download) center / contain no-repeat;
  mask: var(--hm-icon-download) center / contain no-repeat;
}

.boberstore-thank-you__download-btn:hover,
.boberstore-thank-you__download-btn:focus-visible,
.boberstore-account__download-link:hover,
.boberstore-account__download-link:focus-visible {
  background: var(--wp--preset--color--cta-1, #edbccf);
  color: var(--wp--preset--color--ink, #000);
  transform: rotate(-2deg);
  outline: none;
}

.boberstore-thank-you__download-btn:focus-visible,
.boberstore-account__download-link:focus-visible {
  outline: 3px solid var(--wp--preset--color--ink, #000);
  outline-offset: 2px;
}

.boberstore-thank-you__download-btn:active,
.boberstore-account__download-link:active {
  transform: rotate(-2deg) scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .boberstore-thank-you__download-btn,
  .boberstore-thank-you__download-btn:hover,
  .boberstore-account__download-link,
  .boberstore-account__download-link:hover {
    transform: none !important;
  }
}

/* ---- Totals table --------------------------------------------------------- */

.boberstore-thank-you__totals {
  font-size: var(--hm-fs-sm, 0.9rem);
  border-top: 1px solid var(--hm-line, rgba(0, 0, 0, 0.1));
  padding-top: 0.5rem;
  margin-top: 1rem;
}

.boberstore-thank-you__totals dt {
  color: var(--hm-text-muted, rgba(0, 0, 0, 0.62));
}

.boberstore-thank-you__totals dd {
  color: var(--wp--preset--color--ink, #000);
  font-weight: 600;
}

/* ---- Account offer panel — pink cream, the warm "create an account" nudge -- */

.boberstore-thank-you__account-offer {
  margin-block-start: var(--wp--preset--spacing--30, 2rem);
  background: color-mix(in srgb, var(--wp--preset--color--bg-3, #edbccf) 22%, var(--wp--preset--color--bg-1, #fff9f1));
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--bg-3, #edbccf) 60%, transparent);
  border-radius: var(--hm-radius, 12px);
  padding: var(--wp--preset--spacing--20, 1.25rem) var(--wp--preset--spacing--20, 1.5rem);
}

.boberstore-thank-you__account-offer-heading {
  font-family: var(--hm-font-head, serif);
  font-weight: 600;
  font-size: var(--hm-fs-lg, 1.2rem);
  color: var(--wp--preset--color--ink, #000);
  margin-bottom: 0.5rem;
}

.boberstore-thank-you__account-offer-desc {
  font-size: var(--hm-fs-sm, 0.9rem);
  color: var(--hm-text-muted, rgba(0, 0, 0, 0.62));
  margin-bottom: 1rem;
}

.boberstore-thank-you__pw-label {
  display: block;
  font-size: var(--hm-fs-sm, 0.875rem);
  font-weight: 600;
  color: var(--wp--preset--color--ink, #000);
  margin-bottom: 0.4rem;
}

/* Create account button — orange pill, matches .hm-btn */
.boberstore-thank-you__create-account-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.75em 1.5em;
  background: var(--wp--preset--color--accent-1, #eb6b2f);
  color: var(--wp--preset--color--bg-1, #fff9f1);
  border: 2px solid var(--wp--preset--color--ink, #000);
  border-radius: var(--hm-radius-pill, 999px);
  font-family: var(--hm-font-body, sans-serif);
  font-size: var(--hm-fs-base, 1rem);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.25s var(--fx-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.boberstore-thank-you__create-account-btn:hover,
.boberstore-thank-you__create-account-btn:focus-visible {
  transform: rotate(-2deg);
  outline: none;
}

.boberstore-thank-you__create-account-btn:focus-visible {
  outline: 3px solid var(--wp--preset--color--ink, #000);
  outline-offset: 2px;
}

.boberstore-thank-you__create-account-btn:active {
  transform: rotate(-2deg) scale(0.97);
}

.boberstore-thank-you__create-account-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .boberstore-thank-you__create-account-btn,
  .boberstore-thank-you__create-account-btn:hover {
    transform: none !important;
  }
}

.boberstore-thank-you__offer-status {
  font-size: var(--hm-fs-sm, 0.875rem);
  color: #b32d2e;
  margin-top: 0.5rem;
}

/* ---- Status messages ----------------------------------------------------- */

.boberstore-thank-you__account-link {
  color: var(--wp--preset--color--accent-1, #eb6b2f);
  text-decoration: underline;
  transition: color 0.15s ease;
}

.boberstore-thank-you__account-link:hover,
.boberstore-thank-you__account-link:focus-visible {
  color: var(--wp--preset--color--ink, #000);
}

/* Same ghost pill as the checkout back link — one back-affordance family. */
.boberstore-thank-you__back-to-cart {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1.2em;
  background: transparent;
  color: var(--wp--preset--color--ink, #000);
  font-weight: 700;
  font-size: var(--hm-fs-sm, 0.875rem);
  text-decoration: none;
  border: 2px solid var(--wp--preset--color--ink, #000);
  border-radius: var(--hm-radius-pill, 999px);
  transition: transform 0.25s var(--fx-ease, ease), background-color 0.15s ease;
}

.boberstore-thank-you__back-to-cart:hover {
  background: var(--hm-bg-1-deep, #f6ecdd);
  transform: rotate(-2deg);
}

.boberstore-thank-you__back-to-cart:active {
  transform: rotate(-2deg) scale(0.97);
}

.boberstore-thank-you__back-to-cart:focus-visible {
  outline: 3px solid var(--wp--preset--color--ink, #000);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .boberstore-thank-you__back-to-cart,
  .boberstore-thank-you__back-to-cart:hover,
  .boberstore-thank-you__back-to-cart:active {
    transition: none;
    transform: none;
  }
}

/* ============================================================================
   ACCOUNT BLOCK  (.boberstore-account)
   ============================================================================ */

.boberstore-account {
  padding: var(--wp--preset--spacing--30, 1.75rem) var(--wp--preset--spacing--20, 1rem);
  color: var(--wp--preset--color--ink, #000);
}

.boberstore-account__title {
  font-family: var(--hm-font-head, serif);
  font-weight: 600;
  font-size: var(--hm-fs-xl, 1.75rem);
  color: var(--wp--preset--color--ink, #000);
}

.boberstore-account__intro {
  font-size: var(--hm-fs-sm, 0.9rem);
  color: var(--hm-text-muted, rgba(0, 0, 0, 0.62));
}

.boberstore-account__link {
  color: var(--wp--preset--color--accent-1, #eb6b2f);
  text-decoration: underline;
  transition: color 0.15s ease;
}

.boberstore-account__link:hover,
.boberstore-account__link:focus-visible {
  color: var(--wp--preset--color--ink, #000);
}

/* Logged-in header row */
.boberstore-account__header {
  border-bottom: 1px solid var(--hm-line, rgba(0, 0, 0, 0.12));
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.boberstore-account__logout {
  color: var(--hm-text-muted, rgba(0, 0, 0, 0.55));
  font-size: var(--hm-fs-sm, 0.875rem);
  text-decoration: underline;
  transition: color 0.15s ease;
}

.boberstore-account__logout:hover,
.boberstore-account__logout:focus-visible {
  color: var(--wp--preset--color--ink, #000);
}

.boberstore-account__subtitle {
  font-family: var(--hm-font-head, serif);
  font-weight: 600;
  font-size: var(--hm-fs-lg, 1.15rem);
  color: var(--wp--preset--color--ink, #000);
}

.boberstore-account__empty {
  color: var(--hm-text-muted, rgba(0, 0, 0, 0.55));
  font-size: var(--hm-fs-sm, 0.875rem);
}

/* ---- Order cards — cream background, soft border, rounded card ------------ */

.boberstore-account__order {
  background: var(--wp--preset--color--bg-1, #fff9f1);
  border: 1px solid var(--hm-line, rgba(0, 0, 0, 0.12));
  border-radius: var(--hm-radius, 12px);
  padding: var(--wp--preset--spacing--20, 1rem) var(--wp--preset--spacing--20, 1.25rem);
  box-shadow: 0 2px 8px var(--hm-shadow-soft, rgba(0, 0, 0, 0.05));
  transition: box-shadow 0.2s ease;
}

.boberstore-account__order:hover {
  box-shadow: 0 4px 16px var(--hm-shadow, rgba(0, 0, 0, 0.1));
}

.boberstore-account__order-head {
  border-bottom: 1px solid var(--hm-line, rgba(0, 0, 0, 0.1));
  padding-bottom: 0.6rem;
  margin-bottom: 0.75rem;
}

.boberstore-account__order-number {
  font-weight: 700;
  color: var(--wp--preset--color--ink, #000);
}

.boberstore-account__order-date,
.boberstore-account__order-status {
  font-size: var(--hm-fs-sm, 0.875rem);
  color: var(--hm-text-muted, rgba(0, 0, 0, 0.55));
}

.boberstore-account__order-total {
  font-weight: 700;
  color: var(--wp--preset--color--ink, #000);
}

.boberstore-account__item-title {
  font-weight: 600;
  font-size: var(--hm-fs-sm, 0.9rem);
  color: var(--wp--preset--color--ink, #000);
}

.boberstore-account__item-note {
  font-size: var(--hm-fs-sm, 0.875rem);
  color: var(--hm-text-muted, rgba(0, 0, 0, 0.55));
}

/* ---- Download links — unified with the thank-you download buttons above
   (pink pill + black border + download icon). See the "Download lists
   (UNIFIED …)" block earlier in this file; the account link shares it. ------- */

/* ============================================================================
   MOBILE RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 599px) {
  .boberstore-cart,
  .boberstore-checkout,
  .boberstore-thank-you,
  .boberstore-account {
    padding-inline: var(--wp--preset--spacing--20, 1rem);
  }

  .boberstore-checkout__summary {
    border-radius: var(--hm-radius-sm, 6px);
  }

  .boberstore-account__order {
    border-radius: var(--hm-radius-sm, 6px);
  }

  /* Stack download buttons on very small screens */
  .boberstore-thank-you__downloads,
  .boberstore-account__downloads {
    flex-direction: column;
  }
}

/* ── Account: branded sign-in / register cards ───────────────────────────── */
.boberstore-account__auth-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	align-items: stretch; /* both cards adopt the taller one's height */
}
@media (max-width: 720px) {
	.boberstore-account__auth-grid { grid-template-columns: 1fr; }
}
.boberstore-account__card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--bg-1, #FFF9F1);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1, #EA6C2F) 18%, #fff);
	border-radius: 18px;
	padding: 1.6rem 1.6rem 1.8rem;
}
.boberstore-account__card--register {
	background: color-mix(in srgb, var(--wp--preset--color--bg-3, #EDBCCF) 22%, var(--wp--preset--color--bg-1, #FFF9F1));
}
.boberstore-account__card .boberstore-account__title { margin: 0 0 .4rem; font-size: 1.4rem; }
/* Reserve a consistent header block so the first field row lines up across
   both cards even when the intro copy wraps to a different number of lines. */
.boberstore-account__card .boberstore-account__intro {
	margin: 0 0 1.1rem;
	color: rgba(0,0,0,.62);
	font-size: .95rem;
	min-height: 2.6em; /* ~2 lines; copy is length-matched so both wrap equally, this just guards odd widths */
}
@media (max-width: 720px) {
	.boberstore-account__card .boberstore-account__intro { min-height: 0; }
}

.boberstore-account__field { margin: 0 0 .9rem; }
.boberstore-account__field label,
#boberstore-account-login label {
	display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem;
}
.boberstore-account__field input,
#boberstore-account-login input[type="text"],
#boberstore-account-login input[type="password"] {
	width: 100%; box-sizing: border-box;
	padding: .7rem .9rem;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--accent-1, #EA6C2F) 22%, #fff);
	border-radius: 999px;
	background: #fff; font-size: 1rem;
}
.boberstore-account__field input:focus,
#boberstore-account-login input:focus {
	outline: none; border-color: var(--wp--preset--color--accent-1, #EA6C2F);
}
.boberstore-account__hint { display: block; margin-top: .3rem; font-size: .8rem; color: rgba(0,0,0,.5); }

.boberstore-account__submit,
#boberstore-account-login input[type="submit"] {
	display: inline-block; width: 100%; box-sizing: border-box;
	padding: .8rem 1.4rem;
	background: var(--wp--preset--color--accent-1, #EA6C2F);
	color: #fff; border: 0; border-radius: 999px;
	font-weight: 700; font-size: 1rem; cursor: pointer; margin-top: .4rem;
}
.boberstore-account__submit:hover,
#boberstore-account-login input[type="submit"]:hover { filter: brightness(.95); }
#boberstore-account-login .login-remember { font-size: .85rem; color: rgba(0,0,0,.6); margin: .4rem 0; }

.boberstore-account__error {
	margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 12px;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1, #EA6C2F) 14%, #fff);
	border: 1px solid var(--wp--preset--color--accent-1, #EA6C2F);
	font-size: .9rem;
}
.boberstore-account__links { margin-top: .9rem; font-size: .9rem; }
.boberstore-account__link { color: var(--wp--preset--color--accent-1, #EA6C2F); text-decoration: none; }
.boberstore-account__link:hover { text-decoration: underline; }

/* ============================================================================
   CONTACT FORM — brand skin (plugin block ships cream fields + orange button)
   ============================================================================ */

/* Fields: a light tint of the brand pink (cta-1) instead of cream. */
.boberstore-contact__input {
  background: #f9e8ee; /* fallback */
  background: color-mix(in srgb, var(--wp--preset--color--cta-1, #edbccf) 35%, #fff);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--cta-1, #edbccf) 72%, #000 8%);
}
.boberstore-contact__input:focus {
  border-color: var(--wp--preset--color--ink, #000);
  outline: none;
}

/* Submit: match the cart buttons — pink fill, 2px black border, pill, tilt hover. */
.boberstore-contact__submit {
  background: var(--wp--preset--color--cta-1, #edbccf);
  color: var(--wp--preset--color--ink, #000);
  border: 2px solid var(--wp--preset--color--ink, #000);
  border-radius: var(--hm-radius-pill, 999px);
  transition: transform 0.25s var(--fx-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
}
.boberstore-contact__submit:hover,
.boberstore-contact__submit:focus-visible {
  background: var(--wp--preset--color--cta-1, #edbccf);
  color: var(--wp--preset--color--ink, #000);
  transform: rotate(-2deg);
  outline: none;
}
.boberstore-contact__submit:focus-visible {
  outline: 3px solid var(--wp--preset--color--ink, #000);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .boberstore-contact__submit,
  .boberstore-contact__submit:hover { transform: none !important; }
}