/* Additive styles for search-results.html only. No existing CSS file is modified. */
.results-hero{padding:24px 0 16px;}
.results-hero h1{font-size:1.5rem;margin:0 0 16px;}
.results-description{font-size:.95rem;color:var(--ink-soft,#666);margin:-10px 0 16px;}
.results-search-row{display:flex;gap:10px;max-width:640px;}
.results-search-row input{flex:1;padding:14px 16px;border-radius:10px;border:1px solid var(--line,#ddd);font-size:1rem;-webkit-appearance:none;appearance:none;}
.results-search-row input::-webkit-search-decoration,
.results-search-row input::-webkit-search-cancel-button,
.results-search-row input::-webkit-search-results-button,
.results-search-row input::-webkit-search-results-decoration{display:none;}
.results-search-row button{padding:14px 22px;border-radius:10px;border:none;background:var(--green,#8FC22A);color:var(--ink);font-weight:600;cursor:pointer;}
.results-body{max-width:1180px;margin:0 auto;padding:0 24px 64px;}

/* Two-column layout: results list + sticky quote sidebar on the right.
   Sidebar width uses clamp() so it scales a bit with viewport width. */
.tool-grid{display:grid;grid-template-columns:1fr clamp(500px, 38vw, 540px);gap:32px;align-items:start;}

/* Desktop only — once the cart has items, give the panel a slightly
   stronger shadow so it reads as the visual focus of the page rather
   than a static sidebar. Mobile is untouched (this file's mobile rules
   are all inside the max-width:900px block below; this rule sits outside
   it, but toggled by a class that's only ever added via JS regardless of
   viewport, so it's also explicitly re-guarded to min-width:901px here
   for clarity/safety). */
/* Hidden everywhere by default — only ever shown on desktop (see the
   min-width:901px block below). Declared BEFORE that block on purpose:
   CSS resolves equal-specificity ties by source order, so if this hide
   rule came after the media query's show rule, it would win on desktop
   too (since both would "match" there) and the feature would never
   actually show up. Ordering it first means the media query's rule
   correctly overrides it once that breakpoint is active. */
.ckt-trust-compact{display:none;}
.ckt-label-desktop{display:none;}

@media (min-width:901px){
  #slip-panel.has-items{
    box-shadow:0 10px 34px rgba(25,28,25,.10);
  }
  .cf-address-row{gap:12px;}

  /* Wider panel earns a bit more breathing room on the sides. */
  .quote-slip{padding:20px 30px 22px;}

  /* Step indicator (1 / 2 / 3 dots) — ~25% shorter. Same design, just a
     smaller dot, tighter label, and less padding around the whole row. */
  .ckt-stepper{margin-bottom:10px;padding-bottom:10px;}
  .ckt-dot{width:24px;height:24px;font-size:.78rem;}
  .ckt-step-label{font-size:.7rem;}
  .ckt-step-dot{gap:4px;}
  .ckt-step-line{margin-top:11px;}

  /* Item rows (Step 1 "Review Your Quote" AND Step 3's read-only mirror,
     which share the same .slip-item/.slip-thumb classes) — thumbnail
     within the 40-48px range requested, minimal row padding, and the
     title clamped to 2 lines so a long name can never blow out row
     height. This is the main lever for fitting more items on screen. */
  #slip-items, #confirm-items{margin:6px 0;}
  .slip-item{padding:3px 0;gap:6px;}
  .slip-item-info{gap:6px;}
  .slip-thumb{width:40px;height:40px;}
  .slip-item-name{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;line-height:1.25;
  }

  /* Compact trust notice replacing the old, much taller "Why we ask for
     this" card on desktop — see .ckt-trust-compact below. */
  .ckt-trust-card{display:none;}
  .ckt-trust-compact{
    display:flex;align-items:flex-start;gap:10px;
    background:var(--blue-light);border-radius:10px;padding:8px 12px;margin-bottom:10px;
  }
  .ckt-trust-compact svg{flex-shrink:0;color:var(--blue-dark);margin-top:1px;}
  .ckt-trust-compact p{margin:0;font-size:.85rem;line-height:1.4;color:#2c5a78;}
  .ckt-trust-compact strong{color:var(--ink);}

  /* Desktop-only heading text swap (e.g. "Your Quote" → "Review Your
     Quote") — see .ckt-label-default/.ckt-label-desktop pairs in the
     HTML. Mobile keeps the original shorter heading untouched. */
  .ckt-label-desktop{display:inline;}
  .ckt-label-default{display:none;}

  /* Form-field rhythm on Step 2/3, compacted substantially so Name /
     Email / Phone / Street / Apartment (and the start of City/State/Zip)
     all fit without scrolling. Input height down ~12%, gap between
     fields down ~30%, heading-to-field spacing down by about half —
     text size is untouched throughout so nothing feels cramped to read
     or click. */
  .quote-slip input:not([type="checkbox"]):not([type="radio"]),
  .quote-slip textarea,
  .quote-slip select{
    padding:7px 12px;margin-bottom:5px;
  }
  .ckt-sub-head{margin:9px 0 4px;font-size:.88rem;}
  .ckt-sub-head:first-of-type{margin-top:0;}
  .ckt-sub-note{margin:-2px 0 6px;font-size:.8rem;}
  .cf-address-row input{margin-bottom:5px;}
}

/* Sticky mini-summary at the bottom of the checkout panel — this base
   rule effectively only ever renders on desktop, since mobile hides
   .ckt-summary-bar entirely (display:none) inside the max-width:900px
   block below. Sits below the wizard so the item count and running total
   are always visible without scrolling, on every step, without eating
   into the scrollable form area (it's a flex-shrink:0 sibling of the
   wizard, not part of it). */
.ckt-summary-bar{
  flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--ink-soft);font-weight:500;
}
.ckt-summary-total{color:var(--ink);}
.ckt-summary-bar strong{color:var(--green-dark);font-family:'Inter';font-weight:700;font-size:1rem;}

/* Hidden everywhere by default — only ever shown inside the mobile
   max-width:900px block below, in focused-checkout mode. Declared outside
   the media query on purpose so desktop has zero chance of showing it. */
.ckt-back-link{display:none;}

@media (max-width:900px){
  .tool-grid{grid-template-columns:1fr;}
  /* On mobile there's no side-by-side grid to stay aligned with, so the
     panel doesn't need to track scroll position the way the desktop
     sidebar does — but it still needs the stepper and Continue/Submit
     button visible together without scrolling through the whole item
     list first. So: always capped and internally scrollable here,
     unconditionally (not gated behind .is-stuck, which is a desktop-only
     concept — see js/ui.js, which explicitly skips stuck-detection below
     the 900px breakpoint). */
  .quote-slip, .quote-slip.is-stuck{
    position:static;
    height:min(var(--slip-max-h, 520px), 82vh);
    max-height:none;
    overflow:hidden;
  }
  #checkout-wizard, .quote-slip.is-stuck #checkout-wizard{
    flex:1 1 auto;min-height:0;overflow:hidden;
  }
  .ckt-step-panel.active, .quote-slip.is-stuck .ckt-step-panel.active{
    flex:1 1 auto;min-height:0;
  }
  .ckt-step-scroll, .quote-slip.is-stuck .ckt-step-scroll{
    flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:4px;
  }

  /* Reduce vertical space above the form so more fields are visible
     without scrolling. Mobile only — desktop rules in quote-slip.css and
     checkout-steps.css are untouched. */
  .quote-slip{padding:14px 18px 12px;}
  .ckt-stepper{margin-bottom:4px;padding-bottom:6px;}

  /* Condense the "Why we ask for this" card as much as possible — the
     eyebrow label is dropped on mobile (the title already conveys what
     the card is), the body clamps to a single line, and padding/margins
     are cut to the minimum that still feels tappable. */
  .ckt-trust-card{padding:4px 10px;margin-bottom:3px;}
  .ckt-trust-eyebrow{display:none;}
  .ckt-trust-title{margin:0 0 1px;}
  .ckt-trust-body{
    margin:0;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
    overflow:hidden;
  }
  .ckt-trust-card.expanded .ckt-trust-body{-webkit-line-clamp:unset;overflow:visible;}
  .ckt-trust-more{
    display:inline-block;background:none;border:none;padding:0;margin-top:1px;
    color:var(--blue-dark);font-size:.83rem;font-weight:600;text-decoration:underline;
    cursor:pointer;font-family:'Inter';
  }

  .ckt-sub-head{margin:10px 0 5px;}
  .ckt-step-footer{margin-top:8px;padding-top:10px;}

  /* Compact header once checkout is "focused" (class toggled by
     focusCheckout/unfocusCheckout in checkout-steps.js). Search bar and
     collection CTA aren't needed mid-checkout, so hide them and shrink the
     bar to reclaim vertical space — this is the single biggest space cost
     above the fold, especially once the keyboard is open. Mini-cart-bar is
     also redundant here since the total/items count already show inside
     the checkout card itself. */
  body.ckt-compact-header header .topbar{padding-top:10px;padding-bottom:10px;}
  body.ckt-compact-header .search-inline,
  body.ckt-compact-header .collection-cta,
  body.ckt-compact-header .mini-cart-bar{display:none !important;}

  /* Focused checkout mode (mobile only) — makes Step 2/3 feel like a
     dedicated page. Hides the product list entirely instead of just
     scrolling past it, so there's nothing to peek above the fold, and
     removes the grid gap that was reserved for it. */
  body.ckt-focused #results-column{display:none;}
  body.ckt-focused .tool-grid{gap:0;}
  body.ckt-focused .results-body{padding-top:0;}
  body.ckt-focused .ckt-back-link{
    display:flex;align-items:center;gap:6px;background:none;border:none;padding:0 0 10px;
    color:var(--ink-soft);font-size:.85rem;font-weight:600;font-family:'Inter';cursor:pointer;
  }

  /* Desktop-only summary bar (see base rules above) — not part of the
     mobile design, which already surfaces the total in each step's own
     footer. */
  .ckt-summary-bar{display:none;}
}