/* Design Online templates (21 Oct 2026): the gallery in the designer's Templates rail (.dzg-*) and the public browse page
   designs.html (.dsg-*). Thumbnails sit on white tiles on the panel; the chosen one is a tint with the ring, never a side bar. */
.dzg-tools{display:grid;gap:8px;margin:0 0 6px}
.dzg-q{width:100%;height:36px;border:0;border-radius:var(--radius);background:var(--panel);padding:0 12px;font:inherit;font-size:12.5px;color:var(--ink)}
.dzg-q:focus{outline:0;box-shadow:var(--ring);background:#fff}
.dzg-chips{display:flex;flex-wrap:wrap;gap:5px}
.dzg-chips button{border:0;background:var(--panel);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);height:30px;padding:0 10px;font:inherit;font-size:11.5px;font-weight:500;color:var(--ink);cursor:pointer}
.dzg-chips button:hover{background:var(--tint)}
.dzg-chips button.on{background:var(--tint);box-shadow:var(--ring);font-weight:500}
.dzg-cols{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dzg-cols button{width:28px;height:28px;border-radius:50%;border:0;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(25,32,38,.12)}
.dzg-cols button.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary)}
.dzg-cols .dzg-any{width:auto;padding:0 9px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--panel);font:inherit;font-size:11px;font-weight:500;color:var(--ink)}
.dzg-count{font-size:11px;color:var(--muted);margin:4px 0 6px}
.dzg-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dzg-t{padding:6px 6px 8px;gap:3px;justify-items:stretch;text-align:left}
.dzg-t .dz-tplimg{aspect-ratio:1;display:grid;place-items:center;background:#fff;padding:6px}
.dzg-t .dz-tplimg img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 1px 4px rgba(25,32,38,.16);border-radius:var(--radius-sm)}
.dzg-t .dzg-n{font-size:11px;font-weight:500;color:var(--ink);line-height:1.25;justify-self:start}
.dzg-t .dzg-p{font-size:10.5px;font-weight:400;color:var(--muted);line-height:1.25;justify-self:start}
.dzg-star{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--primary);vertical-align:middle;margin-left:3px}
@media (min-width:600px) and (max-width:860px){.dzg-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- designs.html ---- */
.dsg-head{margin:6px 0 18px}
.dsg-head p{max-width:720px}
.dsg-bar{position:sticky;top:var(--sticky-top,0px);z-index:5;background:var(--page-bg,#fff);padding:10px 0 12px;display:grid;gap:10px;margin-bottom:8px}
.dsg-bar .dzg-q{max-width:420px;height:40px;font-size:13px}
.dsg-sec{margin:22px 0 8px}
.dsg-sec h2{font-size:20px;font-weight:500;margin:0 0 2px}
.dsg-sec p{font-size:13px;color:var(--muted);margin:0 0 12px}
.dsg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.dsg-card{display:grid;gap:6px;text-decoration:none;color:var(--ink);background:#fff;border-radius:var(--radius);box-shadow:var(--card-sh,0 1px 3px rgba(25,32,38,.08));padding:10px 10px 12px;transition:box-shadow .15s}
.dsg-card:hover{box-shadow:0 0 0 2px rgba(var(--prgb),.25),var(--card-sh,0 1px 3px rgba(25,32,38,.08))}
.dsg-im{aspect-ratio:4/3;background:#EBEDEF;border-radius:var(--radius-sm);display:grid;place-items:center;padding:10px;overflow:hidden}
.dsg-im img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 2px 8px rgba(25,32,38,.18);border-radius:var(--radius-sm);background:#fff}
.dsg-card b{font-size:13px;font-weight:500;line-height:1.3}
.dsg-card small{font-size:11.5px;color:var(--muted)}
.dsg-more{margin:10px 0 0}
.dsg-empty{padding:30px 0;color:var(--muted)}
@media (max-width:600px){.dsg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.dsg-im{padding:6px}.dsg-card{padding:7px 7px 9px}}
@media (max-width:600px){.dsg-bar{position:static;padding-top:4px}}
.dz-pane .dzg-q,.dzg-tools .dzg-q{display:block;width:100%;max-width:none}
.dzg-tools{grid-template-columns:minmax(0,1fr)}
.dzg-count{display:block;width:100%}
@media (max-width:860px){.dzg-tools .dzg-chips,.dzg-tools .dzg-cols{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:3px 2px}.dzg-tools .dzg-chips::-webkit-scrollbar,.dzg-tools .dzg-cols::-webkit-scrollbar{display:none}.dzg-chips button,.dzg-cols button{flex:0 0 auto}}
#dzTpls.dz-tpls{display:block}
/* thumbnails keep a box before they load (a lazy picture with no size never starts loading); the shadow follows the picture */
.dzg-t .dz-tplimg img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;box-shadow:none;border-radius:0;filter:drop-shadow(0 1px 3px rgba(25,32,38,.18))}
.dsg-im img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;box-shadow:none;background:transparent;border-radius:0;filter:drop-shadow(0 2px 6px rgba(25,32,38,.18))}
/* ---- DESIGNS FILTERS (21 Oct 2026, Junaid: "proper filtering and sorting"): a toolbar of search, product, style, sides and
   sort, colour dots on the second line with the live count and Clear filters; sticky under the header ---- */
.dsg-bar{grid-template-columns:minmax(0,1fr);gap:12px;padding:12px 0 14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.dsg-tools{display:grid;grid-template-columns:minmax(220px,1.3fr) repeat(4,minmax(0,1fr));gap:10px;align-items:end;min-width:0}
.dsg-search{position:relative;display:block;margin:0}
.dsg-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.dsg-bar .dsg-search .dzg-q{display:block;width:100%;max-width:none;height:40px;padding-left:36px;font-size:13px}
.dsg-sel{display:grid;gap:5px;margin:0;font-size:10.5px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:var(--eyebrow-ink)}
.dsg-sel select{height:40px;border:0;border-radius:var(--radius);background:var(--panel);padding:0 32px 0 12px;font:inherit;font-size:13px;font-weight:500;color:var(--ink);text-transform:none;letter-spacing:0;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365727C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px;cursor:pointer}
.dsg-sel select:focus{outline:0;box-shadow:var(--ring);background-color:#fff}
.dsg-row2{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dsg-lbl{font-size:10.5px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:var(--eyebrow-ink)}
.dsg-cols{display:flex;flex-wrap:wrap;gap:7px;align-items:center;min-width:0}
.dsg-cols button{width:24px;height:24px;border-radius:50%;border:0;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(25,32,38,.14);transition:transform .12s}
.dsg-cols button:hover{transform:scale(1.12)}
.dsg-cols button[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary)}
.dsg-count{font-size:12.5px;color:var(--muted);margin-left:auto}
#dsgClear{font-size:12.5px;color:var(--primary);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.dsg-card b{display:flex;align-items:center;gap:6px}
.dsg-sec h2{font-size:18px}
@media (max-width:900px){.dsg-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.dsg-search{grid-column:1/-1}}
@media (max-width:480px){.dsg-tools{grid-template-columns:minmax(0,1fr)}.dsg-count{margin-left:0;flex-basis:100%}}
/* the Product select grew to its longest option and slid under the Style box, hiding its arrow (Junaid's screenshot); every
   select keeps to its column and shortens long names; the bar sits on white, not the grey skin tint */
.dsg-bar{background:#fff}
.dsg-sel select{width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsg-bar .dsg-search .dzg-q{background:var(--panel)}

/* link to the wedding suites (21 Oct 2026) */
.dsg-wed{font-size:13.5px;color:var(--muted);margin:-4px 0 14px}
.dsg-wed a{font-weight:500}
@media (max-width:600px){.dsg-cols button{width:28px;height:28px}}   /* colour dots at tap size on phones (audit, 24 Oct 2026) */

/* TAP TARGETS (6 Nov 2026, the overnight audit: the colour swatches were 28 x 28 px on a phone): the same look, a finger-sized area */
@media (max-width:899px),(pointer:coarse){
  .dsg-cols button{position:relative}
  .dsg-cols button::after{content:"";position:absolute;inset:-8px}
}

/* NO JUMP WHILE LOADING (6 Nov 2026, the overnight audit: the footer jumped down when the designs arrived, layout shift 0.45): the list keeps
   a screen's height from the first paint, so the footer starts below the fold */
#dsgList{min-height:100vh}
/* the bar of filters fills in with the list; its height is kept from the first paint (measured: 125 px wide, 247 px to 900, 426 px to 480) */
#dsgBar:empty{min-height:125px}
@media (max-width:900px){#dsgBar:empty{min-height:247px}}
@media (max-width:480px){#dsgBar:empty{min-height:426px}}