/* ==== FF OD single product: parity additions ==============================
   Every value below was MEASURED off the Open Design PDP, not designed.

   Specifications card   bg #fff, 1px solid rgb(240,237,234), radius 16px,
                         padding 18px
   heading               Poppins 14px/600, rgb(0,0,0)
   row                   flex, space-between, gap 16px, padding 8px 0, h 34px
   row label             Inter 14px/400 rgb(106,103,98)
   row value             Inter 14px/500 rgb(0,0,0)
   thumbnails            grid, 4 columns, gap 12px, margin-top 12px,
                         each 135.9px square, radius 12px, object-fit contain
   price suffix          13px, rgb(106,103,98), weight 400
   ======================================================================== */

/* ---- product title (Allan) ---------------------------------------------
   H1 fixed at 30px. ff-od-pdp.php sets a clamp()-based size that scaled with
   the viewport, so it rendered larger on desktop. !important because that
   sheet prints inline in wp_head at priority 8, i.e. after this stylesheet. */
html body .ff-od-page.ff-od-pdp.ff-od-pdp h1,
html body .ff-od-page.ff-od-pdp.ff-od-pdp .product_title{
  font-size:30px !important;
  line-height:1.2 !important;}

/* ---- featured image card (Allan) ---------------------------------------
   1. Remove the 28px inner padding so the photo fills the card.
   2. Remove the "Catalogue" pill - it is a CSS ::before on .ff-pdp-imgcard in
      ff-od-pdp.php, not markup, so it has to be suppressed here.
   NB: ff-od-pdp.php prints its CSS inline in wp_head at priority 8, which
   renders AFTER this external stylesheet in the cascade, so padding needs
   !important to win. The badge reset works without it because `display:none`
   on a pseudo-element is not re-declared there. */
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-imgcard{
  padding:0 !important;}
html body .ff-od-page.ff-od-pdp.ff-od-pdp .ff-pdp-imgcard::before{
  content:none !important;
  display:none !important;}

/* ---- Specifications ----------------------------------------------------- */
html body .ff-od-page .ff-pdp-specs{
  background:rgb(255,255,255);
  border:1px solid rgb(240,237,234);
  border-radius:16px;
  padding:18px;
  margin:0 0 14px;}

html body .ff-od-page .ff-pdp-specs h2{
  font-family:Poppins,sans-serif;
  font-size:14px;
  font-weight:600;
  color:rgb(0,0,0);
  line-height:1.4;
  margin:0 0 4px;
  padding:0;}

html body .ff-od-page .ff-pdp-specs table{
  width:100%;
  border-collapse:collapse;
  margin:0;}

html body .ff-od-page .ff-pdp-specs tr{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:8px 0;
  border:0;}

html body .ff-od-page .ff-pdp-specs th,
html body .ff-od-page .ff-pdp-specs td{
  font-family:Inter,system-ui,sans-serif;
  font-size:14px;
  line-height:1.4;
  padding:0;
  border:0;
  background:none;}

html body .ff-od-page .ff-pdp-specs th{
  font-weight:400;
  color:rgb(106,103,98);
  text-align:left;
  white-space:nowrap;}

html body .ff-od-page .ff-pdp-specs td{
  font-weight:500;
  color:rgb(0,0,0);
  text-align:right;}

/* ---- gallery thumbnails ------------------------------------------------- */
html body .ff-od-page .ff-pdp-thumbs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;}

html body .ff-od-page .ff-pdp-thumb{
  padding:0;
  border:0;
  background:rgb(255,255,255);
  border-radius:12px;
  cursor:pointer;
  overflow:hidden;
  aspect-ratio:1/1;
  line-height:0;}

html body .ff-od-page .ff-pdp-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:12px;
  display:block;}

html body .ff-od-page .ff-pdp-thumb.is-active{
  outline:2px solid rgb(251,133,0);
  outline-offset:-2px;}

/* ---- price suffix ------------------------------------------------------- */
html body .ff-od-page .ff-pdp-pricesuffix{
  font-family:Inter,system-ui,sans-serif;
  font-size:13px;
  font-weight:400;
  color:rgb(106,103,98);
  margin-left:10px;}

@media (max-width: 880px) {
  html body .ff-od-page .ff-pdp-thumbs{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px;}
}