/* Additive catalogue layouts. Original colours, typography and template art are in style.css. */
[hidden]{display:none!important}
.catalog,.controls,.pagination,.tabs,.link-row,.detail,.resource{box-sizing:border-box}
.catalog *,.controls *,.pagination *,.tabs *,.link-row *,.detail *,.resource *{box-sizing:border-box}
.catalog{display:grid;gap:1em;align-items:stretch;font-size:14px;line-height:1.5}
.catalog.small{grid-template-columns:repeat(4,minmax(0,1fr))}
.catalog.medium{grid-template-columns:repeat(3,minmax(0,1fr))}
.catalog.large{grid-template-columns:repeat(2,minmax(0,1fr))}
.catalog.extra{grid-template-columns:1fr}
.catalog .card{border:1px solid #ccc;border-radius:5px;padding:1em;background:#fff;display:flex;flex-direction:column;min-width:0}
.catalog .card h2{font-size:20px;text-align:left;line-height:1.2;margin:0 0 20px;font-weight:900}
.catalog .thumbnail{display:flex;justify-content:center;align-items:flex-start;margin-bottom:20px}
.catalog .thumbnail img{width:200px;max-width:100%;height:auto;object-fit:contain}
.catalog .description{overflow-wrap:anywhere}
.catalog .description p:first-child{margin-top:0}
.catalog .actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:20px}
.catalog .price{white-space:nowrap;font-size:20px}
.button{display:inline-block;cursor:pointer;text-align:center;text-decoration:none;padding:8px 12px;border:0;font:inherit;line-height:1.4}
.button:not(.btnzaxaa){color:#fff;background:linear-gradient(to bottom,#3498db,#2980b9)}
.button:not(.btnzaxaa):hover{color:#fff;background:linear-gradient(to bottom,#3cb0fd,#3498db)}
.catalog .actions .button{font-size:16px;font-weight:normal;margin:0;max-width:250px}
.catalog.large .card,.catalog.extra .card{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:20px}
.catalog.large .card h2,.catalog.extra .card h2{grid-column:1/-1}
.catalog.large .thumbnail,.catalog.extra .thumbnail{grid-column:1;grid-row:2/4}
.catalog.large .thumbnail img,.catalog.extra .thumbnail img{width:300px}
.catalog.large .description,.catalog.extra .description{grid-column:2;grid-row:2}
.catalog.large .actions,.catalog.extra .actions{grid-column:2;grid-row:3;flex-direction:column;align-items:flex-end}
.controls{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;margin:24px 0;padding:15px;border:1px solid #ccc;background:#fff}
.controls label{display:flex;align-items:center;gap:8px;font-weight:bold;min-width:0}
.controls input,.controls select{width:auto;max-width:100%;margin:0;padding:10px;border:1px solid #ccc;border-radius:4px;font:inherit;color:#333;background:#fff}
.controls input{width:190px}
.controls input::placeholder{color:#888;opacity:1}
.pagination{display:flex;justify-content:center;gap:1px;flex-wrap:wrap;margin:16px 0}
.pagination button{border:0;background:transparent;color:#09f;font:inherit;cursor:pointer;padding:4px 5px}
.pagination button:hover{color:#0cf}
.pagination button[aria-current]{font-weight:bold;text-decoration:underline}
.pagination button:disabled{color:#999;cursor:default}
.muted{color:#777;font-size:14px}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 25px}
.tabs a{padding:10px 16px;text-decoration:none;border:1px solid #ccc;background:#eee;font-size:16px}
.tabs a[aria-current]{background:linear-gradient(to bottom,#3498db,#2980b9);color:#fff}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid #09f;outline-offset:3px}
/* Allow all lines of the scrolling headline to fit, including after fonts load. */
#benefits{position:relative;width:100%;margin:0 auto 20px}
#benefits>div{width:100%;margin:0;padding:4px 0}
#benefits>div h2{position:static;left:auto;width:100%;box-sizing:border-box;margin:0;line-height:1.4;padding:3px 0}
.ssm-scroller{position:relative;overflow:hidden}
.ssm-scroller.is-animating>div{will-change:transform}
#testimonials{width:auto;margin-left:20px;font-style:italic;color:#666}
#testimonials>div{display:flow-root;margin:0;padding:0;width:100%}
#testimonials p{margin:0 0 1em}
#testimonials img{float:left;width:55px;height:auto;padding:5px 10px 0 0;box-sizing:content-box}
.testimonials{margin:30px auto}
#header,#footer{max-width:100%;background-position:center top}
#content .footer{padding:20px 0}
@media(max-width:1100px){.catalog.large .card{grid-template-columns:minmax(0,200px) minmax(0,1fr);column-gap:15px}}
@media(max-width:850px){.catalog.small,.catalog.medium{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog.large{grid-template-columns:1fr}.catalog.extra .card{grid-template-columns:minmax(0,240px) minmax(0,1fr)}}
@media(max-width:540px){.controls{gap:14px}.controls label{width:100%;justify-content:space-between}.controls input,.controls select{width:72%}.catalog.small,.catalog.medium,.catalog.large{grid-template-columns:1fr}.catalog.large .card,.catalog.extra .card{display:flex}.catalog.large .actions,.catalog.extra .actions{align-items:flex-end}#content{padding:1em}#testimonials{margin-left:0}.tabs a{flex:1;text-align:center}}
@media(prefers-reduced-motion:reduce){.ssm-scroller{overflow:visible}}

/* Show one headline before script initialization, rather than a static stack. */
#benefits:not(.ssm-scroller)>div:not(:first-child){display:none}

/* Testimonials are a separate single-panel slideshow, never a stacked list. */
#testimonials:not(.ssm-scroller)>div:not(:first-child){display:none}

/* Compact pagination and product count share one horizontal toolbar. */
.pagination-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0}
.pagination-row .pagination{flex:1 1 auto;min-width:0;margin:0}
.pagination-row #results{flex:0 0 auto;margin:0;text-align:right;white-space:nowrap}
@media(max-width:540px){.pagination-row{flex-wrap:wrap;gap:4px 10px}.pagination-row #results{margin-left:auto;font-size:12px}}

/* Store tile size rules. The JV catalogue retains its own layout. */
#catalog{--thumbnail-size:250px;opacity:1;transition:opacity 160ms ease-in-out}
#catalog.is-fading{opacity:0;pointer-events:none}
#catalog.small{--thumbnail-size:200px}
#catalog.large,#catalog.extra{--thumbnail-size:300px}
#catalog .card h2{grid-row:auto}
#catalog .thumbnail{display:block;width:var(--thumbnail-size);max-width:100%;aspect-ratio:1;overflow:hidden;margin:0 auto 20px;align-self:start}
#catalog .thumbnail img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
#catalog .description{text-align:left}
#catalog .price{color:#333;font-size:18px;line-height:1.5;white-space:normal}
#catalog.small .card h2{text-align:center}
#catalog.small .actions{flex-direction:column;justify-content:flex-end;align-items:center;text-align:center}
#catalog.medium .card h2{text-align:left}
#catalog.medium .actions{flex-direction:row;justify-content:space-between;align-items:center}
#catalog.large .card,#catalog.extra .card{grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:20px}
#catalog.large .card h2{grid-column:1/-1;grid-row:1;text-align:left}
#catalog.large .thumbnail{grid-column:1;grid-row:2/4;margin-left:0;margin-right:0}
#catalog.large .description{grid-column:2;grid-row:2;text-align:left}
#catalog.large .actions{grid-column:2;grid-row:3;flex-direction:column;align-items:flex-end;justify-content:flex-end}
#catalog.extra .thumbnail{grid-column:1;grid-row:1/4;margin-left:0;margin-right:0}
#catalog.extra .card h2{grid-column:2;grid-row:1;text-align:left}
#catalog.extra .description{grid-column:2;grid-row:2;text-align:left}
#catalog.extra .actions{grid-column:2;grid-row:3;flex-direction:row;justify-content:space-between;align-items:center}
@media(max-width:1100px){#catalog.large{grid-template-columns:1fr}}
@media(max-width:650px){#catalog.large .card,#catalog.extra .card{display:flex}#catalog.large .thumbnail,#catalog.extra .thumbnail{margin-left:auto;margin-right:auto}#catalog.extra .actions{flex-wrap:wrap;justify-content:space-between}}
@media(prefers-reduced-motion:reduce){#catalog{transition:none}}

/* Keep controls compact; selected values use normal weight. */
.controls{gap:10px;padding:12px}
.controls label{gap:6px;white-space:nowrap}
.controls input,.controls select{font-weight:400;padding:8px 6px}
.controls input{width:160px}
.controls #per-page{width:83px}
/* Equal side tracks keep the pager centered on the catalogue, independent of status width. */
.pagination-row{display:grid;grid-template-columns:180px minmax(0,1fr) 180px;gap:8px}
.pagination-row .pagination{grid-column:2;justify-content:center}
.pagination-row #results{grid-column:3;white-space:normal}
.pagination-row.no-pagination{grid-template-columns:1fr;margin:4px 0}
.pagination-row.no-pagination #results{grid-column:1}
.pagination:empty{display:none}
#catalog .free-price{color:#c00;font-weight:bold}
#catalog.extra .card h2{font-size:28px;line-height:1.25}
#catalog.extra .description{font-size:18px;line-height:1.6}
@media(max-width:850px){
  .pagination-row{grid-template-columns:1fr;gap:4px}
  .pagination-row .pagination,.pagination-row #results{grid-column:1}
  .pagination-row #results{justify-self:end}
}
@media(max-width:540px){.controls #per-page{width:72%}}

/* The search field fills the space left by the fixed-width dropdown controls. */
.controls label[for="search"]{flex:1 1 220px}
.controls #search{flex:1 1 0;width:0;min-width:100px}
.controls label:not([for="search"]){flex:0 0 auto}
@media(max-width:540px){.controls label[for="search"]{flex-basis:100%}}

#catalog.large .actions{text-align:right}

/* Optional registry comparison price follows each size's price alignment. */
#catalog .price-stack{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
#catalog .normal-price{color:#999;font-size:16px;line-height:1.5;font-weight:600}
#catalog.small .price-stack{align-items:center}
#catalog.large .price-stack{align-items:flex-end;text-align:right}
#catalog.extra .price-stack{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 12px}

/* Match the larger JV pagination text in the store as well. */
.pagination{font-size:18px;line-height:1.4}
.pagination button{white-space:nowrap}

/* Headline scrollers (Store Settings "---" panels). Same mechanics as #benefits:
   the shared .ssm-scroller rules above clip and animate; these keep each panel
   full width and stop all but the first showing before the script runs. */
.headline-scroll{position:relative;width:100%;margin:0 auto}
.headline-scroll>div{width:100%;margin:0;padding:0}
.headline-scroll>div h1,.headline-scroll>div h2,.headline-scroll>div h3{width:100%;box-sizing:border-box;margin:0 0 20px}
.headline-scroll:not(.ssm-scroller)>div:not(:first-child){display:none}