/* Bundles you partly own, or already have in the cart (study started 5 October 2026; round nine). Loaded by
   compare/bundle-overlap-live.html and, since 6 October 2026, by the shop: on a phone the chosen rows, card and press are its own since 7 October 2026. Every rule starts from the study's own classes (.ov, .ov-card).
   The list carries .ov; each row carries its own design (see below).
   Phone rules only so far: the designs are made at 390px wide and checked at 320px. */

/* Round thirty-nine, 7 October 2026 ("separate the UI decisions for own it styling, in bundle styling"): every rule
   below is on the row itself, so a sheet you own and a sheet a bundle brings can each have any design in one list.
   The list carries .ov; a row carries .ov-row, its state (.ov-owned, .ov-covered) and its design's classes:
   .ovd-low    the name runs the full width, the badge sits under it beside the facts (116 by 36)
   .ovd-own    with .ovd-low: "You own it" in green inside a green line, over a "Download" link
   Counted, Counted badge, Sunk in and the numbered badges were deleted on 7 October 2026 ("we sorted"). */
:is(#shopResults,#sheetStudy) .ov .ov-row .icon{flex:none}
/* "Learn more" stays on every row (7 October 2026: "put the learn more back in to the main website"). A restyled row
   is at least as tall as a row for sale (114px). */
:is(#shopResults,#sheetStudy) .ov .product-row.ovd-low{min-height:114px;box-sizing:border-box;align-items:center}
/* A row a bundle brings arrives in turn when the bundle is pressed on this page. */
@keyframes ov-turn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
 :is(#shopResults,#sheetStudy) .ov-sweep .ov-covered .ov-pop{animation:ov-turn .28s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(var(--turn)*70ms + 60ms)}
}

/* ---- The badge: the price and the button give way to one small card. Dark green with the bundle's sign when a
   bundle brings the sheet; outlined when owned ---- */
:is(#shopResults,#sheetStudy) .ov .ov-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:84px;min-height:76px;box-sizing:border-box;padding:8px 6px;border-radius:14px;border:1px solid transparent;font:600 14px/1.2 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer}
:is(#shopResults,#sheetStudy) .ov .ov-badge .icon{width:22px;height:22px}
:is(#shopResults,#sheetStudy) .ov .ov-covered .ov-badge{background:var(--forest);color:#fff}
/* Owned: the same shape outlined, with a green tick and the words in dark green (never grey). */
:is(#shopResults,#sheetStudy) .ov .ov-owned .ov-badge{background:#fff;border-color:var(--line-strong);color:var(--forest);font-weight:600;gap:4px}
:is(#shopResults,#sheetStudy) .ov .ov-owned .ov-badge .icon{color:var(--green);stroke-width:2.6}
/* Under the name (round twenty, "theres a better way to do it so we can give it more width and size, push it lower"): the
   name takes the row's full width; the badge moves down to the facts' line, on the right, so it can be wide (116 by 36)
   without taking anything from the name. The link sits under the facts, with the badge centred beside the two lines. */
:is(#shopResults,#sheetStudy) .ov .product-row.ovd-low{grid-template-columns:minmax(0,1fr) auto;column-gap:11px;row-gap:0;align-content:center}
:is(#shopResults,#sheetStudy) .ov .ovd-low>div:not(.product-bottom){display:contents}
:is(#shopResults,#sheetStudy) .ov .ovd-low .product-title{grid-column:1/-1;grid-row:1}
:is(#shopResults,#sheetStudy) .ov .ovd-low .product-meta{grid-column:1;grid-row:2;align-self:center}
:is(#shopResults,#sheetStudy) .ov .ovd-low .product-bottom{grid-column:2;grid-row:2/4;align-self:center}
:is(#shopResults,#sheetStudy) .ov .ovd-low .product-more{grid-column:1;grid-row:3;justify-self:start}
:is(#shopResults,#sheetStudy) .ov .ovd-low .ov-badge{position:relative;flex-direction:row;width:auto;min-width:116px;min-height:36px;padding:0 14px;border-radius:10px;gap:7px;font-size:14px}
:is(#shopResults,#sheetStudy) .ov .ovd-low .ov-badge::after{content:"";position:absolute;inset:-4px 0}
:is(#shopResults,#sheetStudy) .ov .ovd-low .ov-badge .icon{width:16px;height:16px}
/* You own it (picked 7 October 2026, "Outline, green words"): white, a line in the shop's green, and the words in that
   same green. The owner: "branded, minimal and stands out of the way without being invisible, coz visual weight has to
   be given to what they DONT own". Since round thirty-nine its sign is a tick, the badge is only a sign and is not
   pressed, the name is faint, and the link under the facts is the word "Download" with no icon. */
:is(#shopResults,#sheetStudy) .ov .ovd-own .ov-badge{background:#fff;border:1.5px solid var(--green);color:var(--green);gap:7px;padding:0 12px}
:is(#shopResults,#sheetStudy) .ov .ovd-own .product-title{color:var(--muted);opacity:.75}
:is(#shopResults,#sheetStudy) .ov .ov-badge.ov-still{cursor:default}
:is(#shopResults,#sheetStudy) .ov .ov-badge.ov-still::after{content:none}

/* ---- The Cards view, round fifty-three. Badge at the foot: the same two badges as the list, each the width of its
   card and 40px tall, where the price and the button were. The card's size and its other parts are the shop's. ---- */
:is(#shopResults,#sheetStudy) .ov .ovg-foot .ov-badge{position:relative;flex-direction:row;width:100%;min-height:44px;padding:0 10px;border-radius:10px;gap:7px;font-size:14px}
:is(#shopResults,#sheetStudy) .ov .ovg-foot .ov-badge .icon{width:16px;height:16px}
:is(#shopResults,#sheetStudy) .ov .ovg-foot.ov-owned .ov-badge{background:#fff;border:1.5px solid var(--green);color:var(--green)}
:is(#shopResults,#sheetStudy) .ov .ovg-foot.ov-owned .product-title{color:var(--muted);opacity:.75}

/* ---- A laptop, round fifty-four. Carried over: in the List view the row keeps its shape (name and facts on the
   left) and the same badge takes the place of the price and button on the right, 132 by 40. ---- */
:is(#shopResults,#sheetStudy) .ov .ovd-side .ov-badge{position:relative;flex-direction:row;width:140px;min-height:44px;padding:0 14px;border-radius:10px;gap:7px;font-size:14px}
:is(#shopResults,#sheetStudy) .ov .ovd-side .ov-badge .icon{width:16px;height:16px}

/* A phone's card the bundle brings: the price and button it had keep their room, unseen, and the badge lies over them
   along the foot's lower edge (see the script). */
#shopResults .ov .ovg-foot.ov-covered .product-bottom{position:relative}
#shopResults .ov .ovg-foot .ov-room{display:contents;visibility:hidden}
#shopResults .ov .ovg-foot.ov-covered .ov-badge{position:absolute;left:0;right:0;bottom:0;width:auto}

/* A laptop's Cards view is drawn by sheet-studies.js in #sheetStudy, outside #shopResults, with its own names for a
   card's parts; the rules above reach it through :is(#shopResults,#sheetStudy). What is its own: */
#sheetStudy .ov .ovg-foot.ov-owned .ss-title{color:var(--muted);opacity:.75}
#sheetStudy .ss-hero.ov-c-ring{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--green)}
#sheetStudy .ss-hero-save.ov-cap{display:flex;align-items:center;gap:6px;font-weight:600;color:#fff}
#sheetStudy .ss-hero-save.ov-cap .icon{width:16px;height:16px;stroke-width:2.6;flex:none}
/* The mark on a laptop starts darker (#0a4a2b), so its step brighter is #0e5e34: the same step as on a phone. */
#sheetStudy .ss-hero.ov-ck-ring-up .ss-hero-mark{background-color:#0e5e34}
html #shopResults .subject-bundle.ov-pc.ov-ck-ring-up.ov-ck-ring-up.ov-ck-ring-up.ov-ck-ring-up .bundle-glyph{background-color:#0e5e34}
@keyframes ov-mark-up-pc{from{background-color:#0a4a2b}}
@media(prefers-reduced-motion:no-preference){
 #sheetStudy .ss-hero.ov-card-draw.ov-ck-ring-up .ss-hero-mark,
 #shopResults .ov-pc.ov-card-draw.ov-ck-ring-up .bundle-glyph{animation:ov-mark-up-pc .12s ease-out both}
}

/* The card under a Smart Bundle: the caption a little larger than the shop's, since it carries the reason. */
#shopResults .ov-card .bundle-caption{font-size:14px}
#shopResults .ov-card .button .icon{width:18px;height:18px}

/* ---- The bundle's card when it is in the cart. One surface each; the size and the parts stay. ---- */
/* Nothing changes size when a bundle is added (the owner, 7 October 2026: "cards and sizes of stuff must not change
   when the in bundle thing etc comes"). The caption keeps the shop's own type size; a badge in a card is 44px tall, the
   height of the Add button it replaces; at the right of a laptop's row it is 140 by 44, the room the price and button
   took; and a phone's row keeps the shop's own spacing between its lines. Measured before and after in each view. */
#shopResults .ov-card-on .bundle-caption{display:flex;align-items:center;gap:6px;font-weight:600}
#shopResults .ov-card-on .bundle-caption .icon{width:16px;height:16px;stroke-width:2.6;flex:none}

/* ---- Ringed (round three of the card in the cart) ---- */
/* Ringed: the card stays dark green; a bright green ring round it with a white gap, as a chosen option has. */
#shopResults .ov-c-ring{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--green)}
#shopResults .ov-c-ring .bundle-caption{color:#fff}

/* The mark, settled 7 October 2026 ("We settled these fhings for ring"): Brighter. Every other treatment of the mark is
   deleted. Rounds forty-nine and fifty ("maybe lets keep it simple and just slightly make it bright, small micro
   animation, thats it"; then "micro animation feels glitchy. why it is blinking, just make it come on smoothly and then
   stay one"). While the bundle is in the cart the mark is one step lighter, #1b6039 for #174c30, flat. On the press it
   comes on in 0.12s, almost at once, and stays (round fifty-one: "it must be almost instantly in, not slow
   animation"; it was 0.7s). No lift past the resting colour and no repeat: the first version went
   brighter and fell back, and the preview played it again every few seconds, which is what blinked.
   The class is repeated so this outranks the shop's own colour for the mark without being forced: a forced colour
   would also outrank the animation, and the fade would never be seen. */
html #shopResults .subject-bundle.ov-ck-ring-up.ov-ck-ring-up.ov-ck-ring-up.ov-ck-ring-up .bundle-glyph{background-color:#1b6039}
@keyframes ov-mark-up{from{background-color:#174c30}}
@media(prefers-reduced-motion:no-preference){
 #shopResults .ov-card-draw.ov-ck-ring-up .bundle-glyph{animation:ov-mark-up .12s ease-out both}
}
}
/* ---- A press on "In bundle" (decided 7 October 2026: Dip): the badge sinks, fades and springs back, as a button does
   when it will not go. The toast is the shop's. With motion turned off the badge does not move; the toast still says it. ---- */
@keyframes ov-dip{0%{transform:none;opacity:1}30%{transform:scale(.92);opacity:.6}65%{transform:scale(1.03);opacity:1}100%{transform:none}}
@media(prefers-reduced-motion:no-preference){
 /* Stronger than the arriving-in-turn rule above, which a just-added bundle still has on its rows. */
 :is(#shopResults,#sheetStudy) .ov .ov-row .ov-no.ov-no{animation:ov-dip .36s cubic-bezier(.3,.7,.3,1) 0s both}
}
#toastHost .ov-toast .icon{width:18px;height:18px}