/* Design Your Own (v51): hub, galleries and builder */
.dz{max-width:1240px;margin:0 auto;padding:28px clamp(16px,4vw,48px) 70px}
.dz-hero{text-align:center;padding:26px 0 8px}
.dz-hero .eyebrow{justify-content:center}
.dz-h1{font-size:clamp(2.2rem,6vw,4.4rem)!important;margin:.25em 0 .3em!important}
.dz-hero .lede{max-width:720px;margin:0 auto 6px;font-size:1.08rem;color:var(--mute)}
.dz-hero-sm{padding-top:10px}
.dz-from{font-size:.86rem;color:var(--mute);margin:4px 0 0;letter-spacing:.02em}
.dz-crumbs{font-size:.8rem;color:var(--mute);margin:0 0 14px}.dz-crumbs a{color:var(--green)}
/* the big glowing CTA */
.dz-cta-wrap{display:flex;justify-content:center;margin:26px 0 14px}
.dz-cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:16px;padding:22px 42px 22px 30px;border-radius:999px;text-decoration:none;color:#14201b;
 background:linear-gradient(120deg,#fff3c4 0%,#f6d77a 22%,#e8b53a 50%,#d79f22 72%,#f6d77a 100%);background-size:220% 100%;
 box-shadow:0 10px 30px rgba(232,181,58,.45),0 2px 0 #b8861d inset,0 -3px 0 rgba(0,0,0,.08) inset;border:2px solid #fff1b8;
 animation:dzShine 4.5s linear infinite,dzBob 3.2s ease-in-out infinite;transition:transform .18s,box-shadow .18s;font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(1.1rem,3.2vw,1.6rem)}
.dz-cta:hover,.dz-cta:focus-visible{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 44px rgba(232,181,58,.6),0 2px 0 #b8861d inset;outline:none}
.dz-cta:active{transform:scale(.98)}
.dz-cta-glow{position:absolute;inset:-14px;border-radius:999px;z-index:-1;background:radial-gradient(closest-side,rgba(246,215,122,.75),rgba(246,215,122,0));filter:blur(6px);animation:dzPulse 2.6s ease-in-out infinite}
.dz-cta-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--green);color:var(--gold);box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.dz-cta-txt{display:flex;flex-direction:column;line-height:1.05}
.dz-cta-txt small{font-size:.5em;letter-spacing:.14em;font-weight:700;opacity:.8;margin-top:6px}
@keyframes dzShine{0%{background-position:0% 0}100%{background-position:220% 0}}
@keyframes dzPulse{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1.04)}}
@keyframes dzBob{0%,100%{translate:0 0}50%{translate:0 -3px}}
@media (prefers-reduced-motion:reduce){.dz-cta,.dz-cta-glow{animation:none}}
/* tabs */
.dz-tabs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 8px}
.dz-tab{display:flex;flex-direction:column;gap:4px;padding:20px 22px;border:2px solid var(--line);border-radius:16px;background:#fff;text-decoration:none;color:var(--green);transition:border-color .2s,box-shadow .2s,transform .2s}
.dz-tab b{font-size:clamp(1.05rem,2.6vw,1.45rem);font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.dz-tab span{font-size:.86rem;color:var(--mute)}
.dz-tab:hover{transform:translateY(-2px);border-color:var(--gold)}
.dz-tab.on{border-color:var(--gold);box-shadow:0 0 0 4px rgba(232,181,58,.28);background:linear-gradient(180deg,#fffaf0,#fff)}
/* gallery */
.dz-sec{margin:44px 0 0}
.dz-sec h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;color:var(--green);margin:0 0 6px}
.dz-sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:16px}
.dz-sec-head a,.dz-sec-head span{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.dz-sub{color:var(--mute);margin:0 0 16px;max-width:760px}
.dz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.dz-card{display:flex;flex-direction:column;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.07);transition:transform .15s,box-shadow .15s}
.dz-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.1)}
.dz-card-img img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff}
.dz-grid-prints .dz-card-img img{aspect-ratio:3/2;object-fit:cover}
.dz-card-name{padding:10px 12px 0;font-weight:700;font-size:.92rem;color:#1d2a22;text-decoration:none;line-height:1.3}
.dz-card-price{padding:2px 12px 0;color:var(--mute);font-size:.88rem}
.dz-use{margin:10px 12px 12px;padding:9px 10px;border-radius:999px;border:1.5px solid var(--gold);color:var(--green);text-align:center;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;background:#fffaf0}
.dz-use:hover{background:var(--gold)}
.dz-use-off{display:none}
.dz-how{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dz-how li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.dz-how b{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--green);color:var(--gold)}
.dz-how h3{margin:10px 0 4px;color:var(--green);font-size:1.05rem}
.dz-how p{margin:0;color:var(--mute);font-size:.92rem}
.dz-fine{font-size:.86rem;color:var(--mute);max-width:760px;margin:10px auto;text-align:center}
.dz-photo{margin:54px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
.dz-photo h2{font-size:clamp(1.3rem,2.8vw,1.9rem);font-weight:900;text-transform:uppercase;color:var(--green);margin:.4em 0}
.dz-photo p{color:var(--mute)}
.dz-photo img{border-radius:12px;width:100%;height:auto}
@media (max-width:700px){.dz-grid{grid-template-columns:1fr 1fr;gap:12px}.dz-card-name{font-size:.82rem}.dz-how{grid-template-columns:1fr}.dz-photo{grid-template-columns:1fr}.dz-tabs{gap:10px}.dz-tab{padding:14px}.dz-cta{padding:18px 26px 18px 18px;gap:12px}.dz-cta-ico{width:44px;height:44px}.dz-use{font-size:.6rem;letter-spacing:.08em;margin:8px}}

/* ---------- builder ---------- */
.db{max-width:1320px;margin:0 auto;padding:14px clamp(10px,3vw,32px) 40px}
.db-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.db-h1{font-size:clamp(1.5rem,4vw,2.4rem);font-weight:900;text-transform:uppercase;color:var(--green);margin:.1em 0 .2em;letter-spacing:-.01em}
.db-products{display:flex;gap:8px;overflow-x:auto;padding:6px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.db-products::-webkit-scrollbar{display:none}
.db-chip{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 14px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--green);font:inherit;font-weight:800;font-size:.8rem;letter-spacing:.04em;text-transform:none;cursor:pointer;margin:0;min-width:84px}
.db-chip small{font-weight:600;color:var(--mute);font-size:.7rem;letter-spacing:0}
.db-chip:hover{background:#fffaf0;border-color:var(--gold)}
.db-chip[aria-pressed=true]{border-color:var(--gold);background:linear-gradient(180deg,#fff6dc,#fff);box-shadow:0 0 0 3px rgba(232,181,58,.3)}
.db-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start}
.db-opts{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:0 0 10px}
.db-opt-label{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-right:6px}
.db-swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.db-sw{width:34px;height:34px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px #c9c4b6;cursor:pointer;padding:0;margin:0;background-size:cover}
.db-sw[aria-pressed=true]{box-shadow:0 0 0 3px var(--gold)}
.db-sw:hover{background-color:inherit}
.db-select{padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-weight:600;background:#fff;color:var(--ink);max-width:100%}
.db-seg{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.db-seg button{margin:0;border:0;background:#fff;color:var(--green);padding:8px 14px;font-size:.7rem;letter-spacing:.1em}
.db-seg button[aria-pressed=true]{background:var(--green);color:var(--gold)}
.db-stage{position:relative;width:100%;min-width:0;max-width:720px;margin:0 auto;aspect-ratio:1;background:#fff;border-radius:18px;box-shadow:0 8px 30px rgba(0,0,0,.08);overflow:hidden}
.db-stage canvas{display:block}
.db-loading{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.7);font-weight:700;color:var(--green);font-size:.9rem;pointer-events:none}
.db-loading[hidden]{display:none}
.db-legend{position:absolute;left:10px;top:10px;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7a5a12;background:rgba(255,248,225,.92);border:1px dashed #d9a52c;border-radius:999px;padding:3px 9px;pointer-events:none}
.db-stagebar{display:flex;justify-content:center;gap:8px;margin:10px 0 0;flex-wrap:wrap}
.db-stagebar button,.db-mini{margin:0;padding:9px 14px;border-radius:999px;font-size:.66rem;background:#fff;color:var(--green);border:1.5px solid var(--line)}
.db-stagebar button:hover,.db-mini:hover{background:#fffaf0;border-color:var(--gold)}
.db-stagebar button:disabled{opacity:.4;cursor:default}
.db-note{font-size:.84rem;color:var(--mute);text-align:center;max-width:620px;margin:10px auto 0}
.db-note b{color:#7a1f1f}
/* panel */
.db-panel{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 30px rgba(0,0,0,.06);overflow:hidden;position:sticky;top:12px}
.db-ptabs{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line);background:var(--paper)}
.db-ptabs button{margin:0;border:0;border-radius:0;background:transparent;color:var(--green);padding:12px 4px;font-size:.62rem;letter-spacing:.08em;display:flex;flex-direction:column;align-items:center;gap:4px}
.db-ptabs button svg{width:20px;height:20px}
.db-ptabs button[aria-selected=true]{background:#fff;box-shadow:inset 0 -3px 0 var(--gold)}
.db-ptabs button:hover{background:#fff}
.db-pbody{padding:16px;max-height:calc(100vh - 160px);overflow:auto}
.db-pane[hidden]{display:none}
.db-pane h3{margin:0 0 10px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.db-big{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:0 0 12px;padding:14px;border-radius:12px;font-size:.78rem;background:var(--green);color:var(--gold);border-color:var(--green)}
.db-field{display:block;margin:0 0 12px;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.db-field textarea,.db-field input[type=text],.db-field select{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:1rem;text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink)}
.db-field input[type=range]{display:block;width:100%;margin-top:8px;accent-color:#d9a52c;height:28px}
.db-field output{float:right;font-weight:700;color:var(--mute);letter-spacing:0}
.db-fonts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.db-fonts button{margin:0;padding:10px 6px;border-radius:10px;background:#fff;color:var(--ink);border:1.5px solid var(--line);text-transform:none;letter-spacing:0;font-size:1rem;font-weight:400}
.db-fonts button[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 2px rgba(232,181,58,.35)}
.db-row{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 12px}
.db-row button{flex:1 1 auto;margin:0;padding:10px 8px;border-radius:10px;font-size:.62rem;background:#fff;color:var(--green);border:1.5px solid var(--line)}
.db-row button.danger{color:#9b1c1c;border-color:#e7c3c3}
.db-row button:hover{background:#fffaf0}
.db-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.db-grid button{margin:0;padding:8px;border-radius:12px;background:#fff;border:1.5px solid var(--line);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink);text-transform:none;letter-spacing:0;font-size:.66rem;font-weight:600;line-height:1.15}
.db-grid button img{width:100%;height:70%;object-fit:contain}
.db-grid button:hover{border-color:var(--gold);background:#fffaf0}
.db-grid.db-wide{grid-template-columns:1fr 1fr}
.db-grid.db-wide button{aspect-ratio:auto;padding:6px}
.db-grid.db-wide button img{height:auto;aspect-ratio:1;background:#f6f4ee;border-radius:8px}
.db-cats{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.db-cats button{margin:0;padding:6px 10px;border-radius:999px;font-size:.6rem;background:#fff;color:var(--green);border:1.5px solid var(--line)}
.db-cats button[aria-pressed=true]{background:var(--green);color:var(--gold)}
.db-tpl{display:grid;gap:8px}
.db-tpl button{margin:0;text-align:left;padding:14px;border-radius:12px;background:#fff;border:1.5px solid var(--line);color:var(--green);text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:800}
.db-tpl button span{display:block;font-weight:500;font-size:.8rem;color:var(--mute);margin-top:2px}
.db-tpl button:hover{border-color:var(--gold);background:#fffaf0}
.db-layers{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.db-layers li{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;font-size:.88rem}
.db-layers li.on{border-color:var(--gold);background:#fffaf0}
.db-layers li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-layers li button{margin:0;padding:6px 9px;font-size:.7rem;border-radius:8px;background:#fff;color:var(--green);border:1px solid var(--line)}
.db-empty{color:var(--mute);font-size:.88rem;margin:6px 0}
.db-hint{font-size:.8rem;color:var(--mute);margin:-4px 0 12px}
.db-swatches.db-sm .db-sw{width:30px;height:30px}
.db-color-custom{width:34px;height:34px;border:0;padding:0;background:none;cursor:pointer}
/* checkout */
.db-checkout{margin:30px auto 0;max-width:820px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px clamp(16px,3vw,28px)}
.db-checkout h2{margin:0 0 12px;font-size:1.2rem;text-transform:uppercase;color:var(--green);letter-spacing:.04em}
.db-sum{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin:0 0 12px}
.db-price{font-size:1.9rem;font-weight:900;color:var(--green)}
.db-price small{font-size:.8rem;font-weight:600;color:var(--mute);margin-left:6px}
.db-final{border:2px solid #b3261e;border-radius:10px;padding:12px 14px;margin:14px 0}
.db-final p{margin:0 0 8px;font-weight:800;color:#b3261e;text-transform:uppercase;letter-spacing:.04em}
.db-check{display:flex;gap:10px;align-items:flex-start;margin:8px 0}
.db-check input{margin-top:3px;width:22px;height:22px;flex:none;accent-color:var(--green)}
.db-buy{width:100%;max-width:440px;padding:18px;font-size:.82rem;background:var(--gold);color:var(--green);border-color:var(--gold);border-radius:999px}
.db-buy:hover{background:#d9a52c}
.db-buy:disabled{opacity:.5;cursor:not-allowed}
.db-msg{font-size:.9rem;color:var(--green);min-height:1.3em;margin:8px 0 0}
.db-msg.err{color:#9b1c1c}
.db-ok{background:#eef6ef;border:1px solid #bfdcc4;border-radius:12px;padding:16px 18px;margin:12px 0}
.db-toolbar{display:none}
/* mobile: canvas first, bottom toolbar, panel becomes a bottom sheet */
@media (max-width:900px){
 .db-layout{grid-template-columns:minmax(0,1fr)}
 .db-stage-col{min-width:0}
 .db-panel{position:fixed;left:0;right:0;top:auto;bottom:64px;z-index:60;border-radius:18px 18px 0 0;max-height:46vh;display:flex;flex-direction:column;transform:translateY(calc(100% + 80px));visibility:hidden;transition:transform .25s ease,visibility 0s .25s;box-shadow:0 -10px 30px rgba(0,0,0,.18)}
 .db-panel.open{transform:none;visibility:visible;transition:transform .25s ease}
 .db-ptabs{display:none}
 .db-pbody{max-height:none;flex:1;overflow:auto;padding:12px 14px 16px}
 .db-sheet-head{display:flex!important}
 .db-toolbar{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;left:0;right:0;bottom:0;z-index:61;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.08);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
 .db-toolbar button{margin:0;border:0;background:transparent;color:var(--green);display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;font-size:.56rem;letter-spacing:.06em;border-radius:12px;min-height:54px}
 .db-toolbar button svg{width:24px;height:24px}
 .db-toolbar button[aria-selected=true]{background:#fff6dc;color:#7a5a12}
 .db-toolbar button:disabled{opacity:.35}
 body.dz-builder{padding-bottom:72px}
 .db-stage{border-radius:14px}
 .db-chip{min-width:74px;padding:8px 10px}
}
.db-sheet-head{display:none;justify-content:space-between;align-items:center;padding:10px 14px 0}
.db-sheet-head b{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.db-sheet-head button{margin:0;padding:6px 12px;border-radius:999px;font-size:.62rem;background:#fff;color:var(--green);border:1.5px solid var(--line)}
.db [hidden],.db-panel [hidden]{display:none!important}
/* homepage band */
.dz-home{background:linear-gradient(180deg,#fffaf0,#fbfaf6)}
.dz-home-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:center}
.dz-home .big{margin-bottom:.4em}
.dz-cta-left{justify-content:flex-start}
.dz-home-links{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.dz-home-links a{color:var(--green)}
.dz-home-pics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dz-home-pics a{display:block;border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.08);transition:transform .2s}
.dz-home-pics a:hover{transform:translateY(-3px)}
.dz-home-pics img{width:100%;height:auto}
@media (max-width:800px){.dz-home-grid{grid-template-columns:1fr}.dz-cta-left{justify-content:center}.dz-home-links{text-align:center}}
.db-ink{margin:2px 0 10px}.db-seg button:disabled{opacity:.4}
