/* STICKY SLIP */
  .quote-slip{
    position:sticky;
    /* Was a hardcoded 84px, which only matched the header's height before
       the white mini-cart-bar appears. Once items are in the cart that bar
       adds height to the sticky <header>, and 84px was too small — it let
       the panel slide up underneath the header, hiding the stepper. Using
       the real live header height (tracked in js/ui.js) keeps it correct
       whether the mini-cart-bar is showing or not. */
    top:calc(var(--header-h, 150px) + 12px);
    /* "Review & Submit" / the cart icon both call scrollIntoView() on this
       panel. Without this, the browser scrolls its top flush to the very
       top of the viewport — but the sticky header still renders on top of
       that, covering the first ~150-250px, which is exactly where the
       stepper lives. This tells scrollIntoView to stop short by the
       header's real height instead. */
    scroll-margin-top:var(--header-h, 150px);
    background:var(--white);border-radius:10px;padding:22px 22px 26px;
    border:1px solid var(--line);
    border-top:4px solid var(--green);
    display:flex;flex-direction:column;
    min-height:0; /* .quote-slip is also a CSS Grid item — grid items default
       to min-height:auto (content-sized), which can win over height/max-height
       unless overridden. */
    max-width:100%;
    /* No height cap by default — see .is-stuck below for why. */
  }
  /* A sticky element only actually needs a capped, internally-scrolling
     height once it's TRULY stuck (pinned at `top`). Before that — e.g. the
     page is scrolled near the top and the panel is still sitting in its
     normal flow position below the search/heading content above it — it's
     still part of the ordinary page flow, so it can just render at its
     natural content height with no cap at all; the page itself scrolls
     normally. A fixed height computed as "viewport minus header" is only
     correct once the panel is flush against the header — applying it
     unconditionally either overflows past the viewport (while unstuck and
     sitting lower than assumed) or crushes the content down to nothing
     (once corrected for that lower position). js/ui.js adds/removes
     .is-stuck by checking the panel's actual on-screen position. */
  .quote-slip.is-stuck{
    height:var(--slip-max-h, 600px);
    overflow:hidden;
  }
  .quote-slip *{min-width:0;} /* prevents form controls' intrinsic width from forcing horizontal overflow in flex/grid rows */
  .quote-slip h3{flex-shrink:0;font-family:'IBM Plex Mono';font-size:.97rem;letter-spacing:.03em;text-transform:uppercase;border-bottom:1px dashed var(--line);padding-bottom:12px;font-weight:600;color:var(--ink);}

  /* Each step panel is its own flex column: a scrollable content area on
     top, and a footer (total / Continue / Submit) that's a normal
     flex-shrink:0 block — never inside the scrolling region, so it can
     never be scrolled out of view no matter how long the item list or
     form gets. The flex:1/min-height:0/overflow-y:auto that actually make
     the content area shrink-and-scroll only apply once .is-stuck is set;
     otherwise these just behave like normal stacked blocks. */
  #checkout-wizard{display:flex;flex-direction:column;min-height:0;}
  .quote-slip.is-stuck #checkout-wizard{flex:1 1 auto;overflow:hidden;}
  .ckt-step-panel{display:none;}
  .ckt-step-panel.active{display:flex;flex-direction:column;min-height:0;}
  .quote-slip.is-stuck .ckt-step-panel.active{flex:1 1 auto;}
  .ckt-step-scroll{padding-right:2px;}
  .quote-slip.is-stuck .ckt-step-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:4px;}
  .ckt-step-footer{flex-shrink:0;border-top:1px solid var(--line);margin-top:10px;padding-top:12px;}

  #slip-items{margin:12px 0;}
  .slip-empty{color:var(--ink-soft);font-size:.94rem;font-style:italic;}
  .slip-item{
    display:grid;grid-template-columns:1fr auto;align-items:center;
    font-size:.94rem;padding:7px 0;border-bottom:1px dashed var(--line);gap:8px;
  }
  .slip-item-info{display:flex;align-items:center;gap:10px;min-width:0;}
  .slip-thumb{width:40px;height:40px;object-fit:contain;border-radius:5px;border:1px solid var(--line);background:#fff;flex-shrink:0;}
  /* Match the item-name font to the search results list (h4 uses Poppins) */
  .slip-item-info > span{font-family:'Poppins';font-weight:500;font-size:.97rem;}
  .slip-item .meta{color:var(--ink-soft);font-family:'Inter';font-weight:400;}
  .slip-item button{background:none;border:none;color:#B3453D;font-size:1.2rem;line-height:1;padding:0 4px;flex-shrink:0;}
  .cart-price{font-family:'Inter';font-weight:600;color:var(--green-dark);font-size:1.05rem;flex-shrink:0;}
  .slip-total-row{flex-shrink:0;display:flex;justify-content:space-between;align-items:baseline;}
  .slip-total-row .amt{font-family:'Inter';font-weight:600;font-size:1.76rem;color:var(--green-dark);}
  .slip-note{flex-shrink:0;font-size:.83rem;color:var(--ink-soft);margin-top:8px;}
  .submit-btn{
    flex-shrink:0;
    width:100%;background:var(--green);color:var(--ink);border:none;border-radius:6px;
    padding:14px;font-weight:700;margin-top:12px;font-size:1.05rem;
  }
  .submit-btn:hover:not(:disabled){background:var(--green-dark);color:#fff;}
  .submit-btn:disabled{background:#E3E8DD;color:var(--ink-soft);cursor:not-allowed;}

  /* Every text field anywhere in the checkout panel — scoped to .quote-slip
     rather than the old #contact-form wrapper (removed in the step-wizard
     rebuild), so fields actually fill their container instead of falling
     back to the browser's default input width. */
  .quote-slip input:not([type="checkbox"]):not([type="radio"]),
  .quote-slip textarea,
  .quote-slip select{
    width:100%;box-sizing:border-box;
    padding:11px 12px;border-radius:6px;border:1px solid var(--line);
    /* 16px — below this, iOS Safari auto-zooms the page on focus. Same
       issue as the top search bar, just here it'd hit every field in
       Step 2 (name, email, phone, address, payment inputs). */
    font-family:'Inter';font-size:1rem;margin-bottom:9px;
  }
  .cf-address-row{display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:8px;}
  .cf-address-row input{margin-bottom:8px;}
  @media (max-width:380px){
    .cf-address-row{grid-template-columns:1fr;}
  }
  .cf-status{font-size:.88rem;color:var(--ink-soft);margin-top:8px;text-align:center;}

  .hidden{display:none !important;}
  #quote-success{flex-shrink:0;text-align:center;padding:8px 4px 4px;}
  #quote-success .check{
    width:44px;height:44px;border-radius:50%;background:var(--green);display:flex;
    align-items:center;justify-content:center;margin:0 auto 14px;
  }
  #quote-success .check svg{width:20px;height:20px;stroke:var(--ink);}
  #quote-success h3{border:none;padding:0;margin-bottom:8px;}