/* (owner, Oct 22 2026) "Drafting sheet" look for a product's Specifications section pop-ups (and the cart's Learn more,
   which opens the same pages): a dark green header with the product's name, a cream sheet with a faint drafting grid,
   the opening notes in one card and every drawing in its own captioned card - long views full width, the rest in pairs.
   The layout comes from specLayout() in js/alpine.js; the stored pages are unchanged. */
.fr-pop-kick { display: none; }
.fr-pop-spec .fr-pop-panel { padding-left: 0 !important; background: #1E2B20 !important; }
.fr-pop-spec .fr-pop-head { background: #1E2B20 !important; padding: 20px 76px 18px 30px; }
.fr-pop-spec .fr-pop-kick { display: block; margin: 0 0 4px; font: 700 11px/1.4 Figtree, system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #A9C79A; }
.fr-pop-spec #popup-slider-title { margin: 0; font: 600 30px/1.1 'Cormorant Garamond', Georgia, serif !important; color: #fff !important; }
.fr-pop-spec .fr-pop-panel > div.absolute { padding-top: 18px; }
.fr-pop-spec .fr-pop-panel > div.absolute button { width: 38px; height: 38px; display: grid; place-items: center; background: rgba(255, 255, 255, .12) !important; }
.fr-pop-spec .fr-pop-panel > div.absolute button:hover { background: rgba(255, 255, 255, .22) !important; }
.fr-pop-spec .fr-pop-scroll { padding-bottom: 0; background-color: #F4F2EA !important;
  background-image: linear-gradient(rgba(30, 43, 32, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 43, 32, .05) 1px, transparent 1px);
  background-size: 22px 22px; }
.fr-pop-spec .fr-pop-content { margin-top: 0 !important; padding: 26px 30px 34px !important; overflow: visible; }

.frs { display: grid; gap: 18px; color: #3E4A41; font-size: 14.5px; line-height: 1.6; }
.frs > *, .frs p { margin: 0; }
.frs img { max-width: 100%; height: auto; }
.frs a { color: #53754B; font-weight: 600; }
.frs-note { display: grid; gap: 10px; padding: 16px 18px; background: #fff; border: 1px solid #DEDDD3; border-left: 4px solid #53754B; border-radius: 10px; }
.frs-note ul, .frs-note ol { margin: 0; padding-left: 20px; }
.frs-sub { margin: 6px 0 -6px !important; display: flex; align-items: center; gap: 12px; font: 600 22px/1.2 'Cormorant Garamond', Georgia, serif; color: #1E2B20; }
.frs-sub::after { content: ""; flex: 1; height: 1px; background: #DEDDD3; }

.frs table { width: 100% !important; margin: 0 !important; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #DEDDD3; border-radius: 10px; overflow: hidden; font-size: 14px; }
.frs th { padding: 10px 14px !important; text-align: left; background: #E6EDE0 !important; color: #1E2B20; border: 0 !important; font: 700 11.5px/1.35 Figtree, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.frs td { padding: 12px 14px !important; border: 0 !important; border-top: 1px solid #EEECE4 !important; color: #1E2B20; font-weight: 600; vertical-align: top; }
.frs tbody tr:first-child td { border-top: 0 !important; }

.frs-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px; }
.frs-figs--one { grid-template-columns: minmax(0, 560px); }
.frs-fig { margin: 0; display: grid; grid-template-rows: 1fr auto; align-items: center; gap: 8px; padding: 14px 14px 10px; background: #fff; border: 1px solid #DEDDD3; border-radius: 12px; }
.frs-fig.is-wide { grid-column: 1 / -1; }
.frs-fig img { display: block; margin: 0 auto; max-height: 300px; width: auto; object-fit: contain; }
.frs-fig > a { display: block; }
.frs-fig figcaption { font: 700 11px/1.4 Figtree, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #53754B; }

/* pages with their own headings keep their layout, on a white sheet so their colors still read */
.frs--rich { display: block; padding: 20px 22px; background: #fff; border: 1px solid #DEDDD3; border-radius: 12px; }

@media (max-width: 640px) {
  .fr-pop-spec .fr-pop-head { padding: 16px 64px 14px 18px; }
  .fr-pop-spec #popup-slider-title { font-size: 25px !important; }
  .fr-pop-spec .fr-pop-content { padding: 18px 14px 26px !important; }
  .frs-figs { grid-template-columns: 1fr; }
}