/* ============================================================================
 * prisma-content.css — CONTENT + SYSTEM pages polish for the Prisma template.
 * Loaded LAST (after prisma-ui.css). Fixes/fills only what the base cascade
 * leaves wrong or unstyled for: legal/CMS, contact, blog, newsletter,
 * selection wizard, and the system pages (404, sitemap, shipping,
 * manufacturers, free gift). Tokens only — never hardcode #fff.
 *   Token recap: bg-white=var(--surface); text-on-ink=var(--paper);
 *   text-on-red=var(--onRed); muted=var(--muted); hairline=var(--line/--line2).
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. GENERIC PAGE HEAD  (.rz-page-head / .rz-page-title / .eyebrow)
 *    Used by newsletter, manufacturers, newsletter-archive and the generic
 *    titled-CMS path in layout/index.tpl — all previously UNSTYLED.
 * ------------------------------------------------------------------------- */
.jtlw .rz-page-head{padding:32px 0 6px;margin-bottom:20px}
/* scoped to .rz-page-head so it can't bleed onto other pages' .eyebrow usage */
.jtlw .rz-page-head .eyebrow{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.jtlw .rz-page-title{font-family:var(--head);font-weight:800;font-size:clamp(28px,4vw,44px);
  letter-spacing:-.028em;line-height:1.08;color:var(--ink);margin:0}

/* ---------------------------------------------------------------------------
 * 2. CMS / WYSIWYG PROSE  (.link-content — legal body + generic content pages)
 *    WYSIWYG HTML inherits; give headings/lists/links/tables real tokens so
 *    prose is readable in BOTH themes. Links get an unmistakable affordance
 *    (base .jtlw a = color:inherit, no underline → invisible links in prose).
 * ------------------------------------------------------------------------- */
.jtlw .link-content{color:var(--ink2);line-height:1.65;font-size:15.5px}
.jtlw .link-content h1,.jtlw .link-content h2,.jtlw .link-content h3,
.jtlw .link-content h4,.jtlw .link-content h5{font-family:var(--head);color:var(--ink);
  font-weight:700;letter-spacing:-.02em;line-height:1.18;margin:28px 0 10px}
.jtlw .link-content h1{font-size:clamp(26px,3vw,34px)}
.jtlw .link-content h2{font-size:clamp(21px,2.4vw,27px)}
.jtlw .link-content h3{font-size:19px}
.jtlw .link-content h4{font-size:16px}
.jtlw .link-content>:first-child{margin-top:0}
.jtlw .link-content p{margin:0 0 15px}
.jtlw .link-content ul,.jtlw .link-content ol{margin:0 0 16px 22px;list-style:revert}
.jtlw .link-content li{margin:5px 0}
.jtlw .link-content a:not(.btn):not(.rz-btn){color:var(--red);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.jtlw .link-content a:not(.btn):not(.rz-btn):hover{color:var(--red);opacity:.78}
.jtlw .link-content strong,.jtlw .link-content b{color:var(--ink);font-weight:700}
.jtlw .link-content img{max-width:100%;height:auto;border-radius:14px}
.jtlw .link-content hr{border:0;border-top:1px solid var(--line);margin:26px 0}
.jtlw .link-content blockquote{margin:20px 0;padding:14px 20px;border-left:3px solid var(--red);
  background:var(--sand);border-radius:0 12px 12px 0;color:var(--ink2)}
.jtlw .link-content table{width:100%;border-collapse:collapse;margin:0 0 18px}
.jtlw .link-content th,.jtlw .link-content td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
.jtlw .link-content th{color:var(--ink);font-weight:700}

/* legal body: same link affordance inside the surface panel + tab polish ---- */
.jtlw .rz-legalbody a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
/* inactive tabs read as pills in light (base --soft is #FFF ≈ paper → invisible) */
.jtlw .rz-legaltabs a{background:var(--sand);color:var(--ink2)}
.jtlw .rz-legaltabs a:hover{color:var(--ink)}
/* active tab: ink pill inverts cleanly in dark; keep paper text on it both ways */
.jtlw .rz-legaltabs .is-active{background:var(--ink);color:var(--paper)}

/* ---------------------------------------------------------------------------
 * 3. MANUFACTURERS  (page/manufacturers.tpl — .rz-mft-* previously UNSTYLED)
 * ------------------------------------------------------------------------- */
.jtlw .rz-mft-grid{row-gap:20px;margin-top:4px}
.jtlw .rz-mft-grid > [class*="col-"]{display:flex}
.jtlw .rz-mft-card{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;width:100%;min-height:158px;padding:26px 18px;background:var(--surface);
  border:1px solid var(--line);border-radius:18px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.jtlw .rz-mft-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line2)}
.jtlw .rz-mft-logo{display:flex;align-items:center;justify-content:center;width:100%;height:66px}
.jtlw .rz-mft-logo img{max-height:66px;width:auto;object-fit:contain}
.jtlw .rz-mft-name{font-weight:600;font-size:14px;color:var(--ink2)}
.jtlw .rz-mft-card:hover .rz-mft-name{color:var(--ink)}

/* ---------------------------------------------------------------------------
 * 4. NEWSLETTER  (newsletter/index.tpl — JTL widget forms → Prisma cards)
 * ------------------------------------------------------------------------- */
.jtlw .newsletter-subscribe,.jtlw .newsletter-unsubscribe{background:var(--surface);
  border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,32px);margin-bottom:22px}
.jtlw .newsletter-subscribe .h3,.jtlw .newsletter-unsubscribe .h3{font-family:var(--head);
  font-weight:700;font-size:20px;color:var(--ink);margin-bottom:10px}
.jtlw .newsletter-subscribe > p,.jtlw .newsletter-unsubscribe > p{color:var(--ink2);margin-bottom:16px}
.jtlw .newsletter-subscribe-consent{color:var(--muted);font-size:12.5px;margin-top:12px}
.jtlw .newsletter-content{color:var(--ink2)}

/* ---------------------------------------------------------------------------
 * 5. NEWSLETTER ARCHIVE  (page/newsletter_archive.tpl — bare striped table)
 * ------------------------------------------------------------------------- */
.jtlw .page-newsletter-archive .table{width:100%;border-collapse:collapse;margin-top:6px}
.jtlw .page-newsletter-archive .table thead th{font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;
  padding:12px 14px;border-bottom:1px solid var(--line2)}
.jtlw .page-newsletter-archive .table td{padding:13px 14px;border-bottom:1px solid var(--line);color:var(--ink2)}
.jtlw .page-newsletter-archive .table td a{color:var(--ink);font-weight:600}
.jtlw .page-newsletter-archive .table td a:hover{color:var(--red)}
/* kill the striped odd-row bg (base paints it a fixed light tone → glaring white row in dark) */
.jtlw .page-newsletter-archive .table tbody tr,
.jtlw .page-newsletter-archive .table tbody tr:nth-of-type(odd),
.jtlw .page-newsletter-archive .table tbody tr:nth-of-type(odd) > *{background:transparent!important;--bs-table-accent-bg:transparent!important}

/* ---------------------------------------------------------------------------
 * 6. SITEMAP  (page/sitemap.tpl — {card}.sitemap-group; base .card not retinted
 *    for Prisma → white card + grey header would break in dark.)
 * ------------------------------------------------------------------------- */
.jtlw .sitemap-group.card{background:var(--surface);border:1px solid var(--line);
  border-radius:18px;box-shadow:none;overflow:hidden;margin-bottom:22px}
.jtlw .sitemap-group .card-header{background:var(--sand);border-bottom:1px solid var(--line);
  font-family:var(--head);font-weight:700;font-size:16px;color:var(--ink);padding:15px 20px}
.jtlw .sitemap-group .card-body{padding:20px 22px;background:var(--surface)}
.jtlw .sitemap-group a,.jtlw .sitemap-group .nice-deco{color:var(--ink2)}
.jtlw .sitemap-group a:hover,.jtlw .sitemap-group .nice-deco:hover{color:var(--red)}
.jtlw .sitemap-group strong{color:var(--ink)}
.jtlw .sitemap-group .nav-link{padding:6px 0;color:var(--ink2)}
.jtlw .sitemap-group .nav-link:hover{color:var(--red)}
.jtlw .sitemap-group .sub-categories{margin-left:14px}

/* ---------------------------------------------------------------------------
 * 7. SELECTION WIZARD  (selectionwizard/* — JTL listgroup + answer tiles)
 * ------------------------------------------------------------------------- */
.jtlw .selection-wizard-wrapper{max-width:900px}
.jtlw .selection-wizard-desc{font-family:var(--head);font-weight:700;font-size:clamp(20px,2.4vw,26px);
  color:var(--ink);margin-bottom:8px}
.jtlw .selection-wizard.list-group{border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden}
.jtlw .selection-wizard .list-group-item{background:transparent;border:0;border-top:1px solid var(--line);padding:20px 22px}
.jtlw .selection-wizard .list-group-item:first-child{border-top:0}
.jtlw .selection-wizard-question-heading{font-family:var(--head);font-weight:700;font-size:17px;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.jtlw .selection-wizard-question-item{margin-bottom:14px}
.jtlw .selection-wizard-answer{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;min-height:66px;padding:12px 12px;background:var(--surface);
  border:1px solid var(--line2);border-radius:14px;font-size:13.5px;font-weight:600;color:var(--ink);transition:border-color .16s ease,color .16s ease,box-shadow .16s ease}
.jtlw a.selection-wizard-answer:hover{border-color:var(--red);color:var(--red);box-shadow:var(--shadow)}
.jtlw .list-group-wrapper.disabled,.jtlw .selection-wizard-question.disabled{opacity:.5}

/* ---------------------------------------------------------------------------
 * 8. FREE GIFT  (page/free_gift.tpl)
 * ------------------------------------------------------------------------- */
.jtlw .page-freegift > p{color:var(--ink2);margin-bottom:20px}
.jtlw .page-freegift-item{text-align:center;margin-bottom:24px}
.jtlw .page-freegift-item > label{display:block;height:100%;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:18px;cursor:pointer;transition:box-shadow .18s ease,border-color .18s ease}
.jtlw .page-freegift-item > label:hover{border-color:var(--line2);box-shadow:var(--shadow)}
.jtlw .page-freegift-item img{border-radius:10px;margin-bottom:10px}
.jtlw .page-freegift-item .text-muted-util{color:var(--muted)!important;font-size:12.5px}
.jtlw .page-freegift-item a{color:var(--ink);font-weight:600}
.jtlw .page-freegift-item a:hover{color:var(--red)}

/* ---------------------------------------------------------------------------
 * 9. BLOG POST DETAIL  (blog/details.tpl — generic .blog-details, NOT rz-*)
 *    Give the article heading/meta/hero + WYSIWYG body real tokens and link
 *    affordance (base .jtlw a = color:inherit → prose links vanish).
 * ------------------------------------------------------------------------- */
.jtlw .blog-details > article > h1{font-size:clamp(28px,3.4vw,40px);line-height:1.1;margin:6px 0 10px}
.jtlw .author-meta{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--muted);margin:0 0 22px}
.jtlw .author-meta a{color:var(--muted)}
.jtlw .author-meta a:hover{color:var(--red)}
.jtlw .blog-details-image{border-radius:18px;overflow:hidden;margin-bottom:26px}
.jtlw .blog-details-image img{border-radius:18px}
.jtlw .blog-details-content{color:var(--ink2);line-height:1.65;font-size:15.5px}
.jtlw .blog-details-content h2,.jtlw .blog-details-content h3,.jtlw .blog-details-content h4{
  font-family:var(--head);color:var(--ink);font-weight:700;letter-spacing:-.02em;line-height:1.18;margin:28px 0 10px}
.jtlw .blog-details-content h2{font-size:clamp(21px,2.4vw,27px)}
.jtlw .blog-details-content h3{font-size:19px}
.jtlw .blog-details-content p{margin:0 0 15px}
.jtlw .blog-details-content ul,.jtlw .blog-details-content ol{margin:0 0 16px 22px;list-style:revert}
.jtlw .blog-details-content li{margin:5px 0}
.jtlw .blog-details-content a:not(.btn):not(.rz-btn){color:var(--red);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.jtlw .blog-details-content a:not(.btn):not(.rz-btn):hover{opacity:.78}
.jtlw .blog-details-content strong,.jtlw .blog-details-content b{color:var(--ink)}
.jtlw .blog-details-hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.jtlw .blog-details .h2{font-family:var(--head);font-weight:700;font-size:22px;color:var(--ink);margin:6px 0 16px}
.jtlw .blog-comments-header .section-heading,.jtlw .blog-details-comments-list{color:var(--ink2)}

/* ---------------------------------------------------------------------------
 * 10. JTL PRIMARY BUTTON CONSISTENCY (content-page forms)
 *     prisma-ui.css intends .btn-primary = --red, but the rz.css button-bridge
 *     (!important, higher spec) forces it to --ink → the newsletter/comment
 *     submit clashed with the red rz-btn CTAs (search, contact, hero, 404).
 *     Re-assert Prisma red for the primary submit on OUR pages only (scoped,
 *     so global/other-agent button behaviour is untouched).
 * ------------------------------------------------------------------------- */
.jtlw .newsletter-subscribe .btn-primary,
.jtlw .blog-details .btn-primary,
.jtlw .page-shipping .btn-primary,
.jtlw .shipping-calculator-form .btn-primary{
  background:var(--red)!important;background-color:var(--red)!important;background-image:none!important;
  border:1px solid var(--red)!important;color:var(--onRed)!important}
.jtlw .newsletter-subscribe .btn-primary:hover,
.jtlw .blog-details .btn-primary:hover,
.jtlw .page-shipping .btn-primary:hover,
.jtlw .shipping-calculator-form .btn-primary:hover{
  background:var(--primary-600)!important;background-color:var(--primary-600)!important;border-color:var(--primary-600)!important;color:var(--onRed)!important}

/* ---------------------------------------------------------------------------
 * 11. CONTACT MAP  (contact/index.tpl — graceful placeholder tone)
 *     The Google embed loads async / may be consent-gated; give the frame a
 *     sand fill so an unloaded map reads as an intentional tile, not a void.
 * ------------------------------------------------------------------------- */
.jtlw .rz-map{background:var(--sand)}