/* ============================================================================
   fm-base.css — site-wide brand typography, buttons and form controls
   ----------------------------------------------------------------------------
   UNGATED. This applies to every page for every user, with or without
   fm_shell. It is the "fonts and buttons" half of the rebrand.

   Loaded from header.php AFTER foremost.css, so on equal specificity these
   rules win.

   SCOPE OF RISK: the @font-face and the body font-family below change type on
   every page in the app. Everything else is either fm- prefixed or a narrow,
   deliberate override of a legacy Bootstrap class (.btn-primary and friends),
   listed explicitly rather than applied by wildcard.
   ========================================================================== */

/* ---------------------------------------------------------------- font ---- */
/* Only ambit-regular.otf exists on the server. Bold and semibold are therefore
   SYNTHESISED by the browser, which is acceptable but not ideal — if marketing
   can supply ambit-medium.otf and ambit-bold.otf, add the two @font-face rules
   below and the weights become real with no other change. */
@font-face{
  font-family:'Ambit';
  src:url('/product_images/fonts/ambit-regular.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
/*
@font-face{ font-family:'Ambit'; src:url('/product_images/fonts/ambit-medium.otf') format('opentype'); font-weight:600; font-display:swap; }
@font-face{ font-family:'Ambit'; src:url('/product_images/fonts/ambit-bold.otf')   format('opentype'); font-weight:700; font-display:swap; }
*/

:root{
  --fm-blue1:#0061fe; --fm-blue2:#0039c7; --fm-blue3:#0d85ff;
  --fm-blue4:#87c2ff; --fm-blue5:#e8effd;
  --fm-navy:#121d3c;  --fm-neon:#ccff00;  --fm-white:#fff;
  --fm-red:#e74c3c;   --fm-red-dark:#c0392b;
  --fm-navy60:rgba(18,29,60,.6); --fm-navy30:rgba(18,29,60,.3);
  --fm-r-btn:60px; --fm-r-box:30px; --fm-r-sm:16px;
  --fm-font:'Ambit','Open Sans','Helvetica Neue',Arial,sans-serif;
}

body,
button, input, select, textarea,
.btn, .form-control{
  font-family:var(--fm-font);
}

body{color:var(--fm-navy);-webkit-font-smoothing:antialiased}

/* headings — sentence case is a copy decision, not a CSS one, so no
   text-transform here. Just weight, colour and scale. */
h1,h2,h3,h4,h5,.page-title{font-family:var(--fm-font);color:var(--fm-navy);font-weight:700}
h1,.page-title{font-size:28px;line-height:1.2}
h2{font-size:22px}
h3{font-size:18px}
h4{font-size:15px}

a{color:var(--fm-blue1)}
a:hover,a:focus{color:var(--fm-blue2)}

/* icon fonts declare their own family, so they are unaffected by the above. */

/* ------------------------------------------------------------- buttons ---- */
/* Narrow, deliberate overrides of the legacy Bootstrap button classes so every
   existing button on every page picks up the pill shape without touching 150
   views. New markup should use .fm-btn (fm-product.css) instead. */
.btn{
  border-radius:var(--fm-r-btn);
  font-family:var(--fm-font);
  font-weight:400;
  letter-spacing:.3px;
  border-width:2px;
  box-shadow:none;
  text-shadow:none;
  transition:transform .15s ease-out,background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{transform:scale(1.03)}
.btn:active,.btn:focus{box-shadow:none;outline:none}
.btn:focus-visible{outline:2px solid var(--fm-navy);outline-offset:2px}

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

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

.btn-info,.btn-info:visited{background:var(--fm-blue1);border-color:var(--fm-blue1);color:#fff}
.btn-info:hover,.btn-info:focus{background:var(--fm-blue2);border-color:var(--fm-blue2);color:#fff}

.btn-success,.btn-success:visited{background:var(--fm-blue1);border-color:var(--fm-blue1);color:#fff}
.btn-success:hover,.btn-success:focus{background:var(--fm-blue2);border-color:var(--fm-blue2);color:#fff}

.btn-danger,.btn-danger:visited{background:var(--fm-red);border-color:var(--fm-red);color:#fff}
.btn-danger:hover,.btn-danger:focus{background:var(--fm-red-dark);border-color:var(--fm-red-dark);color:#fff}

.btn-link{border-color:transparent;color:var(--fm-blue1)}
.btn-link:hover{color:var(--fm-navy);text-decoration:underline}

/* size variants keep the pill proportion (always wider than tall) */
.btn-xs{min-height:28px;padding:0 14px;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn-sm{min-height:34px;padding:0 16px;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn-lg{min-height:48px;padding:0 30px;font-size:16px;border-radius:var(--fm-r-btn)}

.btn.disabled,.btn[disabled]{opacity:.4;transform:none}

/* the +/- steppers in qty groups keep square-ish ends inside the group */
.input-group .btn-number{border-radius:var(--fm-r-sm);min-width:34px}

/* --------------------------------------------------------------- forms ---- */
.form-control{
  border:2px solid var(--fm-blue4);
  border-radius:var(--fm-r-btn);
  height:44px;
  padding:0 16px;
  font-size:14px;
  color:var(--fm-navy);
  background:#fff;
  box-shadow:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.form-control:focus{border-color:var(--fm-blue1);box-shadow:0 0 0 3px rgba(0,97,254,.15)}
.form-control::placeholder{color:var(--fm-navy30)}
textarea.form-control{height:auto;padding:12px 16px;border-radius:var(--fm-r-sm);line-height:1.6}
select.form-control{padding-right:34px}
.input-sm{height:34px;font-size:13px}
.input-lg{height:48px;font-size:16px}

label{font-weight:700;font-size:13px;color:var(--fm-navy60);margin-bottom:6px}

/* ---- qty steppers inside a Bootstrap .input-group -------------------------
   The pill radius and 16px padding above are right for a standalone field and
   wrong inside a 3-cell input-group: with a narrow cell the value was clipped
   out of view entirely (it looked like an empty box). Reset within groups. */
.input-group .form-control{
  border-radius:var(--fm-r-sm);
  padding:0 6px;
  text-align:center;
  height:38px;
  min-width:44px;
  font-size:14px;
  font-weight:600;
  color:var(--fm-navy);
  background:#fff;
}
.input-group .form-control:focus{position:relative;z-index:3}
.input-group .btn,
.input-group .btn-number{
  height:38px;
  min-height:38px;
  min-width:38px;
  padding:0;
  border-radius:var(--fm-r-sm);
  font-size:16px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:2px solid var(--fm-blue4);
  color:var(--fm-blue1);
}
.input-group .btn-number:hover{background:var(--fm-blue5);transform:none}
.input-group .btn-number[disabled]{opacity:.35}
/* keep the group reading as one control */
.input-group{border-radius:var(--fm-r-btn)}
.input-group .input-group-btn:first-child .btn{border-top-right-radius:0;border-bottom-right-radius:0;
  border-top-left-radius:var(--fm-r-btn);border-bottom-left-radius:var(--fm-r-btn);border-right-width:0}
.input-group .input-group-btn:last-child .btn{border-top-left-radius:0;border-bottom-left-radius:0;
  border-top-right-radius:var(--fm-r-btn);border-bottom-right-radius:var(--fm-r-btn);border-left-width:0}
.input-group .form-control{border-radius:0;border-left-width:2px;border-right-width:2px}

/* ---------------------------------------------------------- containers ---- */
/* Bootstrap panels are used as cards all over the app. Round them and drop the
   grey chrome so they read as the brand's boxes rather than 2012 Bootstrap. */
.panel{border-radius:var(--fm-r-box);border:1px solid var(--fm-blue5);box-shadow:none}
.panel-default{border-color:var(--fm-blue5)}
.panel-default>.panel-heading{
  background:#fff;border-bottom:1px solid var(--fm-blue5);
  border-radius:var(--fm-r-box) var(--fm-r-box) 0 0;color:var(--fm-navy);font-weight:700;
}
.panel-body{padding:22px 24px}
.well{background:var(--fm-blue5);border:0;border-radius:var(--fm-r-box);box-shadow:none}

hr{border-top:1px solid var(--fm-blue5)}

/* ---- product imagery -----------------------------------------------------
   Pack badges (the "10x4" boxes) are edited directly INTO the image files and
   sit in the bottom-right corner. Rounding the frame and clipping would cut
   them; so the frame is rounded and the photo is inset within it, leaving the
   corners clear of artwork. Same approach the category cards use. */
.product-cell figure,
.prodcell_image_link,
.product-detail .thumbnail,
.thumbnail{
  border-radius:var(--fm-r-sm);
  border-color:var(--fm-blue5);
  background:#fff;
  display:block;
  overflow:hidden;
  padding:8px;
}
.prod_detail_thumb,
.product-cell-image,
.favourite_image{
  border-radius:0;          /* the FRAME is rounded, not the photo */
  display:block;
  margin:0 auto;
  max-width:100%;
  height:auto;
}
/* product detail: give the main image a consistent square-ish frame so the
   page does not reflow between products of different proportions */
.product-detail .thumbnail.prod_detail_thumb,
.product-detail a > .prod_detail_thumb{padding:0}
.product-detail .prod_detail_thumb{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
}
@supports not (aspect-ratio: 1/1){
  .product-detail .prod_detail_thumb{max-height:340px}
}

/* ---- product detail: qty stepper + actions --------------------------------
   The detail page carries its own controls rather than sharing the grid cell's,
   so they need their own rules. Stepper matches the cell's proportions. */
.fm-pd-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.fm-pd-qty{
  display:inline-flex;align-items:center;
  border:2px solid var(--fm-blue4);
  border-radius:var(--fm-r-btn);
  overflow:hidden;background:#fff;
}
.fm-pd-qty__btn{
  width:40px;height:40px;border:0;background:#fff;color:var(--fm-blue1);
  font-size:18px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fm-font);transition:background .12s ease,color .12s ease;
}
.fm-pd-qty__btn:hover:not([disabled]){background:var(--fm-blue1);color:#fff}
.fm-pd-qty__btn[disabled]{opacity:.35;cursor:not-allowed}
.fm-pd-qty__input{
  width:52px;height:40px;border:0;text-align:center;
  font-family:var(--fm-font);font-size:15px;font-weight:600;color:var(--fm-navy);
  background:#fff;-moz-appearance:textfield;
}
.fm-pd-qty__input::-webkit-outer-spin-button,
.fm-pd-qty__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fm-pd-qty__input:focus{outline:none;background:var(--fm-blue5)}

/* ------------------------------------------------------------- tables ----- */
.table>thead>tr>th{
  background:var(--fm-blue1);color:#fff;border-bottom:0;font-size:12px;font-weight:700;
  vertical-align:middle;
}
.table>tbody>tr>td{border-top:1px solid rgba(135,194,255,.3);font-size:14px;vertical-align:middle}
.table-hover>tbody>tr:hover{background:var(--fm-blue5)}

/* --------------------------------------------------------- alert boxes ---- */
.alert{border-radius:var(--fm-r-sm);border:0;border-left:4px solid var(--fm-blue1);
  background:var(--fm-blue5);color:var(--fm-navy);font-size:14px}
.alert-danger{border-left-color:var(--fm-red);background:rgba(231,76,60,.08)}
.alert-success{border-left-color:var(--fm-neon);background:rgba(204,255,0,.12)}
.alert-warning{border-left-color:#e08a1e;background:#fdf1de}

/* ------------------------------------------------- validation prompts ------
   jquery.validationEngine draws its own bubbles: a green "success" popup and a
   red error popup, both with a CSS-triangle arrow. The green is a 2010-era
   gradient green that appears on the login page the moment a field validates.
   Recoloured to the brand rather than replaced, so the plugin keeps working. */
.formError .formErrorContent,
.formError .formErrorArrow div{
  font-family:var(--fm-font);
  font-size:12px;
  line-height:1.45;
  box-shadow:0 8px 24px rgba(18,29,60,.18);
  text-shadow:none;
}
.formError .formErrorContent{
  background:var(--fm-red);
  color:#fff;
  border:0;
  border-radius:var(--fm-r-sm);
  padding:8px 12px;
}
.formError .formErrorArrow div{background:var(--fm-red);border:0;box-shadow:none}

/* success / "logged" bubble */
.greenPopup .formErrorContent,
.formError.greenPopup .formErrorContent{
  background:var(--fm-navy);
  color:#fff;
}
.greenPopup .formErrorArrow div,
.formError.greenPopup .formErrorArrow div{background:var(--fm-navy)}

/* the inline field states the plugin also sets */
.form-control.validate\[required\]:focus{border-color:var(--fm-blue1)}
input.formError,
textarea.formError,
select.formError{border-color:var(--fm-red) !important}

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