/* =========================================================================
   Pine Straw — bespoke page on the inner-page (content) shell.
   Values transcribed from final_html/Pine Straw.dc.html.
   Not the category shell: 460px centred hero, #F7F5F0 body, bespoke bands.
   ========================================================================= */

.pine-intro {
  font-size: 17px; line-height: 1.7; color: #3A4A40;
  max-width: 860px; margin: 0 !important; text-wrap: pretty;
}

/* ---- What We Carry: two size cards -------------------------------------- */
.pine-carry { margin-top: 44px; scroll-margin-top: 120px; }
.pine-carry h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 34px; font-weight: 700; color: #2C2218; margin: 0;
}
.pine-cards-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px;
}
.pine-size-card {
  background: #2D5441; border: 1px solid #234135; border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
}
/* 240px frame + whole-product view (John, 2026-08-16): the bale and roll are
   white-background cutouts — contain on white, never crop. */
.pine-size-card__thumb { height: 240px; position: relative; overflow: hidden; background: #fff; }
.pine-size-card__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pine-size-card__body {
  padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.pine-size-card__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #F7B51C;
}
.pine-size-card__size {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px; font-weight: 700; color: #FFFBE6;
}
.pine-size-card__desc { font-size: 14px; line-height: 1.55; color: #C8E6D8; }
.pine-size-card__pricerow {
  display: flex; align-items: baseline; gap: 8px; margin-top: 10px;
}
.pine-size-card__price {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px; font-weight: 700; color: #F7B51C;
}
.pine-size-card__price .woocommerce-Price-amount { color: inherit; }
.pine-size-card__unit { font-size: 13px; font-weight: 600; color: #C8E6D8; }
.pine-carry__note {
  font-size: 14.5px; line-height: 1.6; color: #4A3F35; margin: 16px 0 0 !important;
}
.pine-carry__ctas { display: flex; gap: 14px; margin-top: 20px; flex-wrap: wrap; }

/* ---- Bales walkthrough + worked example --------------------------------- */
.pine-walk {
  margin-top: 56px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px; align-items: start;
}
.pine-walk h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px; font-weight: 700; color: #2C2218; margin: 0;
}
.pine-walk__lede {
  font-size: 15px; line-height: 1.7; color: #4A3F35; margin: 12px 0 0 !important;
  text-wrap: pretty;
}
.pine-walk__lede strong { color: #2D5441; }
.pine-walk__steps { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.pine-walk__step { display: flex; gap: 14px; align-items: baseline; }
.pine-walk__num {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px; color: #F7B51C; font-weight: 700; flex: none;
}
.pine-walk__step span:last-child {
  font-size: 15px; line-height: 1.6; color: #3A4A40; text-wrap: pretty;
}
.pine-walk__example { background: #2D5441; border-radius: 12px; padding: 28px 30px; }
.pine-walk__example-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #F7B51C;
}
.pine-walk__example p {
  font-size: 14.5px; line-height: 1.7; color: #FFFBE6;
  margin: 12px 0 0 !important; text-wrap: pretty;
}
.pine-walk__example strong { color: #F7B51C; }
.pine-walk__example-note { font-size: 13.5px !important; color: #C8E6D8 !important; }

/* ---- How to get it: three pine cards ------------------------------------ */
.pine-get { margin-top: 56px; }
.pine-get h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px; font-weight: 700; color: #2C2218; margin: 0;
}
.pine-get__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin-top: 24px;
}
.pine-get__card { background: #2D5441; border-radius: 10px; padding: 26px 24px; }
.pine-get__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 19px; font-weight: 600; color: #FFFBE6;
}
.pine-get__card p {
  font-size: 14px; line-height: 1.65; color: #C8E6D8; margin: 10px 0 0 !important;
}
.pine-get__card strong { color: #F7B51C; }
.pine-get__card a { color: #F7B51C; font-weight: 600; }

/* ---- Spreading tips: gold-diamond rows ---------------------------------- */
.pine-tips { margin-top: 56px; max-width: 900px; }
.pine-tips h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px; font-weight: 700; color: #2C2218; margin: 0;
}
.pine-tips__lede {
  font-size: 15px; line-height: 1.7; color: #4A3F35; margin: 12px 0 0 !important;
}
.pine-tips__list { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.pine-tips__row { display: flex; gap: 14px; align-items: baseline; }
.pine-tips__diamond { color: #F7B51C; font-size: 18px; line-height: 1; flex: none; }
.pine-tips__row span:last-child {
  font-size: 14.5px; line-height: 1.6; color: #3A4A40; text-wrap: pretty;
}
.pine-tips__row strong { color: #2D5441; }

@media (max-width: 1024px) {
  .pine-walk { grid-template-columns: 1fr; gap: 32px; }
  .pine-get__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .pine-cards-grid { grid-template-columns: 1fr; }
  .pine-carry h2, .pine-walk h2, .pine-get h2, .pine-tips h2 { font-size: 25px; }
  .pine-carry__ctas a { width: 100%; text-align: center; }
}