/* mobile-v32: fixes from the mobile audit of 2026-10-25 (M01–M18). */

/* M08/M09: readable contrast in the light theme — the brand red (logo #DB192B, 5:1 with white) for buttons and
   accents, and a darker grey for secondary text (5.8:1 on white). */
:root:not([data-theme=dark]){--accent:#db192b;--muted:#62666d}

/* M01: the price list table never widens the page; on phones its rows become compact cards */
.price-list{max-width:100%;overflow-x:auto}
.price-list table{width:100%;table-layout:fixed;border-collapse:collapse}
.price-list td,.price-list th{overflow-wrap:anywhere;word-break:normal}
.price-list td:first-child,.price-list th:first-child{width:auto}
.price-list td:not(:first-child),.price-list th:not(:first-child){width:7.5em;white-space:normal}
@media(max-width:760px){
  .price-list thead{display:none}
  .price-list tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:9px 0;border-bottom:1px solid var(--line)}
  .price-list td{display:block;padding:0;border:0;width:auto!important}
  .price-list td:first-child{grid-column:1/-1}
  .price-list td:nth-child(2)::after{content:' تومان';color:var(--muted);font-size:.9em}
  .price-list td:nth-child(3){color:var(--muted);font-size:.9em}
  .price-list td:nth-child(3)::before{content:'در ';}
  .price-list td:nth-child(3)::after{content:' فروشگاه'}
}

/* M02: long titles and model names wrap inside the screen */
.product-info h1,.card h3,.seller-name h3,.store-head h1,.page h1,.result-toolbar h1{overflow-wrap:anywhere}
main,.detail-wrap,.results-layout{min-width:0;max-width:100%}

/* M03/M11: on phones the filter panel is not a second scroll box; its apply button stays in view */
@media(max-width:760px){
  .filters,.filters details[open]>form{max-height:none!important;overflow:visible!important}
  .filters form button[type=submit],.filters form .primary{position:sticky;bottom:calc(var(--bottom,68px) + 8px);z-index:3;width:100%;
    box-shadow:0 -8px 16px var(--bg,#fff)}
}

/* M04/M10: the card heart is a real button; the card names the option of its «از …» price */
.card{position:relative}
.card-save{position:absolute;bottom:8px;left:8px;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;color:var(--muted);cursor:pointer}
.card-save .icon{width:18px;height:18px}
.card-save.on{color:var(--accent)}
.card-save.on .icon{fill:currentColor}
.card-bottom{padding-left:40px}
.card-option{margin:0 0 6px;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* M05: a failed «more results» load says so and offers a retry */
.load-failed{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;padding:14px;
  margin:12px 0;border:1px dashed var(--line);border-radius:10px;color:var(--text);font-size:13px}
.load-failed a{color:var(--blue)}

/* M12: the footer is two columns on phones, one on very small ones */
@media(max-width:760px){.footer-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;padding:0 16px}
  .footer-columns a{padding:4px 0;font-size:13px}}
@media(max-width:350px){.footer-columns{grid-template-columns:1fr}}

/* M16: the search icon has a finger-sized touch area */
.searchbar button{min-width:44px;min-height:44px;display:grid;place-items:center}

/* M17: category names readable on narrow phones */
@media(max-width:760px){.category-rail a,.category-rail span,.subcategory-links a,.category-body .subcategory-links>a{font-size:12.5px!important;line-height:1.75}}

/* M15: letter index above the brand and store lists */
.letter-index{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.letter-index a{min-width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;font-size:13px}
.letter-index a[aria-current=page]{border-color:var(--accent);color:var(--accent)}

/* M18: daily prices of the chart as a table */
.chart-table summary{cursor:pointer;color:var(--blue);font-size:13px;margin-top:8px}
.chart-table table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:8px}
.chart-table td,.chart-table th{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right}

/* Card titles: exactly two lines (no sliver of a third line above the option) */
.card h3{max-height:3.7em;overflow:hidden}