/* Product card: city → line → district (web/js/48-market-lines.js) */
.ml-block{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid #DDD6CF;border-radius:var(--r-l,12px);background:rgba(255,255,255,.6)}
.ml-block .flabel{font-weight:600;font-size:14px}
.ml-list{display:flex;flex-direction:column;gap:8px}
.ml-line{display:flex;flex-direction:column;gap:8px;padding:8px;border:1px solid #E3DAD2;border-radius:11px;background:#fff;transition:border-color .15s,box-shadow .15s}
.ml-line.on{border-color:var(--mk-accent,#C8452F);box-shadow:0 0 0 1px var(--mk-accent,#C8452F) inset}
.ml-main{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%;padding:2px 4px;border:0;background:none;color:inherit;cursor:pointer;text-align:start}
.ml-w{font-weight:600;font-size:14.5px;min-width:80px}
.ml-p{font-weight:700;font-size:15px;color:var(--mk-accent,#C8452F)}
.ml-left{font-size:12.5px;color:#8B8180;margin-inline-start:auto}
.ml-left.out{color:#B6352B}
.ml-po{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px;background:#F6E8CC;color:#875A0E}
/* the hand-over category of a position: named right after the price while it is the only one, and a
   choice of pills under the position while there are several — the picked one is what the order is made of */
.ml-pk{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:#F1EDE8;color:#5A524B;white-space:nowrap}
.ml-pks{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-inline-start:4px}
.ml-pk-l{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8B8180;white-space:nowrap}
.ml-dis{display:flex;flex-wrap:wrap;gap:6px;padding-inline-start:4px}
.ml-dis-b{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px;border:1px solid #DDD6CF;background:#F7F3EF;color:#5A524B;font-size:12.5px;font-weight:600;cursor:pointer}
.ml-dis-b:hover{border-color:#C3B6AC}
.ml-dis-b.on{background:var(--mk-accent,#C8452F);border-color:var(--mk-accent,#C8452F);color:#fff}
.ml-price-of{display:block;font-size:12.5px;font-weight:400;color:#8B8180;margin-block-start:2px}
.ml-hint{display:flex;align-items:center;gap:5px;font-size:12.5px;color:#8B8180;margin-block-end:4px}
/* the product's own name leads the block in large type; «От: …» follows it and stays a price, not a heading */
.pcard .ml-head{display:flex;flex-direction:column;gap:1px}
.pcard .pt.ml-big{font-size:21px;font-weight:700;line-height:1.2;color:#1D1A17;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .price.ml-from{font-size:16px;font-weight:600;color:#B6352B;display:flex;align-items:baseline;gap:4px}
.pcard .price small{font-weight:500;opacity:.8}
/* Beside the photo: a window with the title and the description alone. Everything that can be bought
   sits in the panel below, spanning the full width. The grid places them - no markup is rebuilt. */
.pd>.gal{grid-column:1;grid-row:1}
.pd>.pd-head{grid-column:2;grid-row:1;padding:22px;display:flex;flex-direction:column;gap:16px}
.pd>.pd-info{grid-column:1/-1;grid-row:2;display:flex;flex-direction:column;gap:16px}
/* The order of the panel is set here, so the markup can stay as the market builds it: the block
   «Где и что можно купить» spans the whole panel and comes first, the price and the buttons follow. */
.pd>.pd-info>.ml-block{order:1;width:100%}
.pd>.pd-info>.pd-price{order:2}
.pd>.pd-info>.pd-btc-row{order:3}
.pd>.pd-info>.row.wrap:has([data-a="buyNow"]){order:5}
.pd>.pd-info>.escrow-note{order:6}
.pd>.pd-info>.col:not(.pd-cities){order:7}
.pd>.pd-info>.col.pd-cities{order:8}
.pd>.pd-info>.row.wrap:not(:has(.qty)):not(:has([data-a="buyNow"])){order:9}
.pd-head h1{font-size:26px;font-weight:700;line-height:1.2;margin:0}
.pd-head>.row{color:inherit}
.pd-head>button.row{font-size:15px}
.pd-head .tag.info{font-size:11px}
.pd-desc{min-width:0}
.pd-desc-h{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8B8180;margin-block-end:6px}
.pd-desc p{margin:0;max-width:56ch;font-size:14.5px;line-height:1.55;white-space:pre-line;color:#4A4042}
/* a product placed into cities is priced by its lines, so its own empty price must not be shown */
.pd-price.sp-noprice{display:none}
.pcard .price{font-weight:700}
@media (max-width:560px){.ml-left{margin-inline-start:0}.ml-w{min-width:0}}
@media (max-width:980px){.pd>.gal,.pd>.pd-head,.pd>.pd-info{grid-column:1;grid-row:auto}.pd>.pd-info{max-width:none}}
/* with a single photo there is no thumbnail strip, yet the gallery still reserved its 72px column,
   which squeezed the photo down to that width; without the strip it takes the whole area */
.gal:not(:has(.thumbs-v)){grid-template-columns:minmax(0,1fr)}

/* The window beside the photo is pinned to the photo's height. The description is the only part that gives
   way: it clips whatever does not fit, and «Подробнее» scrolls the rest out. --pd-ph carries the measured
   height of the photo into the window. */
.pd{--pd-ph:auto}
.pd>.pd-head{height:var(--pd-ph);min-height:0;overflow:hidden}
.pd-head>*:not(.pd-desc):not(.pd-more){flex:0 0 auto}   /* the title and the store keep their size */
.pd-desc{flex:1 1 auto;min-height:0;overflow:hidden}
.pd-desc.open{overflow:auto}
/* The text is cut where the photo ends, so the cut is softened — but only while it is really cut and the
   button that opens it is on screen. */
.pd-desc:has(+ .pd-more:not([hidden])):not(.open){
 -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent 100%);
 mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent 100%);
}
.pd-more{flex:0 0 auto;align-self:flex-start;margin-top:10px}