/* Jubilee Cell LLC — application styles
   Logged-in catalog listing + trade account registration.
   Requires tokens.css, then styles.css, then this file. */

/* ================= utility bar ================= */
.jc-util { background: var(--jc-cyan-50); border-bottom: 1px solid var(--jc-border); font-size: 12.5px; }
.jc-util__inner { max-width: 1560px; margin: 0 auto; padding: 0 32px; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.jc-util__group { display: flex; align-items: center; gap: 28px; }
.jc-util__label { color: var(--jc-deep-cyan); }
.jc-util__value { color: var(--jc-petrol); }
.jc-util__links { display: flex; align-items: center; gap: 22px; }
.jc-cart { display: flex; align-items: center; gap: 9px; border: 0; background: none; cursor: pointer; font-family: var(--jc-font-body); font-size: 12.5px; font-weight: 600; color: var(--jc-petrol); white-space: nowrap; padding: 0; }
.jc-cart svg { stroke: var(--jc-deep-cyan); fill: none; stroke-width: 1.6; }
.jc-cart__badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--jc-radius-pill); background: var(--jc-coral); color: var(--jc-white); font-size: 11px; font-weight: 700; display: grid; place-items: center; }

/* ================= app header ================= */
.jc-appbar { background: var(--jc-white); border-bottom: 1px solid var(--jc-border); }
.jc-appbar__inner { max-width: 1560px; margin: 0 auto; padding: 0 32px; height: 108px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.jc-appbar__logo img { height: 72px; width: auto; }
.jc-search { flex: 1; max-width: 620px; height: 42px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--jc-border); border-radius: var(--jc-radius-button); padding: 0 14px; transition: border-color var(--jc-dur-xs) var(--jc-ease); }
.jc-search:focus-within, .jc-search:hover { border-color: var(--jc-cyan); }
.jc-search input { flex: 1; border: 0; outline: none; font-family: var(--jc-font-body); font-size: 14px; color: var(--jc-petrol); background: none; }
.jc-appbar__actions { display: flex; align-items: center; gap: 18px; font-size: var(--jc-small); font-weight: 600; }
.jc-appbar__actions a { color: var(--jc-slate); }
.jc-account { width: 34px; height: 34px; border-radius: 50%; background: var(--jc-cyan-50); border: 1px solid var(--jc-border); display: grid; place-items: center; font-family: var(--jc-font-display); font-size: 13px; color: var(--jc-deep-cyan); }

/* ================= browse-by bar ================= */
.jc-browse { background: var(--jc-white); border-bottom: 1px solid var(--jc-border); }
.jc-browse__inner { max-width: 1560px; margin: 0 auto; padding: 0 32px; height: 56px; display: flex; align-items: center; gap: 18px; }
.jc-browse__label { font-size: 11px; font-weight: 600; letter-spacing: var(--jc-tracking-eyebrow); text-transform: uppercase; color: var(--jc-deep-cyan); }
.jc-select { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px; border: 1px solid var(--jc-border); border-radius: var(--jc-radius-button); background: var(--jc-white); font-family: var(--jc-font-body); font-size: 13.5px; font-weight: 500; color: var(--jc-petrol); white-space: nowrap; cursor: pointer; transition: border-color var(--jc-dur-xs) var(--jc-ease); }
.jc-select:hover { border-color: var(--jc-cyan); }
.jc-select svg { stroke: var(--jc-deep-cyan); stroke-width: 1.6; fill: none; }
.jc-sync { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--jc-slate); }
.jc-sync__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--jc-stock-in); }

/* ================= catalog layout ================= */
.jc-catalog { background: var(--jc-mist); min-height: 100vh; }
.jc-catalog__grid { max-width: 1560px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }
.jc-catalog__main { padding: 28px 0 80px; }
.jc-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--jc-slate); margin-bottom: 14px; }
.jc-breadcrumb span[aria-hidden] { color: #A7C4CE; }
.jc-catalog__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.jc-catalog__title { font-family: var(--jc-font-display); font-weight: 700; font-size: 38px; letter-spacing: var(--jc-tracking-heading); color: var(--jc-petrol); margin: 0 0 8px; }
.jc-catalog__count { font-size: 13.5px; color: var(--jc-slate); }
.jc-catalog__count strong { color: var(--jc-petrol); }

/* ================= filter sidebar ================= */
.jc-filters { position: sticky; top: 20px; padding: 28px 0 60px; }
.jc-filters__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.jc-filters__title { font-family: var(--jc-font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jc-petrol); }
.jc-filters__panel { background: var(--jc-white); border: 1px solid var(--jc-border); border-radius: var(--jc-radius-card); box-shadow: var(--jc-shadow-card); overflow: hidden; }
.jc-filter { border-bottom: 1px solid var(--jc-border-soft); }
.jc-filter:last-child { border-bottom: 0; }
.jc-filter__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border: 0; background: none; cursor: pointer; font-family: var(--jc-font-body); font-size: var(--jc-small); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--jc-petrol); }
.jc-filter__sign { font-size: 15px; color: var(--jc-deep-cyan); }
.jc-filter__body { padding: 0 18px 16px; display: flex; flex-direction: column; gap: 11px; }
.jc-filter[aria-expanded="false"] .jc-filter__body { display: none; }
.jc-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--jc-slate); cursor: pointer; }
.jc-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.jc-check__box { width: 17px; height: 17px; flex: 0 0 auto; border: 1px solid var(--jc-border); border-radius: 4px; background: var(--jc-white); display: grid; place-items: center; transition: background var(--jc-dur-xs) var(--jc-ease), border-color var(--jc-dur-xs) var(--jc-ease); }
.jc-check__box svg { opacity: 0; stroke: var(--jc-petrol); stroke-width: 2; fill: none; }
.jc-check input:checked + .jc-check__box { background: var(--jc-cyan); border-color: var(--jc-cyan); }
.jc-check input:checked + .jc-check__box svg { opacity: 1; }
.jc-check input:focus-visible + .jc-check__box { box-shadow: 0 0 0 4px rgba(105,203,231,0.30); }
.jc-check__label { flex: 1; }
.jc-check__count { font-family: var(--jc-font-mono); font-size: 12px; color: var(--jc-muted); }
.jc-price-range { display: flex; gap: 10px; }
.jc-price-range input { width: 50%; height: 38px; border: 1px solid var(--jc-border); border-radius: var(--jc-radius-button); padding: 0 12px; font-family: var(--jc-font-body); font-size: 13px; color: var(--jc-petrol); outline: none; }

/* ================= product grid ================= */
.jc-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.jc-product { background: var(--jc-white); border: 1px solid var(--jc-border); border-radius: var(--jc-radius-card); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--jc-dur-sm) var(--jc-ease), box-shadow var(--jc-dur-sm) var(--jc-ease), border-color var(--jc-dur-sm) var(--jc-ease); }
.jc-product:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -14px rgba(11,46,56,0.20); border-color: var(--jc-cyan); }
.jc-product__media { background: var(--jc-cyan-50); aspect-ratio: 1/0.86; display: grid; place-items: center; }
.jc-product__media img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.jc-product__body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.jc-product__brand { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jc-slate); margin-bottom: 7px; }
.jc-product__title { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--jc-petrol); min-height: 40px; }
.jc-product__sku { font-family: var(--jc-font-mono); font-size: 11.5px; color: var(--jc-muted); margin-top: 8px; }
.jc-stock { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12.5px; font-weight: 500; }
.jc-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.jc-stock--in   { color: var(--jc-stock-in); }
.jc-stock--low  { color: var(--jc-stock-low); }
.jc-stock--out  { color: var(--jc-stock-out); }
.jc-price { display: flex; align-items: baseline; gap: 9px; margin-top: 14px; }
.jc-price__trade { font-weight: 700; font-size: 26px; letter-spacing: -0.02em; color: var(--jc-petrol); }
.jc-price__msrp { font-size: 12.5px; color: var(--jc-muted); text-decoration: line-through; }
.jc-product__actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.jc-stepper { display: flex; align-items: center; height: 40px; border: 1px solid var(--jc-border); border-radius: var(--jc-radius-button); }
.jc-stepper button { width: 32px; height: 38px; border: 0; background: none; cursor: pointer; color: var(--jc-deep-cyan); font-size: 16px; }
.jc-stepper output { width: 30px; text-align: center; font-family: var(--jc-font-mono); font-size: 13.5px; color: var(--jc-petrol); }
.jc-product__add { flex: 1; height: 40px; border: 0; border-radius: var(--jc-radius-button); background: var(--jc-cyan); color: var(--jc-petrol); font-family: var(--jc-font-body); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background var(--jc-dur-xs) var(--jc-ease); }
.jc-product__add:hover { background: var(--jc-cyan-hover); }

/* ================= pagination ================= */
.jc-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 44px; }
.jc-pagination button { height: 38px; min-width: 38px; padding: 0 16px; border: 1px solid var(--jc-border); border-radius: var(--jc-radius-button); background: var(--jc-white); font-family: var(--jc-font-body); font-size: 13px; color: var(--jc-slate); cursor: pointer; }
.jc-pagination button.is-active { border-color: transparent; background: var(--jc-cyan); color: var(--jc-petrol); font-weight: 700; }

/* ================= registration ================= */
.jc-register { display: grid; grid-template-columns: 45fr 55fr; min-height: 100vh; }
.jc-register__aside { position: relative; overflow: hidden; background: var(--jc-cyan-50); padding: 56px 64px 64px; display: flex; flex-direction: column; }
.jc-register__glow { left: -180px; bottom: -220px; width: 620px; height: 620px; opacity: 0.42; }
.jc-register__aside > * { position: relative; }
.jc-register__logo img { height: 88px; width: auto; }
.jc-register__title { font-family: var(--jc-font-display); font-weight: 700; font-size: 48px; line-height: 1.06; letter-spacing: var(--jc-tracking-tight); color: var(--jc-petrol); margin: 56px 0 40px; max-width: 420px; }
.jc-steps { margin-bottom: 48px; }
.jc-step { display: grid; grid-template-columns: 34px 1fr; gap: 18px; }
.jc-step__rail { display: flex; flex-direction: column; align-items: center; }
.jc-step__marker { width: 34px; height: 34px; border-radius: 50%; background: var(--jc-white); border: 1px solid var(--jc-cyan-200); display: grid; place-items: center; font-family: var(--jc-font-display); font-weight: 700; font-size: 14px; color: var(--jc-deep-cyan); }
.jc-step.is-current .jc-step__marker { background: var(--jc-cyan); border-color: var(--jc-cyan); color: var(--jc-petrol); }
.jc-step__line { flex: 1; width: 2px; background: var(--jc-cyan-200); margin: 6px 0; }
.jc-step__body { padding-bottom: 26px; }
.jc-step__title { font-family: var(--jc-font-display); font-weight: 600; font-size: 18px; color: var(--jc-petrol); }
.jc-step__copy { font-size: 14px; line-height: 1.55; color: var(--jc-slate); margin-top: 4px; }
.jc-reassure { display: flex; flex-direction: column; gap: 13px; margin-bottom: 44px; }
.jc-reassure li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--jc-petrol); list-style: none; }
.jc-reassure svg { margin-top: 3px; flex: 0 0 auto; stroke: var(--jc-deep-cyan); stroke-width: 2; fill: none; }
.jc-testimonial-card { margin-top: auto; max-width: 460px; padding: 24px 26px; }
.jc-register__form { background: var(--jc-white); padding: 56px 72px 72px; display: flex; flex-direction: column; }
.jc-register__topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 13.5px; }
.jc-form { max-width: 560px; width: 100%; margin-top: 56px; }
.jc-form__title { font-family: var(--jc-font-display); font-weight: 700; font-size: 36px; letter-spacing: var(--jc-tracking-heading); color: var(--jc-petrol); margin: 0 0 22px; }
.jc-progress { height: 4px; border-radius: 2px; background: var(--jc-cyan-50); overflow: hidden; margin-bottom: 44px; }
.jc-progress__fill { height: 100%; background: var(--jc-cyan); border-radius: 2px; transition: width 400ms var(--jc-ease); }
.jc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.jc-field { position: relative; }
.jc-field--full { grid-column: span 2; }
.jc-field input, .jc-field select { width: 100%; height: 48px; border: 1px solid var(--jc-border); border-radius: var(--jc-radius-button); background: var(--jc-white); padding: 18px 14px 4px; font-family: var(--jc-font-body); font-size: 15px; color: var(--jc-petrol); outline: none; transition: border-color var(--jc-dur-xs) var(--jc-ease), box-shadow var(--jc-dur-xs) var(--jc-ease); }
.jc-field label { position: absolute; left: 15px; top: 14px; font-size: 15px; color: #7C949D; pointer-events: none; transition: all var(--jc-dur-xs) var(--jc-ease); }
.jc-field input:focus, .jc-field select:focus { border-color: var(--jc-deep-cyan); box-shadow: 0 0 0 4px rgba(105,203,231,0.30); }
.jc-field input:focus + label,
.jc-field input:not(:placeholder-shown) + label,
.jc-field select:focus + label,
.jc-field--filled select + label { top: 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jc-deep-cyan); }
.jc-form__note { font-size: 12.5px; line-height: 1.6; color: var(--jc-slate); margin: 26px 0 28px; }
.jc-form__submit { width: 100%; }

/* ================= mobile ================= */
.jc-mobile-nav { display: none; }
.jc-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(255,255,255,0.96); backdrop-filter: blur(14px); border-top: 1px solid var(--jc-border); padding: 12px var(--jc-gutter) calc(12px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform var(--jc-dur-md) var(--jc-ease); }
.jc-stickybar.is-visible { transform: none; }
.jc-stickybar .jc-btn { width: 100%; justify-content: center; }

@media (max-width: 1200px) {
  .jc-products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .jc-catalog__grid { grid-template-columns: 1fr; }
  .jc-filters { position: static; }
  .jc-products { grid-template-columns: repeat(2, 1fr); }
  .jc-register { grid-template-columns: 1fr; }
  .jc-register__aside, .jc-register__form { padding: 48px var(--jc-gutter); }
}
@media (max-width: 768px) {
  .jc-util__group { display: none; }
  .jc-appbar__inner { height: 84px; }
  .jc-appbar__logo img { height: 64px; }
  .jc-appbar__actions a { display: none; }
  .jc-products { grid-template-columns: 1fr; }
  .jc-fields { grid-template-columns: 1fr; }
  .jc-field--full { grid-column: span 1; }
  .jc-mobile-nav { display: block; }
  .jc-mobile-nav a { display: flex; align-items: center; min-height: 48px; font-size: 15px; font-weight: 600; color: var(--jc-petrol); border-bottom: 1px solid #EAF5F8; }
  .jc-stepper button, .jc-nav__search { min-width: 48px; min-height: 48px; }
}