.home-hub{padding-top:42px;padding-bottom:30px;scroll-margin-top:90px}.hub-kicker{color:#c4a5dd;font-size:11px;font-weight:700;letter-spacing:.15em}.hub-heading{max-width:700px;margin-bottom:28px}.hub-heading h1{font-size:clamp(38px,6vw,72px);letter-spacing:-.035em;line-height:1.16;margin:15px 0}.hub-heading h1 em{font-style:normal;color:#b5e86b}.hub-heading p,.jar-selector p{color:#c4b8d0;line-height:1.7}.hub-paths{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px}.hub-path{border:1px solid #584268;border-radius:22px;overflow:hidden;color:#f8f1ff;background:#241532;text-decoration:none;transition:transform .18s,border-color .18s;min-width:0}.hub-path:hover{transform:translateY(-4px);border-color:#b5e86b}.hub-visual{height:225px;position:relative;overflow:hidden;background:#3d2252}.hub-visual img{width:100%;height:100%;object-fit:cover}.hub-art .hub-visual{background:#b5e86b}.hub-art img{object-fit:contain;padding:16px}.hub-stamp{position:absolute;bottom:12px;left:12px;border:1px dashed #f5edff;background:#241532e8;color:#fff;padding:6px 10px;border-radius:8px;font-size:10px;font-weight:700;letter-spacing:.08em}.hub-copy{padding:22px}.hub-copy small{font-size:10px;letter-spacing:.15em;color:#c4a5dd}.hub-copy h2{font-size:25px;line-height:1.3;margin:8px 0}.hub-copy p{font-size:13px;color:#d5c6df;line-height:1.7;margin:0 0 20px}.hub-copy b{font-size:14px;color:#b5e86b}.hub-sheet-note{font-size:12px;color:#bfb0cb;padding:18px 0;border-bottom:1px dashed #584268;line-height:1.7}.jar-selector{padding-top:35px;padding-bottom:40px;scroll-margin-top:90px}.jar-selector h2{font-size:clamp(28px,4vw,42px);margin:10px 0}.jar-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:650px;margin:26px 0 20px}.jar-choices button{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border:1px solid #584268;border-radius:16px;background:#241532;color:#f8f1ff;font:inherit;cursor:pointer}.jar-choices button[aria-pressed=true]{background:#344327;border:2px solid #b5e86b}.jar-choices .jarico{color:#c4a5dd}.jar-choices button[aria-pressed=true] .jarico{color:#b5e86b}.jar-selected strong{font-size:26px;color:#b5e86b}.jar-selected p{font-size:13px;margin:8px 0 18px}.jar-actions{display:flex;flex-wrap:wrap;gap:12px}.jar-actions .btn{min-height:48px}.home-bottom-nav{display:none}.hub-path:focus-visible,.jar-choices button:focus-visible,.home-bottom-nav a:focus-visible{outline:3px solid #b5e86b;outline-offset:4px}.hub-brand-story{display:none!important}
@media(max-width:700px){.home-hub{padding-top:24px}.hub-heading{margin-bottom:22px}.hub-heading h1{font-size:42px}.hub-heading h1 br{display:none}.hub-heading h1 em{display:block}.hub-heading p{font-size:14px;max-width:300px}.hub-paths{grid-template-columns:1fr;gap:12px}.hub-path{display:grid;grid-template-columns:112px 1fr;border-radius:18px}.hub-visual{height:100%;min-height:156px}.hub-stamp{font-size:8px;left:6px;bottom:8px;padding:5px;max-width:100px;line-height:1.5}.hub-copy{padding:17px}.hub-copy h2{font-size:23px;margin:6px 0}.hub-copy p{font-size:12px;margin-bottom:10px}.hub-copy b{font-size:13px}.jar-selector{padding-top:24px}.jar-choices{gap:7px}.jar-choices button{min-height:108px}.jar-actions{display:grid;grid-template-columns:1fr;width:100%}.home-bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;right:0;background:#170e23fa;border-top:1px solid #584268;padding:8px 8px calc(8px + env(safe-area-inset-bottom));z-index:60;backdrop-filter:blur(15px)}.home-bottom-nav a{min-height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#ded0e8;font-size:11px;text-decoration:none;border-radius:8px}.home-bottom-nav a[aria-current=location]{background:#382444;color:#b5e86b}.home-bottom-nav span{font-size:18px;line-height:1}.studio-in-view .home-bottom-nav{display:none}.mobar{display:none!important}body{padding-bottom:85px}.ig-fab{bottom:88px!important}.nlinks{display:none}.nav-in{min-height:60px}.topbar{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.jar-examples-grid{min-width:0}}
@media(prefers-reduced-motion:reduce){.hub-path{transition:none}.hub-path:hover{transform:none}}
.jar-collection-photo{display:block;width:100%;max-width:650px;height:auto;margin:22px 0;border:1px solid #584268;border-radius:20px}
.hub-pack .hub-visual img{object-fit:contain;background:#160e24}
/* Opaque black jars: short 5/50 ml, tall 100/150 ml, as in the supplied product photo. */
.jarico.s{width:24px;height:19px}.jarico.m{width:29px;height:29px}.jarico.cyl{width:25px;height:47px}.jarico.l{width:32px;height:50px}
.jarico,.ps.active .jarico,.addbig.active .jarico{--jar-edge:#72647d;border-color:var(--jar-edge);background:linear-gradient(90deg,#09090d,#303039 18%,#131319 39%,#060609 78%,#23212b);border-radius:3px 3px 6px 6px;box-shadow:inset 1px 0 2px #ffffff28,0 4px 8px #0006}
.jarico::before,.ps.active .jarico::before,.addbig.active .jarico::before{height:8px;top:-8px;border-color:#766980;background:linear-gradient(90deg,#111116,#41404b 22%,#101015 60%,#232129);box-shadow:inset 0 1px 0 #ffffff30;border-radius:4px 4px 1px 1px}
.jar-choices button{justify-content:flex-end;padding:20px 5px 14px;min-height:132px}
.jar-choices button[aria-pressed=true] .jarico,.ps.active .jarico{filter:drop-shadow(0 0 4px #b5e86b55)}
/* 5 ml has a deep lid: the opening seam sits halfway down the closed jar. */
.jarico.s{width:30px;height:26px;border-radius:5px 5px 6px 6px;overflow:hidden}
.jarico.s::before,.ps.active .jarico.s::before,.addbig.active .jarico.s::before{box-sizing:border-box;left:0;top:0;width:100%;height:50%;border:0;border-bottom:2px solid #050507;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#111116,#41404b 22%,#101015 60%,#232129);box-shadow:inset 0 1px 0 #ffffff45,0 1px 0 #82778c}
.jarico.s::after{left:3px;top:2px;width:2px;height:calc(50% - 4px);background:linear-gradient(#ffffff70,#ffffff15)}
#fileGrp .seg{white-space:normal;text-align:left;padding:14px;min-width:0}
#fileGrp .seg small{display:block;font-size:12px;line-height:1.6;color:#d5c6df;margin:7px 0}
.artwork-terms{font-size:12px;line-height:1.75;color:#c4b8d0;margin:12px 0}
#fileMultBtns{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
#fileMultBtns button{min-height:44px;padding:8px 4px}
.artwork-bundle-price{padding:14px;border:1px solid #718d49;border-radius:10px;color:#c7ee95;font-size:14px;line-height:1.7;background:#26311e}

/* Desktop: use the screen width to compare packages and review a job side by side. */
@media(min-width:1024px){
  .wrap{max-width:none;width:100%;padding-inline:clamp(24px,3vw,64px)}
  .home-hub .hub-heading{max-width:1000px}
  #materials{padding-block:30px;scroll-margin-top:85px}
  #materials .h-head{text-align:left;margin-bottom:22px}
  #materials .h-head h2{font-size:clamp(28px,2.6vw,44px);margin-block:8px}
  #materials .h-head p{max-width:none;margin:0}
  #materials .matgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.5vw,28px)}
  #materials .matcard{min-width:0;border-radius:18px}
  #materials .mph{aspect-ratio:auto;height:clamp(140px,24vh,280px)}
  #materials .mbody{padding:18px;gap:8px}
  #materials .mprice{font-size:clamp(17px,1.45vw,25px);line-height:1.4}
  #materials .matcard h3{font-size:clamp(16px,1.3vw,22px)}
  #materials .matcard p{flex:0;line-height:1.55;margin:0}
  #materials .matcard .btn{margin-top:auto;min-height:46px}
  .studio-wizard{max-width:none;width:100%}
  .studio-progress{max-width:none;gap:16px}
  .studio-page .matrow2{grid-template-columns:repeat(6,minmax(0,1fr))}
  #fileGrp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  #fileGrp .seg{height:100%}
  #fileMult{max-width:760px}
  .studio-page[data-step="1"]:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,.8fr);gap:24px;align-items:start}
  .studio-page[data-step="1"]>.studio-basket{margin:0;grid-column:2;grid-row:1}
  .studio-page[data-step="3"]:not([hidden]){display:grid;grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr);gap:20px;align-items:start}
  .studio-page[data-step="3"]>.btn{grid-column:1/-1;justify-self:start}
  .studio-page[data-step="3"]>.studio-basket{margin:0}
  .studio-page[data-step="3"]>.stage{min-width:0}
  .studio-dock{bottom:16px;padding:16px 24px}
  .studio-dock .btn{min-width:170px}
  .studio-dock-total strong{font-size:30px}
  .jar-selector{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:48px;align-items:start}
  .jar-selector>div:first-child{grid-column:1/-1}
  .jar-collection-photo{grid-column:1;grid-row:2/4;max-width:none;margin:20px 0 0}
  .jar-choices{grid-column:2;max-width:none;margin-top:20px}
  .jar-selected{grid-column:2}
}
/* Full workspace for desktop and iPad; guided flow stays on phones. */
@media(min-width:768px){
  #order.studio-wide>.wrap{max-width:none;width:100%;padding-inline:clamp(16px,2.5vw,48px)}
  .studio-wide .studio-wizard{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 22px;align-items:start}
  .studio-wide .studio-progress,.studio-wide .studio-title,.studio-wide .studio-dock,.studio-wide .studio-summary,.studio-wide .studio-page[data-step="3"]>.btn{display:none}
  .studio-wide .studio-notice{grid-column:1/-1;margin:0}
  .studio-wide .studio-page{min-height:0;display:block!important;min-width:0}
  .studio-wide .studio-page[data-step="0"]{grid-column:1;grid-row:2}
  .studio-wide .studio-page[data-step="1"]{grid-column:1;grid-row:3}
  .studio-wide .studio-page[data-step="2"]{grid-column:1;grid-row:4}
  .studio-wide .studio-page[data-step="3"]{grid-column:2;grid-row:2/5;position:sticky;top:82px}
  .studio-wide .studio-page .panel>h3{display:block}
  .studio-wide .studio-page .addbtns{gap:8px}
  .studio-wide .studio-page .addbig{min-height:105px;padding:12px 8px;gap:8px;flex-direction:row;text-align:left}
  .studio-wide .studio-page .addbig .at{font-size:14px}
  .studio-wide .studio-page .addbig small{font-size:11px}
  .studio-wide .studio-page .addpanel{margin:0;padding:14px}
  .studio-wide .studio-basket{margin:16px 0 0!important}
  .studio-wide .studio-page .matrow2{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .studio-wide #fileGrp{display:grid;grid-template-columns:1fr;gap:8px}
  .studio-wide .studio-page .qrow{gap:8px}
  .studio-wide .studio-page .qrow .qadd{flex-basis:100%}
  .studio-wide .studio-page .oitem{display:flex;flex-wrap:wrap;gap:8px}
  .studio-wide .studio-page .oitem .oq{margin-left:auto}
  .studio-wide .studio-page .grptools{flex-wrap:wrap}
  .studio-wide .studio-page .stage{position:static;min-width:0}
  .studio-wide .studio-page .canvas-wrap canvas{width:100%;height:auto}
  .studio-wide .studio-page .ps{min-width:0;min-height:68px}
  .studio-wide .studio-page .coatrow{flex-wrap:wrap;gap:8px}
  .studio-wide .studio-page .cust{width:100%}
}
@media(min-width:768px) and (max-width:1023px){
  .studio-wide .studio-wizard{gap:14px}
  .studio-wide .studio-page .panel{padding:12px}
  .studio-wide .studio-page .addbig{flex-direction:column;text-align:center}
  .studio-wide .studio-page .matopt{padding:10px 4px;min-width:0}
  .studio-wide .studio-page .matopt .mn{font-size:11px}
  .studio-wide .studio-page .num{max-width:72px}
}
@media(max-width:767px){
  .studio-progress{position:sticky;top:64px;z-index:20;background:#150d20;padding:8px 0}
  .studio-page .addbig{min-height:84px}
  .studio-page .studio-advanced summary{min-height:44px}
}
@media(min-width:768px){
  .studio-wide .studio-page .canvas-wrap canvas{max-height:46vh;object-fit:contain;display:block}
  .studio-wide .h-head{margin-bottom:22px}
}
@media(max-width:767px){.studio-in-view .uc-launch{display:none}}