/* Poké SA House of Cards: brand layer on top of the converted styles.css.
   Colors come from sahouseofcards.com: house-roof maroon, banner orange, ink black. */

:root {
  --hoc-maroon: #9E1B32;
  --hoc-maroon-deep: #6E1222;
  --hoc-red: #C5120C;
  --hoc-orange: #FF5700;          /* logo orange, for lines and dots only */
  --hoc-orange-strong: #C2410C;   /* orange behind or as text: passes contrast */
  --hoc-ink: #1B1A1A;
  --hoc-paper: #FBF8F4;
  --hoc-display: "Oswald", "Arial Narrow", Impact, sans-serif;
}

body.theme-hoc {
  background: var(--hoc-paper);
  background-image: none;
  color: var(--hoc-ink);
}

/* Orange ticker banner, like the "Top Sellers" strip on the shop site */
.hoc-hot-banner {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 7px 16px;
  background: var(--hoc-orange-strong);
  color: #fff;
  font: 600 13px/1.2 var(--hoc-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hoc-hot-banner > * + *::before {
  content: "\2605";
  margin-right: 28px;
  opacity: 0.8;
}

/* Top bar: white with a maroon rule under it */
.theme-hoc .topbar {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 3px solid var(--hoc-maroon);
  box-shadow: 0 2px 14px rgba(70, 25, 25, 0.08);
}
.hoc-brand-logo {
  width: 52px !important;
  height: 52px !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.hoc-brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.theme-hoc .brand-title {
  font: italic 700 22px/1 var(--hoc-display);
  color: var(--hoc-ink);
  letter-spacing: 0.01em;
}
.theme-hoc .brand-title .hoc-word {
  color: var(--hoc-maroon);
}
.theme-hoc .brand-sub {
  color: var(--hoc-maroon);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Headings and big numbers in the shop's condensed display face */
.theme-hoc h1,
.theme-hoc h2,
.theme-hoc h3,
.theme-hoc .lux-networth,
.theme-hoc .section-title,
.theme-hoc .card-title,
.theme-hoc .splash-title {
  font-family: var(--hoc-display);
  letter-spacing: 0.01em;
}
.theme-hoc .lux-networth {
  color: var(--hoc-ink);
  font-weight: 600;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.theme-hoc .lux-eyebrow {
  color: var(--hoc-maroon);
  font-weight: 600;
  letter-spacing: 0.18em;
}
.theme-hoc .lux-hero {
  background: #fff;
  border: 1px solid rgba(27, 26, 26, 0.08);
  border-top: 4px solid var(--hoc-maroon);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(70, 25, 25, 0.07);
}
.theme-hoc .rene-divider-gold {
  border-color: var(--hoc-orange);
  background: var(--hoc-orange);
  opacity: 1;
  height: 3px;
  width: 64px;
}

/* Buttons: maroon primary, orange accent, clean outline ghost */
.theme-hoc .btn-mint {
  background: var(--hoc-maroon);
  color: #fff;
  border: 1px solid var(--hoc-maroon-deep);
  box-shadow: 0 6px 18px rgba(158, 27, 50, 0.25);
}
.theme-hoc .btn-mint:hover {
  background: var(--hoc-maroon-deep);
}
.theme-hoc .btn-peach {
  background: var(--hoc-orange-strong);
  color: #fff;
  border: 1px solid #9A3412;
  box-shadow: 0 6px 18px rgba(255, 87, 0, 0.25);
}
.theme-hoc .btn-ghost {
  background: #fff;
  color: var(--hoc-ink);
  border: 1px solid rgba(27, 26, 26, 0.18);
}
.theme-hoc .btn-ghost:hover {
  border-color: var(--hoc-maroon);
  color: var(--hoc-maroon);
}

/* Pills and nav: maroon when active */
.theme-hoc .pill.active,
.theme-hoc .nav-btn.active {
  background: var(--hoc-maroon);
  color: #fff;
  border-color: var(--hoc-maroon);
}
.theme-hoc .nav-btn {
  font-family: var(--hoc-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Card tiles: white, like product photos on the shop site */
.theme-hoc .card-img-box {
  background: linear-gradient(180deg, #ffffff, #F3EEE7);
}

/* Splash: shop logo instead of the vault ball */
.theme-hoc .splash-overlay {
  background: #fff;
}
.hoc-splash-logo {
  width: 168px;
  height: 168px;
  object-fit: contain;
  margin: 0 auto 14px;
  display: block;
  animation: hocPop 700ms cubic-bezier(.2, .8, .2, 1) both;
}
.theme-hoc .splash-title {
  color: var(--hoc-ink);
  font-style: italic;
  font-weight: 700;
}
.theme-hoc .splash-sub {
  color: var(--hoc-maroon);
}
.theme-hoc .splash-bar-fill {
  background: linear-gradient(90deg, var(--hoc-maroon), var(--hoc-orange));
}
@keyframes hocPop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Shop footer */
.hoc-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 22px 16px 28px;
  border-top: 3px solid var(--hoc-maroon);
  color: #4A4444;
  font-size: 13px;
  line-height: 1.6;
}
.hoc-footer img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  flex: none;
}
.hoc-footer strong {
  font: italic 700 16px var(--hoc-display);
  color: var(--hoc-ink);
}

@media (max-width: 640px) {
  .hoc-hot-banner { gap: 12px; font-size: 12px; }
  .hoc-hot-banner > * { display: none; }
  .hoc-hot-banner > .on { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hoc-hot-banner > * + *::before { content: none; }
  .theme-hoc .brand-title { font-size: 18px; }
  .hoc-brand-logo { width: 42px !important; height: 42px !important; }
  .hoc-footer { align-items: flex-start; }
}

/* Keep header labels on one line */
.theme-hoc .nav-btn,
.theme-hoc .topbar-actions .btn-pastel {
  white-space: nowrap;
}
.theme-hoc .nav-btn {
  font-size: 14px;
  padding-left: 12px;
  padding-right: 12px;
}
.theme-hoc .brand-sub {
  white-space: nowrap;
}

/* Phones: the shop name is longer than "PokeVault", so the account chip shows just its icon */
@media (max-width: 640px) {
  .theme-hoc .user-info { display: none; }
  .theme-hoc .user-chip { padding: 4px; border-radius: 999px; }
  .theme-hoc .brand-title { font-size: 17px; }
  .theme-hoc .brand-sub { font-size: 11px; }
}

/* Phones: Scan / Add already live in the hero, so drop the duplicate header buttons */
@media (max-width: 640px) {
  .theme-hoc .topbar-actions .btn-pastel { display: none; }
  .theme-hoc .topbar { gap: 8px; }
}

/* ================= Shop features (deals, contact, privacy) ================= */
[hidden] { display: none !important; }
.hoc-hot-banner a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hoc-hot-banner:empty { display: none; }

.new-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--hoc-orange);
  box-shadow: 0 0 0 2px #fff;
  vertical-align: middle;
}

/* Deals preview at the top of the Vault */
.deal-strip {
  background: #fff;
  border: 1px solid rgba(27, 26, 26, 0.08);
  border-left: 5px solid var(--hoc-orange);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: 0 6px 20px rgba(70, 25, 25, 0.06);
}
.deal-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.deal-strip-all { padding: 6px 12px; font-size: 13px; }
.deal-strip-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; }

.deal-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.deal-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(27, 26, 26, 0.1);
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;
}
.deal-card.compact { flex-direction: row; align-items: center; border-radius: 12px; background: var(--hoc-paper); }
.deal-img { width: 100%; max-height: 340px; object-fit: contain; background: #F3EEE7; display: block; }
.deal-card.compact .deal-img { width: 72px; height: 72px; max-height: none; object-fit: cover; flex: none; }
.deal-text { padding: 14px 16px 16px; min-width: 0; }
.deal-card.compact .deal-text { padding: 10px 12px; }
.deal-title { font: 600 19px/1.2 var(--hoc-display); color: var(--hoc-ink); margin: 0 0 6px; overflow-wrap: anywhere; }
.deal-card.compact .deal-title { font-size: 16px; margin-bottom: 2px; }
.deal-body { margin: 0 0 10px; color: #4A4444; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.deal-card.compact .deal-body { margin: 0; font-size: 13px; }
.deal-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.deal-ends { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--hoc-maroon); text-transform: uppercase; }
.deal-link { padding: 7px 14px; font-size: 13px; }
.empty-deals { padding: 18px 4px; color: var(--hoc-ink); }
.empty-deals p { margin: 0 0 4px; }

/* Shop tab */
.shop-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid rgba(27, 26, 26, 0.08);
  border-top: 4px solid var(--hoc-maroon);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}
.shop-hero-logo { width: 84px; height: 84px; object-fit: contain; flex: none; }
.shop-name { margin: 0; font: italic 700 28px/1.1 var(--hoc-display); color: var(--hoc-ink); }
.shop-tagline { margin: 6px 0 0; color: var(--hoc-maroon); font-weight: 500; }

.contact-grid { display: grid; grid-template-columns: repeat(var(--contact-count, 4), minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.contact-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 84px;
  padding: 12px 8px;
  border-radius: 14px;
  background: var(--hoc-maroon);
  color: #fff;
  text-decoration: none;
  font: 600 16px/1 var(--hoc-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(158, 27, 50, 0.22);
  transition: transform 120ms ease, background 120ms ease;
}
.contact-btn:hover { background: var(--hoc-maroon-deep); }
.contact-btn:active { transform: scale(0.97); }
#mapShopBtn { background: var(--hoc-orange-strong); box-shadow: 0 6px 18px rgba(194, 65, 12, 0.22); }
.contact-icon { font-size: 24px; line-height: 1; }

.shop-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.shop-info-grid .panel { margin-bottom: 0; }
.hours-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(27, 26, 26, 0.12); font-size: 15px; }
.hours-row:last-child { border-bottom: 0; }
.hours-row strong { font-weight: 600; text-align: right; }
.shop-address { font-size: 16px; font-weight: 500; margin: 0 0 8px; }
.shop-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.privacy-panel { margin-top: 16px; border-left: 5px solid var(--hoc-maroon); }
.privacy-panel .btn-ghost { display: inline-flex; margin-top: 10px; text-decoration: none; }

.privacy-note {
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--hoc-paper);
  border: 1px solid rgba(158, 27, 50, 0.18);
  font-size: 13px;
  line-height: 1.5;
}
.privacy-note a, .hoc-footer a { color: var(--hoc-maroon); }
.danger-link { color: #A3201A !important; border-color: rgba(163, 32, 26, 0.35) !important; font-size: 13px; }
.footer-links a { text-decoration: none; font-weight: 500; }

@media (max-width: 640px) {
  .contact-grid { grid-template-columns: repeat(var(--contact-phone-cols, 2), minmax(0, 1fr)); }
  .contact-btn { min-height: 76px; font-size: 15px; }
  .shop-hero { padding: 16px; gap: 12px; }
  .shop-hero-logo { width: 60px; height: 60px; }
  .shop-name { font-size: 22px; }
  .mob-nav-btn { font-size: 12px; padding-left: 4px; padding-right: 4px; }
}

/* Short, wide screens (phone turned sideways): keep the header to two rows */
@media (orientation: landscape) and (max-height: 600px) {
  .theme-hoc .topbar-actions .btn-pastel,
  .theme-hoc .user-info,
  .theme-hoc .brand-sub { display: none; }
  .theme-hoc .user-chip { padding: 4px; border-radius: 999px; }
  .hoc-hot-banner { padding-top: 5px; padding-bottom: 5px; }
}
/* Laptops: the shop menu has one more tab than PokeVault, so tighten the header a little */
@media (max-width: 1360px) {
  .theme-hoc .topbar-actions .user-info { display: none; }
  .theme-hoc .topbar-actions .user-chip { padding: 4px; border-radius: 999px; }
}
/* Tablets and small laptops: the five shop tabs move to the bottom bar, like on phones */
@media (max-width: 1180px) and (min-height: 601px) {
  .theme-hoc .desktop-nav { display: none !important; }
  .theme-hoc .mobile-bottom-nav { display: flex; }
  .theme-hoc .container { padding-bottom: 96px; }
}

/* Buttons that use the orange theme color as a background (Live Camera, Batch Scan, Upload...) */
.theme-hoc .btn-blue { background: var(--hoc-orange-strong); color: #fff; border-color: #9A3412; }
.theme-hoc .btn-blue:hover { background: #9A3412; color: #fff; }

/* Small text links big enough to tap */
.tap-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; margin-left: -8px; color: var(--hoc-maroon); font-weight: 500; text-decoration: none; }
.game-meta { font-size: 12px; }

/* Dialogs never scroll sideways on phones */
.modal-card { overflow-x: hidden; max-width: 100%; }
.add-preview-row #autoLookupQuickAddBtn { white-space: nowrap; }
@media (max-width: 480px) {
  .add-preview-row #autoLookupQuickAddBtn { width: 100%; }
}

@media (max-width: 640px) { .deal-img { max-height: 280px; } }
.deal-body a { color: var(--hoc-maroon); font-weight: 500; overflow-wrap: anywhere; }
/* Touch-friendly filter chips */
.theme-hoc .pill { min-height: 40px; }

/* Phones: the scanner window only needs to be as tall as what's in it */
@media (max-width: 640px) {
  .modal-card.scanner-studio-modal { height: auto !important; min-height: 0 !important; max-height: calc(100dvh - 24px); }
  .modal-card.scanner-studio-modal .scanner-tray-main { min-height: 0; flex: none; }
}

/* Totals line: a dot only between parts that are showing */
.lux-ledger-line .dot-sep { display: none; }
.lux-ledger-line .ledger-item:not([hidden]) ~ .ledger-item:not([hidden])::before { content: "\00B7"; margin-right: 10px; color: var(--rene-dim); }
/* Link-style text inside pill buttons */
a.btn-ghost, a.btn-pastel, .deal-link, .shop-links a { text-decoration: none; }

/* Signed-out welcome card on the Vault */
.guest-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fff; border: 1px solid rgba(158, 27, 50, 0.22); border-left: 5px solid var(--hoc-maroon);
  border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 14px;
}
.guest-card strong { display: block; font: 600 18px/1.2 var(--hoc-display); color: var(--hoc-ink); margin-bottom: 3px; }
.guest-card span { font-size: 13.5px; color: #4A4444; }
.guest-card .btn-pastel { flex: none; min-height: 44px; padding: 0 20px; }
@media (max-width: 480px) { .guest-card { flex-direction: column; align-items: stretch; } }

/* iPhone: 16px text in boxes so the page doesn't zoom in when typing */
@media (max-width: 640px) { input, select, textarea { font-size: 16px !important; } }
/* View-only share: locked boxes look like plain values */
.share-view #cardDetailModal input:disabled, .share-view #cardDetailModal select:disabled { opacity: 1; color: var(--rene-white); background: transparent; border-style: dashed; -webkit-text-fill-color: currentColor; }

/* "Open now" line under Store Hours */
.open-now { margin: 6px 0 0; font-weight: 600; font-size: 14px; }
.open-now.is-open { color: #1F7A3A; }
.open-now.is-closed { color: #A3201A; }

/* Set checklist cards on narrow phones: buttons wrap instead of overflowing */
@media (max-width: 420px) {
  .variant-row { display: flex; flex-wrap: wrap; gap: 4px; }
  .variant-row .var-pill { flex: 1 1 auto; min-width: 0; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
  #setChecklistGrid .card-actions { display: flex; flex-wrap: wrap; gap: 4px; }
  #setChecklistGrid .card-actions button { flex: 1 1 auto; white-space: nowrap; }
}

/* iPads and computers: one-column scanner that's only as tall as it needs (the camera
   area appears above the tray once it starts) */
@media (min-width: 641px) {
  .modal-card.scanner-studio-modal { height: auto !important; max-height: 94dvh; }
  .scanner-studio-body, .scanner-studio-body.mini-camera-mode { display: flex !important; flex-direction: column; }
  .modal-card.scanner-studio-modal .scanner-tray-main { flex: none; min-height: 0; }
  #scannerLeftDock:empty { display: none; }
}

/* ================= Easy to read for every age ================= */
/* Bigger, darker everyday text (the original theme was small and light) */
.theme-hoc { font-size: 16px; }
.theme-hoc .panel-sub { font-size: 14.5px; line-height: 1.5; }
.theme-hoc .card-sub { font-size: 13.5px; }
.theme-hoc .card-title { font-size: 15.5px; }
.theme-hoc .btn-ghost, .theme-hoc .btn-pastel { font-size: 14.5px; min-height: 44px; }
.theme-hoc .pill { font-size: 14px; }
.theme-hoc .empty-vault-sub { font-size: 15px; line-height: 1.55; }
.theme-hoc .price-sub { font-size: 13px; }

/* Bottom tab bar: icon + word, bigger and easier to hit */
.theme-hoc .mob-nav-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  flex: 1 1 0; min-width: 0; min-height: 56px; padding: 6px 2px;
  font-size: 12.5px; font-weight: 500; color: #4A4444;
}
.theme-hoc .mob-nav-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.theme-hoc .mob-nav-btn.active { color: var(--hoc-maroon); background: rgba(158, 27, 50, 0.1); font-weight: 600; }
.theme-hoc .mob-nav-btn .new-dot { margin-left: 4px; }
.theme-hoc .mobile-bottom-nav { padding: 6px; gap: 2px; }
@media (max-width: 1180px) and (min-height: 601px) { .theme-hoc .container { padding-bottom: 110px; } }

/* Banner: bigger, and it opens the deals */
.hoc-hot-banner { font-size: 15px; padding: 9px 16px; cursor: pointer; }
@media (max-width: 640px) { .hoc-hot-banner { font-size: 14px; } }

/* Text size setting */
.text-size-box { margin: 12px 0; padding: 12px; border-radius: 12px; background: var(--rene-black-soft); border: 1px solid var(--rene-line-soft); }
.text-size-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.text-size-pills .pill.active { background: var(--hoc-maroon); color: #fff; border-color: var(--hoc-maroon); }
/* Text size: the whole app grows; drawing tools stay 1:1 so dragging guides lines up on iPhone */
html.text-large body { zoom: 1.15; }
html.text-xl body { zoom: 1.3; }
html.text-large .card-frame, html.text-large .scanner-video-wrap { zoom: calc(1 / 1.15); }
html.text-xl .card-frame, html.text-xl .scanner-video-wrap { zoom: calc(1 / 1.3); }


/* "New from the shop" window */
.new-deals-card { max-width: 480px; }
.new-deals-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.new-deals-head img { width: 56px; height: 56px; object-fit: contain; flex: none; }
.new-deals-head h3 { font: 700 22px/1.15 var(--hoc-display); margin: 2px 0 0; color: var(--hoc-ink); }
.new-deals-card .deal-strip-list { grid-template-columns: 1fr; }
.new-deals-foot { justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* Full shop name in the header: "& Collectibles" drops to a second line on phones */
@media (max-width: 520px) {
  .theme-hoc .brand-title { display: block; line-height: 1.05; white-space: normal; }
  .theme-hoc .brand-title .hoc-word { display: block; font-size: 0.78em; margin-top: 1px; }
}
.splash-title .hoc-word { color: var(--hoc-maroon); }

/* Header "Aa" text size button */
.text-size-btn { min-width: 44px; min-height: 44px; border-radius: 999px; border: 1px solid rgba(27,26,26,0.18); background: #fff; color: var(--hoc-ink); font: 600 16px/1 var(--hoc-display); cursor: pointer; flex: none; }
.text-size-btn:hover { border-color: var(--hoc-maroon); color: var(--hoc-maroon); }

/* Tab words stay on one line */
.theme-hoc .mob-nav-btn span { white-space: nowrap; }

/* "More" filters */
.more-filters { display: contents; }
.more-filters[hidden] { display: none !important; }
.more-filters-btn { font-weight: 600; }

/* Open now line at the top of the Shop tab */
.open-now-line { margin: -4px 0 14px; padding: 10px 14px; border-radius: 12px; font-weight: 600; font-size: 15px; background: #fff; border: 1px solid rgba(27,26,26,0.1); }
.open-now-line.is-open { color: #1F7A3A; border-left: 5px solid #1F7A3A; }
.open-now-line.is-closed { color: #A3201A; border-left: 5px solid #A3201A; }
.deal-more { width: 100%; margin-top: 2px; }

/* Jumping to deals leaves room for the header */
#dealsPanel { scroll-margin-top: 120px; }

/* Windows: start at the top and scroll with the page when they're taller than the screen,
   so the heading and close button are always reachable (matters most at Large text). */
.modal-backdrop { align-items: flex-start; }
.modal-backdrop > .modal-card { margin: auto 0; flex: none; }
html.text-large .modal-backdrop > .modal-card,
html.text-xl .modal-backdrop > .modal-card { max-height: none !important; height: auto !important; overflow: visible; margin: 0 0 24px; }
html.text-large .modal-backdrop, html.text-xl .modal-backdrop { padding-top: 10px; }
/* Big text: two-column forms inside windows become one column, and rows wrap */
html.text-large .modal-card .form-grid, html.text-xl .modal-card .form-grid,
html.text-large .modal-card .split-row, html.text-xl .modal-card .split-row,
html.text-large .modal-card .detail-grid, html.text-xl .modal-card .detail-grid { grid-template-columns: minmax(0, 1fr) !important; }
.modal-card .input-row, #signedInBox { flex-wrap: wrap; }
#signedInBox > div { min-width: 0; }
#signedEmail, #signedInEmail { overflow-wrap: anywhere; }
.modal-card .btn-ghost, .modal-card .btn-pastel { white-space: normal; }

/* My Cards: extra actions tucked behind More */
.hero-more { display: contents; }
.hero-more[hidden] { display: none !important; }

/* Less gap between the deals strip and the collection */
.theme-hoc #tab-vault .lux-hero { margin-top: 0; }
.deal-strip { margin-bottom: 14px; }

/* Tab words: allow two lines (Video Games) */
.theme-hoc .mob-nav-btn span { white-space: normal; line-height: 1.1; text-align: center; }

/* Deal photos: shorter on tablets and computers */
@media (min-width: 700px) { .deal-img { max-height: 240px; } }
html.text-large .detail-sheet-body, html.text-xl .detail-sheet-body,
html.text-large .modal-card .centering-metrics, html.text-xl .modal-card .centering-metrics { grid-template-columns: minmax(0, 1fr) !important; }
@media (max-width: 640px) { .detail-sheet-body { grid-template-columns: minmax(0, 1fr) !important; } }
html.text-large .modal-card.scanner-studio-modal, html.text-xl .modal-card.scanner-studio-modal { width: auto !important; max-width: 100% !important; }
html.text-large .modal-card .form-grid > *, html.text-xl .modal-card .form-grid > * { grid-column: 1 / -1 !important; }

/* Scanner window on phones: same side space as the other windows, nothing wider than it */
@media (max-width: 640px) {
  .modal-card.scanner-studio-modal { width: 100% !important; max-width: 100% !important; }
  #cameraScanModal { overflow-x: hidden; }
}
.modal-card .empty-vault-box { max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
#toggleBulkTextBtn { min-height: 44px; font-size: 14.5px; }
#signedInEmail { font-size: 14px; overflow-wrap: anywhere; }
html.text-xl #signedInEmail { font-size: 12.5px; }

/* Get the app card */
.get-app-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid rgba(158,27,50,0.22); border-left: 5px solid var(--hoc-maroon); border-radius: var(--radius-lg); padding: 12px 14px; margin-bottom: 16px; }
.get-app-card img { width: 46px; height: 46px; object-fit: contain; flex: none; }
.get-app-card strong { display: block; font: 600 17px/1.2 var(--hoc-display); }
.get-app-card span { font-size: 13.5px; color: #4A4444; }
.get-app-card > div { flex: 1; min-width: 0; }
.get-app-card .btn-pastel { flex: none; }
@media (max-width: 480px) { .get-app-card { flex-wrap: wrap; } .get-app-card .btn-pastel { width: 100%; } }

/* Latest news card (Instagram) */
.news-card { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 14px 16px; border-radius: var(--radius-lg); text-decoration: none; color: #fff;
  background: linear-gradient(120deg, #9E1B32 0%, #B4234A 55%, #C2410C 100%); box-shadow: 0 8px 22px rgba(158, 27, 50, 0.25); }
.news-card .news-icon svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2; display: block; }
.news-card .news-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.news-card strong { font: 600 18px/1.2 var(--hoc-display); letter-spacing: 0.02em; overflow-wrap: anywhere; }
.news-card .news-text span { font-size: 13.5px; opacity: 0.95; }
.news-card .news-go { font-size: 34px; line-height: 1; opacity: 0.9; }

/* iPhone home-screen app: keep the banner clear of the clock and battery.
   (The app now asks iOS for a solid status bar; this also covers phones that added it earlier.) */
.hoc-hot-banner { padding-top: calc(9px + env(safe-area-inset-top)); }
@media (max-width: 640px) { .hoc-hot-banner { padding-top: calc(8px + env(safe-area-inset-top)); } }