/* Scoped UI; protects the main Builder shell from modal styles. */
.wpstl-build-addon-overlay{position:fixed;inset:0;z-index:2147482000;background:rgba(9,16,25,.65);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.wpstl-build-addon-dialog{box-sizing:border-box;width:min(100%,700px);max-height:min(90vh,850px);max-height:min(90dvh,850px);overflow-y:auto;overflow-x:hidden;border-radius:14px;background:#fff;color:#182537;box-shadow:0 18px 55px rgba(0,0,0,.26);font-family:inherit}
.wpstl-build-addon-dialog *, .wpstl-build-addon-dialog *::before, .wpstl-build-addon-dialog *::after{box-sizing:border-box}
.wpstl-build-addon-header{position:sticky;top:0;z-index:2;background:#fff;border-bottom:1px solid #e6eaf0;padding:14px 20px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.wpstl-build-addon-header h2{font-size:21px!important;line-height:1.3!important;margin:0!important;color:#172437;font-weight:700}
.wpstl-build-addon-close{appearance:none;border:0!important;background:transparent!important;cursor:pointer;font-size:29px;line-height:1;color:#42536a;min-width:36px;min-height:36px;border-radius:6px}
.wpstl-build-addon-close:hover{background:#f2f5f9!important}
.wpstl-build-addon-content{padding:16px 20px 18px}
.wpstl-build-addon-disclosure{margin:0 0 12px!important;font-size:12px!important;line-height:1.45!important;color:#586578!important}
.wpstl-build-addon-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
.wpstl-build-addon-item{min-width:0;display:flex;flex-direction:column;gap:0;padding:12px;border:1px solid #e0e7ef;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(17,34,51,.025)}
.wpstl-build-addon-media{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:180px;overflow:visible;background:#fff;border-radius:8px;color:#657285}
.wpstl-build-addon-image{width:100%;height:100%;object-fit:contain;display:block;border:0;border-radius:8px}
.wpstl-build-addon-placeholder{font-size:12px;color:#758397;text-align:center;padding:10px}
.wpstl-build-addon-item-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;min-width:0;gap:7px;padding:8px 2px 2px}
.wpstl-build-addon-item h3{font-size:15px!important;line-height:1.35!important;font-weight:700!important;color:#172437!important;margin:0!important;overflow-wrap:break-word}
.wpstl-build-addon-importance{display:inline-block;padding:3px 8px;background:#eef2f6;border-radius:6px;font-size:11px;font-weight:600;color:#3b4a5c;line-height:1.25}
.wpstl-build-addon-actions{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:auto;padding-top:12px}
.wpstl-build-addon-link{display:flex!important;align-items:center;justify-content:center;min-height:39px;width:100%;padding:9px 12px;margin:0!important;border:1px solid #186bbc;border-radius:7px;background:#166fc1;color:white!important;text-decoration:none!important;text-align:center;font-size:13px!important;line-height:1.25;font-weight:700;box-shadow:none;transition:background-color .15s ease}
.wpstl-build-addon-link:hover{background:#105b9f;color:#fff!important}
.wpstl-build-addon-search-link{border:1px solid #7badd8;background:#fff;color:#1464ab!important}
.wpstl-build-addon-search-link:hover{background:#f0f6fc;color:#145d9b!important}
.wpstl-build-addon-close:focus-visible,.wpstl-build-addon-link:focus-visible,.wpstl-build-addon-fit-trigger:focus-visible{outline:2px solid #1874c6;outline-offset:3px}
.wpstl-build-addon-fit{position:absolute;right:8px;top:8px;z-index:1;margin:0}
.wpstl-build-addon-fit-trigger{list-style:none;display:flex;align-items:center;justify-content:center;cursor:pointer;width:26px;height:26px;border-radius:50%;background:#617286;color:white;font-size:14px;line-height:1;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.wpstl-build-addon-fit-trigger::-webkit-details-marker{display:none}
.wpstl-build-addon-fit-trigger:hover,.wpstl-build-addon-fit[open] .wpstl-build-addon-fit-trigger{background:#165d9e}
.wpstl-build-addon-fit-text{position:absolute;top:33px;right:0;width:min(245px,65vw);background:#19314b;color:#fff;font-size:12px;line-height:1.5;padding:11px 12px;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.18);overflow-wrap:break-word}
.wpstl-build-addon-footnote{border-top:1px solid #e6eaf0;margin:15px 0 0!important;padding-top:12px;font-size:11px!important;line-height:1.5!important;color:#6a7788!important}
.wpstl-build-addon-country-select{width:100%;padding:9px;border:1px solid #adbac9;border-radius:6px;margin:12px 0}
.wpstl-build-addon-country-button{min-height:40px;padding:8px 17px;background:#175c9b;border:0;border-radius:6px;color:white;cursor:pointer}
@media(max-width:580px){.wpstl-build-addon-overlay{padding:8px;align-items:flex-end}.wpstl-build-addon-dialog{max-height:95vh;max-height:95dvh;border-radius:14px 14px 0 0}.wpstl-build-addon-header{padding:10px 15px}.wpstl-build-addon-header h2{font-size:19px!important}.wpstl-build-addon-content{padding:13px 15px 15px}.wpstl-build-addon-grid{grid-template-columns:minmax(0,1fr);gap:10px}.wpstl-build-addon-item{flex-direction:row;gap:12px;align-items:center}.wpstl-build-addon-media{width:110px;min-width:110px;height:112px;align-self:flex-start}.wpstl-build-addon-item-body{padding:0;min-height:112px}.wpstl-build-addon-item h3{font-size:14px!important}.wpstl-build-addon-actions{gap:5px;padding-top:6px}.wpstl-build-addon-link{font-size:12px!important;min-height:33px;padding:7px}.wpstl-build-addon-fit-text{right:auto;left:-2px;max-width:205px}}
@media(max-width:360px){.wpstl-build-addon-item{gap:8px;padding:10px}.wpstl-build-addon-media{min-width:88px;width:88px;height:92px}.wpstl-build-addon-item-body{min-height:92px}}
@media(prefers-reduced-motion:reduce){.wpstl-build-addon-overlay *{scroll-behavior:auto;transition:none!important}}

/* v1.0.12: the modal stays compact; pages replace progressive expansion. */
.wpstl-build-addon-pagination{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:15px}
.wpstl-build-addon-pagination[hidden]{display:none!important}
.wpstl-build-addon-page-button{appearance:none!important;min-height:40px;padding:8px 13px!important;margin:0!important;background:#eef6ff!important;border:1px solid #b7d3f1!important;border-radius:8px!important;color:#155b9e!important;font-size:13px!important;line-height:1.3!important;font-weight:700!important;cursor:pointer}
.wpstl-build-addon-page-button:hover:not(:disabled){background:#dfeefd!important;border-color:#91bce5!important}
.wpstl-build-addon-page-button:disabled{opacity:.45;cursor:not-allowed}
.wpstl-build-addon-prev{justify-self:start}
.wpstl-build-addon-next{justify-self:end}
.wpstl-build-addon-page-status{color:#485b73;font-size:12px;font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}
.wpstl-build-addon-page-button:focus-visible,.wpstl-build-addon-grid:focus-visible,.wpstl-build-addon-toolbar-button:focus-visible{outline:2px solid #1874c6;outline-offset:2px}
.wpstl-build-addon-grid{min-height:0;touch-action:pan-y}
/* Single visible item on desktops stays the same width as a normal card. */
@media(min-width:581px){.wpstl-build-addon-grid:has(> .wpstl-build-addon-item:only-child){grid-template-columns:minmax(0,1fr);max-width:330px;margin-inline:auto}}
@media(max-width:580px){.wpstl-build-addon-pagination{gap:5px}.wpstl-build-addon-page-button{min-height:36px;padding:7px 9px!important;font-size:12px!important}.wpstl-build-addon-page-status{font-size:11px}}
/* Published editorial header: the stable Help slot follows Printing Tips. */
.wpstl-builder-toolbar-help-slot .wpstl-build-addon-toolbar-button,
.wpstl-app .wpstl-workspace-actions .wpstl-build-addon-toolbar-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:34px;padding:6px 12px!important;margin:0 8px 0 0!important;border:1px solid #b7d3f1!important;border-radius:8px;background:#eef6ff!important;color:#115a9e!important;font-size:12px!important;line-height:1.3;font-weight:700!important;white-space:nowrap;cursor:pointer}
.wpstl-builder-toolbar-help-slot .wpstl-build-addon-toolbar-button:hover,
.wpstl-app .wpstl-workspace-actions .wpstl-build-addon-toolbar-button:hover{background:#dfedfc!important;border-color:#91bce5!important}
@media(max-width:580px){.wpstl-builder-toolbar-help-slot .wpstl-build-addon-toolbar-button,.wpstl-app .wpstl-workspace-actions .wpstl-build-addon-toolbar-button{min-height:30px;padding:5px 9px!important;font-size:11px!important;margin-right:6px!important}}

/* v1.0.15: logo-inspired blue → teal → green CTA. Colors are intentionally
 * darker than the snake artwork to keep white text readable across all stops.
 * Export remains the primary blue action; no layout or event behavior changes. */
.wpstl-builder-toolbar-help-slot .wpstl-build-addon-toolbar-button,
.wpstl-app .wpstl-workspace-actions .wpstl-build-addon-toolbar-button{
  color:#fff!important;
  background:linear-gradient(112deg,#2454a7 0%,#0e7b89 53%,#357a3e 100%)!important;
  border:1px solid #1c6375!important;
  box-shadow:0 2px 8px rgba(24,93,130,.26),inset 0 1px 0 rgba(255,255,255,.22)!important;
  font-weight:800!important;
  letter-spacing:.01em;
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease;
}
.wpstl-builder-toolbar-help-slot .wpstl-build-addon-toolbar-button:not(.is-loading)::before,
.wpstl-app .wpstl-workspace-actions .wpstl-build-addon-toolbar-button:not(.is-loading)::before{
  content:"✦";
  color:#edfffb;
  font-size:16px;
  line-height:1;
  margin-right:7px;
  flex:0 0 auto;
}
.wpstl-builder-toolbar-help-slot .wpstl-build-addon-toolbar-button:hover:not(:disabled),
.wpstl-app .wpstl-workspace-actions .wpstl-build-addon-toolbar-button:hover:not(:disabled){
  color:#fff!important;
  background:linear-gradient(112deg,#1b458d 0%,#096a76 53%,#2b6936 100%)!important;
  border-color:#155566!important;
  box-shadow:0 4px 12px rgba(22,82,121,.32),inset 0 1px 0 rgba(255,255,255,.18)!important;
  transform:translateY(-1px);
}
.wpstl-builder-toolbar-help-slot .wpstl-build-addon-toolbar-button:active:not(:disabled),
.wpstl-app .wpstl-workspace-actions .wpstl-build-addon-toolbar-button:active:not(:disabled){
  transform:translateY(0);
  box-shadow:0 1px 3px rgba(22,82,121,.24)!important;
}
.wpstl-builder-toolbar-help-slot .wpstl-build-addon-toolbar-button:focus-visible,
.wpstl-app .wpstl-workspace-actions .wpstl-build-addon-toolbar-button:focus-visible{
  outline:3px solid #0b62b9!important;
  outline-offset:3px;
}

/* v1.0.13: immediately acknowledged manual loading, request-safe busy state. */
.wpstl-builder-toolbar-help-slot .wpstl-build-addon-toolbar-button.is-loading,
.wpstl-app .wpstl-workspace-actions .wpstl-build-addon-toolbar-button.is-loading{
  opacity:.84;cursor:progress!important;pointer-events:none;
}
.wpstl-builder-toolbar-help-slot .wpstl-build-addon-toolbar-button.is-loading::before,
.wpstl-app .wpstl-workspace-actions .wpstl-build-addon-toolbar-button.is-loading::before{
  content:"";display:inline-block;flex:0 0 auto;width:13px;height:13px;
  margin-right:7px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:wpstl-addon-spin .72s linear infinite;
}
@keyframes wpstl-addon-spin{to{transform:rotate(360deg)}}
.wpstl-build-addon-loading{min-height:260px}
.wpstl-build-addon-loading-label{display:flex;align-items:center;gap:9px;margin:3px 0 16px!important;color:#426080;font-size:13px;font-weight:650}
.wpstl-build-addon-loading-spinner{display:inline-block;width:18px;height:18px;border:2px solid #bdd4ec;
  border-top-color:#1570c5;border-radius:50%;animation:wpstl-addon-spin .7s linear infinite}
.wpstl-build-addon-loading-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.wpstl-build-addon-loading-card{display:flex;flex-direction:column;gap:10px;padding:12px;
  min-height:244px;border:1px solid #e5ebf2;border-radius:12px}
.wpstl-build-addon-loading-image{height:156px;border-radius:8px;background:#edf2f7}
.wpstl-build-addon-loading-line{display:block;height:13px;width:85%;border-radius:5px;background:#edf2f7}
.wpstl-build-addon-loading-line-short{width:55%}
.wpstl-build-addon-loading-card>*{animation:wpstl-addon-skeleton 1.5s ease-in-out infinite alternate}
@keyframes wpstl-addon-skeleton{from{opacity:.55}to{opacity:1}}
.wpstl-build-addon-error{color:#5c4055;font-size:13px;line-height:1.5}
.wpstl-build-addon-retry{min-height:36px;padding:8px 13px!important;border:1px solid #9cbbdd!important;
  border-radius:7px!important;color:#125e9e!important;background:#f0f7ff!important;cursor:pointer}
/* Two live slides move together. Only the active frame is kept after the 310ms transition. */
.wpstl-build-addon-grid{display:block;position:relative}
.wpstl-build-addon-slide{display:grid;grid-template-columns:repeat(var(--wpstl-addon-columns,2),minmax(0,1fr));gap:14px;align-items:stretch;width:100%}
.wpstl-build-addon-track{display:flex;align-items:stretch;width:200%;transform:translateX(0);
  transition:transform .31s cubic-bezier(.22,.68,.24,1)}
.wpstl-build-addon-track>.wpstl-build-addon-slide{flex:0 0 50%;width:50%;min-width:0}
.wpstl-build-addon-track.is-moving{transform:translateX(-50%)}
.wpstl-build-addon-track--reverse{transform:translateX(-50%)}
.wpstl-build-addon-track--reverse.is-moving{transform:translateX(0)}
.wpstl-build-addon-grid.is-animating{overflow:hidden;isolation:isolate}
@media(min-width:581px){
  .wpstl-build-addon-grid:has(> .wpstl-build-addon-slide:only-child) .wpstl-build-addon-slide--single{max-width:330px;margin-inline:auto}
}
@media(max-width:580px){
  .wpstl-build-addon-slide{grid-template-columns:minmax(0,1fr);gap:10px}
  .wpstl-build-addon-loading-cards{grid-template-columns:minmax(0,1fr)}
  .wpstl-build-addon-loading-card:nth-child(2){display:none}
}
@media(prefers-reduced-motion:reduce){
  .wpstl-build-addon-track{transition:none!important}
  .wpstl-build-addon-loading-spinner,.wpstl-build-addon-loading-card>*,
  .wpstl-build-addon-toolbar-button.is-loading::before{animation:none!important}
}

/* v1.0.16: site-configurable appearance, scoped to the companion plugin. */
.wpstl-build-addon-dialog{width:min(100%,var(--wpstl-addon-modal-width,700px));background:var(--wpstl-addon-modal-bg,#fff)}
.wpstl-build-addon-header{background:var(--wpstl-addon-modal-bg,#fff)}
.wpstl-build-addon-header h2{color:var(--wpstl-addon-modal-title,#172437)!important}
.wpstl-build-addon-subtitle{margin:0 0 8px!important;color:#596c7e;font-size:12px;line-height:1.4}
.wpstl-build-addon-item{background:var(--wpstl-addon-card-bg,#fff);border-color:var(--wpstl-addon-card-border,#e0e7ef);border-radius:var(--wpstl-addon-card-radius,12px)}
.wpstl-build-addon-item h3{color:var(--wpstl-addon-card-title,#172437)!important;font-size:var(--wpstl-addon-title-size,15px)!important}
.wpstl-build-addon-media{height:var(--wpstl-addon-image-height,180px)}
.wpstl-build-addon-slide{gap:var(--wpstl-addon-gap,14px)}
.wpstl-build-addon-track{transition-duration:var(--wpstl-addon-transition-ms,310ms)}
.wpstl-build-addon-link{background:var(--wpstl-addon-primary,#166fc1);border-color:var(--wpstl-addon-primary,#166fc1);color:var(--wpstl-addon-primary-text,#fff)!important}
.wpstl-build-addon-link:hover{filter:brightness(.91);background:var(--wpstl-addon-primary,#166fc1);color:var(--wpstl-addon-primary-text,#fff)!important}
.wpstl-build-addon-search-link{color:var(--wpstl-addon-secondary,#1464ab)!important;border-color:var(--wpstl-addon-secondary,#1464ab);background:transparent}
.wpstl-build-addon-search-link:hover{color:var(--wpstl-addon-secondary,#1464ab)!important;background:#f0f6fc}
.wpstl-builder-toolbar-help-slot .wpstl-build-addon-toolbar-button,
.wpstl-app .wpstl-workspace-actions .wpstl-build-addon-toolbar-button{
 color:var(--wpstl-addon-toolbar-text,#fff)!important;
 background:var(--wpstl-addon-toolbar-fill,linear-gradient(112deg,#2454a7,#0e7b89 53%,#357a3e))!important;
}
.wpstl-builder-toolbar-help-slot .wpstl-build-addon-toolbar-button:hover:not(:disabled),
.wpstl-app .wpstl-workspace-actions .wpstl-build-addon-toolbar-button:hover:not(:disabled){
 color:var(--wpstl-addon-toolbar-text,#fff)!important;
 background:var(--wpstl-addon-toolbar-fill,linear-gradient(112deg,#2454a7,#0e7b89 53%,#357a3e))!important;
 filter:brightness(.91)
}
.wpstl-build-addon-dialog.wpstl-addon-layout-horizontal .wpstl-build-addon-item{flex-direction:row;align-items:flex-start;gap:10px}
.wpstl-build-addon-dialog.wpstl-addon-layout-horizontal .wpstl-build-addon-media{flex:0 0 40%;width:40%;height:min(var(--wpstl-addon-image-height,180px),170px)}
.wpstl-build-addon-dialog.wpstl-addon-layout-horizontal .wpstl-build-addon-item-body{min-width:0;align-self:stretch}
.wpstl-build-addon-pagination.is-compact .wpstl-build-addon-page-button{min-width:35px;min-height:35px;border-radius:50%!important;padding:5px 8px!important;font-size:20px!important;line-height:1!important}
@media(max-width:580px){.wpstl-build-addon-item .wpstl-build-addon-media{width:110px;min-width:110px;flex:0 0 110px;height:112px}.wpstl-build-addon-item h3{font-size:min(var(--wpstl-addon-title-size,15px),16px)!important}.wpstl-build-addon-dialog.wpstl-addon-layout-horizontal .wpstl-build-addon-media{flex:0 0 110px;width:110px;height:112px}}

/* v1.0.22: media height follows the available card width instead of a fixed
 * pixel height. Max-height prevents oversized imagery on one/two-card pages. */
.wpstl-build-addon-item{container-type:inline-size}
.wpstl-build-addon-item .wpstl-build-addon-media{
  height:auto;width:100%;aspect-ratio:1/1;max-height:220px;flex-shrink:0;
}
.wpstl-build-addon-dialog.wpstl-addon-image-square .wpstl-build-addon-media{aspect-ratio:1/1;max-height:none}
.wpstl-build-addon-dialog.wpstl-addon-image-landscape .wpstl-build-addon-media{aspect-ratio:4/3;max-height:220px}
.wpstl-build-addon-dialog.wpstl-addon-layout-horizontal .wpstl-build-addon-media{
  flex:0 0 40%;width:40%;height:auto;max-height:170px;
}
.wpstl-build-addon-dialog.wpstl-addon-actions-inline .wpstl-build-addon-actions{
  flex-direction:row;align-items:stretch;
}
.wpstl-build-addon-dialog.wpstl-addon-actions-inline .wpstl-build-addon-link{
  flex:1 1 0;min-width:0;width:auto;overflow-wrap:anywhere;
}
/* Even if side by side was selected, two full labels must remain legible. */
@container (max-width:240px){
  .wpstl-build-addon-dialog.wpstl-addon-actions-inline .wpstl-build-addon-actions{flex-direction:column}
  .wpstl-build-addon-dialog.wpstl-addon-actions-inline .wpstl-build-addon-link{width:100%}
}
@media(max-width:580px){
  .wpstl-build-addon-item .wpstl-build-addon-media,
  .wpstl-build-addon-dialog.wpstl-addon-layout-horizontal .wpstl-build-addon-media{
    flex:0 0 110px;width:110px;min-width:110px;height:auto;aspect-ratio:1/1;max-height:none;
  }
  .wpstl-build-addon-dialog.wpstl-addon-actions-inline .wpstl-build-addon-actions{flex-direction:column}
}
@media(max-width:360px){
  .wpstl-build-addon-item .wpstl-build-addon-media,
  .wpstl-build-addon-dialog.wpstl-addon-layout-horizontal .wpstl-build-addon-media{
    flex:0 0 88px;width:88px;min-width:88px;
  }
}
/* An intrinsic-width product photo never sets the size of the media frame. */
.wpstl-build-addon-media .wpstl-build-addon-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}