/* Muse D Studio — app styles (Collections, Grillz, Gems).
   Ported from the Muse D Studio design; WordPress-specific glue lives in style.css. */
:root{color-scheme:dark;--font-head:"Fraunces",Georgia,serif;--font-body:"Inter",system-ui,sans-serif;--head:#f5f0e8;--text:#e7d9e0;--soft:#f3d6e2;--bg:#0a0a0a;--panel:#161114;--line:#2a2026;--line2:#3a2e35;--ink:#f5f0e8;--muted:#ab9fa8;--pink:#ff79ae;--lime:#bdf285;--burgundy:#620032;--forest:#015625;--navy:#252d44;--dustblue:#a5bedd;--butter:#f5e289;--dark:#140a12;--tooth:#ece6d8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:16px/24px var(--font-body);background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23ff79ae' fill-opacity='.07'%3E%3Cpath d='M40 18c.6 9 9 17.4 18 18-9 .6-17.4 9-18 18-.6-9-9-17.4-18-18 9-.6 17.4-9 18-18z'/%3E%3Cpath d='M118 96c.4 5.4 5.4 10.4 10.8 10.8-5.4.4-10.4 5.4-10.8 10.8-.4-5.4-5.4-10.4-10.8-10.8 5.4-.4 10.4-5.4 10.8-10.8z'/%3E%3C/g%3E%3Cg fill='%23bdf285' fill-opacity='.06'%3E%3Cpath d='M128 26c.3 3.2 3.2 6.1 6.4 6.4-3.2.3-6.1 3.2-6.4 6.4-.3-3.2-3.2-6.1-6.4-6.4 3.2-.3 6.1-3.2 6.4-6.4z'/%3E%3C/g%3E%3C/svg%3E")}
a{color:var(--pink)}a:hover{color:var(--lime)}
button{font-family:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.serif{font-family:var(--font-head)}
.wrap{max-width:1180px;margin:0 auto;padding:40px 24px 64px;display:flex;flex-direction:column;gap:32px}
.eyebrow{display:flex;align-items:center;gap:8px;font-size:13px;line-height:16px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.small-lbl{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
h1{margin:12px 0 0;font-size:clamp(40px,7vw,56px);line-height:1.04;font-weight:600;letter-spacing:-.01em}
h2.title{margin:0;font-size:32px;line-height:36px;font-weight:500}
.pagehead{display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--line);padding-bottom:32px}
.pagehead p{margin:0;color:var(--muted);max-width:560px}

/* brand bar */
.brandbar{background:var(--burgundy);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.brandbar .in{max-width:1180px;margin:0 auto;padding:12px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.brandbar nav{display:flex;gap:8px;flex-wrap:wrap}
.tab{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:9999px;border:1px solid color-mix(in srgb, var(--pink) 50%, transparent);color:var(--ink);text-decoration:none;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.tab:hover{color:var(--ink);border-color:var(--pink)}
.tab[aria-current="page"]{background:var(--pink);color:var(--dark);border-color:var(--pink)}

/* hero */
.hero{background:var(--burgundy);border-bottom:1px solid #8a2a55}
.hero .in{max-width:1180px;margin:0 auto;padding:56px 24px 72px;display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.hero .copy{flex:1 1 420px;display:flex;flex-direction:column;gap:20px}
.hero h1{font-size:clamp(44px,7.5vw,84px);line-height:1;margin:0}
.hero p{margin:0;color:var(--soft);max-width:460px;font-size:17px;line-height:26px}
.hero .art{flex:1 1 420px;display:flex;justify-content:center}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 32px;border-radius:9999px;border:none;background:var(--pink);color:var(--dark);font-weight:800;font-size:14px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.cta:hover{color:var(--dark);background:var(--pink)}
.cta.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--pink)}
.cta.ghost:hover{color:var(--ink);background:color-mix(in srgb, var(--pink) 12%, transparent)}

/* collections */
.colgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:20px}
.col{border-radius:12px;padding:32px;display:flex;flex-direction:column;gap:20px}
.col h3{margin:0;font-size:40px;line-height:44px;font-weight:500}
.col p{margin:0}
.pieces{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
.piece{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:13px;font-weight:500}
.piece .disc{width:84px;height:84px;overflow:hidden;border-radius:9999px;background:var(--tooth);display:flex;align-items:center;justify-content:center}
.col .more{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:9999px;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:1.5px solid currentColor}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:8px}
.step b{font-family:var(--font-head);font-size:28px;line-height:32px;font-weight:500;color:var(--lime)}

/* shared form bits */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:32px;display:flex;flex-direction:column;gap:24px;min-width:0}
.row{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
.client{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.client .eyebrow{grid-column:1/-1}
label.f{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:500}
.fld{width:100%;background:var(--bg);border:1px solid var(--line2);color:var(--ink);border-radius:4px;padding:12px 14px;font:16px/24px var(--font-body)}
.fld:focus{outline:2px solid var(--pink);outline-offset:1px;border-color:var(--pink)}
.fld::placeholder{color:#8a7d86}
.arch{position:relative;width:100%;max-width:420px;height:160px;margin:0 auto}
.tooth{position:absolute;padding:0;display:flex;align-items:center;justify-content:center}
.pill{min-height:44px;padding:0 18px;border-radius:9999px;border:1.5px solid var(--line2);background:transparent;color:var(--ink);font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:10px}
.pill.on{border-color:var(--pink);background:#2a1a22}
.kpill{min-width:64px;font-weight:800}
.kpill.on{background:var(--pink);color:var(--dark)}
.dot{width:20px;height:20px;border-radius:9999px}
.wrapflex{display:flex;flex-wrap:wrap;gap:8px}
.stones{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stones label{display:flex;align-items:center;gap:14px;min-height:52px;padding:0 16px;border-bottom:1px solid var(--line);cursor:pointer}
.stones label:last-child{border-bottom:none}
.stones input{width:20px;height:20px;accent-color:var(--pink);margin:0}
.drop{position:relative;flex-grow:1;min-height:168px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:1.5px dashed #5c4f57;border-radius:12px;padding:24px;text-align:center;cursor:pointer;background:var(--panel)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:24px;border-radius:12px;background:var(--forest)}
.status{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:12px;border:1px solid var(--lime);color:var(--lime)}

/* gems */
.ggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px;align-items:start}
.gcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:16px}
.item{display:flex;gap:14px;padding-top:16px;border-top:1px solid var(--line)}
.thumb{width:72px;height:72px;overflow:hidden;flex-shrink:0;border-radius:12px;background:var(--tooth);display:flex;align-items:center;justify-content:center}
.lbl{width:40px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sw{width:30px;height:30px;padding:0;border-radius:9999px;border:2px solid var(--line2);box-shadow:0 0 0 2px var(--panel) inset}
.sw.on{border-color:var(--lime)}
.fin{width:56px;height:56px;padding:6px;border-radius:12px;background:var(--tooth);border:2px solid var(--line2);display:flex;align-items:center;justify-content:center}
.fin.on{border-color:var(--lime);box-shadow:0 0 0 2px var(--lime)}
.place{align-self:flex-start;min-height:40px;margin-top:4px;padding:0 16px;border-radius:9999px;border:1px solid #5c4f57;background:transparent;color:var(--ink);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.place.on{background:var(--pink);border-color:var(--pink);color:var(--dark)}
.render{background:var(--forest);border-radius:12px;padding:32px;display:flex;flex-direction:column;gap:24px}
.front{display:flex;gap:4px}
.ft{background:var(--tooth);border:1px solid #c9bfae;display:flex;align-items:center;justify-content:center}
.ghostbtn{min-height:36px;padding:0 14px;border-radius:9999px;border:1px solid var(--lime);background:transparent;color:var(--ink);font-size:13px}
.studio-footer{border-top:1px solid var(--line);padding:24px;text-align:center;color:var(--muted);font-size:13px}
@media (max-width:640px){.hero .art>div{zoom:.6}.col{padding:24px}.col h3{font-size:32px;line-height:36px}}
.logolink{display:block;line-height:0}
.logo-img{display:block;height:84px;width:auto}
@media (max-width:640px){.logo-img{height:64px}}
/* iPad / touch */
html{-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
button,a,label,input{touch-action:manipulation}
.brandbar .in{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));padding-top:max(12px,env(safe-area-inset-top))}
.wrap{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));padding-bottom:max(64px,env(safe-area-inset-bottom))}
@media (pointer:coarse){
  .sw{width:40px;height:40px}
  .fin{width:64px;height:64px}
  .place{min-height:48px;padding:0 20px;font-size:13px}
  .pill{min-height:48px}
  .ghostbtn{min-height:44px;padding:0 18px}
  .tab{min-height:48px}
  .lbl{width:48px}
  .wrapflex,.btns{gap:12px}
}
@media (min-width:700px) and (max-width:1199px){
  .wrap{padding-top:32px}
  .arch{transform:scale(1.15);transform-origin:top center;margin-bottom:24px}
}
/* try-on */
.tryrow{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.stage{position:relative;flex:1 1 440px;min-width:0;max-width:720px;border-radius:12px;overflow:hidden;background:var(--bg);border:1px solid var(--line);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.stage .photo{display:block;width:100%;height:auto;pointer-events:none}
.stage .empty{min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px;text-align:center;cursor:pointer;border:1.5px dashed #5c4f57;border-radius:12px;position:relative}
.stage .empty input{position:absolute;inset:0;opacity:0;cursor:pointer}
.ov{position:absolute;transform:translate(-50%,-50%) rotate(var(--r,0deg));aspect-ratio:1/1;touch-action:none;cursor:grab;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.5))}
.ov.on{outline:2px dashed var(--pink);outline-offset:4px;border-radius:6px}
.ov img,.ov svg{width:100%;height:100%;display:block;pointer-events:none}
.tside{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:18px}
.tray{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.tbtn{aspect-ratio:1/1;border-radius:12px;background:var(--tooth);border:2px solid var(--line2);padding:6px;display:flex;align-items:center;justify-content:center}
.tbtn.on{border-color:var(--lime);box-shadow:0 0 0 2px var(--lime)}
.tbtn img,.tbtn svg{width:100%;height:100%;display:block}
.rng{width:100%;accent-color:var(--pink);height:32px}
.tbar{display:flex;flex-wrap:wrap;gap:8px}
.tip{font-size:14px;color:var(--muted);margin:0}
.tip strong{color:var(--ink)}
.photo-note{font-size:12px;color:var(--muted)}
/* ===== layout (scrolling fallback for phones) ===== */
.muted-sm{font-size:14px;color:var(--muted)}
.tip{font-size:14px;color:var(--muted);margin:0}
.cardhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.grp{display:flex;flex-direction:column;gap:10px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.archbox{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.studio-home{gap:24px}
.herocard{background:var(--burgundy);border-radius:16px;padding:32px;display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.herocard .copy{flex:1 1 320px;display:flex;flex-direction:column;gap:16px;min-width:0}
.herocard h1{font-size:clamp(36px,5vw,56px);line-height:1.02;margin:0;text-wrap:balance}
.herocard p{margin:0;color:var(--soft)}
.herocard .art{flex:1 1 320px;display:flex;justify-content:center;min-width:0}
.smile{background:#4a0026;border-radius:20px;padding:24px 18px;display:flex;flex-direction:column;align-items:center;gap:5px;zoom:.8}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.how .step{flex-direction:row;align-items:flex-start;gap:12px;padding:14px 16px}
.how .step b{font-size:24px;line-height:24px}
.how .step span{font-size:13px;line-height:18px;color:var(--muted)}
.how .step strong{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
.grillzapp{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
.grillzapp .card{padding:24px;gap:16px}
.p-bar{grid-column:1/-1}
.drop{min-height:72px;flex-direction:row;padding:14px}
.gemsapp{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:16px}
.gemsapp .card{padding:20px;gap:14px}
.p-gbar{grid-column:1/-1}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line2);border-radius:9999px;padding:4px;gap:4px}
.seg button{min-height:40px;padding:0 16px;border-radius:9999px;border:none;background:transparent;color:var(--ink);font-size:13px;font-weight:800;letter-spacing:.04em}
.seg button[aria-pressed="true"]{background:var(--pink);color:var(--dark)}
.pane{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:0;position:relative}
.renderbox{align-self:stretch;background:var(--forest);border-radius:12px;padding:12px 12px 16px;display:flex;flex-direction:column;gap:8px;align-items:center;overflow:hidden}
.renderbox .small-lbl{align-self:flex-start}
.frontwrap{display:flex;flex-direction:column;align-items:center;gap:4px;zoom:.8}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{min-height:40px;padding:0 16px;border-radius:9999px;border:1px solid var(--line2);background:transparent;color:var(--ink);font-size:13px;font-weight:800}
.chip.on{background:var(--ink);color:var(--dark);border-color:var(--ink)}
.catlist{display:flex;flex-direction:column;gap:12px;min-height:0}
.catlist .gcard{background:transparent;border:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}
.catlist .gcard > :first-child{display:none!important}
.catlist .item{flex-direction:column;align-items:flex-start;gap:8px;border-top:none;padding:12px;background:var(--bg);border:1px solid var(--line);border-radius:12px;min-width:0}
.catlist .item > div:last-child{width:100%}
.catlist .place{align-self:stretch;margin-top:2px}
#mPlaced{margin:0;padding:0;list-style:none;display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin}
#mPlaced li{flex:none;border:1px solid #1f7a47;border-radius:9999px;padding:0 4px 0 14px;min-height:44px;font-size:14px;display:flex;align-items:center;gap:8px;white-space:nowrap}
#mPlaced li .ghostbtn{min-height:34px;padding:0 12px}
.tray{display:flex;gap:8px;overflow-x:auto;align-self:stretch;padding-bottom:4px}
.tray .tbtn{flex:none;width:56px;height:56px}
.tctl{display:flex;flex-direction:column;gap:8px;align-self:stretch}
.rlbl{display:flex;align-items:center;gap:8px;flex:1 1 140px}
.rlbl .rng{flex:1}
.stage{flex:none;align-self:stretch;max-width:none}
.stage.has{align-self:center;width:fit-content;max-width:100%}
.stage.has .photo{width:auto;max-width:100%;max-height:var(--stageH,60vh)}
.stage .empty{min-height:220px}
.tresult{position:absolute;inset:0;background:rgba(10,10,10,.94);border-radius:12px;display:flex;align-items:center;justify-content:center;padding:12px;z-index:3}
.tresult-in{display:flex;flex-direction:column;gap:10px;align-items:center;max-height:100%;min-height:0}
.tresult img{max-width:100%;max-height:calc(100% - 110px);min-height:0;object-fit:contain;border-radius:10px;-webkit-touch-callout:default}

/* ===== iPad / tablet: one screen, no page scroll ===== */
@media (min-width:700px) and (min-height:560px){
  html:has(body.is-studio),body.is-studio{height:100%;overflow:hidden}
  body.is-studio.admin-bar{height:calc(100% - var(--wp-admin--admin-bar--height,0px))}
  body.is-studio{background-attachment:fixed}
  .is-studio .wp-site-blocks{height:100%;display:flex;flex-direction:column}
  .is-studio .wp-site-blocks > header.wp-block-template-part{position:relative;top:auto;flex:none}
  .is-studio .wp-site-blocks > footer.wp-block-template-part{display:none}
  .brandbar .in{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:8px;max-width:1400px}
  .logo-img{height:60px}
  main.studio-main{flex:1;min-height:0;overflow:hidden}
  main.studio-main > .studio-view{height:100%}
  main.studio-main > .studio-view > .wrap{height:100%;max-width:1400px;padding-top:16px;padding-bottom:max(16px,env(safe-area-inset-bottom));gap:16px}
  .card{min-height:0}

  /* collections */
  .studio-home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);grid-template-rows:minmax(0,1fr) auto;gap:16px}
  .herocard{flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:space-between;padding:28px;min-height:0;overflow:hidden}
  .herocard .copy{flex:none}
  .herocard h1{font-size:clamp(32px,4.2vw,52px)}
  .herocard .art{flex:1;min-height:0;align-items:center}
  .smile{zoom:.62}
  .cols{min-height:0}
  .colgrid{height:100%;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px}
  .col{padding:20px;gap:10px;min-height:0;overflow:hidden;justify-content:space-between}
  .col h3{font-size:30px;line-height:32px}
  .col p{font-size:14px;line-height:20px}
  .pieces{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .piece{font-size:12px;gap:4px}
  .piece .disc{width:min(64px,100%);height:auto;aspect-ratio:1/1}
  .piece .disc img,.piece .disc svg{width:76%;height:76%}
  .col .more{min-height:38px;padding:0 16px;font-size:12px}
  .how{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}

  /* grillz */
  .grillzapp{height:100%;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .grillzapp .card{padding:20px;gap:12px;overflow:hidden}
  .p-teeth{justify-content:space-between}
  .p-teeth .arch{height:150px}
  .p-bar{padding:14px 20px}
  .stones label{min-height:46px}
  .p-client textarea{min-height:0;flex:1;resize:none}

  /* gems */
  .gemsapp{height:100%;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .gemsapp .card{overflow:hidden}
  .p-stage .pane{flex:1;justify-content:space-between}
  .p-cat .catlist{flex:1;overflow-y:auto;overscroll-behavior:contain}
  .p-gbar{padding:12px 20px}
  #paneTry{--stageH:calc(100vh - 470px)}
  #paneTry .stage .empty{min-height:0;height:calc(100vh - 470px)}
}
/* iPad portrait */
@media (min-width:700px) and (max-width:1000px) and (min-height:560px) and (orientation:portrait){
  .studio-home{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto}
  .herocard{flex-direction:row;align-items:center}
  .herocard .copy{flex:1 1 0}
  .herocard .art{flex:0 0 auto}
  .smile{zoom:.5}
  .how{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grillzapp{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1.1fr) minmax(0,1fr) auto}
  .p-teeth{grid-column:1;grid-row:1}
  .p-mat{grid-column:1;grid-row:2}
  .p-client{grid-column:2;grid-row:1/3}
  .p-bar{grid-row:3}
  .gemsapp{grid-template-columns:1fr;grid-template-rows:minmax(0,1.15fr) minmax(0,1fr) auto}
  #paneTeeth{flex-direction:row;flex-wrap:wrap;justify-content:center}
  #paneTeeth .arch{flex:1 1 300px}
  .catlist .gcard{grid-template-columns:repeat(3,minmax(0,1fr))}
  #paneTry{--stageH:calc(50vh - 260px)}
  #paneTry .stage .empty{height:calc(50vh - 260px)}
}

/* tablet refinements */
@media (min-width:700px) and (min-height:560px){
  .arch{transform:none!important;margin-bottom:0!important}
  .p-teeth .tip{display:none}
  .p-teeth .arch{height:150px}
  .catlist .item{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:start;gap:10px;padding:10px}
  .catlist .thumb{width:64px;height:64px}
  .catlist .thumb img{width:56px;height:56px}
  .catlist .item .lbl{display:none}
  .catlist .fin{width:48px;height:48px;padding:4px}
  .catlist .fin img{width:38px;height:38px}
  .catlist .sw{width:34px;height:34px}
  .catlist .item > div:last-child{gap:6px!important}
  .catlist .place{min-height:42px;font-size:12px;padding:0 10px}
  .p-gbar .cta{min-height:48px}
}
@media (min-width:700px) and (min-height:560px) and (max-height:900px){
  .archbox,#paneTeeth .arch{zoom:.86}
  .frontwrap{zoom:.68}
  .stones label{min-height:42px}
  .drop{min-height:56px;padding:10px}
  .piece span:last-child{display:none}
  .grillzapp .card{padding:16px 18px;gap:10px}
  .pill{min-height:44px}
}
@media (min-width:700px) and (min-height:560px) and (max-height:760px){
  .archbox,#paneTeeth .arch{zoom:.74}
  .frontwrap{zoom:.58}
  .how{display:none}
  .studio-home{grid-template-rows:minmax(0,1fr)}
  .smile{zoom:.5}
  .herocard h1{font-size:clamp(28px,3.6vw,44px)}
  .herocard p{font-size:14px}
  .col p{display:none}
  .grillzapp .title,.gemsapp .title{font-size:24px;line-height:28px}
  .stones label{min-height:40px}
  .p-client .f{gap:4px}
  .fld{padding:8px 12px}
  .catlist .item{padding:8px}
}
@media (min-width:700px) and (max-width:1000px) and (min-height:560px) and (orientation:portrait){
  .grillzapp{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1.25fr) minmax(0,1fr) auto}
  .p-teeth{grid-column:1;grid-row:1}
  .p-mat{grid-column:2;grid-row:1}
  .p-client{grid-column:1/-1;grid-row:2;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto minmax(0,1fr) auto;align-content:start}
  .p-client > h2,.p-client > .f[for="details"],.p-client > textarea,.p-client > #gFilesText{grid-column:1/-1}
  .p-client > .drop{grid-column:1/-1}
  .p-bar{grid-row:3}
  .pieces{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (min-width:700px) and (min-height:560px) and (max-height:760px){
  .stones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .stones label{padding:0 10px;gap:8px;font-size:14px}
  .stones label span:last-child{display:none}
  .p-mat .pill{min-height:40px;padding:0 12px;font-size:13px;gap:6px}
}
@media (min-width:700px) and (max-width:1000px) and (min-height:560px) and (orientation:portrait){
  .grillzapp{grid-template-rows:minmax(0,1.7fr) minmax(0,1fr) auto}
  .gemsapp{grid-template-rows:minmax(0,1.5fr) minmax(0,1fr) auto}
  .tctl{flex-direction:row;flex-wrap:wrap;align-items:center}
  #paneTry{--stageH:calc(57vh - 400px)}
  #paneTry .stage .empty{height:calc(57vh - 400px)}
}

@media (min-width:700px) and (min-height:560px){
  .catlist .item div > span[style*="Made to order"],.catlist .item .note-illus{display:none}
}
@media (min-width:700px) and (max-width:1000px) and (min-height:560px) and (orientation:portrait){
  .gemsapp{grid-template-columns:minmax(0,1fr)}
  .studio-home{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:699px){.smile{zoom:.6}.herocard{padding:24px}}
/* gold colors: one row */
#gMetals{flex-wrap:nowrap;gap:8px}
#gMetals{gap:6px}
#gMetals .pill{flex:1 1 auto;min-width:0;justify-content:center;padding:0 8px;gap:6px;white-space:nowrap;font-size:13px}
#gMetals .dot{flex:none;width:14px;height:14px}
[hidden]{display:none!important}