/* NOTE: the related widget is appended at ROOT level of template 92, so it
   is NOT inside .ff-od-page.ff-od-pdp - selectors must not require that
   ancestor or nothing matches (cards rendered full-width and unstyled).
   ==== FF OD "Often bought together" related-products row =================
   Layout follows the reference Allan supplied (badge / eyebrow / title /
   spec line / price + stock / full-width CTA). Colours and type are FIRE
   FLAMES OD tokens, measured from the OD PDP - NOT the reference's red:
     card      #fff, 1px solid rgb(240,237,234), radius 16px, padding 18px
     heading   Poppins 700
     body      Inter
     muted     rgb(106,103,98)
     CTA       rgb(251,133,0)  (OD primary)
   Width band matches .ff-pdp-wrap: max-width 1200px, 22px side padding.
   ======================================================================== */

html body .ff-pdp-related.ff-pdp-related{
  width:100%;
  max-width:1200px;
  /* Allan: 40px top AND 40px bottom padding on the section.
     Spacing now lives in the padding, not the margin, so the gap is the same
     above and below regardless of what precedes it. */
  margin:0 auto;
  padding:40px 22px;
  box-sizing:border-box;}

html body .ff-pdp-related.ff-pdp-related > h2{
  font-family:Poppins,sans-serif;
  font-weight:700;
  font-size:26px;
  line-height:1.25;
  color:rgb(0,0,0);
  margin:0 0 18px;
  letter-spacing:-0.01em;}

html body .ff-pdp-related.ff-pdp-related .ff-pdp-related-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
  align-items:stretch;}

/* ---- card --------------------------------------------------------------- */
html body .ff-pdp-related.ff-pdp-related .ff-rel-card{
  display:flex;
  flex-direction:column;
  background:rgb(255,255,255);
  border:1px solid rgb(240,237,234);
  border-radius:16px;
  padding:14px;
  box-sizing:border-box;
  min-width:0;}

html body .ff-pdp-related.ff-pdp-related .ff-rel-media{
  position:relative;
  display:block;
  background:rgb(250,248,246);
  border-radius:12px;
  aspect-ratio:1/1;
  overflow:hidden;
  line-height:0;}

html body .ff-pdp-related.ff-pdp-related .ff-rel-media img{
  width:100%;height:100%;object-fit:contain;display:block;}

html body .ff-pdp-related.ff-pdp-related .ff-rel-badge{
  position:absolute;top:10px;left:10px;z-index:1;
  display:inline-flex;align-items:center;
  height:22px;padding:0 9px;border-radius:999px;
  font:600 11px/1 Inter,system-ui,sans-serif;
  letter-spacing:0.01em;}
html body .ff-pdp-related.ff-pdp-related .ff-rel-badge.is-sale{
  background:rgb(251,133,0);color:rgb(255,255,255);}
html body .ff-pdp-related.ff-pdp-related .ff-rel-badge.is-out{
  background:rgb(240,237,234);color:rgb(37,37,37);}

/* ---- body --------------------------------------------------------------- */
html body .ff-pdp-related.ff-pdp-related .ff-rel-body{
  display:flex;flex-direction:column;
  gap:6px;padding:12px 2px 0;flex:1 1 auto;}

html body .ff-pdp-related.ff-pdp-related .ff-rel-eyebrow{
  font:600 11px/1.2 Inter,system-ui,sans-serif;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgb(138,135,131);}

html body .ff-pdp-related.ff-pdp-related .ff-rel-body h3{
  font-family:Poppins,sans-serif;
  font-weight:600;
  font-size:15px;
  line-height:1.35;
  color:rgb(0,0,0);
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;}
html body .ff-pdp-related.ff-pdp-related .ff-rel-body h3 a{
  color:inherit;text-decoration:none;}
html body .ff-pdp-related.ff-pdp-related .ff-rel-body h3 a:hover{
  color:rgb(251,133,0);}

html body .ff-pdp-related.ff-pdp-related .ff-rel-spec{
  font:400 12.5px/1.45 Inter,system-ui,sans-serif;
  color:rgb(106,103,98);
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;}

html body .ff-pdp-related.ff-pdp-related .ff-rel-pricerow{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-top:auto;padding-top:8px;}

html body .ff-pdp-related.ff-pdp-related .ff-rel-price,
html body .ff-pdp-related.ff-pdp-related .ff-rel-price .woocommerce-Price-amount{
  font-family:Poppins,sans-serif;
  font-weight:700;
  font-size:17px;
  line-height:1.2;
  color:rgb(0,0,0);}

html body .ff-pdp-related.ff-pdp-related .ff-rel-stock{
  font:600 12px/1.2 Inter,system-ui,sans-serif;
  white-space:nowrap;}
html body .ff-pdp-related.ff-pdp-related .ff-rel-stock.is-in{color:rgb(28,141,74);}
html body .ff-pdp-related.ff-pdp-related .ff-rel-stock.is-out{color:rgb(176,58,46);}

/* ---- CTA (OD orange, not the reference's red) --------------------------- */
html body .ff-pdp-related.ff-pdp-related .ff-rel-cta,
html body .ff-pdp-related.ff-pdp-related .ff-rel-cta:hover,
html body .ff-pdp-related.ff-pdp-related .ff-rel-cta:focus{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:44px;margin-top:12px;
  background:rgb(251,133,0);
  color:rgb(255,255,255);
  border:0;border-radius:10px;
  font:600 14px/1 Inter,system-ui,sans-serif;
  text-decoration:none;
  box-sizing:border-box;}
html body .ff-pdp-related.ff-pdp-related .ff-rel-cta:hover{
  background:rgb(218,115,0);}
html body .ff-pdp-related.ff-pdp-related .ff-rel-cta:focus-visible{
  outline:2px solid rgb(218,115,0);outline-offset:3px;}

@media (max-width: 980px) {
  html body .ff-pdp-related.ff-pdp-related .ff-pdp-related-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width: 880px) {
  /* NB: no margin/padding override here - Allan specified 40px top and 40px
     bottom at every width, so the base rule stands on mobile too. */
  html body .ff-pdp-related.ff-pdp-related > h2{font-size:21px;}
  html body .ff-pdp-related.ff-pdp-related .ff-pdp-related-grid{gap:12px;}
  html body .ff-pdp-related.ff-pdp-related .ff-rel-card{padding:12px;}
}