/* ============================================================================
   fm-product.css — brand styling for product grids
   ----------------------------------------------------------------------------
   Covers: sort filter control, product cell actions, brand buttons.
   Spec: foremost-digital-standards.html sections 01, 04, 06.

   SCOPING: every rule sits under .fm-sortfilter, .fm-segmented, .fm-btn or
   .fm-cell. Nothing here can collide with the legacy Bootstrap sheet, and no
   legacy class is redefined.

   TOKENS: declared on :root AND on each fm- root, so the rules still resolve
   if this sheet is ever loaded into a page that scopes tokens elsewhere.
   ========================================================================== */

:root,
.fm-sortfilter,
.fm-cnc,
.fm-stock,
.fm-meta,
.fm-cell {
	--fm-blue1:  #0061fe;
	--fm-blue2:  #0039c7;
	--fm-blue4:  #87c2ff;
	--fm-blue5:  #e8effd;
	--fm-navy:   #121d3c;
	--fm-neon:   #ccff00;
	--fm-white:  #ffffff;
	--fm-navy60: rgba(18, 29, 60, 0.6);
	--fm-radius-button: 60px;
	--fm-radius-box: 30px;
	--fm-radius-small: 16px;
	--fm-font-body: 'Ambit', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* ============================ BUTTONS ==================================== */
/* Pill, 44px, sentence case, wider than tall. Hover pulse 1.03.             */

.fm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 18px;
	border-radius: var(--fm-radius-button);
	font-family: var(--fm-font-body);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0.3px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	box-sizing: border-box;
	transition: transform 150ms ease-out, background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.fm-btn:hover  { transform: scale(1.03); text-decoration: none; }
.fm-btn:focus-visible { outline: 2px solid var(--fm-navy); outline-offset: 2px; }

.fm-btn--primary,
.fm-btn--primary:visited { background: var(--fm-blue1); color: var(--fm-white); border-color: var(--fm-blue1); }
.fm-btn--primary:hover,
.fm-btn--primary:focus   { background: var(--fm-blue2); color: var(--fm-white); border-color: var(--fm-blue2); }
.fm-btn--primary:active  { background: var(--fm-navy);  border-color: var(--fm-navy); }

.fm-btn--secondary,
.fm-btn--secondary:visited { background: var(--fm-white); color: var(--fm-blue1); border-color: var(--fm-blue1); }
.fm-btn--secondary:hover,
.fm-btn--secondary:focus   { background: var(--fm-blue5); color: var(--fm-blue1); }

.fm-btn--tertiary,
.fm-btn--tertiary:visited { background: transparent; color: var(--fm-blue1); border: none; min-height: 28px; padding: 0 6px; }
.fm-btn--tertiary:hover,
.fm-btn--tertiary:focus   { color: var(--fm-navy); text-decoration: underline; }

.fm-btn.is-disabled { opacity: 0.4; pointer-events: none; }

/* ============================ PRODUCT CELL =============================== */
/* Define the card explicitly rather than leaning on .panel. The cell is
   <article class="panel panel-default product-cell fm-cell">, so it was picking
   up its radius from .panel but its backgrounds from legacy .product-cell
   rules — child backgrounds painted over the rounded corners and clipped them.
   overflow:hidden makes the radius authoritative. */
.fm-cell{
  background:var(--fm-white);
  border:1px solid var(--fm-blue5);
  border-radius:var(--fm-radius-box);
  overflow:hidden;
  box-shadow:none;
  margin-bottom:16px;
  padding:0;
  height:100%;
  display:flex;
  flex-direction:column;
  transition:border-color 150ms ease,box-shadow 150ms ease;
}
.fm-cell:hover{border-color:var(--fm-blue4);box-shadow:0 8px 28px rgba(0,97,254,.10)}
.fm-cell > .prodcell_image_link,
.fm-cell > a:first-child{display:block;padding:14px 14px 0;background:var(--fm-white)}
.fm-cell figure{margin:0;background:var(--fm-white);border-radius:var(--fm-radius-small);overflow:hidden}
.fm-cell .panel-body{background:var(--fm-white);padding:14px 16px 18px;border-radius:0;flex:1;display:flex;flex-direction:column}
.fm-cell .prodcell_text{flex:1;display:flex;flex-direction:column}
.fm-cell br{display:none}

/* Release the legacy title height reservation.
   apparatus-default.css sets `.product-cell h4 { min-height:60px; line-height:14px }`
   — four lines of space held open so the "Code:" line aligns across a row,
   whatever the title length. Measured on a live search grid: every h4 reports
   exactly 60px, one-line titles included.

   The cell already solves that properly. .fm-cell is a column flex container and
   .fm-cell-actions carries margin-top:auto, so cards align at the BOTTOM by
   construction. The reservation aligns the middle instead, and now that price,
   classification and availability stack beneath, the two mechanisms fight — the
   dead band sits between the title and the code line.

   Scoped to .fm-cell rather than edited in apparatus-default.css, which is
   site-wide legacy styling things outside this work. The 14px line-height goes
   with it: it was cramping a title to fit four lines into 60px. */
.fm-cell .product-title h4{
	min-height:0;
	line-height:1.35;
	margin-bottom:6px;
	font-size:13px;
}

/* ========================== PRODUCT CELL QTY ============================= */
/* Dedicated stepper, matching the product detail page. Replaces a Bootstrap
   .row + .input-group that spanned the whole cell and whose .btn-default
   buttons kept inheriting legacy styling. */
.fm-cell .fm-cell-qty{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}
.fm-cell-qty__label{
  font-size:12px;
  font-weight:700;
  color:var(--fm-navy60);
  flex:0 0 auto;
}
.fm-cell-qty__group{
  display:inline-flex;
  align-items:center;
  border:2px solid var(--fm-blue4);
  border-radius:var(--fm-radius-button);
  overflow:hidden;
  background:var(--fm-white);
}
.fm-cell-qty__btn{
  width:34px;height:34px;
  border:0;background:var(--fm-white);
  color:var(--fm-blue1);
  font-size:16px;line-height:1;
  cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fm-font-body);
  transition:background 120ms ease,color 120ms ease;
}
.fm-cell-qty__btn:hover:not([disabled]){background:var(--fm-blue1);color:var(--fm-white)}
.fm-cell-qty__btn[disabled]{opacity:.35;cursor:not-allowed}
.fm-cell-qty__input{
  width:46px;height:34px;
  border:0;text-align:center;
  font-family:var(--fm-font-body);
  font-size:14px;font-weight:600;
  color:var(--fm-navy);
  background:var(--fm-white);
  -moz-appearance:textfield;
}
.fm-cell-qty__input::-webkit-outer-spin-button,
.fm-cell-qty__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fm-cell-qty__input:focus{outline:none;background:var(--fm-blue5)}

/* ======================= PRODUCT CELL ACTIONS ============================ */
/* Replaces the <center> block. Primary action first (it is the job of the    */
/* cell); "More info" secondary; favourites tertiary on its own row.          */

.fm-cell .fm-cell-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
}
.fm-cell .fm-cell-actions .fm-btn--primary,
.fm-cell .fm-cell-actions .fm-btn--secondary { flex: 1 1 auto; min-width: 108px; }
.fm-cell .fm-cell-actions .fm-btn--tertiary  { flex: 1 0 100%; justify-content: center; }

/* ====================== CLASSIFICATION BADGE ============================= */
/* How a product will classify by DEFAULT for this viewer - product.cnc_words
   overridden by the site/customer exception cascade. Pre-basket there is no
   orderdetail row, so this is what the line WILL be, not what it is; the basket
   can still override per line or for the whole order.

   Deliberately quiet. It sits on every product on a grid of up to 75, so it
   recedes rather than competes: Blue No5 on Blue No2 for the recharge family,
   navy at 7% for non-rechargeable. NEON IS NOT USED - the standards reserve it
   for rare accents, and a badge on every card would spend it.

   Seven of the eight values (Rechargeable plus the six specific settings) are
   recharge categories and behave identically for budget and recharge, so they
   share one weight and differ only in label. Non-rechargeable is the real
   distinction and takes the only contrast.

   Rendered INSIDE the price block, not beside it: an end-client price exists
   only on a rechargeable line, so on a non-rechargeable one the badge is the
   reason the client figure shows a dash. Kept together, the badge explains the
   price; split apart, the dash looks like a fault. */

.fm-cnc{
	display:inline-flex;
	align-items:center;
	gap:5px;
	padding:2px 10px;
	border-radius:var(--fm-radius-small);
	font-family:var(--fm-font-body);
	font-size:11px;
	font-weight:600;
	line-height:1.6;
	white-space:nowrap;
	margin-top:4px;
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
}
.fm-cnc::before{
	content:'';
	width:5px;height:5px;
	border-radius:50%;
	flex:0 0 auto;
}
.fm-cnc--rech{background:var(--fm-blue5);color:var(--fm-blue2)}
.fm-cnc--rech::before{background:var(--fm-blue1)}
.fm-cnc--non{background:rgba(18,29,60,.07);color:var(--fm-navy60)}
.fm-cnc--non::before{background:rgba(18,29,60,.3)}

/* product detail has room for a larger one */
.fm-cnc--lg{font-size:12px;padding:3px 12px}

/* ====================== AVAILABILITY CHIP ================================ */
/* libs\Stock states, rendered by snippet/_stock_chip.php. Three tones only:
   green In stock, amber Temporarily out / Partially allocated / None allocated,
   blue Special order / Will be ordered in.

   NO RED and no barred-circle icon anywhere. Red reads as "you cannot buy this",
   which is never true here — every state still adds to the order. The tick marks
   the good state; amber and blue share one information mark, so the difference
   between them is register rather than alarm. */

.fm-stock{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:3px 11px 3px 8px;
	border-radius:var(--fm-radius-button);
	font-family:var(--fm-font-body);
	font-size:12px;
	font-weight:600;
	line-height:1.5;
	white-space:nowrap;
	max-width:100%;
	position:relative;
}
.fm-stock svg{width:13px;height:13px;flex-shrink:0}
.fm-stock--ok{background:#e7f6ef;color:#12855a}
.fm-stock--warn{background:#fdf1de;color:#b26a00}
.fm-stock--info{background:var(--fm-blue5);color:var(--fm-blue1)}

/* product detail has room for a larger one */
.fm-stock--lg{font-size:13.5px;padding:6px 15px 6px 11px}
.fm-stock--lg svg{width:16px;height:16px}

/* The bare other-depot line — a statement of fact with no timing attached.
   Shown on EVERY surface including grid cards. It was card-suppressed at first to
   save space, which had it backwards: someone who sees "Special order" on a search
   card is the least likely to click through, so that is exactly where they would
   never learn there is stock at the other depot. It wraps to two lines on a narrow
   card, which is acceptable for a state most products are not in.
   flex-start so the icon holds the first line rather than centring against a
   wrapped block. */
.fm-stock__other{
	display:inline-flex;
	align-items:flex-start;
	gap:7px;
	font-size:12px;
	line-height:1.45;
	color:var(--fm-navy60);
	font-family:var(--fm-font-body);
	max-width:100%;
	white-space:normal;
}
.fm-stock__other svg{width:14px;height:14px;flex-shrink:0;color:var(--fm-blue1);margin-top:2px}

/* tooltip: CSS-only, so it survives loadCart()/update_line re-rendering the row */
.fm-stock__q{
	display:inline-flex;align-items:center;justify-content:center;
	width:15px;height:15px;border-radius:50%;
	border:1.5px solid currentColor;font-size:9px;font-weight:800;
	cursor:help;opacity:.55;flex-shrink:0;
}
.fm-stock__q:hover{opacity:1}
.fm-stock__tip{
	position:absolute;bottom:calc(100% + 9px);left:0;
	background:var(--fm-navy);color:var(--fm-white);
	font-size:12px;font-weight:400;line-height:1.5;
	padding:9px 12px;border-radius:10px;width:250px;text-align:left;
	opacity:0;pointer-events:none;transition:opacity 150ms ease;z-index:30;
	white-space:normal;
}
.fm-stock--tip:hover .fm-stock__tip,
.fm-stock--tip:focus-within .fm-stock__tip{opacity:1}
/* right-aligned columns flip it, or it runs off the edge */
.fm-meta--right .fm-stock__tip{left:auto;right:0}

/* ====================== PRICE / BADGE / STOCK BLOCK ======================= */
/* Price, classification badge and availability chip were siblings on one line,
   each free to wrap independently. At ~210px of card width the line broke
   wherever it ran out — including through the middle of a pill, because a chip
   has a background and an icon and is an indivisible object being treated as
   text. Adding a third chip made that worse, not better.

   One column, one row each, 6px apart. Nothing can split; a long label truncates
   with an ellipsis instead. The Sell/Cost pair is a single row inside the block,
   so a both-mode cell is the same three rows as any other. */

.fm-meta{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:6px;
	min-width:0;
	max-width:100%;
}
.fm-meta--right{align-items:flex-end}
.fm-meta > *{max-width:100%}
/* product detail: more air than a grid cell, and it sits under the price rather
   than beside it — a badge next to a 26px figure competes with it, and on a
   narrow viewport it wraps around the price instead of under it. */
.fm-meta--pd{gap:9px;margin-top:10px}

/* Basket line: the chip sits in the info column, under the classification
   control. Not beside the price — the allocation states carry a count and the
   other-depot note is a sentence, and the money column is too narrow for either.
   Wrapped in [data-stock-chip] so basket.js can replace it wholesale when a
   quantity change moves the line between fully / partially / none allocated. */
.fm-line__stock{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:8px;
	margin-top:8px;
}
.fm-line__stock:empty{display:none}

@media (prefers-reduced-motion:reduce){
	.fm-stock__tip{transition:none}
}

/* ============================ AUTH PANELS ============================== */
/* Sign in and password reset. Replaces a Bootstrap panel whose body carried a
   dark submit button, a grey "Clear" and tinted inputs. */

.fm-auth{
  background:var(--fm-white);
  border:1px solid var(--fm-blue5);
  border-radius:var(--fm-radius-box);
  padding:32px 34px 30px;
  max-width:520px;
  margin:0 auto;
}
.fm-auth__h{margin:0 0 6px;font-size:20px;font-weight:700;color:var(--fm-navy)}
.fm-auth__sub{margin:0 0 24px;font-size:14px;line-height:1.65;color:var(--fm-navy60)}
.fm-auth__field{margin-bottom:18px}
.fm-auth__field label{display:block;font-size:12px;font-weight:700;color:var(--fm-navy60);margin-bottom:7px}
.fm-auth__req{color:var(--fm-neon);font-size:15px;margin-left:3px;vertical-align:1px}

.fm-auth__row{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  padding-top:6px;margin-top:4px;
  border-top:1px solid var(--fm-blue5);
}
.fm-auth__row{padding-top:18px}
.fm-auth__stay{flex:0 1 auto}
.fm-auth__actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.fm-auth__actions--single{margin-left:0;justify-content:flex-start;margin-top:4px}
.fm-auth__foot{margin-top:16px;font-size:13px}
.fm-auth__foot a,.fm-auth__foot a:visited{color:var(--fm-blue1);text-decoration:none}
.fm-auth__foot a:hover{text-decoration:underline}

@media (max-width:600px){
  .fm-auth{padding:24px 20px 22px;border-radius:var(--fm-radius-small)}
  .fm-auth__row{flex-direction:column;align-items:stretch}
  .fm-auth__actions{margin-left:0;width:100%}
  .fm-auth__actions .fm-btn{flex:1}
}

/* ========================== CATEGORY CARDS =============================== */
/* Rendered by snippet/category_cell.php on /category/index and mid-level
   category pages. The legacy cell was an unstyled Bootstrap panel with a
   centred link; this makes it a brand card with a fixed image tile so titles
   line up across a row regardless of image proportion. */

.fm-catcell{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--fm-white);
  border:1px solid var(--fm-blue5);
  border-radius:var(--fm-radius-box);
  overflow:hidden;
  transition:transform 150ms ease-out,box-shadow 150ms ease,border-color 150ms ease;
}
.fm-catcell:hover{
  transform:scale(1.03);
  border-color:var(--fm-blue4);
  box-shadow:0 8px 28px rgba(0,97,254,.10);
}

.fm-catcell__img{
  display:block;
  aspect-ratio:4/3;
  background:var(--fm-blue5);
  overflow:hidden;
}
/* aspect-ratio fallback for older engines */
@supports not (aspect-ratio: 4/3){
  .fm-catcell__img{height:0;padding-bottom:75%;position:relative}
  .fm-catcell__img img{position:absolute;inset:0}
}
.fm-catcell__img img{
  width:100%;height:100%;
  object-fit:contain;
  object-position:center;
  padding:14px;
  display:block;
}

.fm-catcell__body{
  padding:14px 16px 18px;
  text-align:center;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.fm-catcell__title{margin:0;font-size:14px;line-height:1.4}
.fm-catcell__title a,
.fm-catcell__title a:visited{color:var(--fm-navy);font-weight:700;text-decoration:none}
.fm-catcell__title a:hover,
.fm-catcell__title a:focus{color:var(--fm-blue1);text-decoration:none}

/* the grid column wrapper the views already emit */
.product-listing-thumbnails{margin-bottom:16px;display:flex}
.product-listing-thumbnails > .fm-catcell{width:100%}

@media (max-width:767px){
  .fm-catcell__body{padding:12px 12px 14px}
  .fm-catcell__title{font-size:13px}
}

/* ========================= SORT FILTER CONTROL =========================== */

.fm-sortfilter {
	font-family: var(--fm-font-body);
	color: var(--fm-navy);
	margin: 0 0 20px;
	padding: 14px 18px;
	background: var(--fm-blue5);
	border-radius: var(--fm-radius-box);
	box-sizing: border-box;
}

.fm-sortfilter__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.fm-sortfilter__label {
	font-size: 12px;
	font-weight: 700;
	color: var(--fm-navy60);
	flex-shrink: 0;
}

.fm-sortfilter__count {
	margin-left: auto;
	font-size: 12px;
	color: var(--fm-navy60);
}

/* Count-only variant. With price sorts hidden (anonymous visitors) only one
   option remains, so the control would be a single button that does nothing.
   It collapses to a quiet result count instead. */
.fm-sortfilter--countonly {
	background: none;
	padding: 0 0 8px;
	margin-bottom: 12px;
}
.fm-sortfilter--countonly .fm-sortfilter__count { margin-left: 0; }

.fm-sortfilter__note {
	margin-top: 8px;
	font-size: 12px;
	color: var(--fm-navy60);
}

/* ---- segmented control (spec section 06) ---- */
.fm-segmented {
	display: inline-flex;
	border-radius: var(--fm-radius-button);
	border: 2px solid var(--fm-blue1);
	overflow: hidden;
	background: var(--fm-white);
	max-width: 100%;
}

.fm-segmented__option,
.fm-segmented__option:visited {
	padding: 8px 18px;
	font-family: var(--fm-font-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--fm-blue1);
	background: var(--fm-white);
	border: none;
	border-right: 1px solid var(--fm-blue4);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
}
.fm-segmented__option:last-child { border-right: none; }
.fm-segmented__option:hover      { background: var(--fm-blue5); color: var(--fm-blue1); text-decoration: none; }
.fm-segmented__option.is-active,
.fm-segmented__option.is-active:hover { background: var(--fm-blue1); color: var(--fm-white); }
.fm-segmented__option:focus-visible   { outline: 2px solid var(--fm-navy); outline-offset: -2px; }

/* ---- mobile ---- */
@media (max-width: 767px) {
	.fm-sortfilter { padding: 12px; border-radius: var(--fm-radius-small); }
	.fm-sortfilter__row { gap: 8px; }
	.fm-segmented { width: 100%; flex-direction: column; border-radius: var(--fm-radius-small); }
	.fm-segmented__option {
		border-right: none;
		border-bottom: 1px solid var(--fm-blue4);
		text-align: center;
		min-height: 44px;              /* touch target */
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.fm-segmented__option:last-child { border-bottom: none; }
	.fm-sortfilter__count { margin-left: 0; width: 100%; }
	.fm-cell .fm-cell-actions .fm-btn { min-height: 44px; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.fm-btn, .fm-btn:hover { transition: none; transform: none; }
	.fm-segmented__option  { transition: none; }
}