/* minerprices theme, loaded after app.css (design "preview one", 21 Oct 2026): ink header and footer with an amber rule,
   a light warm canvas, amber buttons and price tags, soft 4-6 px corners, light table headings, teal-green profit.
   Archivo, numbers in tabular figures. app.css keeps the layout of every component; this file changes how they look. */
:root {
  --ink: #10141d; --ink-2: #1a2030; --ink-3: #2a3243; --ink-text: #f4f1ea; --ink-muted: #a9b1c2;
  --amber: #ffb547; --amber-deep: #f29a12; --amber-soft: #fff1d6;
  --background: 40 33% 98%;
  --foreground: 222 28% 9%;
  --muted: 40 20% 94%;
  --muted-foreground: 222 9% 34%;
  --border: 36 12% 88%;
  --input: 38 14% 80%;
  --field-border: 38 10% 62%;
  --card: 0 0% 100%;
  --primary: 224 76% 44%;
  --primary-foreground: 0 0% 100%;
  --radius: 6px;
  --title: #10141d;
  --gray-50: #f3f0e8; --gray-100: #ece8de; --gray-200: #ddd8cc; --gray-300: #c9c2b3; --gray-500: #6e6a60; --gray-700: #3b3830;
  /* profit: a teal-green ramp instead of AsicProfit's bright green */
  --green-100: #d9f3ea; --green-300: #8fdcc1; --green-400: #4fc9a1; --green-500: #17a57f; --green-600: #0e8a69; --green-700: #0b6c53;
  --amber-500: #f29a12; --amber-100: #fff1d6;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wrap: 1480px;
}
:root[data-theme="dark"] {
  --background: 222 28% 7%;
  --foreground: 40 25% 92%;
  --muted: 222 22% 13%;
  --muted-foreground: 222 10% 66%;
  --border: 222 18% 20%;
  --input: 222 18% 22%;
  --field-border: 222 14% 32%;
  --card: 222 26% 10%;
  --primary: 220 90% 70%;
  --title: #f4f1ea;
  --gray-50: #141a26; --gray-100: #19202e; --gray-200: #262e3f; --gray-300: #364055; --gray-500: #9aa3b5; --gray-700: #d3d8e2;
  --green-100: #0f2c25; --amber-100: #3a2a0b;
}

body { font-family: var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.003em; }
::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline-color: var(--amber-deep); border-radius: 2px; }
p a, .prose a, .link { color: hsl(var(--primary)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: hsl(var(--primary)); }

/* ---------- market strip ---------- */
.mk { background: #0a0d14; color: var(--ink-muted); font-size: 12.5px; border-bottom: 1px solid #1d2331; overflow: hidden; }
.mk { overflow-x: auto; scrollbar-width: none; }
.mk::-webkit-scrollbar { display: none; }
.mk-run { display: flex; width: max-content; }
.mk-track { display: flex; }
.mk-track[aria-hidden] { display: none; }   /* the copy was for the moving strip; the strip stands still and swipes now */
.mk-i { display: inline-flex; align-items: baseline; gap: 7px; padding: 9px 18px; border-right: 1px solid #1d2331; white-space: nowrap; color: var(--ink-muted); }
.mk-i:hover { color: var(--ink-text); background: #121725; }
.mk-i b { color: var(--ink-text); font-weight: 700; letter-spacing: .04em; }
.mk-i em { font-style: normal; font-weight: 600; }
.mk-i em.up { color: #4fd1a5; } .mk-i em.dn { color: #ff7a6b; }

/* ---------- header: ink bar, amber rule ---------- */
.hdr { background: var(--ink); backdrop-filter: none; border-bottom: 3px solid var(--amber); color: var(--ink-text); }
.hdr .wrap { height: 70px; }
.hdr .logo { color: var(--ink-text); }
.hdr .logo svg { width: 196px; } .ftr .logo svg { width: 178px; }
.nav { border: 0; border-radius: 0; padding: 0; margin-left: 20px; gap: 0; }
.nav > a, .nav > details > summary { color: var(--ink-text); font-size: 14.5px; font-weight: 600; padding: 25px 14px; border-radius: 0; letter-spacing: .01em; }
.nav > details > summary::after { opacity: .7; }
.nav > a:hover, .nav > details > summary:hover, .nav > details[open] > summary { color: var(--amber); background: var(--ink-2); }
.nav [aria-current] { color: var(--amber); box-shadow: inset 0 -3px 0 var(--amber); }
.nav .menu { top: 100%; border-radius: 0; border: 1px solid hsl(var(--border)); border-top: 3px solid var(--amber); box-shadow: 0 18px 40px -18px rgba(16,20,29,.45); color: hsl(var(--foreground)); }
.nav .menu a { border-radius: 0; }
.nav .menu a:hover { background: var(--amber-soft); color: var(--ink); }
:root[data-theme="dark"] .nav .menu a:hover { background: var(--ink-3); color: var(--ink-text); }
.nav .menu .menu-sep { border-top: 1px solid hsl(var(--border)); }
.ctl { gap: 6px; }
@media (min-width: 1101px) { .ctl .desk { display: inline-flex; align-items: center; gap: 6px; } }
.hdr.open .ctl .desk .ctl-f { flex: 1 1 auto; }
.ctl-f { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 2px 0 8px; border: 1px solid var(--ink-3); border-radius: 4px; background: var(--ink-2); color: var(--ink-text); }
.ctl-f svg { width: 15px; height: 15px; color: var(--amber); }
.hdr .ctl select, .hdr .ctl input { border: 0; height: 38px; background: transparent; color: var(--ink-text); padding: 0 6px; }
.hdr .ctl select option { color: #10141d; }
.hdr .ctl input { width: 70px; }
.hdr .ctl .unit { font-size: 12.5px; color: var(--ink-muted); padding-right: 8px; }
.hdr .icon-btn { width: 40px; height: 40px; color: var(--ink-text); border-color: var(--ink-3); border-radius: 4px; }
.hdr .icon-btn:hover { background: var(--ink-2); color: var(--amber); }
.hdr-cta { height: 40px; padding: 0 20px; border-radius: 4px !important; background: var(--amber) !important; color: var(--ink) !important; border-color: var(--amber) !important; }
.hdr-cta:hover { background: #ffc56e !important; }
@media (max-width: 1100px) { .hdr-cta { display: none; } }

/* ---------- type ---------- */
.title, h1 { font-stretch: 108%; font-weight: 800; letter-spacing: -.025em; color: var(--title); }
h2 { letter-spacing: -.015em; font-weight: 750; }
.section > h2, .hp-head h2 { display: flex; align-items: center; gap: 10px; }
.section > h2::before, .hp-head h2::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--amber); transform: rotate(45deg); }
.lead { color: hsl(var(--muted-foreground)); }
.crumbs { text-transform: uppercase; font-size: 11.5px; letter-spacing: .07em; font-weight: 600; }

/* ---------- buttons: amber primary, quiet outlined secondary ---------- */
.btn { border-radius: 4px; font-weight: 650; border: 1px solid hsl(var(--foreground) / .22); background: hsl(var(--card)); }
.btn:hover { background: hsl(var(--muted)); border-color: hsl(var(--foreground) / .4); color: inherit; }
.btn.primary { background: #ffbd60; border-color: #f4b657; color: var(--ink); }
.btn.primary:hover { background: #ffcd85; border-color: #f4b657; color: var(--ink); }
:root[data-theme="dark"] .btn { background: transparent; }
:root[data-theme="dark"] .btn.primary { background: var(--amber); border-color: var(--amber); color: var(--ink); }
:root[data-theme="dark"] .btn.primary:hover { background: #ffc56e; }
/* the buy buttons on offers: amber, with the price */
.offer-cta, .btn.primary.offer-cta { background: #ffbd60; border-color: #f2a93b; color: var(--ink); }
.offer-cta:hover, .btn.primary.offer-cta:hover { background: #ffcd85; color: var(--ink); }

/* ---------- surfaces ---------- */
.card, .kpi, .hero .pic { border-radius: 6px; box-shadow: none; }

.kpi { border-left: 3px solid var(--amber); }
.badge { border-radius: 3px; text-transform: uppercase; font-size: 10.5px; letter-spacing: .06em; font-weight: 700; }
.notice { border-radius: 4px; border-left: 3px solid currentColor; }
.input, .form input, .form select, .form textarea, .hf-bar select { border-radius: 4px; }
.chip { border-radius: 4px; }
.chip[aria-pressed="true"] { background: #fbefdd; color: var(--ink); border-color: #f0c47e; }
:root[data-theme="dark"] .chip[aria-pressed="true"] { background: #30291d; color: var(--ink-text); }

/* ---------- tables: light heading row, warm hover ---------- */
.t th { background: #f5f3ef; color: hsl(var(--foreground)); font-size: 13px; font-weight: 650; border-color: hsl(var(--border)); }
.t th a.srt, .t th a.srt:hover { color: inherit; }
.t th[aria-sort] a.srt { color: #8a5a10; }
.t tbody tr:hover td { background: #fffaf2; }
:root[data-theme="dark"] .t th { background: #242b38; }
:root[data-theme="dark"] .t th[aria-sort] a.srt { color: var(--amber); }
:root[data-theme="dark"] .t tbody tr:hover td { background: var(--ink-2); }
.t td.profit { color: var(--ink); font-weight: 750; }

/* ---------- footer: ink ---------- */
.ftr { background: var(--ink); color: var(--ink-muted); border-top: 3px solid var(--amber); }
.ftr .logo { color: var(--ink-text); }
.ftr h2 { color: var(--amber); text-transform: uppercase; font-size: 12px; letter-spacing: .1em; }
.ftr a { color: var(--ink-text); }
.ftr a:hover { color: var(--amber); }
.ftr p { color: var(--ink-muted); }

/* ---------- compare tray / sheet ---------- */
.tray { border-radius: 6px 6px 0 0; background: var(--ink); color: var(--ink-text); border-top: 3px solid var(--amber); }
.cmp-sheet { border-radius: 8px 8px 0 0; border-top: 3px solid var(--amber); }

/* ---------- drawn blog covers (no AsicProfit pictures are copied): category over the title on the ink board ---------- */
.mp-cover { border-radius: 6px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; aspect-ratio: 16 / 9; width: 100%; padding: 7% 7% 8%; overflow: hidden;
  background: var(--ink); color: var(--ink-text); background-image: linear-gradient(#1f2636 1px, transparent 1px), linear-gradient(90deg, #1f2636 1px, transparent 1px); background-size: 28px 28px; }
.mp-cover > span { align-self: flex-start; background: var(--amber); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; }
.mp-cover > b { font-size: clamp(17px, 2.1vw, 30px); line-height: 1.08; font-weight: 800; font-stretch: 108%; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mp-cover > i { position: absolute; top: 8%; right: 6%; width: 44px; height: 30px; background: var(--amber); clip-path: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%); }
.mp-cover-s { display: flex; }
.mp-cover-s > b { font-size: 16px; }
.mp-cover-s > i { width: 26px; height: 18px; }
.bh-card-img .mp-cover > b { font-size: clamp(22px, 2.6vw, 38px); }

/* the current section in the menu bar: amber text and underline (app.css marks it in pale green) */
.hdr .nav > a[aria-current], .hdr .nav > details > summary[aria-current] { background: transparent; color: var(--amber); box-shadow: inset 0 -3px 0 var(--amber); }
:root[data-theme="dark"] .hdr .nav > a[aria-current], :root[data-theme="dark"] .hdr .nav > details > summary[aria-current] { color: var(--amber); }

/* best-price buttons in the rankings: an amber price tag with ink text (AsicProfit's are orange) */
.price-cta { background: #ffbd60 !important; color: var(--ink) !important; border-radius: 3px 0 0 3px; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); padding-right: 18px; box-shadow: none; }
.price-cta:hover { color: var(--ink) !important; background: #ffcd85 !important; box-shadow: none; filter: none; }
.price-cta:focus-visible { outline-color: var(--ink); }
.price-cta.ghost { background: none !important; color: var(--amber-deep) !important; box-shadow: inset 0 0 0 1.5px var(--amber-deep); clip-path: none; padding-right: 10px; }
:root[data-theme="dark"] .price-cta.ghost { color: var(--amber) !important; }

/* phone / tablet menu: the open header stays on the ink board */
@media (max-width: 1100px) {
  .hdr.open .ctl .desk { border-top-color: var(--ink-3); }
  .hdr.open .nav > a, .hdr.open .nav > details > summary { background: var(--ink-2); border-color: var(--ink-3); color: var(--ink-text); padding: 14px 14px; min-height: 52px; box-shadow: none; }
  .hdr.open .nav > details[open] > summary { border-color: var(--amber); box-shadow: inset 3px 0 0 var(--amber); color: var(--amber); }
  .hdr.open .nav [aria-current] { border-color: var(--amber); background: var(--ink-2); color: var(--amber); }
  .hdr.open .nav .menu { background: hsl(var(--card)); border-top: 3px solid var(--amber); }
  .hdr .burger { border: 1px solid var(--ink-3); }
}

/* footer: brand + four link columns */
@media (min-width: 1101px) { .ftr .wrap { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); } }

/* ---------- main menu (layout.js mainNav): five sections; on desktop each opens a full-width panel under the bar ---------- */
.mpn { align-self: stretch; }
.nav.mpn > details.mpn-sec { position: static; display: flex; }
.nav.mpn > details > summary { display: inline-flex; align-items: center; height: 100%; padding: 0 15px; }
.mpn-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 45; background: hsl(var(--card)); color: hsl(var(--foreground));
  border-bottom: 1px solid hsl(var(--border)); box-shadow: 0 28px 48px -28px rgb(16 20 29 / .45); }
.hdr .wrap.mpn-in, .mpn-in { height: auto; align-items: stretch; display: grid; grid-template-columns: minmax(220px, 270px); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; padding: 26px 24px 30px; }
.nav .mpn-panel a { white-space: normal; }
.mpn-lead { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; border-radius: 8px; background: #fbf6ee; border: 1px solid #f1e4cc; }
.mpn-lead > b { font-size: 21px; line-height: 1.15; letter-spacing: -.02em; }
.mpn-lead p { margin: 0 0 auto; font-size: 14px; line-height: 1.5; color: #4b5260; }
.mpn-go { gap: 8px; margin-top: 8px; }
.mpn-go .mpn-i { width: 16px; height: 16px; }
.mpn-g { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mpn-h { margin: 0 0 8px 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5c6371; }
.mpn-a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 8px; border-radius: 5px; font-size: 14.5px; font-weight: 500; color: inherit; }
.mpn-a:hover { background: #fbefdd; color: inherit; }
.mpn-a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpn-a em { margin-left: auto; font-style: normal; font-size: 12.5px; color: #5c6371; }
.mpn-i { flex: none; width: 18px; height: 18px; color: #b9770e; }
.mpn-ic { display: inline-flex; flex: none; }
.mpn-ic img, .mpn-ic i { width: 20px; height: 20px; border-radius: 50%; }
.mpn-ic img + img { margin-left: -6px; box-shadow: 0 0 0 2px hsl(var(--card)); }
.mpn-ic i { display: grid; place-items: center; background: hsl(var(--muted)); font: 700 11px var(--font); font-style: normal; }
.mpn-g2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6px; align-content: start; }
.mpn-g2 > .mpn-h { grid-column: 1 / -1; }
.mpn-tools { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; align-content: start; }
.mpn-tools > .mpn-h { grid-column: 1 / -1; }
.mpn-tool { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 6px; color: inherit; }
.mpn-tool:hover { background: #fbefdd; color: inherit; }
.mpn-tool .mpn-i { width: 22px; height: 22px; margin-top: 1px; }
.mpn-tool b { display: block; font-size: 14.5px; }
.mpn-tool small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: #5c6371; }
.mpn-card { display: flex; flex-direction: column; gap: 4px; width: 250px; padding: 14px; border: 1px solid hsl(var(--border)); border-radius: 8px; background: hsl(var(--card)); color: inherit; align-self: start; }
.mpn-card:hover { border-color: #e2b46d; box-shadow: 0 10px 24px -14px rgb(16 20 29 / .35); color: inherit; }
.mpn-card-k { align-self: flex-start; padding: 2px 8px; border-radius: 3px; background: var(--amber); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mpn-card-img { display: grid; place-items: center; height: 108px; margin: 4px 0; }
.mpn-card-img img { max-height: 104px; object-fit: contain; mix-blend-mode: multiply; }
.mpn-card > b { font-size: 15px; line-height: 1.3; }
.mpn-card-s { font-size: 12.5px; color: #5c6371; }
.mpn-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; }
.mpn-card-row > b { font-size: 18px; }
.mpn-card-p { padding: 2px 7px; border-radius: 4px; background: #e3f4ee; color: #17614c; font-weight: 700; font-size: 13px; }
.mpn-card-big { margin-top: 8px; font-size: 13px; color: #4b5260; }
.mpn-card-big b { font-size: 26px; color: hsl(var(--foreground)); }
.mpn-card-post .mp-cover { margin: 6px 0 4px; }
:root[data-theme="dark"] .mpn-lead { background: #241f17; border-color: #3a3224; }
:root[data-theme="dark"] .mpn-lead p, :root[data-theme="dark"] .mpn-h, :root[data-theme="dark"] .mpn-a em, :root[data-theme="dark"] .mpn-tool small,
:root[data-theme="dark"] .mpn-card-s, :root[data-theme="dark"] .mpn-card-big { color: #b7bfcb; }
:root[data-theme="dark"] .mpn-a:hover, :root[data-theme="dark"] .mpn-tool:hover { background: #2b2519; }
:root[data-theme="dark"] .mpn-i { color: var(--amber); }
:root[data-theme="dark"] .mpn-card-img img { mix-blend-mode: normal; }
:root[data-theme="dark"] .mpn-card-p { background: #0f2c25; color: #4fd1a5; }
/* mid-size desktops: the panel drops the card first, then the intro text */
@media (min-width: 1101px) and (max-width: 1360px) {
  .mpn-card { display: none; }
  .mpn-in { grid-template-columns: minmax(200px, 230px); gap: 20px; }
  .nav.mpn > details > summary { padding: 0 11px; font-size: 14px; }
}
/* phones and tablets: the sections are an accordion in the burger menu */
@media (max-width: 1100px) {
  .nav.mpn > details.mpn-sec { display: block; }
  .nav.mpn > details > summary { height: auto; }
  .hdr.open .mpn-panel { position: static; margin: 6px 0 10px; border: 0; border-radius: 8px; box-shadow: none; }
  .hdr.open .wrap.mpn-in { display: block; height: auto; padding: 10px 8px 12px; }
  .hdr.open .mpn-lead { display: block; padding: 0; margin: 0 0 6px; border: 0; background: none; }
  .hdr.open .mpn-lead > b, .hdr.open .mpn-lead p { display: none; }
  .hdr.open .mpn-go { width: 100%; justify-content: center; margin: 0; }
  .hdr.open .mpn-g { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4px; margin-top: 12px; }
  .hdr.open .mpn-g > .mpn-h { grid-column: 1 / -1; margin: 0 0 4px 8px; }
  .hdr.open .mpn-tools { grid-template-columns: 1fr; }
  .hdr.open .mpn-tool small { display: none; }
  .hdr.open .mpn-tool { padding: 8px; align-items: center; }
  .hdr.open .mpn-card { display: none; }
  .hdr.open .mpn-a { font-size: 14px; min-height: 42px; }
}