/*
 * Kyoto: Fire plugin surfaces.
 *
 * Loads after style.css and after every Fire stylesheet, so it is the last
 * word in the cascade. Three different integration strategies are needed
 * because the four plugins expose three different amounts of surface:
 *
 *   Fire Shop  redefines its own design tokens, so retheming is token work.
 *   Fire Fund  exposes a small token set plus per-block inline overrides.
 *   Fire Pay / Fire Gates  ship no tokens and inline-style their buttons from
 *              plugin settings, so those two need !important on exactly the
 *              three properties written inline. Nothing else here uses it.
 */

/* ------------------------------------------------------------ Fire Shop */

/*
 * Fire Shop reads these on :root. Overriding them retints the storefront,
 * cart, checkout, account pages, and every block without touching markup.
 */
:root {
  --fire-primary: var(--shu);
  --fire-primary-hover: var(--shu-deep);
  --fire-surface: var(--paper);
  --fire-surface-alt: var(--paper-2);
  --fire-border: var(--line);
  --fire-text: var(--sumi);
  --fire-text-muted: var(--sumi-3);
  --fire-success: var(--matcha);
  --fire-warning: #a8823f;
  --fire-error: var(--shu-deep);
  --fire-info: var(--sumi-2);
  --fire-cyan: var(--sumi-2);

  --fire-radius-sm: var(--radius-sm);
  --fire-radius-md: var(--radius-sm);
  --fire-radius-full: var(--radius-full);

  --fire-font-display: var(--font-display);
  --fire-font-body: var(--font-body);
  --fire-font-data: var(--font-mono);
  --fire-font-mono: var(--font-mono);

  --fire-duration-micro: var(--duration-fast);
  --fire-duration-short: var(--duration-normal);
  --fire-duration-medium: var(--duration-normal);
  --fire-duration-long: var(--duration-slow);

  /* Cards carry borders in this theme, never shadows. */
  --fire-shadow-sm: none;
  --fire-shadow-md: none;
  --fire-shadow-lg: 0 4px 24px rgba(var(--sumi-rgb), 0.08);
}

/*
 * Fire Shop escapes the theme's measure by two different routes, so it takes
 * two rules.
 *
 * Route one: /shop/ and /product/* never reach page.php at all. Fire Shop's
 * template loader renders them straight into <main>, so they sit outside
 * .k-container and .fire-container is the only thing holding them in. The
 * plugin sets 1600px on the archive and 1120px on a product; both become the
 * theme's measure. The two-class selectors are deliberate: the plugin styles
 * these at .fire-shop-archive.fire-container, which a bare .fire-container
 * cannot outrank no matter how late this file loads.
 */
.fire-container {
  max-width: var(--container);
  padding-inline: var(--gutter);
}

.fire-shop-archive.fire-container,
.fire-single-product.fire-container,
.fire-wishlist.fire-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/*
 * Route two: cart, checkout, thankyou and my-account are real pages, and the
 * activator creates them with {"align":"full"} baked into the block comment.
 * The wrapper therefore carries .alignfull and tears out of the container on
 * a negative margin, which is why the cart table ran the full width of the
 * window. None of these are full-bleed designs, so the breakout is cancelled
 * and page.php's container governs.
 */
.fire-block-cart.alignfull,
.fire-block-checkout.alignfull,
.fire-block-thankyou.alignfull,
.fire-my-account-block.alignfull {
  width: auto;
  max-width: none;
  margin-inline: 0;
}

/* Headings inside plugin output adopt the display serif. */
.fire-heading-display,
.fire-heading-1,
.fire-heading-2,
.fire-heading-3,
.fire-product-card__name,
.fire-single-product__title {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.015em;
}

.fire-heading-1,
.fire-single-product__title {
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.1;
}

.fire-product-card__name {
  font-size: 23px;
  font-weight: 400;
  line-height: 1.2;
}

/* Prices are money, so they are set in the mono face like every other figure. */
.fire-price,
.fire-price-discounted,
.fire-price-original,
.fire-single-product__price,
.fire-data,
.fire-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.fire-price-original {
  color: var(--sumi-3);
}

/* Buttons match the theme's: square, tracked, uppercase. */
.fire-btn,
.fire-btn-primary,
.fire-btn-secondary,
.fire-btn-tertiary,
.fire-btn-ghost {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  padding: 15px 34px;
  min-height: 48px;
  transition: background-color var(--duration-normal) var(--ease),
    border-color var(--duration-normal) var(--ease),
    color var(--duration-normal) var(--ease);
}

.fire-btn-primary {
  background-color: var(--shu);
  color: var(--paper);
  border: 1px solid transparent;
}

.fire-btn-primary:hover {
  background-color: var(--shu-deep);
}

.fire-btn-secondary,
.fire-btn-tertiary,
.fire-btn-ghost {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--sumi);
}

.fire-btn-secondary:hover,
.fire-btn-tertiary:hover,
.fire-btn-ghost:hover {
  border-color: var(--sumi);
  background-color: rgba(var(--sumi-rgb), 0.03);
}

.fire-btn--small {
  padding: 10px 20px;
  min-height: 40px;
  font-size: 11.5px;
}

/* Product cards: the plugin's markup wearing the theme's card. */
.fire-product-card,
.fire-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.fire-product-card__image-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--paper-2);
  border: 1px solid var(--line-soft);
}

.fire-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-reveal) var(--ease);
}

.fire-product-card:hover .fire-product-card__image {
  transform: scale(1.035);
}

.fire-product-card__body {
  padding: 20px 0 0;
}

.fire-product-card__name {
  margin: 0 0 12px;
}

.fire-product-card__price {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--sumi-2);
  transition: border-color var(--duration-slow) var(--ease);
}

.fire-product-card:hover .fire-product-card__price {
  border-color: var(--line-strong);
}

.fire-product-grid {
  gap: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 40px);
}

.fire-badge {
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Inputs become underlines, matching the theme's forms. */
.fire-input,
.fire-select,
.fire-textarea,
.fire-form-input,
.fire-form-select,
.fire-form-textarea {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 11px 2px;
  font-size: 15px;
  color: var(--sumi);
  transition: border-color var(--duration-normal) var(--ease);
}

.fire-input:focus,
.fire-select:focus,
.fire-textarea:focus,
.fire-form-input:focus,
.fire-form-select:focus,
.fire-form-textarea:focus {
  outline: none;
  border-bottom-color: var(--shu);
  box-shadow: none;
}

.fire-form-label,
.fire-checkout-heading {
  font-family: var(--font-body);
}

.fire-form-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sumi-3);
}

.fire-checkout-heading {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 300;
}

/* Payment method rows read as the theme's selectable panels. */
.fire-payment-method {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: none;
  transition: border-color var(--duration-normal) var(--ease),
    background-color var(--duration-normal) var(--ease);
}

.fire-payment-method--selected {
  border-color: var(--shu);
  background-color: var(--shu-wash);
}

.fire-order-review,
.fire-cart-totals {
  background-color: var(--paper-2);
  border: 0;
  border-radius: 0;
}

.fire-breadcrumbs {
  font-size: 13.5px;
  color: var(--sumi-3);
}

.fire-breadcrumbs__link:hover {
  color: var(--shu);
}

/* Filter sidebar hairlines instead of boxes. */
.fire-filter-group {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  padding: 24px 0;
}

.fire-filter-group__title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sumi-3);
}

/* The mini-cart drawer is paper, not a floating panel. */
.fire-mini-cart-drawer,
.fire-mini-cart-contents {
  background-color: var(--paper);
  border-left: 1px solid var(--line);
  border-radius: 0;
}

.fire-mini-cart-fab__btn {
  background-color: var(--shu);
  border-radius: var(--radius-full);
}

/*
 * The count badge. Vermillion because it marks a state that wants acting on,
 * which is the one job that colour has in this theme.
 */
.fire-cart-count {
  background-color: var(--shu);
  color: var(--paper);
  font-family: var(--font-mono);
  border-radius: var(--radius-full);
}

/*
 * The empty state needs no rule here. fire-storefront.css already hides the
 * badge with `:empty, :not(.fire-cart-count--has-items)`, which is why
 * kyoto_cart_link() renders that class server side when the count is above
 * zero rather than leaving it to fire-cart.js, whose fragment update only
 * runs after a cart action.
 */

/* ------------------------------------------------------------ Fire Fund */

:root {
  --fire-fund-accent: var(--shu);
  --fire-fund-accent-dim: var(--shu-wash);
  --fire-fund-accent-glow: var(--shu-glow);
  --ff-green: var(--matcha);
  --ff-radius: var(--radius-sm);
}

.ff-campaign-title {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.02em;
}

/* A filling hairline, not a candy bar. */
.ff-progress-bar,
.ff-card-progress-bar {
  height: 2px;
  background-color: var(--line);
  border-radius: 0;
  overflow: hidden;
}

.ff-progress-fill,
.ff-card-progress-fill {
  background-color: var(--shu);
  border-radius: 0;
}

.ff-donate-card {
  border: 1px solid var(--line);
  border-radius: 0;
  background-color: var(--paper);
}

.ff-preset-btn {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: none;
  font-family: var(--font-mono);
  color: var(--sumi-2);
}

.ff-preset-btn.ff-selected,
.ff-preset-btn:hover {
  border-color: var(--shu);
  color: var(--shu);
  background-color: var(--shu-wash);
}

/* The donate button is square like every other button in the theme. */
.ff-donate-btn,
.ff-progress-cta {
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 15px 34px;
  min-height: 48px;
}

/*
 * Fund inputs become underlines, matching checkout and the rest of the site.
 * The donor fields are matched as `.ff-donor-fields input` rather than by their
 * own class: the plugin styles them at that specificity, and a bare
 * `.ff-donor-name` loses to it no matter how late this file loads.
 */
.ff-amount-input,
.ff-donor-fields input,
.ff-donor-fields textarea {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 11px 2px;
  font-size: 15px;
  color: var(--sumi);
  transition: border-color var(--duration-normal) var(--ease);
}

.ff-amount-input:focus,
.ff-donor-fields input:focus,
.ff-donor-fields textarea:focus {
  outline: none;
  border-bottom-color: var(--shu);
  box-shadow: none;
}

.ff-visibility-label,
.ff-section-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sumi-3);
}

.ff-donor-avatar {
  background-color: var(--paper-3);
  color: var(--sumi-2);
}

/* --------------------------------------------- Fire Pay and Fire Gates */

/*
 * These two write background-color, color, and border-radius as inline style
 * attributes from their plugin settings. An inline style outranks any
 * selector, so these three declarations are the only place in the theme where
 * !important is correct. Everything else about the buttons is styled normally.
 *
 * If you would rather not override at all, set the colors in each plugin's
 * settings screen to #C43F2B on #FBF8F2 and delete this block.
 */
.fire-pay-btn,
.fire-gate-btn {
  background-color: var(--shu) !important;
  color: var(--paper) !important;
  border-radius: var(--radius-sm) !important;
}

.fire-pay-btn:hover,
.fire-gate-btn:hover {
  background-color: var(--shu-deep) !important;
}

.fire-pay-btn,
.fire-gate-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 15px 34px;
  min-height: 48px;
  border: 1px solid transparent;
  transition: background-color var(--duration-normal) var(--ease);
}

.fire-pay-status,
.fire-gate-status {
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--sumi-3);
}

/* The gated excerpt dissolves into paper rather than being chopped off. */
.fire-gate-wrapper {
  border-radius: 0;
}

.fire-gate-template-tinted,
.fire-gate-template-card {
  background-color: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 0;
}

.fire-gate-template-accent-bar {
  border-left: 1px solid var(--shu);
}

.fire-gate-preview-gradient {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}

.fire-gate-bundle-bar {
  background-color: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 0;
}