/* Simulated Clay Tile Roof (#1398) — overview gallery, feature bullets, and the
   uniform fasteners grid. Loaded only on this page. */

/* Gallery / swatches / fasteners are laid out with native Divi Groups in the VB
   now (column background, 2-up, band — all element sizing, zero layout CSS). */

/* tile-look spec chart (right column) */
.clay-spec{border:1px solid #e2e2e0;border-radius:8px;overflow:hidden;margin-top:4px}
.clay-spec .r{display:grid;grid-template-columns:42% 58%;border-bottom:1px solid #e2e2e0}
.clay-spec .r:last-child{border-bottom:none}
.clay-spec .r:nth-child(odd){background:#f7f7f5}
.clay-spec .k{padding:11px 14px;font-family:'Open Sans',sans-serif;font-size:13px;font-weight:700;color:#002b5c}
.clay-spec .v{padding:11px 14px;font-family:'Open Sans',sans-serif;font-size:14px;color:#333}

/* fastener "add to estimate" link */
.clay-add{display:inline-block;margin-top:10px;font-family:'Open Sans',sans-serif;font-size:11.5px;font-weight:700;
  color:#fff;background:#002b5c;padding:6px 12px;border-radius:5px;text-decoration:none;line-height:1.25;letter-spacing:.02em}
.clay-add:hover{background:#c8311a}
.clay-fast .ff{justify-content:space-between}

/* ===== Build-your-order zone (one cohesive add flow, 3 numbered steps) ===== */
.clay-step{display:flex;gap:16px;align-items:flex-start;margin:0 0 34px}
.clay-step:last-child{margin-bottom:0}
.clay-stepnum{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#002b5c;color:#fff;
  font-family:Oswald,sans-serif;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;margin-top:2px}
.clay-stepbody{flex:1 1 auto;min-width:0}
.clay-stepbody h3{font-family:Oswald,sans-serif;text-transform:uppercase;color:#002b5c;font-size:20px;letter-spacing:.02em;margin:0 0 4px}
.clay-stepsub{font-family:'Open Sans',sans-serif;color:#555;font-size:14px;margin:0 0 14px}
.clay-panelcard{display:flex;gap:18px;align-items:center;background:#fff;border-radius:12px;padding:16px;box-shadow:0 12px 32px -16px rgba(35,31,32,.22)}
.clay-panelcard img{width:170px;height:120px;object-fit:cover;border-radius:8px;flex:0 0 auto}
.clay-panelcard .pc-name{font-family:Oswald,sans-serif;font-size:18px;font-weight:600;color:#262626}
.clay-panelcard .pc-spec{font-family:'Open Sans',sans-serif;font-size:13px;color:#666;margin:5px 0 12px}
.clay-acc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.clay-acc .ac{background:#fff;border-radius:12px;padding:16px;box-shadow:0 12px 32px -16px rgba(35,31,32,.18);display:flex;flex-direction:column}
.clay-acc .ac-name{font-family:Oswald,sans-serif;font-size:16px;font-weight:600;text-transform:uppercase;color:#262626}
.clay-acc .ac-desc{font-family:'Open Sans',sans-serif;font-size:13px;color:#666;margin:5px 0 14px;flex:1 1 auto}
.clay-add.lg{font-size:13px;padding:9px 16px}
/* color picker inside Build Step 1 */
.clay-swatchwrap{margin:16px 0 16px}
.clay-swatchlabel{font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;font-size:13px;letter-spacing:.04em;color:#002b5c;margin-bottom:10px}
.clay-swatchwrap .lp-swatch-pick{font-family:'Open Sans',sans-serif;font-size:13px;color:#333;margin:12px 0 0}
.clay-swatchnote{font-family:'Open Sans',sans-serif;font-size:12px;color:#777;line-height:1.5;margin:6px 0 0}
/* "already have specs?" fork (shortcut to the quote-form spec-sheet upload) */
.clay-fork{background:#eef2f7;border:1px solid #d6e0ec;border-radius:12px;padding:22px 26px}
.clay-fork-in{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.clay-fork-h{font-family:Oswald,sans-serif;text-transform:uppercase;color:#002b5c;font-size:19px;font-weight:600;letter-spacing:.02em;margin-bottom:4px}
.clay-fork p{font-family:'Open Sans',sans-serif;font-size:14px;color:#445;line-height:1.55;margin:0;max-width:640px}
.clay-fork-btn{flex:0 0 auto;display:inline-block;background:#fff;border:2px solid #002b5c;color:#002b5c;font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;font-size:14px;letter-spacing:.03em;padding:11px 22px;border-radius:6px;text-decoration:none;white-space:nowrap}
.clay-fork-btn:hover{background:#002b5c;color:#fff}
@media (max-width:600px){.clay-fork-in{flex-direction:column;align-items:flex-start}.clay-fork-btn{width:100%;text-align:center}}
@media (max-width:767px){
  .clay-acc{grid-template-columns:1fr}
  .clay-panelcard{flex-direction:column;align-items:stretch}
  .clay-panelcard img{width:100%;height:180px}
  .clay-step{gap:12px}
}

/* feature bullets (navy diamond markers) */
/* hosted in a native Text module now — beat Divi's default ul/li disc so only the diamond shows */
.clay-feat,.et_pb_text ul.clay-feat,.et_pb_text ol.clay-feat{list-style:none;margin:8px 0 0;padding:0}
.clay-feat li,.et_pb_text ul.clay-feat li{list-style:none;position:relative;padding:0 0 10px 26px;font-family:'Open Sans',sans-serif;font-size:15px;color:#333;line-height:1.55}
.clay-feat li::before{content:"";position:absolute;left:2px;top:7px;width:9px;height:9px;background:#002b5c;border-radius:1px;transform:rotate(45deg)}
.clay-feat li strong{color:#002b5c;font-weight:700}

/* fasteners — one uniform row of equal cards, same image box + crop */
.clay-fast{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.clay-fast .ff{background:#fff;border-radius:12px;padding:14px 8px 12px;text-align:center;
  box-shadow:0 10px 30px -12px rgba(35,31,32,.18);display:flex;flex-direction:column;align-items:center}
.clay-fast .imgbox{height:128px;width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.clay-fast .imgbox img{max-width:100%;max-height:128px;width:auto;height:auto;object-fit:contain;display:block}
.clay-fast .lbl{font-family:'Open Sans',sans-serif;font-size:11px;font-weight:600;color:#262626;line-height:1.25}

@media (max-width:900px){ .clay-fast{grid-template-columns:repeat(3,1fr)} }
@media (max-width:767px){
  .clay-gal{grid-template-columns:repeat(2,1fr)} .clay-gal img{height:150px}
}
@media (max-width:520px){ .clay-fast{grid-template-columns:repeat(2,1fr)} }

/* ===== Build-your-order — native modules (Phase 2) =====
   The step copy/cards/buttons are now native Divi modules; these classes (set
   inside the Text modules' HTML) carry the styling the old code-module wrapper
   used to provide. */
.clay-step-h{font-family:Oswald,sans-serif;text-transform:uppercase;color:#002b5c;font-size:22px;letter-spacing:.02em;margin:30px 0 8px;line-height:1.2}
.et_pb_text .pc-name{font-family:Oswald,sans-serif;font-size:18px;font-weight:600;color:#262626}
.et_pb_text .pc-spec{font-family:'Open Sans',sans-serif;font-size:13px;color:#666;margin:5px 0 0}
.clay-acc-card{background:#fff;border:1px solid #e2e2e0;border-radius:12px;padding:16px;box-shadow:0 12px 32px -16px rgba(35,31,32,.18);margin:6px 0 8px}

/* ===== Restore the contained "before" look on the Build-your-order section ===== */
/* the whole zone reads as one bordered, light panel (scoped by the swatch picker
   which only this section has) */
.et_pb_section:has(.lp-swatches) .et_pb_row{background:#fcfcfb;border:1px solid #e2e2e0;border-radius:14px;padding:30px 34px}
/* panel card — small image + name/spec joined into one light, bordered card.
   Scoped to THIS section so the reused clay-1 photo in the gallery is untouched. */
.et_pb_section:has(.lp-swatches) .et_pb_image:has(img[src*="/simulated-clay-1.jpg"]){background:#fff;border:1px solid #e2e2e0;border-bottom:none;border-radius:12px 12px 0 0;padding:16px 16px 0;max-width:340px;margin:0 !important;box-shadow:0 12px 32px -16px rgba(35,31,32,.18)}
.et_pb_section:has(.lp-swatches) .et_pb_image:has(img[src*="/simulated-clay-1.jpg"]) img{max-width:240px;height:auto;border-radius:8px;display:block}
.et_pb_section:has(.lp-swatches) .et_pb_image:has(img[src*="/simulated-clay-1.jpg"]) + .et_pb_text{background:#fff;border:1px solid #e2e2e0;border-top:none;border-radius:0 0 12px 12px;padding:8px 16px 16px;max-width:340px;margin:0 0 10px !important;box-shadow:0 12px 32px -16px rgba(35,31,32,.18)}
.et_pb_text .clay-acc-card .ac-name{font-family:Oswald,sans-serif;font-size:16px;font-weight:600;text-transform:uppercase;color:#262626}
.et_pb_text .clay-acc-card .ac-desc{font-family:'Open Sans',sans-serif;font-size:13px;color:#666;margin:5px 0 0}

/* ===== Fasteners & Screws band — uniform cards (object-fit has no native Divi equivalent) =====
   Scoped via :has() to the fastener section (the only section on this page with blurbs),
   the same pattern the swatch rules use. Makes every screw photo sit in the same 120px
   image box (contained, centered), equalizes card heights, and pins the Add button to the
   bottom so all cards read identically. */
.et-l--post .et_pb_section:has(.et_pb_blurb) .et_pb_main_blurb_image{display:flex;align-items:center;justify-content:center;height:120px;margin-bottom:10px}
.et-l--post .et_pb_section:has(.et_pb_blurb) .et_pb_main_blurb_image .et_pb_image_wrap{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.et-l--post .et_pb_section:has(.et_pb_blurb) .et_pb_main_blurb_image img{max-height:120px;max-width:100%;width:auto;height:auto;object-fit:contain}
.et-l--post .et_pb_section:has(.et_pb_blurb) .et_pb_column{display:flex;flex-direction:column}
.et-l--post .et_pb_section:has(.et_pb_blurb) .et_pb_blurb .et_pb_blurb_container{flex:0 0 auto}
.et-l--post .et_pb_section:has(.et_pb_blurb) .et_pb_button{margin-top:auto}