/**
 * Nelson Product Card — .npc component
 *
 * Equal-height pattern:
 *   Grid/flex container sets align-items: stretch (default for CSS grid).
 *   .npc fills cell height via height: 100%.
 *   .npc__body is flex-column with flex: 1 + position: relative.
 *   .npc__glance absorbs vertical slack via flex: 1.
 *   .npc__actions is absolutely pinned to card bottom — buttons always align.
 *
 * Toggle pattern (visitor view controls):
 *   Add class to .nelson-catalog-grid to hide a section across all cards:
 *   .npc-hide-image  → hides image
 *   .npc-hide-specs  → hides specs list
 *   .npc-hide-tags   → hides at-a-glance tags
 */

/* ─── Tokens ─────────────────────────────────────────────────────── */

:root {
	--npc-navy:          #162240;
	--npc-orange:        #e8762a;
	--npc-border:        #E2E8F0;
	--npc-bg-img:        #F5F7FA;
	--npc-tag-bg:        #F1F5F9;
	--npc-tag-border:    #E2E8F0;
	--npc-hl-bg:         #FEF3C7;
	--npc-hl-border:     #FDE68A;
	--npc-hl-text:       #92400E;
	--npc-cond-bg:       #EFF6FF;
	--npc-cond-border:   #BFDBFE;
	--npc-cond-text:     #1D4ED8;
	--npc-radius:        8px;
	--npc-body-pad:      16px;
	--npc-actions-h:     72px;
}

/* ─── Card Shell ─────────────────────────────────────────────────── */

.npc {
	background:    #ffffff;
	border:        1px solid var( --npc-border );
	border-radius: var( --npc-radius );
	overflow:      hidden;
	display:       flex;
	flex-direction: column;
	height:        100%;
	position:      relative;
	font-family:   Inter, sans-serif;
}

/* ─── Badge ──────────────────────────────────────────────────────── */

.npc__badges {
	position:       absolute;
	top:            12px;
	left:           12px;
	z-index:        2;
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            6px;
}

.npc__badge {
	padding:       4px 8px;
	border-radius: 4px;
	font-size:     11px;
	font-weight:   700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color:         #ffffff;
	line-height:   1;
}

.npc__badge--oos       { background: #64748B; }
.npc__badge--clearance { background: #DC2626; }
.npc__badge--bestseller{ background: var( --npc-navy ); }
.npc__badge--new       { background: #16A34A; }
.npc__badge--quickship { background: #0369A1; }

/* ─── Image ──────────────────────────────────────────────────────── */

.npc__image-link {
	display:         block;
	text-decoration: none;
	flex-shrink:     0;
}

.npc__image {
	background:      var( --npc-bg-img );
	height:          180px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	overflow:        hidden;
}

.npc__img {
	width:       100%;
	height:      180px;
	object-fit:  contain;
}

.npc__img-placeholder {
	width:       100%;
	height:      180px;
	background:  var( --npc-bg-img );
}

/* ─── Body ───────────────────────────────────────────────────────── */

.npc__body {
	flex:            1;
	display:         flex;
	flex-direction:  column;
	padding:         var( --npc-body-pad );
	padding-bottom:  var( --npc-actions-h );
	position:        relative;
}

/* ─── Identity ───────────────────────────────────────────────────── */

.npc__identity {
	margin-bottom: 10px;
}

.npc__sku-link {
	text-decoration: none;
}

.npc__sku {
	display:        block;
	font-size:      12px;
	font-weight:    600;
	color:          var( --npc-navy );
	letter-spacing: 0.03em;
	margin-bottom:  2px;
}

.npc__type {
	font-size:   12px;
	color:       #64748B;
	margin:      0 0 3px;
	line-height: 1.4;
}

.npc__title {
	font-size:   15px;
	font-weight: 700;
	color:       #0F172A;
	line-height: 1.35;
	margin:      0;
}

/* ─── Specs ──────────────────────────────────────────────────────── */

.npc__specs {
	list-style:    none;
	padding:       10px 0 0;
	margin:        0 0 12px;
	border-top:    1px solid var( --npc-border );
}

.npc__specs li {
	font-size:   12px;
	color:       #475569;
	line-height: 1.7;
}

/* ─── At a Glance ────────────────────────────────────────────────── */

.npc__glance {
	flex: 1;
}

.npc__glance-label {
	display:        block;
	font-size:      10px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color:          #94A3B8;
	margin-bottom:  7px;
}

.npc__tags {
	list-style: none;
	padding:    0;
	margin:     0;
	display:    flex;
	flex-wrap:  wrap;
	gap:        4px;
}

.npc__tag {
	font-size:     11px;
	font-weight:   500;
	padding:       3px 8px;
	border-radius: 100px;
	background:    var( --npc-tag-bg );
	border:        1px solid var( --npc-tag-border );
	color:         #475569;
}

.npc__tag--highlight {
	background: var( --npc-hl-bg );
	border-color: var( --npc-hl-border );
	color:      var( --npc-hl-text );
	font-weight: 600;
}

.npc__tag--cond {
	background:  var( --npc-cond-bg );
	border-color: var( --npc-cond-border );
	color:       var( --npc-cond-text );
}

/* ─── Actions — pinned to card bottom ───────────────────────────── */

.npc__actions {
	position:    absolute;
	bottom:      16px;
	left:        var( --npc-body-pad );
	right:       var( --npc-body-pad );
	display:     flex;
	gap:         6px;
	border-top:  1px solid var( --npc-border );
	padding-top: 12px;
}

.npc__btn-quote {
	flex:        1;
	height:      40px;
	background:  var( --npc-navy );
	color:       #ffffff;
	border:      none;
	border-radius: 6px;
	font-family: Inter, sans-serif;
	font-size:   13px;
	font-weight: 600;
	cursor:      pointer;
	transition:  background 0.15s;
}

.npc__btn-quote:hover {
	background: #1e3a6e;
}

.npc__btn-quote-plus {
	width:       76px;
	height:      40px;
	background:  var( --npc-orange );
	color:       #ffffff;
	border:      none;
	border-radius: 6px;
	font-family: Inter, sans-serif;
	font-size:   13px;
	font-weight: 700;
	cursor:      pointer;
	transition:  background 0.15s;
}

.npc__btn-quote-plus:hover {
	background: #cf6320;
}

.npc__btn-specs {
	width:           56px;
	height:          40px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      transparent;
	color:           var( --npc-navy );
	border:          1.5px solid var( --npc-border );
	border-radius:   6px;
	font-family:     Inter, sans-serif;
	font-size:       13px;
	font-weight:     500;
	text-decoration: none;
	transition:      border-color 0.15s;
}

.npc__btn-specs:hover {
	border-color: var( --npc-navy );
}

/* ─── Toggle visibility — driven by grid container class ─────────── */

.npc-hide-image .npc__image-link { display: none; }
.npc-hide-specs .npc__specs      { display: none; }
.npc-hide-tags  .npc__glance     { display: none; }

/* ─── View Toggle Toolbar ────────────────────────────────────────── */

.npc-toolbar {
	display:     flex;
	align-items: center;
	gap:         8px;
	margin-bottom: 16px;
	font-family: Inter, sans-serif;
}

.npc-toolbar__label {
	font-size:   12px;
	color:       #64748B;
	font-weight: 500;
	flex-shrink: 0;
}

.npc-toolbar__btn {
	height:        28px;
	padding:       0 12px;
	border-radius: 100px;
	font-size:     12px;
	font-weight:   500;
	cursor:        pointer;
	border:        1.5px solid var( --npc-border );
	background:    #F8FAFC;
	color:         #64748B;
	font-family:   Inter, sans-serif;
	transition:    all 0.15s;
	line-height:   1;
}

.npc-toolbar__btn.is-active {
	border-color: var( --npc-navy );
	background:   var( --npc-navy );
	color:        #ffffff;
}

/**
 * Nelson Product Card v2 — .pc component (handoff-070726 redesign)
 *
 * Replaces .npc as of 2026-07-08. Live catalog loop component is post 71
 * (_component-product-card), rebuilt from the handoff via OxyDance Convert
 * into native Oxygen elements — no longer a CodeBlock, so CSS lives here
 * instead of embedded css_code. Source: design-system/handoff-070726/
 * plastic-pallets-landing/plastic-pallets-landing.css (.pc rules), page-scope
 * prefix stripped, values kept as design tokens.
 */

.pc {
  background: var(--nelson-white); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  box-shadow: var(--shadow-1); display: flex; flex-direction: column; overflow: hidden;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  height: 100%;
  cursor: pointer;
}
.pc:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.pc__img { aspect-ratio: 5/4; background: var(--nelson-white); display: grid; place-items: center; position: relative; border-bottom: 1px solid var(--border-subtle); }
.pc__img img { width: 86%; max-height: 86%; object-fit: contain; }
.pc__ribbons { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 2; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 6px; }
.pc__ribbon { font-family: var(--font-sans); font-weight: 700; font-size: 12px; line-height: 16px; padding: 4px 10px; border-radius: 999px; background: var(--nelson-maroon); color: var(--nelson-white); border: 1px solid var(--border); white-space: nowrap; }
.pc__ribbon--used { background: var(--nelson-green-95); color: var(--nelson-green-text); border-color: var(--nelson-green); }
.pc__ribbon--clearance { background: var(--nelson-orange-95); color: var(--nelson-orange-text); border-color: var(--nelson-orange); }
.pc__ribbon--new { background: var(--nelson-blue-95); color: var(--nelson-blue); border-color: var(--nelson-blue-90); }
.pc__ribbon--onepiece { background: var(--nelson-maroon-95); color: var(--nelson-maroon); border-color: var(--nelson-maroon); }
/* No spare brand hue left for this one (blue/green/orange/maroon all claimed by
   the ribbons above) — solid maroon/white (the base .pc__ribbon default) instead
   of another light tint, so the flagship marketing flag reads as the boldest one. */
.pc__ribbon--bestseller { background: var(--nelson-maroon); color: var(--nelson-white); border-color: var(--nelson-maroon); }
/* Operational status (Limited Availability / Temporarily Out of Stock / Minimum
   Order Quantity) — neutral gray, not a brand color, to read as logistics status
   rather than a marketing flag. Colors provisional pending Zach (GitHub #9,
   Jackie 2026-08-24 — "Colors to be defined by Zach"). */
.pc__ribbon--status { background: var(--bg-tint); color: var(--nelson-gray-dk); border-color: var(--border-strong); }
.pc--used { border-color: var(--nelson-green); }
.pc__cond { padding: 1px 5px; border-radius: 3px; font-weight: 600; }
.pc__cond--new { background: var(--nelson-blue-95); color: var(--nelson-blue); }
.pc__cond--used { background: var(--nelson-green-95); color: var(--nelson-green-text); }
.pc__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pc__code { font-family: var(--font-mono); font-size: 12px; color: var(--nelson-bright-blue); letter-spacing: 0.02em; }
.pc__kind { font-family: var(--font-sans); font-size: 13px; color: var(--fg-muted); margin-top: -8px; }
.pc__title { font-family: var(--font-serif); font-weight: 600; font-size: 19px; line-height: 25px; color: var(--fg-strong); margin: 0; }
.pc__specs { font-family: var(--font-sans); font-size: 13px; line-height: 20px; color: var(--fg); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: 12px 0; }
.pc__specs b { font-weight: 700; color: var(--fg-strong); }
.pc__glance-lbl { font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-muted); }
.pc__clear { margin: 2px 0; }
.pc__clear-h { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--nelson-orange); }
.pc__clear-locs { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 16px; }
.pc__clear-locs li { font-family: var(--font-sans); font-size: 13px; line-height: 1.35; color: var(--nelson-orange); }
.pc__clear-price { display: block; margin-top: 2px; font-family: var(--font-sans); font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--nelson-orange); }
.pc__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pc__tag { font-family: var(--font-sans); font-size: 12px; line-height: 16px; padding: 4px 10px; border-radius: 999px; background: var(--nelson-white); color: var(--fg); border: 1px solid var(--border); white-space: nowrap; }
.pc__tag--hl { background: var(--nelson-blue-95); color: var(--nelson-blue); border-color: var(--nelson-blue-90); font-weight: 700; }
.pc__tag--used { background: var(--nelson-green-95); color: var(--nelson-green-text); border-color: var(--nelson-green); }
.pc__tag--clearance { background: var(--nelson-orange-95); color: var(--nelson-orange-text); border-color: var(--nelson-orange); }
.pc__tag--onepiece { background: var(--nelson-maroon-95); color: var(--nelson-maroon); border-color: var(--nelson-maroon); font-weight: 700; }
.pc__actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: auto; cursor: default; }
.pc-btn { font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; line-height: 1; padding: 11px 12px; border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: all var(--dur-fast) var(--ease); }
.pc-btn--lg { padding: 12px 20px; }
.pc-btn--primary { background: var(--nelson-bright-blue); color: var(--nelson-white); }
.pc-btn--primary:hover { background: var(--nelson-blue); border-color: var(--nelson-green); color: var(--nelson-white); }
.pc-btn--incart { background: var(--nelson-green-95); color: var(--nelson-green-text); border-color: var(--nelson-green); }
.pc-btn--incart svg { width: 13px; height: 13px; }
.pc__incart { display: grid; grid-template-columns: 46px 1fr; gap: 8px; }
.pc-btn--remove { background: var(--nelson-white); color: var(--nelson-maroon); border-color: var(--nelson-maroon); padding: 11px 0; }
.pc-btn--remove:hover { background: var(--nelson-maroon); color: var(--nelson-white); }
.pc-btn--remove svg { width: 15px; height: 15px; }
.pc-btn--splash { background: var(--nelson-blue-splash); color: var(--nelson-white); }
.pc-btn--splash:hover { background: var(--nelson-blue); border-color: var(--nelson-green); }
.pc-btn--ghost { background: var(--nelson-white); color: var(--nelson-bright-blue); border-color: var(--border); }