/* Lead Opticals — clear, consistent colour cues throughout the customer journey. */

/* Quiet surfaces keep the frame and the next action easy to find. */
body,
.modal-card,
.summary-card,
.account-panel,
.aside-card {
  background-color: var(--paper);
}

.card-media,
.gallery-main,
.line-art,
.sum-art {
  background-color: var(--product-bg);
}

.lens-builder,
.checkout-summary .summary-card,
.cart-summary .summary-card {
  background-color: var(--tint);
}

/* One decision language: a red edge, a pale red wash and readable text. */
.purchase-mode-card.on,
.lens-card.on,
.lens-chip.on,
.addon-option.is-on,
.ship-opt.on,
.pay-opt.on,
.service-card.on,
.date-cell.on,
.slot.on,
.account-section-tab.on,
.account-tab.on,
.filter-opt.on,
.view-toggle button.on {
  background-color: var(--red-wash);
  border-color: var(--red);
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--red);
}

.lens-card.on,
.lens-chip.on,
.service-card.on,
.date-cell.on,
.slot.on {
  border-width: 1px;
}

.chip.on,
.rx-choice.on {
  background-color: var(--red-wash);
  border-color: var(--red);
  color: var(--red-dark);
}

.filter-opt.on .filter-count,
.account-section-tab.on,
.account-tab.on,
.lens-card.on .lens-card-price,
.lens-chip.on .lens-chip-price,
.addon-option.is-on .addon-price {
  color: var(--red-dark);
}

.gallery-thumbs button.on,
.swatch.on,
.swatch-mini.on,
.color-opt.on {
  border-color: var(--red);
  box-shadow: 0 0 0 2px var(--red-wash);
}

.gallery-thumbs button.on .thumb-label {
  color: var(--red-dark);
}

/* The transparent frame floats directly over the hero plate without a studio
   backdrop; its full-width silhouette stays complete on every screen. */
.hero-frame.is-photo { width: 94%; }
.hero-frame.is-photo .hero-cutout { display: block; width: 100%; }
.hero-frame.is-photo img.frame-art {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: normal;
  filter: drop-shadow(0 22px 30px rgba(18,16,15,.16));
}
.hero-swatches[hidden] { display: none; }

/* Genuine alpha-transparent frame cutouts float over the category cards;
   their complete silhouettes remain visible on desktop and mobile. */
.collection-art.collection-photo {
  inset: 0;
  width: 100%;
  opacity: 1;
  transform: none;
}
.collection-photo picture,
.collection-photo img {
  display: block;
  width: 100%;
  height: 100%;
}
.collection-photo img {
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 14px 18px rgba(18,16,15,.12));
  transition: transform .5s var(--e-out);
}
.collection-card:hover .collection-art.collection-photo {
  opacity: 1;
  transform: none;
}
@media (hover: hover) {
  .collection-card:hover .collection-photo img { transform: scale(1.025); }
}

/* Three services, three equal columns: no empty fourth track. */
.home-svc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .home-svc { grid-template-columns: 1fr; }
}

/* Product photographs are square source assets. The shared .frame-art rule
   gives every image the wide ratio used by procedural SVG frames, which made
   a square photograph render as a small square inside a wide slot. Real
   photographs instead fill their available space while keeping the complete
   frame visible. Square product photographs, wide illustrations and detail
   views all retain their original proportions without cropping. */
.pdp-gallery .gallery-main {
  aspect-ratio: 1 / 1;
}
.gallery-stage.has-photo {
  width: 94%;
  height: 94%;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.gallery-stage.has-photo img.frame-art {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}
.thumb-art.has-photo {
  aspect-ratio: 1 / .86;
  overflow: hidden;
}
.thumb-art img.frame-art {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}
.card-media .card-art {
  inset: 5% 4%;
}
.card-media .card-art img.frame-art,
.qv-art img.frame-art {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

/* Price hierarchy: ordinary amounts stay calm; the final total leads. */
.pdp-price b,
.qv-price,
.lens-card-price,
.service-price,
.ship-price,
.sum-price {
  color: var(--ink);
}

.totals-grand dd,
.lens-total:not(:empty) {
  color: var(--red-dark);
}

/* Checkout progress remains legible even where mobile hides step labels. */
.step.on {
  background-color: var(--red-wash);
  border-color: var(--red);
}

.step.on .step-num {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--on-accent);
}

.step.done,
.step.is-done,
.step.is-complete {
  background-color: var(--success-wash);
  border-color: var(--success);
}

.step.done .step-num,
.step.is-done .step-num,
.step.is-complete .step-num {
  background-color: var(--success);
  border-color: var(--success);
  color: var(--on-accent);
}

/* Status is not just decorative: each colour has one stable meaning. */
.card-avail:not(.is-out):not(.is-low):not(.is-unknown),
.pdp-stock.is-good,
.line-rx.is-ok,
.rx-status.is-approved,
.rx-status.is-verified,
.rx-file.is-ok {
  color: var(--success);
}

.card-avail.is-low,
.pdp-stock.is-low,
.line-rx.is-wait,
.rx-status.is-pending,
.rx-status.is-review,
.rx-status.is-needs_review {
  color: var(--warning-ink);
}

.card-avail.is-out,
.pdp-stock.is-out,
.form-error,
.rx-status.is-rejected,
.rx-file.is-error {
  color: var(--danger);
}

.rx-file.is-ok {
  background-color: var(--success-wash);
}

.rx-file.is-error,
.form-error:not([hidden]) {
  background-color: var(--danger-wash);
}

.toast.is-success {
  background-color: var(--success);
  color: var(--on-accent);
}

.toast.is-success .toast-icon {
  color: var(--on-accent);
}

.toast.is-error {
  background-color: var(--danger);
  color: var(--on-accent);
}

/* Touch and keyboard users receive the same unmistakable active signal. */
.purchase-mode-card:focus-visible,
.lens-card:focus-visible,
.lens-chip:focus-visible,
.service-card:focus-visible,
.date-cell:focus-visible,
.slot:focus-visible,
.filter-opt:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .sticky-buy {
    background-color: var(--paper);
    border-top-color: var(--line);
    box-shadow: 0 -6px 24px rgba(23, 23, 23, .08);
  }

  .purchase-mode-card.on,
  .lens-card.on,
  .lens-chip.on,
  .service-card.on,
  .ship-opt.on,
  .pay-opt.on {
    box-shadow: inset 3px 0 0 var(--red);
  }
}