/* 100Candles UI KIT (c100-ui.css) -- shared components for ALL NEW-DESIGN pages (Fix-101 P111).
   ONE file, one edit updates every new page. Colors come from tokens.css (var(--*)) -- never hex
   here except fallbacks. Referenced as /res/css/c100-ui.css?v=N (bump v on EVERY change).
   Legacy pages do not link this file, so nothing old is affected. */

/* ---------- page chrome: full-width standard (item-twin/search treatment) ---------- */
body { max-width:none !important; }
section#main, #main { width:auto !important; max-width:1500px !important; margin:0 auto !important; padding:0 30px !important; }
/* P153b: was a BARE .container override -- it hit every Bootstrap container on the page,
   including the legacy header's. Scoped to the page body, away from any header. */
#main .container, section#main .container { max-width:1160px !important; margin:0 auto !important; float:none; }
header#top:has(.c100-hd) #navbar-top.sticky { left:0 !important; right:0 !important; width:100% !important; max-width:none !important; }
@media (max-width:768px){ section#main, #main { padding:0 12px !important; } }

/* ---------- section heading ---------- */
.staged-h2 { font-size:22px; font-weight:700; color:var(--ink-warm,#2d2a26); margin:34px 0 14px; padding-bottom:8px; border-bottom:2px solid var(--star,#f0a437); display:inline-block; }

/* ---------- "you were viewing" return bar ---------- */
.staged-return-bar { display:flex; align-items:center; gap:12px; background:var(--accent-soft,#fff8f1); border:1.5px solid var(--accent,#e87b1e); border-radius:10px; padding:8px 14px; margin:6px 0 14px; }
.staged-return-bar img { width:40px; height:40px; object-fit:cover; border:1px solid #e2e2e2; border-radius:6px; background:#fff; }
.srb-arrow { color:var(--accent,#e87b1e); font-weight:800; font-size:18px; }
.srb-txt { flex:1; font-size:13px; line-height:1.25; color:var(--ink-warm,#2d2a26); }
.srb-cap { color:var(--label,#8a8377); font-size:10px; letter-spacing:.5px; }
.srb-back { border:1.5px solid var(--accent,#e87b1e); color:var(--accent,#e87b1e); border-radius:16px; padding:5px 14px; font-weight:700; font-size:12.5px; text-decoration:none; white-space:nowrap; }
.srb-back:hover { background:#ffe9d4; }
@media (max-width:640px){ .staged-return-bar { position:sticky; top:0; z-index:900; } }
/* P173 r8: collapse the return bar to ONE line at tablet and phone. It is arrow +
   thumbnail + [caption / product name] + button; narrow, that name wraps to three lines
   and the bar is position:sticky below 640px, so it eats the top of the screen for the
   whole scroll. Thumbnail + Back-to-item is enough -- the product name is in the H1
   directly above. Left alone at desktop, where the bar already fits on one line and the
   caption costs nothing. */
@media (max-width:900px){
	/* P173 r16: the name shows at the top of the page and hides only once the bar STICKS.
	   .is-stuck is stamped by the listener in items_similar_staged.cfml. */
	.staged-return-bar.is-stuck .srb-txt { display:none; }
	.staged-return-bar .srb-back { margin-left:auto; }
}

/* ---------- grid/list toggle (restyles RenderLayoutButtons output) ---------- */
.util-layout .btn-group { display:inline-flex; border:1.5px solid var(--line-warm,#d8cfc0); border-radius:10px; overflow:hidden; background:#fff; }
.util-layout .btn-group .btn { border:0 !important; border-radius:0 !important; background:#fff !important; background-image:none !important; color:var(--mut,#6b7280) !important; font-weight:700; padding:7px 16px; box-shadow:none !important; text-shadow:none !important; }
.util-layout .btn-group .btn:hover { color:var(--accent,#e87b1e) !important; }
.util-layout .btn-group .btn.active { background:var(--brand,#FF6A00) !important; color:#fff !important; }
.util-layout .btn-group .btn.active:hover { color:#fff !important; }

/* ---------- LIST view: item rows with pack cards ---------- */
.sg-wrap { width:100%; }
.sg-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; max-width:980px; }
/* P173: flex-wrap lets .sg-corner take a full-width line of its own at the top. */
.sg-item { position:relative; display:flex; flex-wrap:wrap; gap:16px; border:1px solid var(--card-border,#eee5d6); border-radius:12px; padding:14px; background:#fff; }
.sg-media { width:150px; flex-shrink:0; text-align:center; }
.sg-media img { max-width:130px; height:auto; border:1px solid #eee; border-radius:8px; background:#fff; }
.sg-name { font-size:13.5px; font-weight:600; margin-top:6px; line-height:1.3; }
.sg-name a { color:var(--link,#1565c0); text-decoration:none; }
.sg-buy { flex:1; min-width:0; max-width:620px; }
.sg-pack { display:flex; justify-content:space-between; align-items:center; gap:10px; border:1.5px solid var(--line-warm,#d8cfc0); border-radius:9px; padding:8px 12px; background:#fff; cursor:pointer; margin-bottom:6px; transition:border-color .15s; }
.sg-pack:hover { border-color:var(--accent,#e87b1e); }
.sg-pack.sel { border-color:var(--accent,#e87b1e); background:var(--accent-soft,#fff8f1); box-shadow:0 0 0 2px var(--accent-glow,rgba(232,123,30,.22)); }
.sgp-l b { font-size:14px; color:var(--ink-warm,#2d2a26); }
.sgp-sub { display:block; font-size:11.5px; color:var(--mut,#6b7280); }
.sgp-pr { font-size:15px; color:var(--ink-warm,#2d2a26); }
.sg-form { display:flex; gap:10px; align-items:center; margin-top:8px; }
/* P173: same shape as the P151 fix on the item page -- make the BUTTON the flexible element and
   give it min-width:0, because a flex item refuses to shrink below its content width without
   it. Qty keeps a fixed basis so the button gives way, never the field. */
.sg-qty { font-size:13px; color:var(--mut,#6b7280); display:flex; align-items:center; gap:5px;
	flex:0 0 auto; white-space:nowrap; }
/* P173 r6: the round-2 `.sg-form .sg-atc` rule was REMOVED, not kept -- it ties
   `.sg-list .sg-atc` on specificity and loses on source order, so it never applied.
   Leaving it would look like the button was already handled. */
.sg-form input[name=quantity] { width:52px; min-height:36px; text-align:center; border:1px solid #ddd; border-radius:7px; }
.sg-atc { flex:1; max-width:260px; background:var(--buy,#d9231d); color:#fff; border:0; border-radius:8px; min-height:40px; font-weight:800; font-size:14px; cursor:pointer; }
.sg-unavail { color:var(--danger,#b91c1c); font-weight:600; padding:8px; }

/* corner: item number + favorites heart (site icon font, same as search) */
/* P173: WAS position:absolute top-right, which is why the item number and heart sat ON the item
   name at tablet width and ON the image in mobile List -- an absolutely positioned element
   overlaps whatever is beneath it, at EVERY width. Now a normal-flow row spanning the card:
   item number left, heart right, name beneath. It cannot collide with anything any more, so
   this is not a breakpoint tweak that moves the problem to some other width. */
.sg-item > .sg-corner { position:static; flex:0 0 100%; display:flex; justify-content:space-between;
	align-items:center; gap:9px; margin:0 0 2px; }
.sg-corner .sg-id { color:var(--label,#8a8377); font-size:12px; }
.sg-fav { cursor:pointer; font-size:19px; line-height:1; color:#c9c2b4; user-select:none; }
.sg-fav:hover { color:var(--accent,#e87b1e); }
.sg-fav.on { color:var(--brand,#FF6A00); }

/* ---------- GRID view: responsive browse cards (search-grid behavior) ---------- */
.sg-grid { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:14px; }
.sg-gcard { flex:0 0 250px; padding:12px 12px 14px; border:1px solid var(--card-border,#eee5d6); border-radius:12px; padding:10px; background:#fff; text-align:center; transition:box-shadow .15s, transform .15s; position:relative; }
.sg-gcard:hover { box-shadow:0 6px 18px rgba(0,0,0,.08); transform:translateY(-2px); }
.sg-gcard a { text-decoration:none; }
.sg-gimgwrap { display:block; position:relative; background:#fff; padding:6px 0; }
.sg-gimgwrap img { max-width:100%; height:160px; object-fit:contain; }
.sg-gtag { position:absolute; top:6px; left:6px; background:var(--ok-bg,#eafaf0); color:var(--ok,#15803d); font-size:9px; font-weight:800; border-radius:5px; padding:2px 6px; }
/* grid: heart appears on hover, search-style; no item number on grid (plain cards) */
.sg-gcard .sg-fav { position:absolute; top:8px; right:10px; display:none; z-index:2; }
.sg-gcard:hover .sg-fav, .sg-gcard .sg-fav.on { display:block; }
/* P173: FIXED LINE STRUCTURE so every grid card aligns -- name 3 lines, price line 4, savings
   line 5, reserved whether or not they are filled. Was min-height:34px (about 2 lines) with
   nothing reserved for price or savings, so a 3-line name pushed its price below a neighbour's
   and a card with no savings sat short. Clamped to 3 lines so a long name cannot push the price
   out of position instead. Heights in `em` resolve against each element's own font-size. */
.sg-gname { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
	font-size:13px; font-weight:600; color:var(--link-soft,#4a90e2); margin-top:8px;
	line-height:1.35; height:calc(1.35em * 3); }
.sg-gprice { font-size:13.5px; color:var(--ink-warm,#2d2a26); font-weight:700; margin-top:5px;
	line-height:1.35; min-height:calc(1.35em); }/* P173: line 4, always reserved */
.sg-gprice span { color:var(--mut,#6b7280); font-size:11.5px; }
.sg-gsave { display:block; color:var(--ok,#15803d); font-size:11px; font-weight:700;
	line-height:1.35; min-height:calc(1.35em); }/* P173: line 5, reserved even when empty */
.sg-gcard.this-item { outline:2px solid var(--ok-line,#b7ebc9); }

/* ---------- mobile ---------- */
@media (max-width:640px){
	/* P173 fix: the two rules that give .sg-corner its own full-width line are ROW-only.
	   In a COLUMN container flex-wrap wraps into extra columns (content spills sideways) and
	   flex-basis is measured on the main axis, which here is height -- so 100% stops meaning
	   full width. In column mode the corner is already a full-width row and needs neither. */
	.sg-item { flex-wrap:nowrap; }
	.sg-item > .sg-corner { flex:0 0 auto; }
	.sg-item { flex-direction:column; }
	.sg-media { width:auto; text-align:left; }/* P173: left aligned on mobile (user) */
	.sg-gcard { flex-basis:calc(50% - 8px); }
}

/* ---------- full-bleed pages (search behavior): grid/browse pages opt in with .sg-fullbleed ---------- */
body:has(.sg-grid) section#main, body:has(.sg-grid) #main { max-width:none !important; }

/* ---------- P173 r20: breadcrumbs shrink and WRAP, never truncate ----------
   The trail renders in full, then the mini-cart bar loads and takes width from the content
   column, and the last crumb gets clipped -- worst on Similar / Liked / Accessories, whose
   trails are longer than Compatible's. Because the width change arrives AFTER load, this has
   to be ordinary reflow rather than anything measured once. Allow wrapping, keep each crumb
   whole, and step the font down before anything is lost. */
body:has(.c100-hd) #nav-bc {
	/* r21: NO display:flex. r20 used it and every chevron became a giant arrow -- the shapes
	   size against their line box and flex re-bases that. The crumbs are already inline-block
	   in the site stylesheet, so they wrap by themselves; only the clipping had to go. */
	/* r22: do NOT touch overflow. The chevrons are oversized shapes the container clips with
	   overflow:hidden -- setting it visible revealed them at full size. Only nowrap causes the
	   truncation, so only nowrap is overridden. */
	white-space:normal !important; max-width:100%;
	/* r23: the row was clipped at the TOP. overflow:hidden clips BOTH axes -- horizontally that is
	   wanted (it trims the oversized chevrons), but the container height was fixed for a single
	   line, so a wrapped trail lost its top. Let height follow content. */
	height:auto !important; min-height:0 !important;
}
body:has(.c100-hd) #nav-bc > li { white-space:nowrap; }/* a crumb never splits mid-word */
@media (max-width:1100px){ body:has(.c100-hd) #nav-bc { font-size:12.5px; } }
@media (max-width:900px){  body:has(.c100-hd) #nav-bc { font-size:11.5px; } }
@media (max-width:640px){  body:has(.c100-hd) #nav-bc { font-size:11px; } }

/* ---------- P173: filters panel is a full-width dropdown from 768 to 979 too ----------
   Pairs with the script in tag_page_items_staged.cfml. Bootstrap 2 keeps .span2 a narrow
   column right up to 979, so once the panel collapses in that band it must also stop being
   a column, or opening it reopens the squashed sidebar the user reported on tablet.
   Scoped to pages carrying the new header, so old-header pages are untouched. */
@media (max-width:979px){
	body:has(.c100-hd) .facets.span2 { float:none !important; width:100% !important; margin-left:0 !important; }
	body:has(.c100-hd) .facets.span2 > .btn { display:inline-block; }
}

/* ---------- item-page heart (same save system as browse pages) ---------- */
#item-page { position:relative; }
.item-fav { position:absolute; top:14px; right:18px; font-size:24px; z-index:5; }

/* ---------- STAGED HEADER (preview 227 section 9 final) ---------- */
/* P153b: guarded. header#top IS the legacy header element -- unguarded this collapsed its inner
   div and merged the white top row into the orange bar on /tsearch, which loads this sheet but
   renders the legacy header. Round a scoped the #navbar-top rules and missed this one. */
header#top:has(.c100-hd) > div:not(:empty) { height:auto !important; position:relative; }
/* P174c: the navbar dropdown must outrank the gallery slider. That slider carries the global
   class .over-navbar {position:relative;z-index:1100} -- deliberately above the navbar -- while
   Bootstrap's .dropdown-menu is z-index:1000, so the menu has always been covered on gallery
   pages. Scoped to the new header, and set on #navbar-top so BOTH the static and .sticky states
   inherit it (this selector outranks .sticky{z-index:1000} on specificity). */
header#top:has(.c100-hd) #navbar-top:not(.sticky) { position:relative; z-index:1200; }
header#top:has(.c100-hd) #navbar-top.sticky { z-index:1200; }/* position stays fixed -- set by .sticky */
.c100-hd { display:flex; align-items:center; gap:18px; padding:12px 22px; }
.c100-hd #logo { position:static !important; float:none !important; margin:0 !important; flex-shrink:0; }
.c100-hd #logo img { height:44px; width:auto; }
.c100-hd-search { flex:1; display:flex; margin:0 !important; min-width:240px; }/* P177b: was 120px -- a 120px input is a sliver, not a search box */
.c100-hd-search input[type=search] { flex:1; border:2px solid var(--brand,#FF6A00) !important; border-right:0 !important; border-radius:22px 0 0 22px !important; padding:9px 16px !important; height:auto !important; font-size:14.5px; box-shadow:none !important; margin:0 !important; width:auto !important; }
.c100-hd-search button { border:2px solid var(--brand,#FF6A00); border-left:0; background:var(--brand,#FF6A00); color:var(--brand-fg,#fff); border-radius:0 22px 22px 0; padding:0 18px; cursor:pointer; }
.c100-hd-account { position:relative; flex-shrink:0; }
.c100-hd-acct-btn { display:block; border:1.5px solid var(--accent,#e87b1e); background:var(--accent-soft,#fff8f1); border-radius:8px; padding:5px 12px; text-decoration:none; color:var(--ink-warm,#2d2a26) !important; line-height:1.25; white-space:nowrap; }
.c100-hd-hi { display:block; font-size:11px; color:var(--mut,#6b7280); }
.c100-hd-acct-btn b { font-size:13px; }
.c100-hd-panel { display:none; position:absolute; top:100%; right:0; z-index:10010; background:var(--surf,#fff); border:1px solid var(--line,#ccc); border-radius:0 0 10px 10px; box-shadow:0 10px 24px rgba(0,0,0,.18); padding:14px; width:300px; }
.c100-hd-account:hover .c100-hd-panel, .c100-hd-account.open .c100-hd-panel { display:block; }
.c100-hd-signin { display:block; background:var(--brand,#FF6A00); color:var(--brand-fg,#fff) !important; text-align:center; border-radius:8px; padding:9px; font-weight:800; text-decoration:none; }
.c100-hd-new { text-align:center; font-size:12px; margin:7px 0 10px; color:var(--mut,#6b7280); }
.c100-hd-cols { display:flex; gap:16px; border-top:1px solid var(--line,#eee); padding-top:10px; }
.c100-hd-cols > div { flex:1; }
.c100-hd-cols b { display:block; font-size:12.5px; margin-bottom:5px; color:var(--ink-warm,#2d2a26); }
.c100-hd-fav-ico { color:var(--brand,#FF6A00); font-size:12px; }
.c100-hd-cols a { display:block; font-size:12.5px; color:var(--ink,#444) !important; padding:3px 0; text-decoration:none; }
.c100-hd-cols a:hover { color:var(--accent,#e87b1e) !important; }
.c100-hd-orders { text-decoration:none; color:var(--ink-warm,#2d2a26) !important; font-size:14px; font-weight:800; white-space:nowrap; flex-shrink:0; }
.c100-hd-orders:hover { color:var(--accent,#e87b1e) !important; }
.c100-hd-cart { position:relative; color:var(--ink-warm,#2d2a26) !important; text-decoration:none; font-size:22px; flex-shrink:0; }
.c100-hd-cart .dynamic-cart-count { font-size:13px; font-weight:700; }
/* P173 r15: MOBILE header. Signed in there were four things competing for a 390px row --
   logo, Orders, Account & Favorites, cart -- so the cart WRAPPED to its own line under the
   logo. It was never clipping; it ran out of room. Orders is already the second entry in
   the Account dropdown, so it is the one to drop: nothing becomes unreachable, and the
   cart gets the space it needs. Desktop and tablet keep all three. */
@media (max-width:640px){
	.c100-hd-orders { display:none; }
	.c100-cart-badge { right:-2px; }/* P173 r16: badge inside the padding, so cart-from-right == logo-from-left */
}
/* orange bar: menus left-anchored at EVERY width.
   P173 r18: was `.c100-hd ~ #navbar-top` -- the SIBLING combinator, but #navbar-top is the
   UNCLE (it sits outside the wrapper holding .c100-hd), so all six rules were INERT from the
   day P153 shipped and the dropdowns stayed solid orange. Now the descendant form, which
   still scopes to pages carrying the new header. See AUDIT-2026-08-14_dead-css-rules.md.
   P153: every #navbar-top rule below is guarded so it only applies where the NEW
   header is present. /tsearch loads this sheet but renders the LEGACY header, and unguarded these
   rules blew its nav bar full-width and merged it into the white row. A section may only style
   what its own renderer puts on the page. */
header#top:has(.c100-hd) #navbar-top .container { max-width:none !important; margin:0 !important; }
/* P165: TABLET. The header was a single non-wrapping flex row until 640px, so between
   ~640px and desktop the search box was crushed against Account & Favorites instead of wrapping.
   Fixed elements are ~543px (logo+account+cart+gaps+padding), so below ~700px the search hits its
   min-width and collides. Give it its own row from 900px down -- at the boundary it still gets a
   comfortable ~357px rather than being squeezed to the minimum. */
@media (max-width:900px){
	.c100-hd { flex-wrap:wrap; }
	.c100-hd-search { order:5; flex-basis:100%; }
	/* P167: collapse the category bar to Browse at the SAME width the header wraps. The old
	   stylesheet forces the nav open above 768px and only shows the hamburger below 767, so
	   between 768 and 900 it had too little room but could not collapse -- it wrapped to a
	   DOUBLE-HEIGHT bar. :not(.in) so clicking Browse still opens it. */
	#navbar-top .nav-collapse.collapse:not(.in) { height:0 !important; overflow:hidden !important; }
	#navbar-top .btn-navbar { display:block !important; }
	/* P167: search has wrapped away, so nothing pushes account+cart right any more.
	   margin-left:auto restores it; the container padding keeps the cart the same
	   distance from the right edge as at desktop. */
	.c100-hd-account { margin-left:auto; }
}
/* P167: the account box was flex-shrink:0, so when space ran short it refused to shrink and
   something had to OVERLAP. Letting it shrink makes the worst case cramped, never on top of. */
.c100-hd-account { flex-shrink:1; min-width:0; }
/* P165: PHONE only. These were previously bundled with the wrap rule, which is why the search
   could not wrap without also shrinking the logo and hiding the greeting. A tablet has room for
   both, so they stay at 640px. */
@media (max-width:640px){
	/* P173 r16: was padding:8px 0 -- ZERO horizontal, so the logo sat flush left and the cart
	   badge (right:-11px) hung past the right edge. Equal insets both sides. */
	.c100-hd { gap:10px; padding:8px 14px; }
	.c100-hd-hi { display:none; }
	.c100-hd #logo img { height:32px; }
}

/* ---------- v25: pack-card right column stacks (badges never on the name line) ---------- */
.sp-right { display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right; flex-shrink:0; }
.sp-per { font-size:12px; color:var(--mut,#6b7280); }
.sp-save { font-size:12px; color:var(--ok,#15803d); font-weight:700; }
.sp-right .sp-badge { margin-left:0; margin-top:2px; }
.sgp-r { display:flex; flex-direction:column; align-items:flex-end; gap:1px; text-align:right; flex-shrink:0; }
.sgp-per { font-size:11px; color:var(--mut,#6b7280); }
.sgp-save { font-size:11px; color:var(--ok,#15803d); font-weight:700; }
/* ---------- v25: cart count badge on the icon ---------- */
.c100-hide { display:none !important; }
.c100-cart-badge { position:absolute; top:-7px; right:-11px; background:var(--buy,#d9231d); color:var(--brand-fg,#fff); border-radius:10px; min-width:18px; height:18px; line-height:18px; font-size:11px; font-weight:800; text-align:center; padding:0 4px; }
.c100-cart-badge:empty { display:none; }
/* ---------- v25: mega-menu restyle (white card) ---------- */
header#top:has(.c100-hd) #navbar-top .dropdown-menu { background:var(--surf,#fff) !important; border:1px solid var(--card-border,#eee5d6) !important; border-top:3px solid var(--brand,#FF6A00) !important; border-radius:0 0 12px 12px !important; box-shadow:0 14px 30px rgba(0,0,0,.16) !important; padding:16px 22px !important; }
header#top:has(.c100-hd) #navbar-top .dropdown-menu a { color:var(--ink,#3a3a3a) !important; font-size:13.5px !important; padding:4px 0 !important; background:none !important; text-shadow:none !important; }
header#top:has(.c100-hd) #navbar-top .dropdown-menu a:hover { color:var(--accent,#e87b1e) !important; }
header#top:has(.c100-hd) #navbar-top .navbar-panel-col li:first-child a { font-weight:800; color:var(--accent,#e87b1e) !important; }

/* ---- P117: unified list card (name+stars header above packs, colors link, badges, in-cart pill, update flip) ---- */
.sg-title { font-size:17px; font-weight:800; margin:0 0 6px; line-height:1.3; }
.sg-title a { color:var(--ink-warm,#2d2a26); text-decoration:none; }
.sg-title a:hover { color:var(--brand,#FF6A00); }
.sg-stars { color:var(--star,#f0a437); font-size:13px; margin:-2px 0 8px; letter-spacing:1px; }
.sg-stars .sg-revcount { color:var(--mut,#6b7280); letter-spacing:0; margin-left:5px; font-size:12px; }
.sg-colors { text-align:center; padding:4px 0.5em 0; font-size:12.5px; }
.sg-colors a { color:var(--link,#1565c0); }
.sp-badge { display:inline-block; font-size:9px; font-weight:800; color:#fff; border-radius:4px; padding:1px 5px; margin-top:2px; white-space:nowrap; }
.sp-badge.pop { background:var(--accent,#e87b1e); }
.sp-badge.val { background:var(--ok,#15803d); }
.sp-badge.cls { background:var(--danger,#c0392b); }
.sg-list .sp-incart { display:inline-block; margin-top:4px; font-size:11px; font-weight:700; color:#fff; background:var(--ok,#16a34a); border-radius:5px; padding:2px 7px; line-height:1.4; white-space:nowrap; }
.sg-list .sp-incart[hidden] { display:none; }
.sg-list .sp-incart::before { content:"\2713\00a0"; }
.sg-atc.is-update { background:var(--accent,#e87b1e); }
.sg-atc.is-update:hover { background:var(--accent-dark,#d06c12); }
/* P117 v2: action row right-aligned with the card edge (scan path ends at the CTA) */
.sg-list .sg-form { justify-content:flex-end; }
.sg-list .sg-atc { flex:0 1 auto; min-width:220px; }
/* P173 r14: this override MUST come after the rule above. A media query adds no
   specificity, so `.sg-list .sg-atc` in a @media block and `.sg-list .sg-atc` outside one
   are both (0,2,0) and the tie breaks on SOURCE ORDER. Placed earlier in the file (r6) it
   lost silently and the 220px floor stayed in force at mobile -- which is why the button
   never shrank. min-width:0 is the part that matters: a flex item will not go below its
   content width without it. */
@media (max-width:640px){
	.sg-list .sg-atc { flex:1 1 auto; min-width:0; max-width:none; }
}

/* ---------- P177b: the header may never crush its own elements (user rule 2026-08-17) ----------
   "no two elements should overlap or touch each other. There should be a minimum spacing between
    them and once that is reached, it moves to second line."

   cart-drawer.js puts padding-right:152px on <html>.c100-shift, so while the drawer is open the
   header HAS 152px less than @media is measuring. Measured from DevTools: body 839px inside a
   ~991px viewport, and the 900px query had not fired -- the breakpoint was reading a width that
   did not exist. That is also why grid looked fine and list did not: in grid the drawer had never
   been opened, so nothing had been stolen.

   Same converted layout the 900px query produces, triggered 152px earlier, ONLY while the drawer
   is actually open. 900 + 152 = 1052; 1060 leaves room for a scrollbar. The converted look itself
   is deliberately unchanged -- the user confirmed it reads correctly today. */
@media (max-width:1060px){
	/* P178c: this mirrors the ENTIRE 900px wrapped-state block above, not part of it. P177b copied
	   only the wrap and the search order, so between 900 and 1060 with the drawer open the account
	   box and cart stayed bunched against the logo and the category bar stayed expanded. All four
	   effects belong together -- that is what makes it the same STATE rather than a new one. */
	html.c100-shift .c100-hd { flex-wrap:wrap; }
	html.c100-shift .c100-hd-search { order:5; flex-basis:100%; }
	/* search has wrapped away, so nothing pushes account+cart right any more */
	html.c100-shift .c100-hd-account { margin-left:auto; }
	/* the category bar collapses to Browse at the SAME width the header wraps -- the search bar
	   and the hamburger convert together, which is the behaviour the user confirmed is correct */
	html.c100-shift #navbar-top .nav-collapse.collapse:not(.in) { height:0 !important; overflow:hidden !important; }
	html.c100-shift #navbar-top .btn-navbar { display:block !important; }
}