/* UX audit 2026-10-03: CSS-only fixes. Load after lomo-wishlist.css and lomo-onepage.css. */

/* ---------- Header and announcement: readable sizes, 44px targets ---------- */
.announcement { font-size: 11px; }
.site-header .header-actions .header-btn { min-height: 44px; font-size: 11px; }
.site-header .menu-button { min-width: 44px; min-height: 44px; }
nav#navigation .nav-item > a,
nav#navigation #shop-toggle { display: inline-flex; align-items: center; min-height: 44px; }
.site-header a[aria-label="Lomonosov Porcelain home"] span { font-size: 9px; }

/* ---------- Compact footer navigation ---------- */
footer.site-footer { padding: 40px 5% 24px; }
.footer-top { gap: 16px; padding-bottom: 28px; }
.footer-columns { gap: 28px; padding: 28px 0; }
.footer-col h2 { font-size: 12px; font-weight: 600; letter-spacing: .08em; margin-bottom: 8px; }
.footer-col ul { gap: 0; }
.footer-col ul li { margin: 0; }
.footer-col ul a { display: inline-flex; align-items: center; min-height: 28px; line-height: 1.5; }
@media (max-width: 767px) {
  .footer-col ul a { min-height: 32px; }
}

/* ---------- Home hero: the next step is a button, not a text link ---------- */
.reference-hero-content a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 28px;
  border: 0;
  background: #fefefe;
  color: #1d252c;
  font-size: 13px;
  text-decoration: none;
}
.reference-hero-content a:hover,
.reference-hero-content a:focus-visible { background: #243d80; color: #fff; }
.section-heading-row > a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Product cards: group name with price, set the action apart ---------- */
.product-card .product-info form { margin-top: 8px; }
.product-card .product-info form .btn {
  min-height: 44px;
  padding: 0 20px;
  font-size: 13px;
}

/* ---------- Catalogue pagination: brand colour, AA contrast, 44px targets ---------- */
.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: #243d80;
}
.pagination .page-item.active .page-link {
  border-color: #243d80;
  background: #243d80;
  color: #fff;
}

/* ---------- Product page: quieter price, no stock-template noise ---------- */
#product-info li > h2:has(.price-new) { font-size: 28px; line-height: 1.25; }
#product-info li:has(> h2 .price-new) + li { display: none; }                      /* "Ex Tax" duplicate */
#product-info h1 + ul.list-unstyled li:not(.lomo-product-identifier) { display: none; } /* second "In stock" */
#product-info .lomo-availability + p.small { display: none; }                      /* "Price per complete SKU / set." */
#product-info .rating:not(:has(.fa-solid)) { display: none; }                      /* empty stars at 0 reviews */
#product-info .lomo-pdp-bottom-breadcrumbs { display: none; }
#product-info .lomo-pdp-breadcrumbs a:hover { text-decoration: underline; }

@media (max-width: 767px) {
  /* thumbnails in one swipeable row instead of two */
  #product-info .image > div {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #product-info .image > div > a { flex: 0 0 64px; }

  /* purchase bar stays within thumb reach */
  body:has(#product-info) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  #product-info .lomo-pdp-purchase-actions {
    position: fixed;
    z-index: 110;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(29, 37, 44, .12);
    background: #fefefe;
  }
  #product-info .lomo-pdp-purchase-actions .input-group-text { display: none; }
  #product-info .lomo-pdp-purchase-actions .lomo-pdp-purchase { flex: 1 1 auto; flex-wrap: nowrap; gap: 8px; margin: 0; }
  #product-info .lomo-pdp-purchase-actions #button-cart { flex: 1 1 auto; width: auto; margin: 0; }
}

/* ---------- Cart: the checkout step is the largest control ---------- */
#checkout-cart a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}
#checkout-cart a.btn-primary { padding: 0 36px; font-size: 15px; }
@media (max-width: 767px) {
  #checkout-cart a.btn-primary { width: 100%; }
}

/* ---------- Checkout: same typeface as the shop, no iOS focus zoom ----------
   lomo-onepage.css loads inside <main>, after this file, so these rules carry the #lomo-onepage id. */
#lomo-onepage,
#lomo-onepage h1,
#lomo-onepage h2,
#lomo-onepage legend,
#lomo-onepage .lomo-checkout-summary details > summary { font-family: inherit; }
#lomo-onepage { color: #1d252c; }
#lomo-onepage .lomo-field input,
#lomo-onepage .lomo-field select { font-size: 16px; border-radius: 4px; }
#lomo-onepage .lomo-checkout-primary,
#lomo-onepage .lomo-checkout-secondary,
#lomo-onepage .lomo-shipping-choice,
#lomo-onepage .lomo-payment-choice { border-radius: 4px; }
#lomo-onepage .lomo-checkbox { align-items: center; min-height: 44px; margin: .5rem 0; }
#lomo-onepage .lomo-checkbox input { margin: 0; width: 20px; height: 20px; }
#lomo-onepage .lomo-shipping-choice input,
#lomo-onepage .lomo-payment-choice input { width: 20px; height: 20px; }

/* mobile: the folded order summary shows its amount and that it opens */
@media (max-width: 800px) {
  #lomo-onepage .lomo-checkout-summary details > summary::after { content: attr(data-ux-total) "  \25BE"; white-space: pre; }
  #lomo-onepage .lomo-checkout-summary details[open] > summary::after { content: "\25B4"; }
}

/* ---------- Bag feedback: toast carries the next step; loader visible on outline buttons ---------- */
.bag-notice.is-visible { pointer-events: auto; }
.bag-notice a { color: #fff; text-decoration: underline; }
.btn-outline-dark .fa-spin.text-light { color: inherit !important; }

/* ---------- Empty bag and 404: ways forward instead of a lone "Continue" ---------- */
.lomo-empty-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 48px; }
.lomo-empty-links .btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; }

/* ---------- Footer: seller and delivery line ---------- */
.footer-bottom { flex-wrap: wrap; gap: 8px 32px; }
.footer-bottom a { text-decoration: underline; }

/* ---------- Bag: undo after removing an item ---------- */
.lomo-bag-undo-button { min-height: 44px; padding: 0 8px; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ---------- Checkout: label notes read as notes ---------- */
#lomo-onepage .lomo-field label > span { font-weight: 400; opacity: .75; }

/* ---------- Checkout summary: no article numbers ---------- */
#lomo-onepage .lomo-summary-items small { display: none; }