/* THE START PAGE, OPTION 1 "PICTURE CATEGORIES" (8 Nov 2026, WORKLOG 450), js/designs/x-lb-start.js. Every rule under #dzPick.dzst, linked last on
   design.html so it wins over designer.css's EASY STUDIO start page and designer-lb-finish.css. One theme (Zest Charcoal): charcoal words and
   buttons, warm panels, no glow; tags square; corners var(--radius). */
#dzPick.dzst{--s-ink:var(--ink,#2A2A33);--s-mut:var(--muted,#6B6B76);--s-panel:var(--panel,#F8F7F4);--s-line:var(--line,#E6E4DF);--s-pri:var(--primary,#33333D)}

/* 1. the short top: words on the left, the search on the right, a hairline under it */
#dzPick.dzst .dze-hero.dzst-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:end;gap:12px 40px;margin:24px 0 0;padding:6px 0 24px;
  min-height:0;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid var(--s-line);overflow:visible}
#dzPick.dzst .dze-hero.dzst-hero::before{display:none;content:none}
#dzPick.dzst .dzst-hero .dz-intro{display:block;margin:0;text-align:left;max-width:none}
#dzPick.dzst .dzst-hero .dz-intro .eyebrow{display:none}
#dzPick.dzst .dzst-hero .dz-intro h1{font-size:34px;line-height:1.15;letter-spacing:-.5px;font-weight:500;margin:0 0 6px;color:var(--s-ink)}
#dzPick.dzst .dzst-hero .dz-intro>p{font-size:15px;line-height:1.55;color:var(--s-mut);margin:0;max-width:none}
#dzPick.dzst .dzst-hero .dze-hero-find{grid-column:2;grid-row:1;align-self:end;width:100%;max-width:none;height:52px;margin:0;padding:0 16px;border-radius:10px;background:#fff;
  box-shadow:0 6px 20px -12px rgba(42,42,51,.28),inset 0 0 0 1px var(--s-line)}
#dzPick.dzst .dzst-hero .dze-hero-find input{font-size:14.5px}
#dzPick.dzst .dzst-hero .dze-hero-find svg{color:var(--s-ink)}
#dzPick.dzst .dzst-hero .dz-brandcta{grid-column:1;grid-row:2;margin:4px 0 0;max-width:none}

/* 2. the picture categories */
#dzPick.dzst .dz-prodbar{display:none}
#dzPick.dzst .dzst-cats{display:flex;justify-content:space-between;gap:16px;padding:26px 0 6px}
#dzPick.dzst .dzst-cat{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1 1 0;min-width:0;border:0;background:none;padding:0;cursor:pointer;font:inherit;color:var(--s-ink)}
#dzPick.dzst .dzst-cat i{display:grid;place-items:center;width:112px;height:112px;border-radius:50%;overflow:hidden;background:#ECEDEF;color:var(--s-ink);
  box-shadow:0 0 0 3px #fff,0 0 0 4px var(--s-line);transition:box-shadow .15s,transform .2s}
#dzPick.dzst .dzst-cat i img{width:100%;height:100%;object-fit:cover;display:block}
#dzPick.dzst .dzst-all i{background:var(--s-panel)}
#dzPick.dzst .dzst-cat span{font-size:13.5px;font-weight:500;line-height:1.3;text-align:center}
#dzPick.dzst .dzst-cat:hover i{transform:translateY(-2px);box-shadow:0 0 0 3px #fff,0 0 0 4px #C9C6BF}
#dzPick.dzst .dzst-cat[aria-pressed="true"] i{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--s-pri)}
#dzPick.dzst .dzst-cat:focus-visible{outline:0}
#dzPick.dzst .dzst-cat:focus-visible i{box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(51,51,61,.45)}

/* 3. the products: big photo cards, four across */
#dzPick.dzst .dz-fam{margin-top:30px}
#dzPick.dzst .dz-sec-h{border-bottom:0;padding-bottom:0;margin-bottom:14px}
#dzPick.dzst .dz-sec-h h2{font-size:22px;font-weight:500}
#dzPick.dzst .dz-prods{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 20px}
#dzPick.dzst .dz-prod{gap:0}
#dzPick.dzst .dz-prod-im{border-radius:12px;box-shadow:none;background:#ECEDEF}
#dzPick.dzst .dz-prod:hover .dz-prod-im{box-shadow:0 14px 30px -18px rgba(42,42,51,.5)}
#dzPick.dzst .dz-prod-t{margin-top:12px}
#dzPick.dzst .dz-prod-t b{font-size:15px;font-weight:500}
#dzPick.dzst .dz-prod-t small{display:none}
#dzPick.dzst .dz-prod-n{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--s-mut)}
#dzPick.dzst .dzst-go{justify-self:start;display:inline-flex;align-items:center;min-height:38px;margin-top:12px;padding:0 14px;border-radius:var(--radius-sm,6px);
  background:var(--s-pri);color:#fff;font-size:13px;font-weight:500;transition:background .15s}
#dzPick.dzst .dz-prod:hover .dzst-go{background:#1F1F26}
#dzPick.dzst #dzProducts:not(.dzst-full) .dz-fam:not(.dzst-open) .dz-prod.dzst-x{display:none}
#dzPick.dzst #dzProducts.dzst-full .dzst-more{display:none}
#dzPick.dzst .dzst-more{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin:22px 0 0;border:0;border-radius:var(--radius);background:var(--s-panel);
  color:var(--s-ink);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer}
#dzPick.dzst .dzst-more:hover{background:#EFEDE8}

/* 4. Other Ways to Start, then the guide band */
#dzPick.dzst .dze-ways{max-width:none;margin-top:56px}
#dzPick.dzst .dzst-guide{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;margin:40px 0 0;padding:22px 26px;border-radius:var(--radius);background:var(--s-pri);color:#fff;text-decoration:none}
#dzPick.dzst .dzst-guide-ic{width:52px;height:52px;display:grid;place-items:center;border-radius:var(--radius);background:rgba(255,255,255,.1)}
#dzPick.dzst .dzst-guide-t b{display:block;font-size:17px;font-weight:500}
#dzPick.dzst .dzst-guide-t small{display:block;margin-top:3px;font-size:13px;color:rgba(255,255,255,.75)}
#dzPick.dzst .dzst-guide-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--radius-sm);background:#fff;color:var(--s-ink);font-size:14px;font-weight:500}

@media (max-width:1000px){
  #dzPick.dzst .dze-hero.dzst-hero{grid-template-columns:minmax(0,1fr)}
  #dzPick.dzst .dzst-hero .dze-hero-find{grid-column:1;grid-row:2;margin-top:8px}
  #dzPick.dzst .dzst-hero .dz-brandcta{grid-row:3}
  #dzPick.dzst .dzst-cats{justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  #dzPick.dzst .dzst-cats::-webkit-scrollbar{display:none}
  #dzPick.dzst .dzst-cat{flex:0 0 96px}
  #dzPick.dzst .dzst-cat i{width:84px;height:84px}
  #dzPick.dzst .dz-prods{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
  #dzPick.dzst .dze-hero.dzst-hero{margin-top:14px;padding-bottom:18px}
  #dzPick.dzst .dzst-hero .dz-intro h1{font-size:25px}
  #dzPick.dzst .dzst-hero .dz-intro>p{font-size:14px}
  #dzPick.dzst .dzst-cats{gap:10px;padding-top:18px}
  #dzPick.dzst .dzst-cat{flex:0 0 80px}
  #dzPick.dzst .dzst-cat i{width:72px;height:72px}
  #dzPick.dzst .dzst-cat span{font-size:12px}
  #dzPick.dzst .dz-prods{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  #dzPick.dzst .dz-sec-h h2{font-size:19px}
  #dzPick.dzst .dzst-go{min-height:36px;padding:0 12px;font-size:12.5px}
  #dzPick.dzst .dzst-guide{grid-template-columns:auto minmax(0,1fr);padding:18px}
  #dzPick.dzst .dzst-guide-go{grid-column:1/-1;justify-content:center}
}

/* clear-background pictures (-cut.webp) sit on the theme tint, like every other cut-out on the site (site.css), with room around them */
#dzPick.dzst .dzst-cat i{background:var(--pic-bg,var(--tint))}
#dzPick.dzst .dzst-cat i img[src*="-cut.webp"]{object-fit:contain;padding:2%}
#dzPick.dzst .dz-prod-im:has(>img[src*="-cut.webp"]){background:var(--pic-bg,var(--tint))!important}
#dzPick.dzst .dz-prod-im>img[src*="-cut.webp"]{object-fit:contain;padding:0}

/* SQUARE PICTURES AND LIGHTER CARDS (8 Nov 2026; Junaid: "our images are made for square so either do something so they don't get cropped or make the
   square too and improve design on these"): every product picture box is square and shows the whole picture (contain, never cropped); the card is
   one white tile with a hairline that lifts on hover; the heavy black button becomes a quiet "Start Designing" line with an arrow. */
#dzPick.dzst .dz-prod{position:relative;padding:10px 10px 14px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--s-line);transition:box-shadow .2s,transform .2s}
#dzPick.dzst .dz-prod:hover{box-shadow:inset 0 0 0 1px var(--s-line),0 16px 34px -20px rgba(42,42,51,.45);transform:translateY(-2px)}
#dzPick.dzst .dz-prod:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(51,51,61,.4)}
#dzPick.dzst .dz-prod-im{aspect-ratio:1/1!important;height:auto!important;border-radius:10px;overflow:hidden;background:var(--pic-bg,var(--tint))!important;box-shadow:none!important}
#dzPick.dzst .dz-prod-im>img{width:100%!important;height:100%!important;object-fit:contain!important;padding:0!important}
#dzPick.dzst .dz-prod-t{margin-top:12px;padding:0 4px}
#dzPick.dzst .dz-prod-n{padding:0 4px}
#dzPick.dzst .dzst-go{display:inline-flex;align-items:center;gap:6px;min-height:0;margin:10px 4px 0;padding:0;background:none;color:var(--s-ink);font-size:13px;font-weight:500;border-radius:0}
#dzPick.dzst .dzst-go::after{content:"";width:14px;height:14px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
#dzPick.dzst .dz-prod:hover .dzst-go{background:none;text-decoration:underline;text-underline-offset:3px}
#dzPick.dzst .dz-prod:hover .dzst-go::after{transform:translateX(3px)}
@media (max-width:700px){
  #dzPick.dzst .dz-prod{padding:8px 8px 12px;border-radius:12px}
  #dzPick.dzst .dz-prod-t b{font-size:14px}
  #dzPick.dzst .dzst-go{font-size:12.5px;margin-top:8px;padding:0}
}