:root{--ink:#171717;--muted:#77736d;--line:#e9e5df;--orange:#f28a1a;--body:#e8d2a7;--bodyHi:#f5e7ca;--accent:#f28a1a}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:#ddd}button,input{font:inherit}.shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(390px,.72fr);background:#fff}.stage{position:relative;overflow:hidden;min-height:100vh;padding:34px 44px 28px;background:radial-gradient(circle at 62% 36%,#fff 0 13%,transparent 43%),linear-gradient(135deg,#f5f0e9,#e7dfd4 65%,#d9d0c4)}.stage:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;background-image:radial-gradient(#7b746c .55px,transparent .55px);background-size:5px 5px}.stage header{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center}.brand{font-size:20px;letter-spacing:.08em;font-weight:900}.brand sup{font-size:8px}.brand span{font-weight:500;color:var(--muted);margin-left:8px}.pill{font-size:10px;letter-spacing:.15em;border:1px solid #cec6bb;border-radius:99px;padding:9px 12px;color:#6d675f;background:#ffffff70}.copy{position:relative;z-index:2;margin-top:8vh;max-width:500px}.copy p,.phead p{font-size:11px;letter-spacing:.18em;font-weight:900;color:var(--orange);margin:0 0 12px}.copy h1{font-size:clamp(48px,5.5vw,86px);line-height:.89;letter-spacing:-.055em;margin:0}.copy h1 em{font-style:normal;color:#7e776f}.copy>small{display:block;font-size:16px;line-height:1.55;color:#6c675f;max-width:420px;margin-top:24px}.visual{position:absolute;left:7%;right:3%;bottom:12%;height:54%;display:flex;align-items:center;justify-content:center}.halo{position:absolute;width:70%;height:35%;bottom:10%;background:#fff9;filter:blur(45px);border-radius:50%}.visual svg{position:relative;width:min(92%,950px);overflow:visible}.top{fill:url(#g)}.base{fill:var(--accent)}.rim{fill:#f6f4ef;stroke:#c8c3bb;stroke-width:5}.cer{fill:#e8e4dd}.steel{fill:#afb2b0;stroke:#747776;stroke-width:4}#previewName{font-size:45px;font-weight:950;letter-spacing:-2px;fill:var(--accent)}.paw{fill:var(--accent)}.note{position:absolute;right:2%;bottom:1%;font-size:9px;letter-spacing:.13em;color:#8d867d}.facts{position:absolute;z-index:2;left:44px;right:44px;bottom:28px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.facts div{border-top:1px solid #ccc4b9;padding-top:11px;display:grid;grid-template-columns:auto 1fr;column-gap:9px}.facts b{grid-row:1/3;color:var(--orange);font-size:10px}.facts strong{font-size:12px}.facts small{font-size:10px;color:#8b857d}.panel{height:100vh;overflow:auto;background:#fff;padding:34px 32px 0;border-left:1px solid #ddd8d1;display:flex;flex-direction:column}.phead{display:flex;justify-content:space-between;align-items:end;padding-bottom:22px}.phead h2{font-size:29px;letter-spacing:-.04em;margin:0}.bars{display:flex;gap:4px}.bars i{width:17px;height:4px;border-radius:4px;background:#ddd}.bars i:first-child{background:var(--orange);width:30px}.steps{border-top:1px solid var(--line)}.step{border-bottom:1px solid var(--line)}.head{width:100%;border:0;background:none;padding:17px 0;display:grid;grid-template-columns:30px auto 1fr auto;gap:8px;text-align:left;align-items:center;cursor:pointer}.head>span{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#f6eee4;color:var(--orange);font-size:9px;font-weight:900}.head b{font-size:14px}.head small{text-align:right;font-size:11px;color:#999}.head i{font-style:normal;color:#aaa}.body{padding:0 0 18px 30px}.step.closed .body{display:none}.models{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.card,.choice,.chip,.font{border:1px solid var(--line);background:#faf9f7;border-radius:12px;padding:10px;cursor:pointer}.on{border-color:var(--orange)!important;box-shadow:0 0 0 1px var(--orange) inset;background:#fff8ef!important}.off{opacity:.4;cursor:not-allowed}.card div{height:30px;display:grid;place-items:center;color:#aaa}.card .bone{height:20px;margin:5px 8px;border-radius:12px;background:#e8d2a7}.card b,.card small,.choice b,.choice small{display:block}.card b{font-size:11px}.card small,.choice small{font-size:9px;color:#999}.pair{display:grid;grid-template-columns:1fr 1.5fr;gap:8px}.choice{text-align:left}.choice b{font-size:12px}.chips,.fonts{display:flex;gap:7px}.chip{padding:8px 14px;font-size:11px}.body label{display:block;font-size:10px;color:#888;margin:14px 0 7px}.swatches{display:flex;gap:10px}.swatch{width:28px;height:28px;border:3px solid #fff;outline:1px solid #d8d3cc;border-radius:50%;background:var(--c);cursor:pointer}.swatch.on{outline:2px solid var(--orange);outline-offset:2px;box-shadow:none}.name{border:1px solid var(--line);border-radius:12px;padding:7px 11px;margin-bottom:10px}.name small{display:block;font-size:9px;color:#999}.name input{border:0;outline:0;width:100%;font-size:18px;font-weight:800;background:transparent;padding:3px 0}.font{font-size:11px;flex:1;padding:9px 5px}.font.script{font-family:Georgia,serif;font-style:italic}.font.wide{letter-spacing:.12em;font-size:9px}.checkout{position:sticky;bottom:0;margin:auto -32px 0;padding:18px 32px 24px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -14px 28px #fff}.price{display:flex;justify-content:space-between;align-items:end;margin-bottom:13px}.price small,.price em{display:block;color:#999;font-size:9px;font-style:normal}.price strong{display:block;font-size:30px;letter-spacing:-.04em}.status{font-size:10px;color:#777}.status i{display:inline-block;width:7px;height:7px;background:#39a768;border-radius:50%;margin-right:5px}.status.busy i{background:#f2a21a}.status.error i{background:#d43d3d}.cta{width:100%;border:0;border-radius:15px;background:var(--ink);color:#fff;padding:16px 17px;display:flex;justify-content:space-between;align-items:center;font-weight:800;cursor:pointer}.cta b{font-size:21px;color:var(--orange)}.checkout>p{font-size:9px;color:#aaa;text-align:center;margin:8px 0 0}@media(max-width:980px){.shell{grid-template-columns:1fr}.stage{min-height:62vh}.panel{height:auto;min-height:100vh;border-left:0}.visual{bottom:4%;height:48%}.facts{display:none}.copy{margin-top:5vh}.copy>small{display:none}}@media(max-width:560px){.stage{padding:22px;min-height:54vh}.pill{display:none}.copy h1{font-size:46px}.visual{left:0;right:0;bottom:0;height:45%}.panel{padding:25px 18px 0}.checkout{margin:auto -18px 0;padding-left:18px;padding-right:18px}.body{padding-left:0}.head small{display:none}}
/* 0005.1 — scalable Designwelt -> Design navigation */
.world-intro{margin:0 0 13px}.world-intro strong{display:block;font-size:15px;letter-spacing:-.02em}.world-intro small{display:block;color:#999;font-size:10px;line-height:1.45;margin-top:3px}
.worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.world{border:1px solid var(--line);background:#faf9f7;border-radius:14px;padding:8px;text-align:left;cursor:pointer;overflow:hidden}
.world b,.world small{display:block}.world b{font-size:11px;margin-top:7px}.world small{font-size:8px;line-height:1.3;color:#999;margin-top:2px}
.world-art{height:58px;border-radius:9px;display:block;position:relative;overflow:hidden;background:linear-gradient(145deg,#eee7dc,#d8cec0)}
.world-art i{position:absolute;display:block;background:#e3c99b}
.world-art.signature i:nth-child(1){width:72%;height:16px;border-radius:12px;left:14%;top:23px}
.world-art.signature i:nth-child(2),.world-art.signature i:nth-child(3){width:24px;height:24px;border-radius:50%;top:19px}
.world-art.signature i:nth-child(2){left:9%}.world-art.signature i:nth-child(3){right:9%}
.world-art.organic{background:linear-gradient(145deg,#e9eadf,#cbd0ba)}.world-art.organic i:nth-child(1){width:60%;height:28px;border-radius:60% 35% 55% 40%;left:20%;top:15px;background:#aeb894;transform:rotate(-6deg)}
.world-art.modern{background:linear-gradient(145deg,#e4e3e1,#c7c5c1)}.world-art.modern i:nth-child(1){width:64%;height:28px;left:18%;top:16px;border-radius:3px;background:#999894}.world-art.modern i:nth-child(2){width:5px;height:37px;left:28%;top:12px;background:#777}.world-art.modern i:nth-child(3){width:5px;height:37px;right:28%;top:12px;background:#777}
.design-label{display:flex;justify-content:space-between;align-items:center;margin:17px 0 7px}.design-label span{font-size:10px;font-weight:800}.design-label small{font-size:9px;color:#aaa}
.designs{display:grid;grid-template-columns:1fr}.design{border:1px solid var(--orange);box-shadow:0 0 0 1px var(--orange) inset;background:#fff8ef;border-radius:13px;padding:8px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;text-align:left}
.design-bone{height:46px;border-radius:9px;background:linear-gradient(145deg,#f2eadf,#ddd2c3);position:relative}.design-bone i:first-child{position:absolute;left:10px;right:10px;top:17px;height:12px;border-radius:9px;background:#e2c698}.design-bone i:last-child{position:absolute;width:22px;height:22px;border-radius:50%;left:8px;top:12px;background:#e2c698;box-shadow:34px 0 #e2c698}
.design b,.design small{display:block}.design b{font-size:12px}.design small{font-size:9px;color:#999;margin-top:2px}.design em{font-style:normal;color:var(--orange);font-weight:900}
@media(max-width:560px){.worlds{grid-template-columns:1fr 1fr}.worlds .world:last-child{display:none}}

/* 0005.2 HAPISHI.SHOP visual family */
:root{--hs-brown:#2a1807;--hs-gold:#f2b544;--hs-cream:#f2dfbf;--hs-light:#fbf5ea;--hs-ink:#15110d;--orange:#f2b544;--line:#ddc9aa}
*{box-sizing:border-box}body{margin:0;color:var(--hs-ink);background:var(--hs-light);font-family:Arial,Helvetica,sans-serif}
.shop-shell{width:100%;position:relative;z-index:20;box-shadow:0 1px 0 #0002}.delivery-bar{height:34px;display:flex;align-items:center;justify-content:center;background:#f7c765;font-size:12px;color:#241606}
.shop-head{min-height:105px;background:var(--hs-brown);color:white;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:25px;padding:18px max(4vw,28px)}
.shop-brand{display:flex;align-items:center;gap:12px;color:var(--hs-gold)}.brand-pets{width:54px;height:54px;border-radius:14px;background:#ead0a2;color:var(--hs-brown);display:grid;place-items:center;font-size:28px;font-weight:900}
.shop-brand strong{display:block;font-size:24px;line-height:1;font-weight:900;letter-spacing:.03em}.shop-brand strong span{color:white;font-size:.66em}.shop-brand small{display:block;margin-top:7px;font-size:8px;letter-spacing:.28em;color:var(--hs-gold)}
.custom-title{text-align:center;font-size:11px;letter-spacing:.12em;color:#f3dfbc}.custom-title b,.custom-title span{display:block}.custom-title span{color:var(--hs-gold);margin-top:5px;font-weight:800}.shop-icons{justify-self:end;font-size:19px}
.shop-nav{min-height:35px;background:var(--hs-gold);display:flex;align-items:center;justify-content:center;gap:46px;font-size:12px;font-weight:700}
.custom-intro{text-align:center;padding:28px 20px 20px;background:white}.custom-intro>span{font-size:10px;letter-spacing:.24em;font-weight:900;color:#a36d16}.custom-intro h1{font-size:30px;line-height:1.08;margin:8px 0;letter-spacing:-.035em}.custom-intro p{font-size:13px;color:#756a5c;margin:0}
main,.app,.shell{background:var(--hs-light)}.step{background:white!important;border-color:#e7d7bd!important;border-radius:16px!important;box-shadow:0 5px 22px #2a18070e}.head span{color:#a36d16!important}.head b{color:var(--hs-ink)}
.world,.card,.design{border-color:#e3d1b3;background:white;border-radius:13px}.world.on,.card.on,.design.on{border-color:var(--hs-gold)!important;box-shadow:0 0 0 2px #f2b5443d!important;background:#fffaf1!important}
.world-art.signature,.design-bone{background:linear-gradient(145deg,#f5ead8,#e4cda7)!important}.world-art.signature i,.design-bone i:first-child,.design-bone i:last-child{background:#dca63f!important}.design-bone i:last-child{box-shadow:34px 0 #dca63f!important}
input,select{border-color:#d8c5a6!important;background:white!important;border-radius:9px!important}button{font-family:inherit}button[type=submit],.primary,.cta,#save{background:#111!important;color:white!important;border:0!important;border-radius:9px!important;font-weight:800!important}.price{color:#111!important}
@media(max-width:800px){.shop-head{grid-template-columns:1fr auto;min-height:86px;padding:14px 18px}.custom-title{display:none}.shop-brand strong{font-size:20px}.brand-pets{width:46px;height:46px}.shop-nav{gap:18px;font-size:10px;white-space:nowrap}.custom-intro h1{font-size:25px}}

/* 0005.3 Warm Shop Theme */
:root{--warm-page:#ead3ae;--warm-stage:#f2dfbf;--warm-card:#f8ead2;--warm-card2:#fff8ec;--warm-line:#d6bb90;--warm-muted:#786a58}
body{background:var(--warm-page)!important}
.custom-intro{background:#f4e4c8!important;border-bottom:1px solid #dfc69d;padding-top:24px!important;padding-bottom:22px!important}
.custom-intro h1{color:#1a120b}.custom-intro p{color:#6f604e}
main,.app,.shell,.layout,.configurator,.config-wrap{background:var(--warm-page)!important}
.stage,.product-stage,.preview,.visual,.viewer{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.72),rgba(255,255,255,0) 42%),linear-gradient(145deg,#f6e7cc 0%,#ead2aa 100%)!important;border-color:var(--warm-line)!important}
.panel,.config-panel,.sidebar,.controls{background:var(--warm-page)!important}
.step{background:var(--warm-card)!important;border:1px solid var(--warm-line)!important;box-shadow:0 6px 18px rgba(61,37,12,.07)!important}
.step .head,.step .body{background:transparent!important}.head small,.status{color:var(--warm-muted)!important}
.world,.design,.card,.chip,input,select,textarea{background:var(--warm-card2)!important;border-color:#d8bd92!important}
.world.off,.card.off{background:#efe3cf!important}.world.on,.design.on,.card.on{background:#fff4df!important;border-color:var(--hs-gold)!important}
.option,.choice,.select-card,.size-card{background:#fff4df!important;border-color:#d8bd92!important}
.eyebrow,.kicker{color:#b27312!important}.hero-copy p,.stage p,.product-stage p{color:#6d5f4e}
input:focus,select:focus,textarea:focus{background:#fff!important;outline:none;border-color:var(--hs-gold)!important;box-shadow:0 0 0 2px rgba(242,181,68,.18)}
@media(min-width:801px){.panel,.config-panel,.sidebar,.controls{border-left:1px solid rgba(120,87,43,.12)}}

/* ---- 16b: layout without hero copy, compact checkout, colour picker, design gallery ---- */
.stage .visual{top:3%;bottom:3%;height:auto}
.custom-intro h1{font-size:30px}
.custom-intro p{font-size:14px}
.checkout{padding:12px 32px 12px}
.checkout-row{display:flex;align-items:center;gap:18px}
.checkout-row .price{margin:0;flex:0 0 auto}
.checkout-row .price strong{font-size:26px}
.checkout-row .cta{flex:1;width:auto;padding:13px 16px}
.checkout>.status{margin-top:6px;font-size:10px}
.swatches{flex-wrap:wrap;gap:9px}
.swatch{flex:0 0 28px;width:28px;height:28px;padding:0}
.swatch-more{flex:0 0 auto;height:28px;padding:0 11px;border-radius:999px;border:1px solid #d8d3cc;background:#fff;font-size:11px;font-weight:700;cursor:pointer;color:#5c5246}
.swatch-more.open{border-color:var(--orange)}
.swatch-all{flex-basis:100%;display:none;margin-top:4px;padding:10px 12px;border-radius:12px;background:#fffaf2;border:1px solid #eadcc6}
.swatch-all.open{display:block}
.swatch-family{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:4px 0}
.swatch-family>span{flex:0 0 74px;font-size:10px;letter-spacing:.06em;color:#8b7c69;text-transform:uppercase}
.color-name{font-size:11px;color:#7a6c5b;margin:2px 0 10px;min-height:14px}
.design-more{width:100%;margin-top:10px;padding:11px;border-radius:12px;border:1px dashed #d9b77c;background:#fffaf2;font-weight:700;cursor:pointer}
.gallery{width:min(1100px,94vw);max-height:90vh;border:0;border-radius:18px;padding:0;background:#fbf5ec}
.gallery::backdrop{background:rgba(26,18,11,.55)}
.gallery-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:18px 24px;background:#fbf5ec;border-bottom:1px solid #eadcc6}
.gallery-head h2{margin:2px 0 0;font-size:22px}
.gallery-head small{font-size:10px;letter-spacing:.2em;color:#a36d16;font-weight:900}
.gallery-close{border:0;background:transparent;font-size:30px;cursor:pointer;line-height:1}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;padding:20px 24px 28px}
.gallery-item{border:1px solid #eadcc6;border-radius:14px;background:#fff;padding:10px;text-align:left;cursor:pointer}
.gallery-item.on{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange) inset}
.gallery-item .img{aspect-ratio:1;border-radius:10px;background:#fff center/contain no-repeat;margin-bottom:8px}
.gallery-item b{display:block;font-size:14px}.gallery-item small{font-size:11px;color:#8b7c69}
.gallery-item .from{display:block;margin-top:4px;font-size:12px;font-weight:700;color:#1a120b}
@media (max-width:700px){.checkout{padding:10px 18px}.checkout-row{gap:10px}.checkout-row .price strong{font-size:22px}.swatch-family>span{flex-basis:100%}}

/* ---- 16c: scene card (dog + live recoloured bowl), top left above the 3D preview ---- */
.scene-card{position:absolute;left:20px;top:16px;z-index:5;width:min(34%,380px);margin:0;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 14px 34px rgba(43,29,16,.22);border:4px solid #fff}
.scene-card canvas{display:block;width:100%;height:auto}
.scene-card figcaption{padding:7px 10px 8px;font-size:11px;line-height:1.5;letter-spacing:.04em;color:#4a3f33;background:#fff}
.scene-card figcaption b{color:#1a120b}
@media (max-width:900px){.scene-card{width:44%;left:10px;top:10px}}

/* ---- 16e: name fonts ---- */
.fonts{display:flex;flex-wrap:wrap;gap:8px}
.font{font-size:17px;letter-spacing:0;text-transform:uppercase}
.font:disabled{opacity:.35;cursor:not-allowed}
.font-hint{font-size:11px;color:#8a5a00;margin-top:6px;min-height:14px}
.font{flex:1 1 calc(33.3% - 8px)}

/* ---- 16f: header with logo, claim and how-to steps ---- */
.delivery-bar{letter-spacing:.14em;font-size:11px;font-weight:700}
.delivery-bar b{font-weight:900;color:#2b1a0b}
.shop-brand{display:flex;align-items:center;text-decoration:none}
.brand-logo{display:block;height:72px;width:auto}
.custom-title{text-align:center;letter-spacing:0;color:#f3dfbc}
.custom-title h1{margin:0;font-size:clamp(22px,2.4vw,32px);line-height:1.1;letter-spacing:-.02em;color:#fff6e6}
.custom-title p{margin:6px 0 0;font-size:13px;color:#e3cfa9}
.shop-nav.how-to{gap:14px;flex-wrap:wrap;padding:8px max(3vw,18px);font-size:11.5px;font-weight:700;letter-spacing:.02em}
.how-to ol{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:0;padding:0;list-style:none;counter-reset:step}
.how-to li{counter-increment:step;display:flex;align-items:center;gap:6px;white-space:nowrap;font-weight:600}
.how-to li::before{content:counter(step);display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#2b1a0b;color:#f6c25b;font-size:10px;font-weight:800}
@media (max-width:900px){
  .shop-head{grid-template-columns:1fr auto}
  .brand-logo{height:54px}
  .custom-title{display:block;grid-column:1/-1;order:3}
  .custom-title h1{font-size:22px}
  .shop-nav.how-to{white-space:normal;font-size:10.5px}
}

/* ---- 16g: name size steps ---- */
.name-sizes{display:flex;gap:8px;margin-top:8px}
.name-size{flex:1;border:1px solid var(--line);background:#faf9f7;border-radius:12px;padding:9px 5px;font-size:11px;font-weight:800;letter-spacing:.06em;cursor:pointer}
.name-size.on{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange) inset;background:#fff8ef}

/* 17a: embedded in hapishi.shop (iframe): the theme shows logo and header */
.embed-shopify .delivery-bar,.embed-shopify .shop-head{display:none}
.embed-shopify body{background:transparent}