/* Shopping section: a subject's sheets grouped by topic (study started 15 October 2026). Loaded only by
   compare/shop-topics-live.html, never by the shop. Every rule starts from html[data-tp] so nothing reaches the rest.
   Phone rules (made at 390px wide, checked at 320). html[data-tp-v] is the version: base (round one's Folders), mint,
   cards, soft, plain. Round one's Headings and Topics first were deleted at the owner's word (their rules with them). */
html[data-tp] #shopResults [data-tp-hide]{display:none!important}
/* The topic is said by the folder, so a row does not repeat it after its pages. */
html[data-tp].tp-on #shopResults .product-list .product-meta>span+span{display:none}

/* ---- The folder row, every version ---- */
html[data-tp] .tp-fold{display:grid;grid-template-columns:44px minmax(0,1fr) 24px;align-items:center;column-gap:14px;width:100%;min-height:84px;padding:12px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* The folder's picture has the same thin frame as a sheet's cover in its row (shoppage-studies.css, .sp-cover). */
html[data-tp] .tp-fold-cover{display:block;width:44px;border:1px solid var(--line-strong);border-radius:4px;background:#fff;box-sizing:border-box}
html[data-tp] .tp-fold-cover .pg{display:block;width:100%;border-radius:3px}
html[data-tp] .tp-fold-words{display:flex;flex-direction:column;gap:3px;min-width:0}
html[data-tp] .tp-fold-words b{font:600 19px/1.25 var(--serif)}
html[data-tp] .tp-fold-words small{font-size:15px;color:var(--muted)}
html[data-tp] .tp-fold-mark{display:grid;place-items:center;color:var(--green)}
html[data-tp] .tp-fold-mark .icon{width:22px;height:22px;transition:transform .2s var(--ease)}
html[data-tp] .tp-fold.is-open .tp-fold-mark .icon{transform:rotate(180deg)}

/* ---- Folders, as round one drew it (base) ---- */
/* The dark line under the open topic runs from one edge of the screen to the other, as its sheets' grey band does
   (the owner, round three: "make the dark horizontal separator end to end"). */
html[data-tp-v="base"] .tp-fold{position:relative}
html[data-tp-v="base"] .tp-fold.is-open{border-bottom-color:transparent}
html[data-tp-v="base"] .tp-fold.is-open::after{content:"";position:absolute;left:-20px;right:-20px;bottom:-1px;height:1px;background:var(--ink)}
html[data-tp-v="base"] #shopResults .product-list>.product-row:not([data-tp-hide]){background:var(--soft);margin:0 -20px;padding-left:20px;padding-right:20px}
html[data-tp-v="base"] #shopResults .product-list>.tp-fold:first-child{border-top:1px solid var(--line)}

/* ---- Mint block: the open topic is one pale mint block, round at its top and foot ---- */
html[data-tp-v="mint"] #shopResults .product-list>.tp-fold:first-child{border-top:1px solid var(--line)}
html[data-tp-v="mint"] .tp-fold.is-open{margin-top:10px;padding:12px 14px;border-bottom:1px solid var(--mint-deep);border-radius:14px 14px 0 0;background:var(--mint)}
html[data-tp-v="mint"] .tp-fold.is-open:first-child{border-top-color:transparent}
html[data-tp-v="mint"] #shopResults .product-list>.product-row:not([data-tp-hide]){padding-left:14px;padding-right:14px;background:var(--mint);border-bottom-color:var(--mint-deep)}
html[data-tp-v="mint"] #shopResults .product-list>.product-row[data-tp-last]{margin-bottom:10px;border-bottom:0;border-radius:0 0 14px 14px}
html[data-tp-v="mint"] #shopResults .product-list>.product-row:not([data-tp-hide]) .small-button{background:#fff}

/* ---- Cards: every topic a white card with a fine outline; the open card holds its sheets ---- */
html[data-tp-v="cards"] .tp-fold{margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}
html[data-tp-v="cards"] .tp-fold.is-open{border-radius:14px 14px 0 0}
html[data-tp-v="cards"] #shopResults .product-list>.product-row:not([data-tp-hide]){padding-left:14px;padding-right:14px;border:1px solid var(--line);border-top:0;background:#fff}
html[data-tp-v="cards"] #shopResults .product-list>.product-row[data-tp-last]{border-radius:0 0 14px 14px}

/* ---- Soft ground: the list on a light grey ground; each topic a white card on it, no outline ---- */
html[data-tp-v="soft"] #shopResults .product-list{margin:4px -20px 0;padding:6px 20px 16px;background:var(--soft)}
html[data-tp-v="soft"] .tp-fold{margin-top:10px;padding:12px 14px;border:0;border-radius:14px;background:#fff}
html[data-tp-v="soft"] .tp-fold.is-open{border-radius:14px 14px 0 0;border-bottom:1px solid var(--line)}
html[data-tp-v="soft"] #shopResults .product-list>.product-row:not([data-tp-hide]){padding-left:14px;padding-right:14px;background:#fff}
html[data-tp-v="soft"] #shopResults .product-list>.product-row[data-tp-last]{border-bottom:0;border-radius:0 0 14px 14px}

/* ---- Plain: no ground and no box; the open topic's name turns green ---- */
html[data-tp-v="plain"] #shopResults .product-list>.tp-fold:first-child{border-top:1px solid var(--line)}
html[data-tp-v="plain"] .tp-fold.is-open b{color:var(--green)}
html[data-tp-v="plain"] .tp-fold.is-open small{color:var(--ink)}
html[data-tp-v="plain"] #shopResults .product-list>.product-row[data-tp-last]{border-bottom:1px solid var(--line)}

/* ---- Round four: versions of As drawn first. The line under the open topic, and how the open topic looks. ---- */
html[data-tp-act="dim"] .tp-fold.is-open::after{background:var(--line-strong)}
/* The phone's pick (Dimmer line): no line between the bundle card and the first topic (the owner: "remove the exxtra line
   below the hero bundle"). */
html[data-tp-act="dim"] #shopResults .product-list>.tp-fold:first-child{border-top:0}
html[data-tp-act="green"] .tp-fold.is-open::after,html[data-tp-act="frame"] .tp-fold.is-open::after,html[data-tp-act="pill"] .tp-fold.is-open::after{background:var(--mint-deep)}
html:is([data-tp-act="green"],[data-tp-act="frame"],[data-tp-act="pill"]) .tp-fold.is-open b{color:var(--green)}
html:is([data-tp-act="green"],[data-tp-act="frame"]) .tp-fold.is-open small{color:var(--green)}
/* Green frame: the picture's frame turns green and a little heavier (two pixels, drawn inside so nothing moves). */
html[data-tp-act="frame"] .tp-fold.is-open .tp-fold-cover{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
/* Count pill: the count in a pale green pill; the arrow in a pale green circle. */
html[data-tp-act="pill"] .tp-fold-words small{align-self:flex-start}
html[data-tp-act="pill"] .tp-fold.is-open .tp-fold-words small{padding:3px 10px;border-radius:999px;background:var(--mint);color:var(--forest);font-size:14px;font-weight:600}
html[data-tp-act="pill"] .tp-fold.is-open .tp-fold-mark{width:32px;height:32px;margin-left:-4px;border-radius:50%;background:var(--mint)}
html[data-tp-act="pill"] #shopResults .product-list>.tp-fold{grid-template-columns:44px minmax(0,1fr) 28px}

/* ---- Round seven: what a folder's picture is. ---- */
/* No picture: the name and count take the room the picture had. */
html[data-tp-pic="none"] #shopResults .product-list>.tp-fold{grid-template-columns:minmax(0,1fr) 24px;min-height:76px}
/* No picture · padded: the words set in by the depth of the bundle card's rounded corner (its radius is 14px; the curve bends
   in about 4 to 6px), the arrow keeps its place at the right. The owner, round eight: "padding too drastic, padded from
   the curve of the hero card" (16px was the first try). */
html[data-tp-pad] #shopResults .product-list>.tp-fold{padding-left:6px}
/* Drawn mark: a line drawing for the topic, in green on the shop's pale mint, the size the picture had. */
html[data-tp-pic="mark"] .tp-fold-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--mint)}
html[data-tp-pic="mark"] .tp-fold-icon svg{width:30px;height:30px;fill:none;stroke:var(--green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* A small phone's page edge is 16px, not 20px: a ground reaches that edge and no further. */
@media(max-width:350px){
 html[data-tp-v="base"] #shopResults .product-list>.product-row:not([data-tp-hide]){margin:0 -16px;padding-left:16px;padding-right:16px}
 html[data-tp-v="base"] .tp-fold.is-open::after{left:-16px;right:-16px}
 html[data-tp-v="soft"] #shopResults .product-list{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
 html[data-tp-v="mint"] #shopResults .product-list>.product-row:not([data-tp-hide]),html[data-tp-v="cards"] #shopResults .product-list>.product-row:not([data-tp-hide]),html[data-tp-v="soft"] #shopResults .product-list>.product-row:not([data-tp-hide]){padding-left:12px;padding-right:12px}
 html[data-tp-v]:not([data-tp-v="base"]):not([data-tp-v="plain"]) .tp-fold{padding-left:12px;padding-right:12px}
}

/* ---- Laptop (wider than 600px, made at 1366 by 657). The list is the shop's two columns inside its outline. ---- */
@media(min-width:601px){
 /* Folders: a topic's row takes the list's full width; the open topic's sheets fill the two columns under it. */
 html[data-tp="folders"] #shopResults .product-list>.tp-fold:not(.tp-fill){grid-column:1/-1;min-height:76px;padding:14px 24px;column-gap:16px;border-bottom:1px solid var(--line)}
 html[data-tp="folders"] .tp-fold-words b{font-size:20px}
 html[data-tp="folders"] .tp-fold:hover b{color:var(--green)}
 /* The line under the open topic is the phone's pick, Dimmer line (round five). */
 html[data-tp="folders"].tp-on #shopResults .product-list>.tp-fold.is-open{border-bottom-color:var(--line-strong)}
 html[data-tp="folders"].tp-on #shopResults .product-list>.product-row:not([data-tp-hide]){background:var(--soft)}
 /* Folders with covers: the closed topic's first six covers, apart, before the arrow. */
 html[data-tp-v="pccovers"] #shopResults .product-list>.tp-fold{grid-template-columns:44px minmax(0,1fr) auto 24px}
 html[data-tp-v="pccovers"] .tp-fold-strip{display:flex;gap:8px}
 html[data-tp-v="pccovers"] .tp-fold-strip>span{display:block;width:34px;border:1px solid var(--line);border-radius:3px;background:#fff;overflow:hidden}
 html[data-tp-v="pccovers"] .tp-fold-strip .pg{display:block;width:100%}
 html[data-tp-v="pccovers"] .tp-fold.is-open .tp-fold-strip{visibility:hidden}

 /* Topic tabs: the topics in a row above the list, the chosen one filled, as the grade buttons are. */
 html[data-tp="tabs"] .tp-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px}
 html[data-tp="tabs"] .tp-tabs button{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--ink);font:600 15px/1 var(--sans);cursor:pointer}
 html[data-tp="tabs"] .tp-tabs button small{font-size:13px;color:var(--quiet)}
 html[data-tp="tabs"] .tp-tabs button:hover{border-color:var(--green)}
 html[data-tp="tabs"] .tp-tabs button[aria-pressed="true"]{border-color:var(--forest);background:var(--forest);color:#fff}
 html[data-tp="tabs"] .tp-tabs button[aria-pressed="true"] small{color:#ffffffb3}
 /* The cell that closes an open topic's half-empty last row (round six). It sits on the same grey band as the sheets. */
 html[data-tp-fill] #shopResults .product-list>.tp-fill{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;min-height:100%;padding:12px 24px;border:0;border-bottom:1px solid var(--line);background:var(--soft);color:var(--ink);font:inherit;text-align:left}
 html[data-tp-fill="next"] #shopResults .product-list>.tp-fill,html[data-tp-fill="close"] #shopResults .product-list>.tp-fill{cursor:pointer}
 html[data-tp-fill="next"] .tp-fill small{font-size:14px;color:var(--muted)}
 html[data-tp-fill="next"] .tp-fill b{font:600 20px/1.25 var(--serif)}
 html[data-tp-fill="next"] .tp-fill span{display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:600;color:var(--green)}
 html[data-tp-fill="next"] .tp-fill:hover b{color:var(--green)}
 html[data-tp-fill="close"] #shopResults .product-list>.tp-fill{flex-direction:row;justify-content:center;align-items:center;gap:8px;color:var(--green);font-size:16px;font-weight:600}
 html[data-tp-fill="close"] .tp-fill-up{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line-strong);border-radius:50%;background:#fff}
 html[data-tp-fill="close"] .tp-fill:hover .tp-fill-up{border-color:var(--green)}
 html[data-tp-fill] .tp-fill .icon{width:18px;height:18px}
}

/* ---- Round nine (16 October 2026): more room between the bundle card and the first topic. Today it is 6px (the bundle
   card's own margin; the folder's margin folds into it, so each figure below is the whole gap). ---- */
html[data-tp-gap="14"] #shopResults .product-list>.tp-fold:first-child{margin-top:14px}
html[data-tp-gap="20"] #shopResults .product-list>.tp-fold:first-child{margin-top:20px}
html[data-tp-gap="28"] #shopResults .product-list>.tp-fold:first-child{margin-top:28px}