/* ==========================================================================
   ui-fixes.css · PATCH-2026-08E
   Loaded LAST on every page so it always wins the cascade.

   1. MOBILE LAYOUT
      site-extras.css (PATCH-2026-08B header block) re-declared
      `.main-nav { display: flex }` AFTER the media query that hides it on
      phones. Same specificity + later position = the desktop menu stayed
      visible on mobile and collided with the Discord / cart / menu icons.
      Every mobile rule is re-asserted here, plus a full responsive pass on
      grids, product pages, drawers, search and the footer.
   2. PLAN CARDS
      The "Most popular" flag was pinned outside the card frame
      (`top: -11px`) and hung under the border. It is now a badge that sits
      inside the card on every screen size.
   3. UPDATE BUTTON
      Styling for the bottom-left "Update site" button (assets/site-update.js)
      shown only to visitors still running an older cached build.

   All copy stays in English.
   ========================================================================== */

/* ── 0. overflow guards (all screens) ───────────────────────────────── */
img, video, iframe, canvas { max-width: 100%; }
.prose img, .card img, .dynamic-primary img { height: auto; }
.prose pre, pre, .table-wrap { max-width: 100%; overflow-x: auto; }
.prose table, .table-wrap table { min-width: 480px; }
.breadcrumbs ol { flex-wrap: wrap; }

/* ── 1. plan cards: keep the flag inside the card ──────────────────────── */
.plan-card { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.plan-card .plan-flag {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  transform: none !important;
  align-self: flex-start;
  margin: 0 0 10px !important;
  order: -1;
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  white-space: nowrap;
}
.plan-card.featured { padding-top: 22px; }

/* ── 2. "Update site" button (bottom-left, only on stale builds) ────────── */
.site-update-dock {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 320;
  display: flex; align-items: center; gap: 6px;
}
.site-update-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 16px;
  border: 1px solid rgba(227, 179, 65, .55);
  border-radius: 999px;
  background: linear-gradient(180deg, #E3B341, #C9922B);
  color: #14100A;
  font: 700 13.5px/1 var(--font-body, system-ui, sans-serif);
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .45);
}
.site-update-btn:hover { filter: brightness(1.06); }
.site-update-btn:focus-visible { outline: 2px solid #F5D67B; outline-offset: 3px; }
.site-update-btn .icon { width: 17px; height: 17px; flex: none; }
.site-update-btn.is-busy { opacity: .75; cursor: progress; }
.site-update-btn.is-busy .icon { animation: siteUpdateSpin 1s linear infinite; }
@keyframes siteUpdateSpin { to { transform: rotate(360deg); } }
.site-update-close {
  width: 30px; height: 30px;
  border-radius: 999px;
  border: 1px solid var(--navy700, #22305c);
  background: var(--navy900, #0A1230);
  color: var(--muted, #9AA7C9);
  font: 600 15px/1 var(--font-body, system-ui, sans-serif);
  cursor: pointer;
}
.site-update-close:hover { color: var(--cream, #F4EEDF); border-color: var(--gold, #E3B341); }

/* ── 3. desktop: the menu button must never show ──────────────────────── */
@media (min-width: 1025px) {
  .menu-btn { display: none !important; }
}

/* ── 4. tablet + phone header: one row, no overlap ───────────────────── */
@media (max-width: 1024px) {
  /* the actual bug: the desktop nav stayed on top of the header icons */
  .main-nav,
  .main-nav .nav-item,
  .main-nav .drop { display: none !important; }
  .menu-btn { display: inline-flex !important; }

  .header-in {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 10px !important;
    height: auto;
    min-height: 60px;
  }
  .brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .brand-name { font-size: 16px !important; letter-spacing: .08em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header-actions { margin-left: auto; flex: 0 0 auto; gap: 6px !important; }
  .header-actions .icon-btn, .menu-btn { width: 40px; height: 40px; flex: none; }
  .discord-btn { width: 40px !important; padding: 0 !important; justify-content: center; }
  .discord-btn span, .discord-btn .discord-btn-label { display: none !important; }
  .hide-md { display: none !important; }

  /* product page + side rails */
  .product-layout, .dynamic-product { grid-template-columns: 1fr !important; }
  .buy-panel { position: static !important; }
  .suggested-panel { display: none !important; }
}

/* ── 5. mobile drawer: full width, scrollable, above everything ────────── */
@media (max-width: 1024px) {
  .mobile-nav {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important; max-width: none !important;
    z-index: 260 !important;
    display: flex; flex-direction: column;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 14px 18px calc(30px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mobile-nav[hidden] { display: none !important; }
  .mobile-nav-head { position: sticky; top: 0; background: var(--navy950, #050A18); padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--navy700, #22305c); }
  .mobile-nav nav a { min-height: 48px; font-size: 15px; }
  .mobile-nav .mobile-nav-group > summary { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 13px 10px; cursor: pointer; }
  .mobile-nav .mobile-nav-group > div,
  .mobile-nav .mobile-nav-group .mobile-nav-sub { padding-left: 12px; }
}

/* ── 6. grids collapse cleanly ──────────────────────────────────── */
@media (max-width: 900px) {
  .grid-4, .grid-3, .grid-products, .plans-grid, .services-grid,
  .category-showcase, .custom-order-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .grid, .grid-2, .grid-3, .grid-4, .grid-products, .plans-grid,
  .services-grid, .category-showcase, .custom-order-grid, .steps,
  .footer-grid, .stat-grid, .value-grid, .faq-grid {
    grid-template-columns: 1fr !important;
  }
  .dynamic-thumbs, .product-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .container { width: calc(100% - 28px) !important; }
  .section { padding: 40px 0 !important; }
  .page-head { padding: 30px 0 6px !important; }
  .page-head h1, .hero h1 { font-size: clamp(24px, 7vw, 32px) !important; line-height: 1.18; }
  .page-lead, .hero-lead { font-size: 14.5px !important; }
  .hero-in { padding: 46px 0 42px !important; max-width: 100% !important; }
  .hero-stats { flex-wrap: wrap; gap: 16px !important; }
  .section-head, .section-head-block { flex-direction: column; align-items: flex-start; gap: 8px; }
  .btn-row, .hero-actions, .buy-actions, .cta-actions { flex-direction: column; align-items: stretch; }
  .btn-row .btn, .hero-actions .btn, .cta-actions .btn { width: 100%; }
  .btn { min-height: 44px; }
  .cta-band { padding: 28px 18px !important; text-align: center; }
  .filters, .filter-bar, .toolbar { flex-wrap: wrap; gap: 8px; }
  .filters select, .filters input, .filter-bar select, .filter-bar input { flex: 1 1 140px; min-width: 0; }
  .card-foot { flex-wrap: wrap; gap: 10px; }
  .card-foot .btn { width: 100%; }
  .announce-in { flex-wrap: wrap; row-gap: 4px; text-align: center; justify-content: center; font-size: 12px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .plan-card { padding: 20px 18px; }
  body { overflow-x: clip; }
}

/* ── 7. overlays: search, cart, modals, toasts ─────────────────────── */
@media (max-width: 640px) {
  .search-overlay { padding: 12px 12px 20px !important; }
  .search-box { width: 100% !important; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
  .search-results { max-height: none !important; flex: 1 1 auto; overflow-y: auto; }
  .search-hit { gap: 10px !important; flex-wrap: wrap; }
  .search-hit img { width: 52px !important; height: 38px !important; }
  .search-hit-body { min-width: 0; flex: 1 1 60%; }
  .search-hit-title, .search-hit-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .cart-drawer { width: 100% !important; max-width: 100% !important; border-left: 0 !important; }
  .modal-card, .welcome-modal .modal-card, .rules-modal .modal-card {
    width: calc(100% - 24px) !important; max-height: calc(100dvh - 40px); overflow-y: auto;
  }
  [data-toasts], .toasts { left: 12px !important; right: 12px !important; bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; }
  [data-toasts] .toast, .toasts .toast { width: auto; max-width: 100%; }
  .site-update-dock { left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .site-update-btn { padding: 10px 14px; font-size: 13px; }
}

/* ── 8. small phones ────────────────────────────────────────── */
@media (max-width: 400px) {
  .brand-name { font-size: 15px !important; }
  .header-actions .icon-btn, .menu-btn { width: 38px; height: 38px; }
  .dynamic-thumbs, .product-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .price, .detail-price strong { font-size: 17px; }
}

/* ── 9. admin panel stays usable on a phone (English UI, unchanged copy) ─ */
@media (max-width: 900px) {
  .admin-shell, .admin-layout { grid-template-columns: 1fr !important; }
  .admin-side, .admin-nav { position: static !important; display: flex; flex-wrap: wrap; gap: 6px; }
  .admin-side a, .admin-nav button { flex: 1 1 auto; text-align: center; }
  .admin-main { min-width: 0; }
  .admin-table-wrap { overflow-x: auto; }
  .admin-grid, .admin-grid-2, .admin-grid-3 { grid-template-columns: 1fr !important; }
}

/* ── 10. touch targets ─────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .icon-btn, .menu-btn, .btn-sm { min-height: 40px; }
  .card-hover-cta { display: none; }
}


/* ==========================================================================
   PATCH-2026-08F - discounted price block.
   A struck-through price plus a -NN% chip plus the button no longer fit on one
   line, so the chip wrapped underneath the card and pushed "Add to cart" out of
   its own row. The price is now a compact two-line block - old price + saving
   on top, the amount actually charged underneath - and the button keeps its
   place on the right at every card width.
   ========================================================================== */
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  margin-top: 8px;
}
.card-foot .price-stack,
.card-foot .price { min-width: 0; }
.card-foot .btn { flex: 0 0 auto; white-space: nowrap; }

.price-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 7px;
  row-gap: 1px;
  line-height: 1.15;
}
.price-stack del {
  order: 1;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(148, 163, 196, .8);
}
.price-stack .price-save { order: 2; }
.price-stack .price {
  order: 3;
  flex: 1 0 100%;
  font-size: 20px;
  color: var(--gold2);
  letter-spacing: -.01em;
}

/* the saving chip: on-theme gold, never a second competing button */
.price-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(227, 179, 65, .42);
  background: rgba(227, 179, 65, .14);
  color: var(--gold2);
  font: 700 11px/1.55 var(--font-body);
  letter-spacing: .02em;
  white-space: nowrap;
}

/* product page: same idea, one calm line */
.detail-price { flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 4px; }
.detail-price del { order: 1; color: var(--muted); font-size: 15px; }
.detail-price .price-save { order: 2; padding: 2px 9px; font-size: 12px; }
.detail-price strong { order: 3; flex: 1 0 100%; }

/* a discounted card also earns a small corner flag on the image */
.product-card .card-media { position: relative; }

@media (max-width: 420px) {
  .card-foot { flex-wrap: wrap; }
  .card-foot .btn { width: 100%; }
  .price-stack .price { font-size: 19px; }
}