/**
 * Upholstery & Finishes chooser (see assets/js/ain-finishes.js).
 * Everything is scoped under .ain-fin so it cannot touch the theme or the
 * deck configurator. Uses the site's navy/gold tokens from ain-boats.css.
 */
.ain-fin{
  --fin-ink: var(--ain-text, #1d2a35);
  --fin-muted: var(--ain-muted, #66737f);
  --fin-line: var(--ain-border, #d9dee3);
  --fin-gold: var(--ain-gold, #c39a3f);
  --fin-navy: var(--ain-navy, #0f2438);
  --fin-soft: #f6f1e4;
  margin-top:34px; padding:26px; background:#fff; border:1px solid var(--fin-line); border-radius:14px; color:var(--fin-ink);
}
.ain-fin[hidden]{ display:none; }
.ain-fin__head h2{ margin:0 0 8px; font-size:1.5rem; }
.ain-fin__intro{ margin:0 0 12px; max-width:760px; color:var(--fin-muted); line-height:1.6; }
.ain-fin__status{ display:inline-block; font-size: 0.92rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 12px; border-radius:99px; background:#eef0f2; color:var(--fin-muted); }
.ain-fin__status.is-on{ background:#e3f4ec; color:#1b6b4a; }

.ain-fin__grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); gap:28px; margin-top:22px; align-items:start; }
.ain-fin__right{ position:sticky; top:18px; background:var(--fin-soft); border-radius:12px; padding:18px; }
@media (max-width:900px){
  .ain-fin{ padding:18px; }
  .ain-fin__grid{ grid-template-columns:1fr; }
  .ain-fin__right{ position:static; order:-1; }
  .ain-fin__cards--looks{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.ain-fin__sec{ margin-bottom:26px; }
.ain-fin__h3{ display:flex; align-items:center; gap:10px; margin:0 0 6px; font-size:1.05rem; }
.ain-fin__num{ display:inline-flex; width:26px; height:26px; border-radius:50%; background:var(--fin-navy); color:#fff; font-size: 0.92rem; align-items:center; justify-content:center; }
.ain-fin__h4{ margin:16px 0 8px; font-size: 0.92rem; text-transform:uppercase; letter-spacing:.07em; color:var(--fin-muted); }
.ain-fin__hint{ margin:0 0 10px; font-size: 0.92rem; color:var(--fin-muted); }
.ain-fin__label{ margin:12px 0 6px; font-size: 0.92rem; font-weight:600; }
.ain-fin__caption{ margin:10px 0 0; font-size: 0.92rem; color:var(--fin-muted); line-height:1.5; }

/* cards (looks, fabrics, designs, floor, hull) */
.ain-fin__cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.ain-fin__cards--looks{ grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
.ain-fin__cards--pat{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
.ain-fin__cards--mini{ grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); }
.ain-fin__card{
  position:relative; display:flex; flex-direction:column; gap:6px; text-align:left; font:inherit; color:inherit; cursor:pointer;
  background:#fff; border:2px solid var(--fin-line); border-radius:12px; padding:8px; min-height:44px; touch-action:manipulation;
  transition:border-color .15s, box-shadow .15s;
}
.ain-fin__card:hover{ border-color:var(--fin-gold); }
.ain-fin__card.is-on{ border-color:var(--fin-navy); box-shadow:0 0 0 3px rgba(195,154,63,.35); }
.ain-fin__card-media{ display:block; border-radius:8px; overflow:hidden; background:#f1f3f5; line-height:0; }
.ain-fin__card-media img{ width:100%; height:110px; object-fit:cover; display:block; }
.ain-fin__card-title{ font-weight:700; font-size: 0.92rem; line-height:1.25; }
.ain-fin__card-sub{ font-size: 0.92rem; color:var(--fin-muted); line-height:1.4; }
.ain-fin__card-tag{ font-size: 0.92rem; font-weight:700; color:#8a6a1f; }
.ain-fin__card-tag:empty{ display:none; }
.ain-fin__svg{ width:100%; height:auto; display:block; background:#f1f3f5; }
.ain-fin__cards--looks .ain-fin__svg{ padding:6px; }
.ain-fin__swatch{ width:100%; height:64px; display:block; }
.ain-fin__chip{ display:block; width:100%; height:44px; }
.ain-fin__cards--mini .ain-fin__card-media img{ height:60px; }

/* colors */
.ain-fin__tone{ display:flex; gap:8px; flex-wrap:wrap; }
.ain-fin__pill{ font:inherit; font-size: 0.92rem; font-weight:600; padding:9px 16px; min-height:44px; border-radius:99px; border:2px solid var(--fin-line); background:#fff; cursor:pointer; }
.ain-fin__pill.is-on{ border-color:var(--fin-navy); background:var(--fin-navy); color:#fff; }
.ain-fin__swatches{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.ain-fin__dot{ width:40px; height:40px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--fin-line); cursor:pointer; padding:0; touch-action:manipulation; }
.ain-fin__dot.is-on{ box-shadow:0 0 0 3px var(--fin-navy); }
.ain-fin__dot-name{ font-size: 0.92rem; font-weight:600; margin-left:4px; }
.ain-fin__check{ display:flex; align-items:center; gap:10px; margin-top:16px; font-size:.92rem; min-height:44px; cursor:pointer; }
.ain-fin__check input{ width:20px; height:20px; }

/* preview + prices */
.ain-fin__preview .ain-fin__svg{ border-radius:10px; }
.ain-fin__prices{ margin-top:14px; border-top:1px solid #e4dcc6; }
.ain-fin__row{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; font-size: 0.92rem; border-bottom:1px solid #e4dcc6; }
.ain-fin__row.is-quote .ain-fin__amt{ font-style:italic; color:#8a6a1f; }
.ain-fin__row--total{ font-weight:800; font-size:.95rem; border-bottom:none; }
.ain-fin__amt{ white-space:nowrap; font-weight:600; text-align:right; }
.ain-fin__actions{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.ain-fin__btn{ font:inherit; font-weight:700; font-size:.92rem; padding:12px 16px; min-height:46px; border-radius:10px; border:2px solid var(--fin-line); background:#fff; cursor:pointer; touch-action:manipulation; }
.ain-fin__btn:hover:not(:disabled){ border-color:var(--fin-gold); }
.ain-fin__btn--primary{ background:var(--fin-navy); border-color:var(--fin-navy); color:#fff; }
.ain-fin__btn--primary:hover:not(:disabled){ background:#16385a; border-color:#16385a; }
.ain-fin__btn:disabled{ opacity:.65; cursor:default; background:#1b6b4a; border-color:#1b6b4a; color:#fff; }

/* approve button repeated at the end of the choices, phones only */
.ain-fin__actions.ain-fin__actions--mobile{ display:none; }
@media (max-width:900px){ .ain-fin__actions.ain-fin__actions--mobile{ display:flex; } }