/* Shared decorative purchase panel. No recurring animations or extra requests on switch. */
/* Keep the page width stable when a purchase dialog locks the vertical scrollbar. */
body.fruit-market-page { scrollbar-gutter:stable; }
.market-purchase-panel {
    --basket-x:0%; --basket-y:66.666667%;
    padding:8px 9px 12px;
    border-radius:30px 30px 20px 20px;
    background:linear-gradient(180deg,#fff4c5 118px,#fff0b9 63%,#f5d785);
    box-shadow:inset 0 0 0 2px #fffbe0,0 5px 0 #633b1c,0 8px 12px #27481f22;
}
.market-purchase-panel::before { top:-6px; width:72px; height:10px; background:#b68640; }
.market-purchase-panel::after { position:absolute; inset:-5px -4px -5px; content:""; pointer-events:none; background:url('../images/farm/market/panel-blossom.svg') 8px 0/23px 23px no-repeat,url('../images/farm/market/panel-blossom.svg') right 8px top 0/23px 23px no-repeat,url('../images/farm/market/panel-blossom.svg') left 2px bottom 0/18px 18px no-repeat,url('../images/farm/market/panel-blossom.svg') right 2px bottom 0/18px 18px no-repeat; }
.market-purchase-panel[data-panel-crop="apple"] { --basket-x:50%; --basket-y:0%; }
.market-purchase-panel[data-panel-crop="banana"] { --basket-x:75%; --basket-y:0%; }
.market-purchase-panel[data-panel-crop="orange"] { --basket-x:100%; --basket-y:0%; }
.market-purchase-panel[data-panel-crop="grape"] { --basket-x:0%; --basket-y:33.333333%; }
.market-purchase-panel[data-panel-crop="watermelon"] { --basket-x:25%; --basket-y:33.333333%; }
.market-purchase-panel[data-panel-crop="dragonfruit"] { --basket-x:50%; --basket-y:33.333333%; }
.market-purchase-panel[data-panel-crop="strawberry"] { --basket-x:75%; --basket-y:33.333333%; }
.market-purchase-panel[data-panel-crop="pineapple"] { --basket-x:100%; --basket-y:33.333333%; }
.market-art {
    display:block; width:76px; height:76px; flex:none;
    background-image:url('../images/farm/market/panel-atlas-v1.webp');
    background-size:500% 400%; background-repeat:no-repeat;
    background-color:#fff4c5; background-blend-mode:multiply; border-radius:50%; pointer-events:none;
}
/* Keep a separate vine lane; static ground accents meet, but never cover, it. */
.market-growth-art { position:relative; display:grid; grid-template-columns:1.06fr 1fr 1.24fr; height:108px; padding-bottom:18px; align-items:end; justify-items:center; }
/* Blend the matte with its own fixed background during paint, not with the
   moving page underneath. No per-sprite isolated/mix-blend compositing groups. */
.market-growth-object { position:relative; z-index:1; pointer-events:none; }
.market-growth-object::after { content:""; position:absolute; z-index:2; left:-6%; right:-6%; bottom:-1px; height:20px; background:url('../images/farm/market/panel-ground-v2.svg') center/100% 100% no-repeat; pointer-events:none; }
.market-growth-object > .market-art { position:relative; z-index:1; }
.market-art-clock { background-position:0% 0%; width:86px; height:86px; }
.market-art-calendar { width:76px; height:76px; background-image:url('../images/farm/market/calendar-v1.webp'); background-size:100% 100%; background-position:center; border-radius:10%; }
.market-art-basket { background-position:var(--basket-x) var(--basket-y); width:94px; height:94px; }
.market-growth-vine { position:absolute; bottom:2px; left:0; width:100%; height:14px; z-index:0; pointer-events:none; }
.market-growth-arrow { position:absolute; z-index:2; top:41px; width:12px; height:17px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M3 3L9 9L3 15' fill='none' stroke='%2376a93d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; pointer-events:none; }
.market-growth-arrow-first { left:30%; }
.market-growth-arrow-last { left:61%; }
.market-panel-yield { grid-template-columns:1.06fr 1fr 1.24fr; border:0; background:none; border-radius:0; gap:4px; overflow:visible; }
.market-panel-yield > div { padding:7px 3px 6px; border:1px solid #ddbb6a; border-radius:13px; background:linear-gradient(#fffbe1,#ffefb0); box-shadow:inset 0 1px #fffdf0,0 2px 1px #b3944233; }
.market-panel-yield > div + div { border-left:1px solid #ddbb6a; }
.market-panel-yield dt { font-size:clamp(10px,2.8vw,12px); line-height:1.25; color:#67532a; }
.market-panel-yield dd { position:relative; margin:4px 0 0; height:20px; font:900 clamp(13px,3.8vw,17px)/20px Arial,sans-serif; color:#16783d; font-variant-numeric:tabular-nums; letter-spacing:-.25px; white-space:nowrap; }
.market-panel-yield dd small { margin-left:2px; font-size:9px; letter-spacing:0; }
[data-market-fit] { position:relative; min-width:0; white-space:nowrap; }
[data-market-fit] > span { position:absolute; left:50%; width:max-content; white-space:nowrap; transform:translateX(-50%); transform-origin:center; }
.market-purchase-panel .fruit-market-action { margin-top:5px; gap:4px; }
.market-price-row { display:flex; align-items:center; min-width:0; height:32px; }
.market-purchase-panel .fruit-market-price { flex:1; min-width:0; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr); gap:5px; height:26px; margin:0; padding:3px 7px; border:1px solid #b88131; border-radius:9px; background:linear-gradient(#e5b866,#f6d48f 47%,#dca758); box-shadow:inset 0 1px #fff2bb,0 2px 0 #9b652c; }
.market-purchase-panel .fruit-market-price small { align-self:center; white-space:normal; overflow-wrap:anywhere; line-height:1.05; font-size:9px; color:#65401d; }
.market-purchase-panel .fruit-market-price strong { align-self:center; height:19px; line-height:19px; font-size:clamp(13px,4vw,18px); background:#ffe6a7; border-radius:7px; white-space:nowrap; }
.market-purchase-panel .fruit-market-action-buttons { gap:6px; }
.market-purchase-panel .fruit-market-action-buttons > button { min-height:44px; padding:7px 4px; font-size:clamp(12px,3.6vw,15px); font-weight:700; border-radius:15px; }
@media (max-width:350px) {
    .market-purchase-panel { padding-inline:7px; }
    .market-growth-art { height:98px; }
    .market-art-clock { width:76px; height:76px; }
    .market-art-calendar { width:66px; height:66px; }
    .market-art-basket { width:84px; height:84px; }
    .market-growth-arrow { top:40px; transform:scale(.9); }
    .market-panel-yield { gap:3px; }
    .market-panel-yield dt { font-size:9px; letter-spacing:-.1px; }
}