.dpd-palette{--dpd-ink:#342b2b;--dpd-muted:#756863;--dpd-edge:#eadbd1;--dpd-accent:#bc744c;--dpd-bg:#fffaf4;font-family:inherit;color:var(--dpd-ink);background:linear-gradient(180deg,#fffaf4 0%,#fff 100%);border:1px solid var(--dpd-edge);border-radius:22px;padding:clamp(18px,3vw,36px);max-width:1160px;margin:22px auto 40px;box-sizing:border-box}
.dpd-palette *{box-sizing:border-box}
.dpd-palette button{cursor:pointer;font-family:inherit}
.dpd-palette button:focus-visible,.dpd-palette__drop:focus-visible{outline:3px solid #247dad;outline-offset:3px}
.dpd-palette__notice{background:#f5efe8;border-left:3px solid #bca691;color:#5c504c;padding:13px 16px;font-size:13px;line-height:1.5;border-radius:4px;margin:0 0 24px}
.dpd-palette__step{font-weight:700;font-size:18px;margin:22px 0 12px;line-height:1.4}
.dpd-palette__types{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dpd-palette__type{border:2px solid var(--dpd-edge);background:white;border-radius:13px;min-height:108px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px;color:var(--dpd-ink)}
.dpd-palette__type.is-selected{border-color:var(--dpd-accent);background:#fff4e9;box-shadow:0 0 0 1px var(--dpd-accent)}
.dpd-palette__type-icon{font-size:25px;line-height:1;color:var(--dpd-accent)}
.dpd-palette__type strong{font-size:17px}.dpd-palette__type small{font-size:12px;color:var(--dpd-muted)}
.dpd-palette__drop{border:2px dashed #cdab94;background:white;border-radius:16px;padding:28px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;position:relative;cursor:pointer;transition:background .15s}
.dpd-palette__drop:hover,.dpd-palette__drop.is-over{background:#fff3e7}
.dpd-palette__drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dpd-palette__drop strong{font-size:18px}.dpd-palette__drop span:not(.dpd-palette__upload-icon){font-size:14px;color:var(--dpd-muted)}
.dpd-palette__drop small{font-size:12px;color:var(--dpd-muted)}.dpd-palette__upload-icon{font-weight:700;color:var(--dpd-accent);font-size:30px}
.dpd-palette__privacy{font-size:12px;color:var(--dpd-muted);line-height:1.5;margin:10px 0 0}
.dpd-palette__error{color:#a52b24;font-weight:600;font-size:14px}
.dpd-palette__workspace{margin-top:22px;border-top:1px solid var(--dpd-edge);padding-top:3px}
.dpd-palette__hint{font-size:14px;color:var(--dpd-muted);line-height:1.5;margin:-4px 0 14px}
.dpd-palette__subjects{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.dpd-palette__subject{border:1px solid #ddc4b5;padding:9px 13px;border-radius:999px;background:white;color:var(--dpd-ink);font-size:13px;min-height:42px}
.dpd-palette__subject.is-active{background:#6c4236;border-color:#6c4236;color:white}
.dpd-palette__image-wrap{position:relative;max-width:100%;width:max-content;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 1px 12px #00000014;background:#f3eee9}
.dpd-palette__image-wrap canvas{display:block;max-width:100%;height:auto;cursor:crosshair;touch-action:manipulation}
.dpd-palette__pin{position:absolute;width:18px;height:18px;border:3px solid white;border-radius:50%;background:#c35140;box-shadow:0 0 0 2px #5c332d,0 2px 8px #0005;pointer-events:none;transform:translate(-50%,-50%)}
.dpd-palette__buttons{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0 0}
.dpd-palette__primary,.dpd-palette__secondary{border-radius:8px!important;min-height:44px;padding:11px 18px!important;font-size:14px!important;font-weight:600!important}
.dpd-palette__primary{background:#9f5737!important;color:white!important;border:1px solid #9f5737!important}
.dpd-palette__secondary{background:white!important;color:#543d35!important;border:1px solid #d5b9a7!important}
.dpd-palette__coming{font-size:13px;color:var(--dpd-muted)}
.dpd-palette__card{background:white;border:1px solid var(--dpd-edge);border-radius:14px;padding:16px;margin:16px 0}
.dpd-palette__card h3{font-family:Georgia,serif!important;font-size:21px!important;font-weight:700!important;margin:0 0 4px!important;color:#422d29!important}
.dpd-palette__card-intro{font-size:12px;color:var(--dpd-muted);margin:0 0 12px}
.dpd-palette__swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.dpd-palette__swatch{text-align:center;min-width:0}
.dpd-palette__drill-grid{height:96px;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(6,1fr);gap:1px;overflow:hidden;border-radius:7px;background:#eeeeee;padding:2px}
.dpd-palette__drill{display:block;background:linear-gradient(135deg,#ffffff79 1%,#ffffff0a 25%,#00000020 60%,#ffffff36 85%),var(--drill);border:1px solid #ffffff55;border-radius:1px;box-shadow:inset 1px 1px 1px #ffffff75,inset -1px -1px 1px #00000044}
.dpd-palette__swatch strong{display:block;margin-top:7px;font-size:15px}.dpd-palette__swatch small{font-size:11px;color:var(--dpd-muted);line-height:1.3;display:block}
.dpd-palette__gradient{height:19px;border-radius:999px;margin-top:16px;border:1px solid #b6a6a044}
@media(max-width:650px){.dpd-palette{padding:18px 12px;border-radius:12px;margin:14px 0 30px}.dpd-palette__step{font-size:17px}.dpd-palette__swatches{gap:5px}.dpd-palette__card{padding:10px}.dpd-palette__drill-grid{height:69px;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr)}.dpd-palette__drill:nth-child(n+37){display:none}.dpd-palette__swatch strong{font-size:12px}.dpd-palette__swatch small{font-size:10px}.dpd-palette__buttons--actions>*{width:100%;text-align:center}}
/* Staging v0.2 — inventory and multi-color cart controls */
.dpd-palette__shop{margin-top:26px;padding-top:6px;border-top:1px solid var(--dpd-edge)}
.dpd-palette__shop-toolbar{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin:15px 0 8px}
.dpd-palette__shop-toolbar label{font-weight:600;font-size:14px;display:flex;flex-direction:column;gap:6px;min-width:210px}
.dpd-palette__shop-toolbar select{height:44px;padding:7px 12px;border:1px solid #998b82;border-radius:7px;color:#342b2b;background:#fff;max-width:100%;font:inherit}
.dpd-palette__shop-toolbar button{margin:0}
.dpd-palette__shop-toolbar button:disabled,.dpd-palette__shop button:disabled{opacity:.6;cursor:not-allowed}
.dpd-palette__status{font-size:13px;line-height:1.45;min-height:1.1em;margin:9px 0}
.dpd-palette__status[data-state="error"]{color:#a52b24}
.dpd-palette__status[data-state="success"]{color:#246238}
.dpd-palette__stock-row{display:grid;grid-template-columns:28px 40px minmax(0,1fr) 74px;gap:10px;align-items:center;padding:11px 10px;border:1px solid #ebdfd5;background:#fff;margin:7px 0;border-radius:9px}
.dpd-palette__stock-check{display:flex;align-items:center;justify-content:center}
.dpd-palette__stock-check input{width:18px;height:18px;accent-color:#9f5737}
.dpd-palette__stock-color{display:block;width:36px;height:36px;border-radius:6px;border:1px solid #0003}
.dpd-palette__stock-description{min-width:0;overflow-wrap:anywhere}
.dpd-palette__stock-description strong{display:block;font-size:14px}
.dpd-palette__stock-description small{display:block;font-size:12px;color:var(--dpd-muted);line-height:1.45}
.dpd-palette__stock-qty{font-size:12px;display:flex;flex-direction:column;gap:4px}
.dpd-palette__stock-qty input{width:70px;max-width:100%;height:37px;border:1px solid #998b82;border-radius:6px;background:white;padding:5px;font-size:15px;color:#342b2b}
.dpd-palette__cart-link{display:inline-block;font-weight:700;text-decoration:underline;color:#246238;font-size:14px;margin-top:2px}
@media(max-width:650px){.dpd-palette__shop-toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}.dpd-palette__shop-toolbar label{min-width:0}.dpd-palette__shop-toolbar button{width:100%}.dpd-palette__stock-row{grid-template-columns:24px 32px minmax(0,1fr) 65px;gap:6px;padding:10px 6px}.dpd-palette__stock-color{width:31px;height:31px}.dpd-palette__stock-qty input{width:63px}.dpd-palette__stock-description small{font-size:11px}}

/* Staging v0.3 on-device automatic subject localization */
.dpd-palette__auto{border:1px solid #eadbd1;background:#fff8ef;padding:12px 14px;border-radius:10px;margin-bottom:12px}
.dpd-palette__auto-note{font-size:12px;color:#756863;line-height:1.5;margin:8px 0}
.dpd-palette__auto [data-detection-status]{margin:5px 0 0;min-height:0}
@media(max-width:650px){.dpd-palette__auto [data-auto-detect]{width:100%}}

/* Staging v0.4: visible upload confirmation, manual pet area selection and swatch editing */
.dpd-palette__drop.has-photo{border-color:#2b8351;background:#f2fbf4;gap:5px;padding:16px 18px}
.dpd-palette__drop.has-photo .dpd-palette__upload-icon{color:#297a48}
.dpd-palette__drop .dpd-palette__upload-thumb{display:block;max-width:136px;max-height:92px;width:auto;height:auto;object-fit:contain;border-radius:8px;border:1px solid #c5d9c9;margin:4px auto}
.dpd-palette__drop .dpd-palette__upload-thumb[hidden],.dpd-palette__drop [hidden]{display:none!important}
.dpd-palette__drop .dpd-palette__upload-success{font-size:13px;font-weight:700;color:#21683f}
.dpd-palette__image-wrap.is-selecting-area canvas{touch-action:none;cursor:crosshair}
.dpd-palette__region-outline{position:absolute;border:3px solid #0a82c0;background:#0a82c023;box-shadow:0 0 0 1px white;pointer-events:none;border-radius:5px}
.dpd-palette__region-outline[hidden]{display:none}
.dpd-palette__card.is-selected-card{border-color:#c9a487}
.dpd-palette__swatch-button{padding:0!important;margin:0!important;background:transparent!important;display:block!important;width:100%;border:2px solid transparent!important;border-radius:8px!important;text-align:center!important;color:inherit!important;cursor:pointer}
.dpd-palette__swatch-button.is-selected-swatch{border-color:#1c769e!important;outline:1px solid #1c769e;outline-offset:1px}
.dpd-palette__swatch-button .dpd-palette__drill-grid{pointer-events:none}
.dpd-palette__swatch-button:focus-visible{outline:3px solid #247dad!important;outline-offset:2px}
.dpd-palette__swatch-button small{font-weight:400}
.dpd-palette__card-intro--pets{font-weight:500}
.dpd-palette__gradient--bands{border-radius:7px}
@media (max-width:650px){.dpd-palette__drop.has-photo{padding:13px 9px}.dpd-palette__buttons [data-mark-region]{width:100%}.dpd-palette__drop .dpd-palette__upload-thumb{max-height:72px}}

/* v0.5 — faceted square-drill swatches and subject portraits */
.dpd-palette__card-layout{display:grid;grid-template-columns:154px minmax(0,1fr);gap:18px;align-items:center}
.dpd-palette__portrait{width:154px;height:154px;border-radius:50%;border:3px solid #edcfbb;overflow:hidden;background:linear-gradient(145deg,#f5e3d9,#e9d3c1);display:flex;align-items:center;justify-content:center;font-size:14px;color:#76534a}
.dpd-palette__portrait img{width:100%;height:100%;display:block;object-fit:cover}
.dpd-palette__card-content{min-width:0}
.dpd-palette__drill-grid{height:112px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:2px;padding:3px;border:1px solid #e4dbd5;border-radius:8px;background:#f8f4f1;overflow:hidden}
.dpd-palette__drill{position:relative;display:block;border-radius:13%;border:1px solid #ffffff4f;background:radial-gradient(circle at 24% 17%,#ffffff7a,transparent 32%),linear-gradient(145deg,#ffffff50,transparent 34%,#00000038 100%),var(--drill)!important;box-shadow:inset 1px 1px 1px #ffffff9c,inset -2px -2px 2px #00000045,0 1px 1px #00000029}
.dpd-palette__drill:before{content:"";position:absolute;inset:13%;clip-path:polygon(50% 0,100% 49%,51% 100%,0 50%);background:conic-gradient(from 45deg at 50% 50%,#ffffff99 0deg,#ffffff24 74deg,#00000026 145deg,#ffffff58 230deg,#00000017 320deg,#ffffff99 360deg);opacity:.9}
.dpd-palette__drill:after{content:"";position:absolute;left:23%;top:18%;height:17%;width:17%;background:#ffffffe0;box-shadow:0 0 2px #fff;border-radius:1px;transform:rotate(-10deg)}
.dpd-palette__card.is-selected-card{border-color:#cba88d}
.dpd-palette__stock-row.has-alternate{background:#fffaf2;border-color:#ddaf8b}
.dpd-palette__stock-row.has-alternate .dpd-palette__stock-check input{accent-color:#8b4f2b}
.dpd-palette__stock-description .dpd-palette__alternative{font-weight:700;color:#824525}
.dpd-palette__shade-confirm{display:flex;align-items:flex-start;gap:7px;font-size:12px;line-height:1.4;color:#7e3e2e;margin:7px 0 0}
.dpd-palette__shade-confirm input{accent-color:#965631;width:18px;height:18px;flex:none;margin:0}
@media(max-width:850px){.dpd-palette__card-layout{grid-template-columns:120px minmax(0,1fr);gap:12px}.dpd-palette__portrait{width:120px;height:120px}.dpd-palette__drill-grid{height:94px;gap:1px}}
@media(max-width:650px){
  .dpd-palette__card-layout{display:block}
  .dpd-palette__portrait{float:left;width:86px;height:86px;margin:0 12px 12px 0}
  .dpd-palette__card h3{padding-top:8px;margin-bottom:6px!important}
  .dpd-palette__card-intro{min-height:40px}
  .dpd-palette__swatches{clear:both;gap:5px}
  .dpd-palette__drill-grid{height:76px;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:1px;padding:2px}
  .dpd-palette__drill:nth-child(n+17){display:none}
  .dpd-palette__drill:after{box-shadow:none}
  .dpd-palette__card .dpd-palette__swatch strong{font-size:11px}
  .dpd-palette__card .dpd-palette__swatch small{font-size:9px;overflow-wrap:anywhere}
}

/* v0.6 — compact upload confirmation, clear step labels, shop CTA and shade alternatives */
.dpd-palette__step{letter-spacing:-.01em}
.dpd-palette__drop.has-photo{padding:11px 14px;min-height:52px;border:1px solid #68ac7e;border-radius:10px;background:#eaf8ee;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px}
.dpd-palette__drop.has-photo .dpd-palette__upload-icon{font-size:22px;display:flex;align-items:center;justify-content:center;width:29px;height:29px;background:#2d8c52;color:#fff!important;border-radius:50%;flex:none;font-weight:bold}
.dpd-palette__drop.has-photo [data-upload-title]{font-size:15px;color:#19663b;line-height:1.25}
.dpd-palette__drop.has-photo [data-upload-description],.dpd-palette__drop.has-photo [data-upload-thumb],.dpd-palette__drop.has-photo [data-upload-success]{display:none!important}
.dpd-palette__drop.has-photo [data-upload-meta]{font-size:12px;line-height:1;color:#256d45;text-decoration:underline;white-space:nowrap;margin-left:auto}
.dpd-palette__analyze{width:100%;max-width:360px}
.dpd-palette__palette-actions{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;margin:14px 0 6px}
.dpd-palette__palette-actions button{width:100%;height:100%;white-space:normal;line-height:1.3}
.dpd-palette__shop{scroll-margin-top:30px}
.dpd-palette__shop:focus{outline:0}
.dpd-palette__stock-summary{font-size:14px;line-height:1.5;font-weight:600}
.dpd-palette__stock-summary[data-state="success"]{color:#246238}
.dpd-palette__stock-summary[data-state="warning"]{color:#824525}
.dpd-palette__replacement-options{margin-top:8px;padding:9px;border-radius:8px;border:1px solid #f0dfcf;background:#fff8f0}
.dpd-palette__replacement-options label{font-size:12px;display:block;margin:0 0 5px;color:#5d443b;font-weight:600}
.dpd-palette__replacement-options select{font:inherit;font-size:12px;width:100%;padding:8px 6px;background:#fff;border:1px solid #bca89b;border-radius:6px;color:#342b2b}
.dpd-palette__replacement-options button{font-size:12px!important;line-height:1.2;min-height:34px;padding:7px 10px!important;margin-top:7px!important;width:100%}
.dpd-palette__replacement-detail{font-size:12px;color:#664d40;line-height:1.45;margin-top:5px;display:block}
.dpd-palette__stock-description .dpd-palette__replacement-confirm{display:block;color:#7c4d2c;font-weight:600;margin-top:5px}
@media(max-width:650px){
 .dpd-palette__drop.has-photo{padding:9px 11px;gap:7px}
 .dpd-palette__drop.has-photo [data-upload-title]{font-size:13px;text-align:left}
 .dpd-palette__drop.has-photo [data-upload-meta]{font-size:11px}
 .dpd-palette__palette-actions{grid-template-columns:1fr;gap:9px}
 .dpd-palette__stock-summary{font-size:13px}
}

/* v0.7 — show in-stock shade options without requiring a hidden select-menu click */
.dpd-palette__nearest-list{display:grid;gap:7px;margin:9px 0 4px}
.dpd-palette__nearest-list[hidden]{display:none!important}
.dpd-palette__nearest-card{display:flex;align-items:center;gap:9px;border:1px solid #dec6b5;background:#fff;border-radius:8px;padding:8px;min-width:0;flex-wrap:wrap}
.dpd-palette__nearest-swatch{display:block;width:30px;height:30px;border-radius:5px;flex:none;box-shadow:inset 0 2px 4px #ffffff88,inset 0 -3px 5px #00000025;border:1px solid #00000025}
.dpd-palette__nearest-info{display:flex;flex-direction:column;gap:2px;min-width:115px;flex:1;font-size:13px;line-height:1.25}
.dpd-palette__nearest-info strong{font-size:13px}
.dpd-palette__nearest-info small{font-size:11px;color:#6a5346;line-height:1.4}
.dpd-palette__nearest-card .dpd-palette__nearest-pick{width:auto!important;min-width:120px;flex:none;margin:0!important;border-radius:5px;background:#fff2e8;border:1px solid #b87955;color:#60391d;padding:8px 9px!important;font-weight:600}
.dpd-palette__nearest-card .dpd-palette__nearest-pick.is-selected{background:#eaf7ed;border-color:#2d8c52;color:#19663b}
.dpd-palette__nearest-card .dpd-palette__nearest-pick:focus-visible{outline:3px solid #7049bc;outline-offset:2px}
@media(max-width:410px){.dpd-palette__nearest-card .dpd-palette__nearest-pick{width:100%!important}}

/* v0.8 — persistent, contextual photo area selection guidance for pets */
.dpd-palette__pet-selection-guide{
  background:#eef7f0;border:1px solid #b6d4bd;border-left:4px solid #4b8b63;
  border-radius:10px;padding:12px 14px;margin:12px 0;
  font-size:14px;line-height:1.5;color:#294d36;
}
.dpd-palette__pet-selection-guide[hidden]{display:none!important}
.dpd-palette__pet-selection-guide > strong{display:block;font-size:15px;margin-bottom:5px}
.dpd-palette__pet-selection-guide p{margin:5px 0!important;line-height:1.5}
@media(max-width:650px){
  .dpd-palette__pet-selection-guide{padding:10px 11px;font-size:13px}
  .dpd-palette__pet-selection-guide > strong{font-size:14px}
}

/* v0.9 -- lightweight, correctly shaped 3x3 swatch rendering (all geometry in canvas). */
.dpd-palette__drill-grid,
.dpd-palette__swatch-button .dpd-palette__drill-grid {
  display:block!important;width:100%!important;height:auto!important;aspect-ratio:1 / 1;
  max-height:none!important;object-fit:contain!important;border:1px solid #eee5de;
  border-radius:6px;background:#f7f5f2;padding:0!important;box-shadow:none!important;
}
.dpd-palette__preview-style {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 12px;font-size:13px;color:#5f4b42}
.dpd-palette__preview-style > span {font-weight:700;margin-right:2px}
.dpd-palette__preview-style button {font-size:13px!important;min-height:38px;padding:7px 12px!important;background:#fff!important;color:#4d3b32!important;border:1px solid #bda596!important;border-radius:7px!important;font-weight:600!important}
.dpd-palette__preview-style button.is-selected{background:#623f35!important;color:white!important;border-color:#623f35!important}
.dpd-palette__preview-style small{font-size:11px;color:#756863;width:100%;line-height:1.4}
.dpd-palette__color-disclaimer,.dpd-palette__cart-disclaimer{font-size:12px;line-height:1.5;color:#72625d;margin:10px 0 6px}
.dpd-palette__cart-disclaimer{margin:16px 0 4px}
@media(max-width:650px){
 .dpd-palette__preview-style button {flex:1}
 .dpd-palette__preview-style > span {width:100%}
 .dpd-palette__swatch strong{font-size:11px}
 .dpd-palette__swatch small{font-size:9px}
}

/* v0.10 -- no artificial swatch frames; use the actual approved photo master. */
.dpd-palette__drill-grid,
.dpd-palette__swatch-button .dpd-palette__drill-grid{
 border:0!important;background:#fff!important;border-radius:0!important;
 box-shadow:none!important;object-fit:contain!important;
}

/* v0.15 — Color Studio, an editorial design instead of an admin-looking form */
.dpd-palette{--dpd-ink:#322832;--dpd-muted:#766a6b;--dpd-edge:#ebdfdc;--dpd-accent:#a8503c;--dpd-bg:#fffaf7;background:#fffdfb;box-shadow:0 14px 46px rgba(84,44,36,.07);border:1px solid #efdfd8;border-radius:24px;max-width:1180px;padding:clamp(16px,3vw,36px);margin:14px auto 42px}
.dpd-palette__hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(225px,.85fr);gap:clamp(16px,3vw,32px);border-radius:19px;background:linear-gradient(119deg,#352431 3%,#53333a 55%,#925a4a 100%);color:white;overflow:hidden;position:relative;padding:clamp(25px,4.5vw,53px);min-height:300px;align-items:center}
.dpd-palette__hero:after{content:"";position:absolute;inset:auto -100px -135px auto;width:300px;height:300px;border-radius:50%;border:1px solid #ffffff16;box-shadow:0 0 0 45px #ffffff0a,0 0 0 100px #ffffff07;pointer-events:none}
.dpd-palette__hero-copy{position:relative;z-index:2;min-width:0}
.dpd-palette__eyebrow{display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.18em;font-size:10px;font-weight:800;color:#f9ddca}
.dpd-palette__eyebrow-dot{width:7px;height:7px;border-radius:50%;background:#ffce8b;box-shadow:0 0 0 4px #ffffff16}
.dpd-palette__hero h2{font-family:Georgia,'Times New Roman',serif!important;font-size:clamp(30px,3.7vw,52px)!important;font-weight:500!important;line-height:1.12!important;letter-spacing:-.034em;margin:22px 0 16px!important;color:white!important}
.dpd-palette__hero h2 em{font-style:italic;color:#ffd9ad}
.dpd-palette__hero p{color:#f6e7e2;font-size:clamp(14px,1.4vw,16px);line-height:1.65;max-width:540px;margin:0 0 20px}
.dpd-palette__hero-points{display:flex;flex-wrap:wrap;gap:8px}
.dpd-palette__hero-points span{border:1px solid #ffffff38;background:#ffffff13;color:#fff4ef;padding:6px 10px;border-radius:99px;font-size:11px;line-height:1.4;white-space:nowrap}
.dpd-palette__hero-art{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;transform:rotate(-3deg)}
.dpd-palette__hero-art-inner{width:min(100%,310px);padding:22px 20px 20px;border-radius:16px;background:#fffaf4;box-shadow:0 18px 34px #1f131b47;color:#3e3034;text-align:center;transform:translateY(4px)}
.dpd-palette__hero-art-label{font-size:10px;letter-spacing:.18em;color:#88695e;font-weight:800}
.dpd-palette__hero-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:21px 0 6px}
.dpd-palette__hero-chips i{display:block;height:70px;transform:scaleY(1.0);border-radius:9px 9px 3px 3px;box-shadow:inset 1px 2px 3px #ffffff75,inset -2px -4px 4px #00000020}
.dpd-palette__hero-chips i:nth-child(1){background:#f4d6c1}.dpd-palette__hero-chips i:nth-child(2){background:#c98d83}.dpd-palette__hero-chips i:nth-child(3){background:#a56267}.dpd-palette__hero-chips i:nth-child(4){background:#826b78}.dpd-palette__hero-chips i:nth-child(5){background:#533947}
.dpd-palette__hero-gems{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:9px 0 20px}
.dpd-palette__hero-gems b{width:22px;height:22px;margin:auto;display:block;transform:rotate(45deg);background:linear-gradient(135deg,#ffffffc4,#ffffff33 48%,#00000025 50%);border:3px solid #b58e85;box-shadow:0 3px 5px #0002}
.dpd-palette__hero-art-inner small{font-family:Georgia,serif;font-style:italic;font-size:13px;color:#7d6867}
.dpd-palette__roadmap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:20px 0 16px;background:#f9f3ed;border:1px solid #efe4dc;border-radius:13px;padding:12px 14px}
.dpd-palette__roadmap span{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#746363;line-height:1.3}
.dpd-palette__roadmap b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;border-radius:50%;background:#e9d8cc;color:#88533e;font-size:10px}
.dpd-palette__setup{padding:4px clamp(0px,1.3vw,14px) 15px}
.dpd-palette__step{font-family:Georgia,'Times New Roman',serif!important;display:flex;align-items:center;gap:12px;font-size:clamp(22px,2.3vw,28px)!important;font-weight:600;letter-spacing:-.026em;color:#3a2731;margin:26px 0 9px!important;line-height:1.24}
.dpd-palette__step:before{content:attr(data-step);display:flex;align-items:center;justify-content:center;width:35px;height:35px;flex:none;border-radius:10px;background:linear-gradient(135deg,#a24d40,#773e44);font-family:inherit;font-size:15px;color:#fff2e8;letter-spacing:0}
.dpd-palette__step-description{font-size:14px;color:#746565;margin:0 0 15px!important;padding-left:47px;line-height:1.55}
.dpd-palette__types{gap:14px;margin:17px 0 28px}
.dpd-palette__type{border:1px solid #e7d4cb!important;box-shadow:0 5px 12px #4f252006;min-height:122px;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;border-radius:16px!important}
.dpd-palette__type:hover{transform:translateY(-2px);box-shadow:0 10px 20px #4f252012}
.dpd-palette__type.is-selected{background:#fbefeb!important;border:2px solid #aa5b4b!important;box-shadow:0 0 0 3px #a8503c1c}
.dpd-palette__type-icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:5px;background:#f6e5dc;border-radius:50%;font-size:26px;color:#994f46}
.dpd-palette__type strong{font-size:17px!important}
.dpd-palette__type small{font-size:12px!important}
.dpd-palette__drop{margin-top:18px;padding:32px 20px!important;min-height:205px;justify-content:center;background:repeating-linear-gradient(135deg,#fffaf6,#fffaf6 14px,#fff6f2 14px,#fff6f2 28px)!important;border:2px dashed #d4a897!important;box-shadow:inset 0 0 0 5px white;border-radius:18px!important}
.dpd-palette__drop:hover,.dpd-palette__drop.is-over{background:#fdf0e7!important}
.dpd-palette__drop:not(.has-photo) .dpd-palette__upload-icon{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;color:#a65140;background:white;box-shadow:0 4px 16px #a65c3626;margin-bottom:4px}
.dpd-palette__drop strong{font-family:Georgia,serif;font-size:22px!important;color:#442e34}
.dpd-palette__privacy{font-size:12px;line-height:1.65;color:#857670;display:flex;align-items:start;gap:7px;margin:11px 0 0}
.dpd-palette__privacy:before{content:'✓';font-weight:800;color:#548b68}
.dpd-palette__workspace{border-top:1px solid #eadbd4;margin-top:6px;padding-top:10px}
.dpd-palette__hint{font-size:14px!important;line-height:1.65;max-width:860px;margin:0 0 17px!important;color:#76676c}
.dpd-palette__auto{border:1px solid #e7d6d1;background:linear-gradient(130deg,#fff4ee,#fcf8f4);border-radius:15px;padding:18px 20px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:18px;margin:13px 0 20px}
.dpd-palette__analyze{width:auto!important;max-width:none!important;min-width:195px}
.dpd-palette__auto-note{font-size:12px;line-height:1.6;color:#756668;margin:0!important}
.dpd-palette__auto .dpd-palette__status{grid-column:1/-1}
.dpd-palette__primary{background:#a34e3d!important;border-color:#a34e3d!important;border-radius:10px!important;box-shadow:0 5px 11px #a34e3d21}
.dpd-palette__primary:hover{background:#853a30!important}
.dpd-palette__secondary{border-radius:10px!important;background:white!important;border-color:#d5b3a4!important}
.dpd-palette__secondary:hover{background:#fff4ee!important}
.dpd-palette__image-wrap{border:7px solid #fff!important;border-radius:17px!important;box-shadow:0 12px 35px #422b2c19}
.dpd-palette__subjects{margin:17px 0 16px}
.dpd-palette__subject{background:#fff;border-color:#d9c3ba;box-shadow:0 2px 4px #00000008;font-weight:600}
.dpd-palette__subject.is-active{background:#53353f;border-color:#53353f;color:white}
.dpd-palette__step--results{margin-top:38px!important}
.dpd-palette__preview-style{padding:12px 14px;margin:16px 0;background:#f9f3f1;border:1px solid #ebddda;border-radius:13px}
.dpd-palette__preview-style button{border-radius:999px!important}
.dpd-palette__preview-style button.is-selected{background:#5d3943!important;border-color:#5d3943!important}
.dpd-palette__card{border:1px solid #e9dad4;border-radius:17px;padding:clamp(15px,2vw,22px);box-shadow:0 8px 25px #3f24230a;margin:18px 0}
.dpd-palette__card.is-selected-card{border-color:#c49d91;box-shadow:0 8px 25px #3f242314}
.dpd-palette__card h3{font-size:24px!important;letter-spacing:-.025em;color:#3c2833!important}
.dpd-palette__portrait{border-color:#f0d6c5;background:#f7ece4;box-shadow:0 7px 18px #48231a10}
.dpd-palette__swatches{gap:12px}
.dpd-palette__swatch strong{font-size:15px;font-weight:800;color:#372b34}
.dpd-palette__swatch small{font-size:11px;color:#88757b}
.dpd-palette__gradient{height:13px;border-radius:99px;box-shadow:0 1px 5px #00000018}
.dpd-palette__color-disclaimer,.dpd-palette__cart-disclaimer{color:#8e7c77;font-size:12px;line-height:1.65}
.dpd-palette__shop{border-top:1px solid #eadbd4;margin-top:34px}
.dpd-palette__shop-toolbar{background:#fff8f3;border:1px solid #ecdacf;padding:16px;border-radius:14px}
.dpd-palette__stock-row{border-color:#e9dad5;border-radius:11px;box-shadow:0 3px 8px #3f242308}
.dpd-palette__drop.has-photo{padding:12px 16px!important;min-height:60px!important;background:#eff9f1!important;border-color:#76b689!important;box-shadow:none!important}
.dpd-palette__drop.has-photo [data-upload-title]{font-family:inherit;font-size:15px!important}
@media(max-width:950px){.dpd-palette__hero{grid-template-columns:minmax(0,1fr) 225px;padding:32px}.dpd-palette__hero-chips i{height:58px}.dpd-palette__hero-art-inner{padding:16px 13px}.dpd-palette__roadmap{grid-template-columns:repeat(2,1fr)}.dpd-palette__auto{grid-template-columns:1fr;gap:10px}.dpd-palette__auto .dpd-palette__status{grid-column:1}.dpd-palette__analyze{width:100%!important}}
@media(max-width:650px){.dpd-palette{padding:12px;margin:8px auto 20px;border-radius:17px}.dpd-palette__hero{grid-template-columns:1fr;gap:22px;padding:28px 22px;min-height:0}.dpd-palette__hero h2{font-size:33px!important}.dpd-palette__hero-art{max-width:235px;margin:auto}.dpd-palette__hero-art-inner{width:235px}.dpd-palette__hero-chips i{height:48px}.dpd-palette__hero-points span{white-space:normal}.dpd-palette__roadmap{padding:9px;gap:10px}.dpd-palette__roadmap span{font-size:10px}.dpd-palette__roadmap b{width:23px;height:23px}.dpd-palette__step{font-size:22px!important;gap:10px}.dpd-palette__step:before{width:31px;height:31px}.dpd-palette__step-description{padding-left:41px}.dpd-palette__types{gap:9px}.dpd-palette__type{min-height:112px}.dpd-palette__drop:not(.has-photo){min-height:175px;padding:22px 14px!important}.dpd-palette__drop strong{font-size:19px!important}.dpd-palette__auto{padding:14px}.dpd-palette__card{padding:12px}.dpd-palette__swatches{gap:5px}.dpd-palette__card h3{font-size:21px!important}.dpd-palette__preview-style{gap:6px;padding:10px}.dpd-palette__shop-toolbar{padding:11px}}
@media(prefers-reduced-motion:reduce){.dpd-palette__type{transition:none}}

/* v0.16: staged reveal, subject guidance, defined drill material selector, and photographic skin-tone borders. */
.dpd-palette__workspace[hidden], .dpd-palette__result-stage[hidden],.dpd-palette__review-guidance[hidden],.dpd-palette__auto-note[hidden]{display:none!important}
.dpd-palette__hero{padding-top:120px!important;padding-bottom:119px!important;min-height:460px;isolation:isolate}
.dpd-palette__hero::before,.dpd-palette__hero::after{content:"";position:absolute;left:0;right:0;width:100%;height:90px;background-image:url('./studio-approved-top-band.webp');background-repeat:repeat-x;background-size:auto 90px;opacity:.97;z-index:1;pointer-events:none;border:0;border-radius:0;box-shadow:none}
.dpd-palette__hero::before{top:0;box-shadow:0 7px 18px #160f1845}
.dpd-palette__hero::after{bottom:0;top:auto;box-shadow:0 -7px 18px #160f1845}
.dpd-palette__hero-copy{z-index:2}
.dpd-palette__hero-cta{font-weight:750;color:#ffdebf!important;margin-top:-4px!important}
.dpd-palette__hero-art{z-index:2}
.dpd-palette__type-icon svg{display:block;flex:none}
.dpd-palette__review-guidance{background:#f9f0e7;border-left:5px solid #a34e3d;border-radius:10px;border-top:1px solid #ead1c1;border-right:1px solid #ead1c1;border-bottom:1px solid #ead1c1;box-shadow:0 3px 12px #49302d13;padding:14px 17px;color:#55392f;font-weight:750;font-size:14px;line-height:1.6;margin:3px 0 19px}
.dpd-palette__subjects:empty{display:none}
.dpd-palette__subjects:not(:empty){margin-bottom:7px}
.dpd-palette__auto-note{color:#715e57;max-width:340px}
.dpd-palette__shop-toolbar label{position:relative}
.dpd-palette__shop-toolbar select{appearance:none;-webkit-appearance:none;padding-right:43px!important;cursor:pointer;background-color:#fff!important;box-shadow:inset 0 -1px 0 #f4e5dd;min-width:215px}
.dpd-palette__select-caret{position:absolute;right:14px;bottom:9px;pointer-events:none;font-size:25px;font-weight:800;color:#8d473a;line-height:26px}
@media(max-width:950px){.dpd-palette__hero{padding-top:105px!important;padding-bottom:105px!important;min-height:420px}}
@media(max-width:650px){.dpd-palette__hero{padding:98px 22px 98px!important;min-height:0}.dpd-palette__hero::before,.dpd-palette__hero::after{height:60px;background-size:auto 60px}.dpd-palette__hero-cta{font-size:14px!important}.dpd-palette__review-guidance{font-size:13px;padding:12px 14px}.dpd-palette__shop-toolbar select{width:100%;min-width:0}}

/* v0.17 photographic refinements: seamless tightly fitted square-drill border;
   hero-card diamonds use the approved real facet texture, rotated 45 degrees. */
.dpd-palette__hero::before,.dpd-palette__hero::after{background-image:url('./studio-approved-top-band.webp')!important;background-repeat:repeat-x;background-position:center;background-size:auto 90px!important}
.dpd-palette__hero-gems{min-height:41px;align-items:center;margin:6px 0 15px}
.dpd-palette__hero-gems b{
  display:block;width:26px;height:26px;margin:auto;
  border:0;border-radius:3px;
  background-image:url('./studio-five-gems.webp');background-repeat:no-repeat;
  background-size:500% 100%;
  box-shadow:1px 3px 5px #2f192339, inset 1px 1px 1px #ffffff60;
  transform:rotate(45deg);
}
.dpd-palette__hero-gems b:nth-child(1){background-position:0% 0%}
.dpd-palette__hero-gems b:nth-child(2){background-position:25% 0%}
.dpd-palette__hero-gems b:nth-child(3){background-position:50% 0%}
.dpd-palette__hero-gems b:nth-child(4){background-position:75% 0%}
.dpd-palette__hero-gems b:nth-child(5){background-position:100% 0%}
@media(max-width:650px){.dpd-palette__hero::before,.dpd-palette__hero::after{background-size:auto 60px!important}}

/* v0.18: Use the exact tightly packed square-drill bands from the approved visual.
   Do not regenerate the geometric v0.17 strip. Show two rows with natural seams,
   subtle 1-2 degree variation already present in the approved photographed design. */
.dpd-palette__hero::before{
  background-image:url('./studio-approved-top-band.webp')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  opacity:1!important;
}
.dpd-palette__hero::after{
  background-image:url('./studio-approved-bottom-band.webp')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  opacity:1!important;
}
@media(max-width:650px){
 .dpd-palette__hero::before,.dpd-palette__hero::after{background-size:cover!important;}
}

/* v0.19: Search-friendly, server-rendered help for customers correcting wrong skin colors. */
.dpd-palette__discovery{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:10px 12px 16px;padding:16px 19px;border:1px solid #eadbd4;background:linear-gradient(110deg,#fff9f4,#faf0ee);border-radius:15px;box-shadow:0 4px 15px #44252109}
.dpd-palette__discovery-copy strong{display:block;color:#512d37;font-family:Georgia,serif;font-size:18px;line-height:1.3}
.dpd-palette__discovery-copy p{color:#6d5655;font-size:13px;line-height:1.6;margin:5px 0 0}
.dpd-palette__discovery-link{flex:none;display:inline-flex;align-items:center;gap:7px;color:#864237!important;text-decoration:none!important;font-size:13px;font-weight:800;border-bottom:1px solid #ba8975;padding:5px 0}
.dpd-palette__discovery-link:hover{text-decoration:underline!important}
.dpd-palette__order-help{font-size:13px!important;line-height:1.6;background:#f9f4ef;border-left:3px solid #b47e67;border-radius:6px;padding:11px 13px;margin:7px 0 15px!important;color:#594d4b}
.dpd-palette__order-help a{color:#803b34!important;font-weight:700;text-decoration:underline!important}
.dpd-palette__education{margin:47px 12px 12px;padding:37px clamp(18px,3vw,34px) 33px;background:linear-gradient(160deg,#fffaf7 0%,#fcf3ed 100%);border:1px solid #e9d9d2;border-radius:20px;color:#46363c}
.dpd-palette__education-kicker{display:block;letter-spacing:.14em;font-size:10px;font-weight:800;color:#a35e4b;margin-bottom:12px}
.dpd-palette__education h2{font-family:Georgia,'Times New Roman',serif!important;font-size:clamp(25px,2.7vw,35px)!important;font-weight:600!important;line-height:1.25!important;letter-spacing:-.025em;color:#402932!important;margin:0 0 13px!important}
.dpd-palette__education-intro p{font-size:15px;line-height:1.72;max-width:920px;margin:0 0 23px;color:#6a595c}
.dpd-palette__education-cards{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin:21px 0 29px}
.dpd-palette__education-card{padding:22px 23px;background:#fff;border:1px solid #e8d6cd;border-radius:15px;box-shadow:0 5px 18px #61442b08}
.dpd-palette__education-card--warm{background:#fff6ef}
.dpd-palette__education h3{font-family:Georgia,'Times New Roman',serif!important;font-size:20px!important;line-height:1.3!important;margin:0 0 12px!important;color:#532e38!important}
.dpd-palette__education-card p,.dpd-palette__education-card li,.dpd-palette__education-faq p{font-size:13px;line-height:1.7;color:#65575b}
.dpd-palette__education-card p{margin:0 0 12px}
.dpd-palette__education-card ol{padding-left:21px;margin:0}
.dpd-palette__education-card li{margin:0 0 8px}
.dpd-palette__education a{color:#8e4939!important;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.dpd-palette__education-faq{border-top:1px solid #e6d5cd;padding-top:25px}
.dpd-palette__education-faq h2{font-size:clamp(23px,2.3vw,29px)!important;margin:0 0 20px!important}
.dpd-palette__education-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 27px}
.dpd-palette__education-faq h3{font-family:inherit!important;font-size:15px!important;font-weight:800!important;margin:0 0 6px!important}
.dpd-palette__education-faq p{margin:0}
@media(max-width:800px){.dpd-palette__discovery{align-items:start;flex-direction:column;gap:9px}.dpd-palette__education-cards{grid-template-columns:1fr}}
@media(max-width:600px){.dpd-palette__discovery{margin:11px 0 14px;padding:14px}.dpd-palette__discovery-copy strong{font-size:17px}.dpd-palette__education{margin:32px 0 6px;padding:24px 17px}.dpd-palette__education-faq-grid{grid-template-columns:1fr;gap:18px}.dpd-palette__education-card{padding:17px}.dpd-palette__education-card li{font-size:13px}}

/* v0.21: Compact portrait / 3x3 drill palette cards without changing downloads. */
.dpd-palette__card{padding:15px 17px;margin:12px 0;border-radius:15px}
.dpd-palette__card-layout{grid-template-columns:114px minmax(0,1fr);gap:15px;align-items:center}
.dpd-palette__portrait{width:112px;height:112px}
.dpd-palette__card h3{font-size:21px!important;margin:0 0 2px!important}
.dpd-palette__card-intro{margin:0 0 8px;line-height:1.35}
.dpd-palette__swatches{gap:9px}
.dpd-palette__drill-grid,.dpd-palette__swatch-button .dpd-palette__drill-grid{max-width:116px;margin:0 auto}
.dpd-palette__swatch strong{font-size:13px;margin-top:4px}
.dpd-palette__swatch small{font-size:10px;line-height:1.25}
.dpd-palette__gradient{height:9px;margin-top:9px}
.dpd-palette__cart-link{display:inline-flex;align-items:center;gap:7px;font-size:14px;padding:5px 0}
.dpd-palette__cart-icon{display:block;flex:none;stroke:currentColor}
@media(max-width:850px){
  .dpd-palette__card-layout{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .dpd-palette__portrait{width:94px;height:94px}
  .dpd-palette__drill-grid,.dpd-palette__swatch-button .dpd-palette__drill-grid{max-width:108px}
}
@media(max-width:650px){
  .dpd-palette__card{padding:12px;margin:10px 0}
  .dpd-palette__card-layout{display:block}
  .dpd-palette__portrait{width:70px;height:70px;float:left;margin:0 10px 8px 0}
  .dpd-palette__card h3{font-size:19px!important;padding-top:4px}
  .dpd-palette__card-intro{min-height:29px;margin-bottom:7px}
  .dpd-palette__swatches{clear:both;gap:4px}
  .dpd-palette__swatch strong{font-size:11px;margin-top:4px}
  .dpd-palette__swatch small{font-size:9px}
  .dpd-palette__gradient{height:8px;margin-top:8px}
}

/* v0.22: Responsive subject panels. One remains full width, while multiple
   subjects form a 2-column grid on desktops. PNG exports are unchanged. */
.dpd-palette__cards-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.dpd-palette__cards-grid .dpd-palette__card{margin:0;min-width:0}
.dpd-palette__cards-grid .dpd-palette__card-layout{
  display:grid;grid-template-columns:114px minmax(0,1fr);
  grid-template-rows:auto auto;column-gap:15px;row-gap:5px;align-items:center
}
.dpd-palette__cards-grid .dpd-palette__card-heading{display:contents}
.dpd-palette__cards-grid .dpd-palette__portrait{grid-column:1;grid-row:1 / span 2;float:none;margin:0;align-self:center}
.dpd-palette__cards-grid .dpd-palette__card-titles{grid-column:2;grid-row:1;min-width:0}
.dpd-palette__cards-grid .dpd-palette__card-data{grid-column:2;grid-row:2;min-width:0}
.dpd-palette__cards-grid .dpd-palette__card h3{padding:0!important}
.dpd-palette__cards-grid .dpd-palette__card-intro{min-height:0!important;margin:1px 0 7px!important}
.dpd-palette__cards-grid .dpd-palette__swatches{clear:none}
@media(min-width:1000px){
  .dpd-palette__cards-grid.is-multiple{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
  .dpd-palette__cards-grid.is-multiple .dpd-palette__card{padding:12px 13px}
  .dpd-palette__cards-grid.is-multiple .dpd-palette__card-layout{display:block}
  .dpd-palette__cards-grid.is-multiple .dpd-palette__card-heading{display:flex;align-items:center;gap:10px;min-height:61px}
  .dpd-palette__cards-grid.is-multiple .dpd-palette__portrait{width:58px;height:58px;flex:0 0 58px;margin:0}
  .dpd-palette__cards-grid.is-multiple .dpd-palette__card-titles{min-width:0;flex:1}
  .dpd-palette__cards-grid.is-multiple .dpd-palette__card h3{font-size:20px!important}
  .dpd-palette__cards-grid.is-multiple .dpd-palette__card-intro{font-size:11px;line-height:1.35;margin:2px 0 0!important}
  .dpd-palette__cards-grid.is-multiple .dpd-palette__card-data{margin-top:7px}
  .dpd-palette__cards-grid.is-multiple .dpd-palette__swatches{gap:5px}
  .dpd-palette__cards-grid.is-multiple .dpd-palette__drill-grid{max-width:88px}
  .dpd-palette__cards-grid.is-multiple .dpd-palette__swatch strong{font-size:11px;margin-top:3px}
  .dpd-palette__cards-grid.is-multiple .dpd-palette__swatch small{font-size:9px;line-height:1.2}
  .dpd-palette__cards-grid.is-multiple .dpd-palette__gradient{margin-top:7px}
}
@media(max-width:850px){
  .dpd-palette__cards-grid .dpd-palette__card-layout{grid-template-columns:94px minmax(0,1fr);column-gap:12px}
}
@media(max-width:650px){
  .dpd-palette__cards-grid{gap:9px}
  .dpd-palette__cards-grid .dpd-palette__card-layout{display:block}
  .dpd-palette__cards-grid .dpd-palette__card-heading{display:flex;align-items:center;gap:10px}
  .dpd-palette__cards-grid .dpd-palette__portrait{width:64px;height:64px;flex:0 0 64px;margin:0}
  .dpd-palette__cards-grid .dpd-palette__card-titles{min-width:0;flex:1}
  .dpd-palette__cards-grid .dpd-palette__card h3{font-size:18px!important}
  .dpd-palette__cards-grid .dpd-palette__card-intro{font-size:11px;line-height:1.32;margin:2px 0 0!important}
  .dpd-palette__cards-grid .dpd-palette__card-data{margin-top:7px}
  .dpd-palette__cards-grid .dpd-palette__swatches{gap:4px}
  .dpd-palette__cards-grid .dpd-palette__swatch strong{font-size:10px}
  .dpd-palette__cards-grid .dpd-palette__swatch small{font-size:9px}
}

/* v0.23: approved photographic Studio hero; native mobile content remains readable. */
.dpd-palette__hero--v023{display:block!important;padding:0!important;min-height:0!important;background:transparent!important;overflow:hidden!important;border-radius:18px!important}
.dpd-palette__hero--v023::before,.dpd-palette__hero--v023::after{display:none!important}
.dpd-palette__hero-desktop{position:relative;width:100%;display:block;line-height:0}
.dpd-palette__hero-desktop img{width:100%;height:auto;display:block;max-width:none;border-radius:0}
.dpd-palette__hero-hotspot{position:absolute;z-index:3;left:46%;top:78.5%;width:31%;height:10%;display:block;border-radius:28px;cursor:pointer}
.dpd-palette__hero-hotspot:focus-visible{outline:4px solid #f8d5a4;outline-offset:3px;background:#f8d5a422}
.dpd-palette__sr-only{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.dpd-palette__hero-mobile{display:none}
.dpd-palette__setup{scroll-margin-top:22px}
.dpd-palette__return{margin:16px 0 8px!important;text-align:right;font-size:13px;line-height:1.5}
.dpd-palette__return a{text-decoration:none!important;border-bottom:1px solid #b57868;padding:3px 0}
.dpd-palette__representation{padding:26px 27px;margin:26px 0 30px;background:#fff;border:1px solid #e3cec4;border-radius:16px}
.dpd-palette__representation h2{font-size:clamp(23px,2.5vw,32px)!important}
.dpd-palette__representation p,.dpd-palette__representation li{font-size:14px;line-height:1.7;color:#65575b}
.dpd-palette__representation ol{padding-left:24px;margin:16px 0}
.dpd-palette__representation li{margin-bottom:11px}
.dpd-palette__representation-note{font-size:12px!important;color:#796b6c!important}
@media(max-width:720px){
  .dpd-palette__hero-desktop{display:none}
  .dpd-palette__hero-mobile{display:block;padding:48px 20px 48px;text-align:center;position:relative;background:linear-gradient(150deg,#362531,#6a3b40 60%,#aa7362);color:#fff;border-top:18px solid transparent;border-bottom:18px solid transparent;border-image:url('./studio-approved-top-band.webp') 50 repeat}
  .dpd-palette__hero-mobile h2{font-family:Georgia,serif!important;font-size:clamp(32px,8vw,43px)!important;line-height:1.13!important;color:#ffeadf!important;margin:18px 0 7px!important}
  .dpd-palette__hero-mobile p{color:#f6e9e3!important;font-size:14px;line-height:1.6;margin:10px 0 15px;max-width:none}
  .dpd-palette__hero-mobile .dpd-palette__mobile-subhead{font-family:Georgia,serif;font-size:19px;font-weight:600;color:#ffd9aa!important}
  .dpd-palette__hero-mobile-photo{width:min(100%,300px);height:186px;object-fit:cover;object-position:50% 41%;border-radius:12px;display:block;margin:12px auto 16px}
  .dpd-palette__hero-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:12px 0 18px}
  .dpd-palette__hero-features span{min-width:0;padding:8px 4px;border:1px solid #ffffff3b;border-radius:9px;background:#ffffff1a;display:block}
  .dpd-palette__hero-features strong{display:block;color:#ffddc6;font-size:10px;text-transform:uppercase;letter-spacing:.02em}
  .dpd-palette__hero-features small{display:block;color:#f9eae7;font-size:9px;line-height:1.4;margin-top:4px}
  .dpd-palette__hero-mobile-button{display:block;margin:10px auto 0;text-decoration:none!important;border-radius:999px;background:#92234f!important;color:white!important;padding:11px 15px;font-weight:700;max-width:290px}
  .dpd-palette__representation{padding:19px 17px;margin:19px 0}
  .dpd-palette__return{text-align:left}
}

/* v0.24 mobile header: show the complete four-skin-tone comparison; preserve desktop artwork. */
@media (max-width:720px){
 .dpd-palette__hero--v023 .dpd-palette__hero-mobile{
   display:block!important;padding:0!important;background:#fff9f2!important;
   color:#3d3237!important;border:0!important;border-image:none!important;
   border-radius:16px!important;overflow:hidden!important;text-align:center;
 }
 .dpd-palette__hero-mobile-band{height:32px;background-image:url('./studio-approved-top-band.webp');background-size:auto 32px;background-repeat:repeat-x;background-position:center}
 .dpd-palette__hero-mobile-band--bottom{background-image:url('./studio-approved-bottom-band.webp')}
 .dpd-palette__hero-mobile-photo-comparison{display:block;width:100%;max-width:100%;height:auto;border:0;border-radius:0;object-fit:contain;margin:0}
 .dpd-palette__hero-mobile-content{padding:15px 10px 18px}
 .dpd-palette__hero-mobile h2{
   font-family:Georgia,'Times New Roman',serif!important;
   color:#661333!important;font-size:clamp(24px,6.4vw,34px)!important;
   letter-spacing:-.035em!important;line-height:1.09!important;margin:0 0 9px!important
 }
 .dpd-palette__hero-mobile .dpd-palette__mobile-subhead{
   font-family:Georgia,serif!important;font-size:clamp(18px,5vw,24px)!important;
   line-height:1.18!important;color:#966017!important;margin:0 0 11px!important
 }
 .dpd-palette__hero-mobile .dpd-palette__hero-mobile-description{
   font-size:clamp(11px,3.35vw,14px)!important;
   line-height:1.45!important;color:#473b40!important;margin:0 auto 13px!important;
   max-width:530px
 }
 .dpd-palette__hero-features{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px;margin:0 0 12px!important}
 .dpd-palette__hero-features span{background:#fffdfb!important;border:1px solid #edd6c8!important;border-radius:10px!important;
   padding:9px 3px!important;display:flex!important;flex-direction:column;align-items:center;gap:3px;
   box-shadow:0 2px 6px #693c2712}
 .dpd-palette__hero-feature-icon{width:25px;height:25px;display:block;color:#9a671e;stroke:#9a671e;flex-shrink:0}
 .dpd-palette__hero-features strong{color:#7b153b!important;font-size:clamp(9px,2.8vw,12px)!important;line-height:1.2!important}
 .dpd-palette__hero-features small{color:#403a3e!important;font-size:clamp(8px,2.45vw,11px)!important;line-height:1.24!important}
 .dpd-palette__hero-mobile-gems{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;
   max-width:300px;margin:8px auto 14px;align-items:center}
 .dpd-palette__hero-mobile-gems i{display:block;width:clamp(21px,7vw,32px);height:clamp(21px,7vw,32px);margin:auto;
   background-image:url('./studio-five-gems.webp');background-size:500% 100%;background-repeat:no-repeat;
   transform:rotate(45deg);border-radius:2px;box-shadow:2px 3px 5px #452a2428}
 .dpd-palette__hero-mobile-gems i:nth-child(1){background-position:0% 0%}
 .dpd-palette__hero-mobile-gems i:nth-child(2){background-position:25% 0%}
 .dpd-palette__hero-mobile-gems i:nth-child(3){background-position:50% 0%}
 .dpd-palette__hero-mobile-gems i:nth-child(4){background-position:75% 0%}
 .dpd-palette__hero-mobile-gems i:nth-child(5){background-position:100% 0%}
 .dpd-palette__hero-mobile .dpd-palette__hero-mobile-button{
    display:inline-flex!important;justify-content:center;align-items:center;gap:7px;
    width:auto;max-width:100%;box-sizing:border-box;margin:0 auto!important;
    padding:12px 14px!important;border-radius:100px;
    background:#8b0043!important;color:#fff!important;
    font-size:clamp(12px,3.4vw,15px)!important;line-height:1.2!important;
    text-decoration:none!important;box-shadow:0 4px 12px #4c102533
 }
 .dpd-palette__hero-mobile .dpd-palette__hero-mobile-button:focus-visible{outline:3px solid #ad7740;outline-offset:3px}
}

/* v0.25 desktop correction: approved white-tub center + original 2-row photographic drill borders. Mobile layout unchanged. */
@media (min-width:721px){
 .dpd-palette__hero--v023 .dpd-palette__hero-desktop-band{
   display:block;width:100%;height:auto;aspect-ratio:1156 / 90;
   background:url('./studio-approved-top-band.webp') center / 100% 100% no-repeat;
 }
 .dpd-palette__hero--v023 .dpd-palette__hero-desktop-band--bottom{
   background-image:url('./studio-approved-bottom-band.webp');
 }
 .dpd-palette__hero--v023 .dpd-palette__hero-hotspot{
   left:48.5%;top:80%;width:30%;height:8%;
 }
}

/* v0.26 desktop: clean HTML CTA over the original image, no baked-in text/overlay.
   Do not alter desktop drill borders, mobile header or shopping functionality. */
@media (min-width:721px){
  .dpd-palette__hero--v023 .dpd-palette__hero-hotspot--button{
    position:absolute!important;z-index:4!important;display:flex!important;
    justify-content:center!important;align-items:center!important;gap:10px!important;
    left:49%!important;top:80.9%!important;width:29%!important;height:auto!important;
    aspect-ratio:8 / 1!important;box-sizing:border-box!important;
    padding:0 9px!important;margin:0!important;
    border:0!important;border-radius:999px!important;
    background:#8b0043!important;color:#fff!important;
    box-shadow:0 4px 9px rgba(68,20,35,.18)!important;
    text-decoration:none!important;white-space:nowrap!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:clamp(11px,1.22vw,19px)!important;font-weight:600!important;
    line-height:1.1!important;letter-spacing:0!important;
    text-align:center!important;
  }
  .dpd-palette__hero--v023 .dpd-palette__hero-hotspot--button span{
    font-size:1.3em!important;font-weight:400!important;line-height:1!important;
  }
  .dpd-palette__hero--v023 .dpd-palette__hero-hotspot--button:hover{
    background:#700039!important;box-shadow:0 5px 13px rgba(68,20,35,.25)!important;
  }
  .dpd-palette__hero--v023 .dpd-palette__hero-hotspot--button:focus-visible{
    outline:3px solid #c58642!important;outline-offset:3px!important;
  }
}

/* v0.26 footer-edge fix: omit dark screenshot padding, preserve every drill facet. */
@media(min-width:721px){
  .dpd-palette__hero--v023 .dpd-palette__hero-desktop-band--bottom{
    aspect-ratio:1156 / 77!important;
    background-image:url('./studio-approved-bottom-band-clean-v026.webp')!important;
  }
  .dpd-palette__hero--v023 .dpd-palette__hero-hotspot--button{top:82.2%!important}
}