/* ============================================================
   Product page header — parent link / title / blurb
   Applies to both price-grid templates (187 product pages).
   .post-content scope (0,2,0) intentionally out-specifies the
   theme's h1/h3.section-title-child rules (0,1,1) — do not
   reduce to a bare .section-title-child, it will lose.
   ============================================================ */

/* Parent link — eyebrow role */
.post-content .parent_link{margin:0 0 4px;text-align:center}
.post-content .parent_link a{
  font-family:'dm-sans',sans-serif;
  font-size:12px;font-weight:700;line-height:1.4;
  letter-spacing:1px;text-transform:uppercase;
  color:#4aa1bc;text-decoration:none;
}
.post-content .parent_link a:hover{color:#2f7f98;background:none}

/* Product title — Mackinac, sentence case */
.post-content .section-title-child{
  font-family:'p22-mackinac-pro',Georgia,serif;
  font-size:38px;font-weight:800;line-height:1.12;
  letter-spacing:-.02em;text-transform:none;
  color:#2A2825;margin:10px 0 16px;text-align:center;
}
/* retire the 80px flanking rules */
.post-content .section-title-child:before,
.post-content .section-title-child:after{display:none}

/* Blurb — first direct  of .post-content */
.post-content > p:first-of-type{
  max-width:760px;margin:0 auto 30px;
  font-size:17px;line-height:1.65;color:#77736f;
}

@media (max-width:600px){
  .post-content .section-title-child{font-size:28px}
  .post-content > p:first-of-type{font-size:16px}
}









@media (min-width: 1200px) {
  .container:not(.navbar-header .container):not(.navbar .container) {
    width: 1280px;
  }
}


/* for gallery video height */
div#video_div {
    min-height: 433px;
}


/* typography */
h2, h3, h4, h5, h6, button {
    font-family: 'dm-sans', sans-serif;
    color: #2a2825;
    letter-spacing: -.03em;
}

body, p, a, li, td, input, select, textarea {
    font-family: 'dm-sans', sans-serif;
    color: #77736f;
}

h1 {
    font-family: 'p22-mackinac-pro', Georgia, serif;
    color: #2a2825;
}

/* cart circle */
.ebor-cart a i {
    border: 1px solid #ddd5c8;
    padding: 8px 12px;
    border-radius: 25px;
}


/* =========================================================
   PAPER BLOCK  .  reusable across product pages
   Lives inside the "paper: ..." templates. Paste ONCE —
   ideally in the loom-child stylesheet, not per page.

   Fonts (p22-mackinac-pro, dm-sans) load site-wide already.
   Background comes from the section's dark-wrapper (#f4f1e6)
   — the block deliberately sets none, so it inherits
   whatever ground it is dropped on.

   Tiles deep-link to /paper-stocks-finishes/#.
   ========================================================= */

/* Everything centres from here. Children that need a max-width
   use margin auto rather than a left edge. */
.pk {
    font-family: dm-sans, sans-serif;
    text-align: center;
}

.pk-head { margin-bottom: 26px; }
.pk-eyebrow {
    font-family: dm-sans, sans-serif;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #cc6a4c;
    display: block;
    margin-bottom: 6px;
}
.pk-head h2 {
    font-family: p22-mackinac-pro, serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: #2a2825;
}
.pk-head p {
    font-size: 16px;
    line-height: 1.6;
    color: #77736f;
    margin: 9px auto 0;
    max-width: 640px;
}
.pk-head a { color: #cc6a4c; font-weight: 700; }
.pk-head a:hover { background: none; }

/* Group label, centred with a rule on BOTH sides.
   Both pseudos are flex: 1, so they split the leftover space
   evenly and the label sits dead centre at any length.
   currentColor = each group's own accent, so one rule does all three. */
.pk-group { margin-bottom: 24px; }
.pk-label {
    font-family: dm-sans, sans-serif;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .09em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.pk-label::before,
.pk-label::after {
    content: '';
    display: block;
    flex: 1;
    height: 1px;
    background: currentColor;
}
.pk-g-heavy .pk-label { color: #cc6a4c; }
.pk-g-text  .pk-label { color: #4aa1bc; }
.pk-g-fin   .pk-label { color: #c9ac31; }

/* Tiles - no border; white on the warm ground does the separating.
   Content-sized, centred, wrapping naturally at any width. */
.pk-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.pk-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: #ffffff;
    border-radius: 4px;
    padding: 12px 16px;
    text-decoration: none;
    transition: box-shadow .18s ease, transform .18s ease;
}
.pk-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(42,40,37,.10);
    background: #ffffff;
}

.pk-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pk-name {
    font-family: dm-sans, sans-serif;
    font-weight: 800;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #2a2825;
}
.pk-spec {
    font-family: dm-sans, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #84807a;
}

.pk-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f5de72;
    color: #2a2825;
    font-family: dm-sans, sans-serif;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    line-height: 1;
    padding: 4px 8px 4px 6px;
    border-radius: 100px;
    white-space: nowrap;
}
.pk-badge svg {
    width: 9px;
    height: 9px;
    fill: currentColor;
    flex: none;
}

/* inline-flex + the centred text-align on .pk is what centres this */
.pk-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: dm-sans, sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #cc6a4c;
    text-decoration: none;
    margin-top: 6px;
    transition: gap .2s ease;
}
.pk-more:hover { gap: 10px; background: none; color: #cc6a4c; }

@media (max-width: 767px) {
    .pk-head h2 { font-size: 26px; }
    .pk-label { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .pk-tile, .pk-more { transition: none; }
    .pk-tile:hover { transform: none; }
}