/* ============================================================
   PFN Site — contact form, footer layout, partner logos
   Nothing here depends on products or affiliate links.
   Version lives in the filename: bump PFN_SITE_VER in the
   plugin to refresh past Cloudflare's immutable caching.
   ============================================================ */

/* ============================================================
   FOOTER GRID
   Removing the retired partner left an empty column holding a
   slot, so the remaining columns wrapped onto a second row.
   Collapse empty columns and lay the rest out explicitly.
   ============================================================ */
.footer-grid > .footer-col:empty,
.footer-grid > div:empty{
  display:none !important;
}

/* The theme injects its own footer-grid rule inline with !important, which
   beats a plugin stylesheet on equal specificity. Raise ours above it. */
html body .footer-grid,
html body footer .footer-grid{
  display:grid !important;
  grid-template-columns:1.7fr 1fr 1fr 1.1fr !important;
  gap:30px 40px !important;
  align-items:start !important;
  max-width:1200px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.footer-grid > *{ min-width:0; }

.footer-col h5,
.pfn-partners-col h5{
  color:#e4e8f2 !important;
  font:700 14px/1.4 Poppins,system-ui,sans-serif !important;
  text-transform:uppercase !important;
  letter-spacing:.5px !important;
  margin:0 0 14px !important;
}
.footer-col a{
  display:block;
  padding:3px 0;
  color:#8b92a5 !important;
  font:400 13.5px/1.7 Poppins,system-ui,sans-serif !important;
  text-decoration:none !important;
  transition:color .15s ease;
}
.footer-col a:hover{ color:#ff6b00 !important; }

@media (max-width:1000px){
  html body .footer-grid{ grid-template-columns:1.4fr 1fr 1fr !important; gap:26px 30px !important; }
  html body .pfn-partners-col{ grid-column:1 / -1 !important; }
}
@media (max-width:700px){
  html body .footer-grid{ grid-template-columns:1fr 1fr !important; gap:24px 20px !important; }
  html body .footer-grid > .footer-col:first-child{ grid-column:1 / -1 !important; }
  html body .pfn-partners-col{ grid-column:1 / -1 !important; }
}
@media (max-width:420px){
  html body .footer-grid{ grid-template-columns:1fr !important; gap:22px !important; }
}

/* the exact date alongside the relative one — "today" alone tells a
   reader nothing a week later when the page is cached or shared */
.pfn-shop-fresh-on{
  opacity:.75;
  margin-left:4px;
}



/* A card with no product photo: give it the accent bar instead of a plate,
   so it reads as a deliberate text card rather than a failed image. */
.pfn-shop-card-noimg{
  border-top:3px solid var(--pfn-orange);
}
.pfn-shop-card-noimg .pfn-shop-body{ padding-top:18px; }
.pfn-shop-card-noimg .pfn-shop-name{ font-size:17px !important; }

@media (max-width:480px){
  .pfn-shop-card-noimg{ grid-template-columns:1fr !important; }
}

/* ============================================================
   FOOTER PARTNERS — logos need a common frame, not each their own
   ============================================================ */
html body .pfn-partners-col{ min-width:0; }

html body .pfn-partners-col a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-width:190px !important;
  min-height:56px !important;
  margin:0 0 10px !important;
  padding:10px 14px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:10px !important;
  background:#f4f6fa !important;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:border-color .16s ease, transform .16s ease;
}
html body .pfn-partners-col a:hover{
  border-color:#ff6b00 !important;
  transform:translateY(-1px);
}
/* every logo to the same optical size, centred, never stretched */
html body .pfn-partners-col a img{
  display:block !important;
  width:auto !important;
  height:26px !important;
  max-width:150px !important;
  max-height:26px !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 auto !important;
  background:none !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
}

/* a partner with no logo file: readable text instead of a blank tile */
html body .pfn-partners-col a:not(:has(img)){
  color:#14181f !important;
  font:700 12.5px/1.3 Poppins,system-ui,sans-serif !important;
  letter-spacing:.2px;
  text-transform:none;
}

.pfn-partners-note{
  margin:10px 0 0 !important;
  color:#7e879c !important;
  font:400 10.5px/1.5 Poppins,system-ui,sans-serif !important;
}

@media (max-width:700px){
  html body .pfn-partners-col a{ max-width:none !important; }
}

/* ============================================================
   CONTACT FORM — [pfn_contact]
   ============================================================ */
.pfn-cf{
  --pfn-orange:#ff6b00;
  margin:26px 0;
  padding:24px;
  border:1px solid rgba(255,255,255,.1);
  border-left:3px solid var(--pfn-orange);
  border-radius:14px;
  background:#0d1117;
}
.pfn-cf-row{ margin-bottom:16px; }
.pfn-cf label{
  display:block;
  margin-bottom:6px;
  color:#c9ced6 !important;
  font:600 12.5px/1.4 Poppins,system-ui,sans-serif !important;
  letter-spacing:.2px;
}
.pfn-cf input[type=text],
.pfn-cf input[type=email],
.pfn-cf select,
.pfn-cf textarea{
  width:100%;
  box-sizing:border-box;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:9px;
  background:#11161e;
  color:#e4e8f2;
  font:400 14px/1.5 Poppins,system-ui,sans-serif;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pfn-cf input:focus,
.pfn-cf select:focus,
.pfn-cf textarea:focus{
  outline:none;
  border-color:var(--pfn-orange);
  box-shadow:0 0 0 3px rgba(255,107,0,.18);
}
.pfn-cf textarea{ resize:vertical; min-height:130px; }
.pfn-cf select{ appearance:none; cursor:pointer; }

.pfn-cf-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 26px;
  border:0; border-radius:9px;
  background:var(--pfn-orange);
  color:#fff;
  font:700 13.5px/1 Poppins,system-ui,sans-serif;
  cursor:pointer;
  min-height:46px;
  transition:background .15s ease, transform .15s ease;
}
.pfn-cf-btn:hover{ background:#ff8533; transform:translateY(-1px); }

.pfn-cf-note{
  margin:14px 0 0 !important;
  color:#7e879c !important;
  font:400 11.5px/1.6 Poppins,system-ui,sans-serif !important;
}
.pfn-cf-note a{ color:var(--pfn-orange) !important; }

.pfn-cf-error{
  margin:0 0 16px !important;
  padding:11px 14px;
  border-left:3px solid #e5484d;
  border-radius:0 8px 8px 0;
  background:rgba(229,72,77,.1);
  color:#ff9ea1 !important;
  font:500 13px/1.5 Poppins,system-ui,sans-serif !important;
}

/* honeypot — off-screen rather than display:none, which some bots detect */
.pfn-cf-hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px;
  overflow:hidden;
}

.pfn-cf-done h3{
  margin:0 0 8px !important;
  color:#fff !important;
  font:800 18px/1.3 Poppins,system-ui,sans-serif !important;
}
.pfn-cf-done p{
  margin:0 !important;
  color:#b8c0cc !important;
  font:400 14px/1.6 Poppins,system-ui,sans-serif !important;
}

@media (max-width:480px){
  .pfn-cf{ padding:18px 16px; }
  .pfn-cf-btn{ width:100%; }
}

/* the partner label is a link when we have that retailer's section;
   styled as a quiet label, not a blue link, and consistent whether
   it is an <a> or a <span> */
a.pfn-shop-partner,
span.pfn-shop-partner{
  color:#7e879c !important;
  text-decoration:none !important;
  border-bottom:1px dotted transparent;
  transition:color .15s ease, border-color .15s ease;
}
a.pfn-shop-partner:hover{
  color:#ff6b00 !important;
  border-bottom-color:rgba(255,107,0,.6);
}

/* a partner whose logo is white needs a dark tile, not the light one */
html body .pfn-partners-col a.pfn-partner-dark{
  background:#11161e !important;
  border-color:rgba(255,255,255,.16) !important;
}
html body .pfn-partners-col a.pfn-partner-dark:hover{
  border-color:#ff6b00 !important;
}
html body .pfn-partners-col a.pfn-partner-dark img{
  height:22px !important;
  max-height:22px !important;
}

/* When a partner tile has a real logo image, the emoji + name spans beside it
   are the fallback and should not show. They are <span>s, not text nodes, so
   this has to be done in CSS rather than by pruning text. */
html body .pfn-partners-col a.pfn-partner-dark img,
html body .pfn-partners-col a img[src]{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
html body .pfn-partners-col a.pfn-partner-dark > span,
html body .pfn-partners-col a.pfn-has-logo > span{
  display:none !important;
}