/** Shopify CDN: Minification failed

Line 124:0 Expected "}" to go with "{"

**/
/* qog-3col.css - the three-column standard's PINNED columns (photo, title and pickers),
   their release at the end-of-ordering line, the first-screen fit, the short-value chip
   grid and the wrapping ladder line. Split out of sections/quick-order-grid.liquid on
   2026-09-05 because that file had reached 255.0 KiB of Shopify's 256 KiB per-file
   ceiling and a 271 KiB push was rejected outright. Every rule below is scoped to
   .qog-3col, so a page that is not on the three-column layout is untouched whether this
   loads or not. It is linked from the section AFTER that section's own <style>, so where
   the two set the same property at the same specificity this one wins on document order
   - which is exactly what the un-stick rules in there need. */
/*
  ============ COLUMNS 1 AND 2 ARE PINNED ============
  Yogi 2026-09-05: "Make Column 1 & 2 sticky. So Title, Image & all the selection is visible
  all the time."
  MEASURED FIRST, live at 1280x800 on the base theme: .qog-img and .qog-rails both reported
  position:static. The UN-STICK EVERYTHING block earlier in this file is what put them there
  and is still right for the other elements it names, so it is not edited - these two are
  restated later at the same specificity and win on source order.
  It works because each is a grid ITEM, so its containing block is its own grid AREA - rows
  1..6 (1..8 in card mode) for the photo, 2..6 (2..8) for the rails - and each travels down
  inside the area it already owns, stopping where .qog-below starts. MEASURED, not assumed: no
  ancestor from .qog-rails to <html> has overflow other than visible, and none carries a
  transform, filter, contain or perspective; any one would have made this silently do nothing.
  THE TOP OFFSET IS MEASURED, NEVER TYPED - see --qog-pin in the script.
  OFF IN THE STACKED LAYOUT: the block is min-width:1060px, the exact complement of the
  max-width:1059px stack, so below it the original rules stand untouched.
  IT CANNOT COVER ANYTHING: z-index 3 and 4 against 60 on the Add-to-cart bar and 9999 on the
  zoom overlay, and it starts BELOW whatever is covering the top of the window.
*/
@media(min-width:1060px){
  .qog.qog-3col .qog-img{position:sticky;top:calc(var(--qog-pin,0px) + 14px);z-index:3}
  .qog.qog-3col .qog-rails{position:sticky;top:calc(var(--qog-pin,0px) + 14px);z-index:4}
  .qog.qog-3col.qog-cards-on .qog-hdstart{position:sticky;top:calc(var(--qog-pin,0px) + 14px)}
/*
  ============ COLUMN 2 FITS THE FIRST SCREEN ============
  Yogi: "Column 2 should fit vertically in the first screen without scrolling."
  MEASURED at 1280x800: rails are 637px on the belt, 344 on the 303, 293 on the 301; the site
  header holds 0px while the block is pinned (its section is sticky with top:auto, so it never
  pins) and the Add-to-cart bar holds 72px once it appears. 800-0-72-28 = 700. Everything
  fits, so NOTHING is trimmed. At 1280x720 the same sum is 620 and the belt's 637 does not, so
  the LIST inside rail 1 - and only the list - scrolls, keeping the photo, the title and both
  rail labels pinned. The trigger is the measured overflow, never a product name.
  THE OVERFLOW IS ON THE CHIP LIST, NEVER ON .qog-rails: an overflow ancestor is a scroll
  container and the arrows deliberately overhang the bands they sit in. Neither is in here.
*/
  .qog.qog-3col .qog-rails.qog-c2fit .qog-bar[data-rail="1"] .qog-chips{
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-right:5px}
}
/*
  ============ A SHORT VALUE DOES NOT NEED A WHOLE ROW ============
  Card mode gives rail 1 one value per ROW. On the belt that is right - its widest label
  MEASURED 154px against a 248px rail. On the Pro-Slicer the same rule printed 4", 6", 8", 10"
  and All down five full-width rows; LOOKED AT in the 1280x800 render, not deduced.
  So the arrangement is decided the way the blades' rail already decides it: by fitchips(),
  from the widest label the product actually has, at the rail's own measured width, refusing
  to squeeze a chip below 45px. All that is added is the class it sets when the answer is more
  than one column. A product whose values are too long never gets the class and keeps its rows
  - which is why the belt does not move and why nothing here is keyed to a product name.
  min-height:48px is inherited from the row rule above and NOT restated, so every chip stays a
  48px tap target in either arrangement.
*/
.qog.qog-3col.qog-cards-on .qog-rails [data-rail="1"] .qog-chips.qog-chipgrid{
  display:grid;grid-template-columns:repeat(var(--qog-chipcols,3),minmax(0,1fr));gap:7px}
.qog.qog-3col.qog-cards-on .qog-rails .qog-chipgrid .qog-chip.qog-srow{
  width:auto;margin:0;padding:7px 8px;text-align:center;align-items:center;font-size:19px}
.qog.qog-3col.qog-cards-on .qog-rails .qog-chipgrid .qog-chip.qog-srow .qog-srb{
  text-overflow:clip;text-align:center}
/*
  ============ THE LADDER LINE HAS TO BE ABLE TO WRAP ============
  MEASURED at a 320px layout viewport, on the BASE theme's belt before any of this work:
  the second rung "Buy 50 save 20%" ended at x=372 in a 320px window - 52px outside it. On the
  Pro-Slicer, which has three rungs instead of two, the third ended at 510: 190px outside.
  It is NOT the nowrap on each rung that does it. The rungs and the middots are appended as
  elements with NO whitespace between them, and a line can only break at a soft-wrap
  opportunity - which whitespace is. With none, the whole line is one unbreakable run and it
  overflows in silence: every rung reports its own width happily and nothing is clipped.
  Making the line a wrapping FLEX row gives the break opportunity between the items instead of
  inside them, so each rung stays on one line and the LINE wraps. The middot keeps its own
  margins, so at a width where it already fitted nothing moves - which is every width the two
  blades and the belt are actually read at.
*/
.qog.qog-3col.qog-cards-on .qog-dbox .l1{display:flex;flex-wrap:wrap;align-items:baseline;
  column-gap:0;row-gap:2px}
/*
  BELT AND BRACES for the rule above: fitchips() will not put a GROUPED rail into the grid at
  all, but if one ever did get there, a group heading is a heading and must own a whole row.
*/
.qog.qog-3col.qog-cards-on .qog-rails .qog-chipgrid .qog-grp{grid-column:1 / -1}
/*
  ============ THE TITLE JOINS THE PINNED SET ============
  Yogi 2026-09-05: "The TITLE sticks as well ... title, spec line and the free-shipping badge."
  .qog-hd is exactly that block - .qog-hdtitle holds the h1 and its spec line, .qog-hdmsg the
  badge and its red note - so the whole thing is pinned, not a new element beside it.

  IT NEEDS NO GRID SPAN, AND THAT WAS WORTH MEASURING. A sticky box travels inside its
  CONTAINING BLOCK, and for a grid item that is NOT the grid area: MEASURED on the Pro-Slicer,
  .qog-img spans rows 1/8 whose bottom is document y 853.6, and it travelled to 1096.6 - the
  content box of .qog-wrap. So the title stays on grid-row 1 exactly where it was, keeps
  sizing that row, and still travels the whole block. A first cut spanned it instead, which
  collapsed row 1 (nothing else sizes it) and needed a measured track to put back; all of that
  is gone.

  THE RAILS AND THE START HERE PILL MOVE DOWN BY EXACTLY ONE ROW so they pin UNDER the title
  instead of behind it. --qog-hdrow is the title's own height plus the margin that belongs to
  its row, measured, so the gap when pinned is the gap on arrival and not a typed number.

  IT IS OPAQUE AND IT DRAWS OVER COLUMN 3. The title spans columns 2 to 4, so once it is
  pinned the price cards pass underneath it. --s1 is a plain rgb(), and z-index 35 clears
  .qog-mini's 30; it stays under the Add-to-cart bar's 60 and the zoom overlay's 9999.

  ALL OF IT IS GATED ON A CLASS THE SCRIPT ADDS, and the script writes --qog-hdrow before it
  adds the class. No script, no class, no sticky title, and the header is what it is today.
*/
@media(min-width:1060px){
  .qog.qog-3col.qog-hdstick .qog-meta>.qog-hd{position:sticky;
    top:calc(var(--qog-pin,0px) + 14px);z-index:35;background:var(--s1)}
  .qog.qog-3col.qog-hdstick .qog-rails{top:calc(var(--qog-pin,0px) + 14px + var(--qog-hdrow,0px))}
  .qog.qog-3col.qog-cards-on.qog-hdstick .qog-hdstart{
    top:calc(var(--qog-pin,0px) + 14px + var(--qog-hdrow,0px))}
