/* KAWEN — premium page system (H14). One voice for every customer page:
 * a tall, quiet masthead; the campaign card (campaign.css) for every object;
 * white create tiles that carry a picture, not a paragraph; one-row footer.
 * Loaded after kawen.css and the page's own sheet, on every customer page. */

/* masthead ------------------------------------------------------------------ */
.pm .masthead{position:relative;overflow:hidden;padding:clamp(28px,4vw,60px) 0 clamp(20px,2.6vw,36px)}
.pm .masthead .mh-in{position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.pm .masthead h1{font-size:clamp(46px,6.2vw,96px);line-height:.9;letter-spacing:-.05em;text-transform:uppercase;max-width:14ch}
.pm .masthead h1 em{font-style:normal;color:var(--acid,#E8FF28)}
.pm .masthead h1::after{content:"";display:block;width:min(180px,34%);height:6px;margin-top:16px;border-radius:3px;
  background:linear-gradient(90deg,var(--spray-pink),var(--spray-violet) 50%,var(--spray-cyan))}
.pm .masthead .kicker{margin-bottom:12px}
.pm .masthead .lede{margin-top:16px;font-size:clamp(16px,1.25vw,19px);max-width:34ch}
.pm .masthead .mh-b1{width:34vw;max-width:520px;aspect-ratio:1;left:-14vw;top:-22vw;opacity:.32}
.pm .masthead .mh-b2{width:28vw;max-width:420px;aspect-ratio:1;right:-9vw;top:-16vw;opacity:.26}
.pm .mh-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:14px}
.pm .mh-row .lede{margin:0}

/* create tiles — a picture, a name, one line, a status, an arrow ------------- */
.pm-tiles{display:grid;gap:clamp(12px,1.4vw,20px);grid-template-columns:repeat(4,minmax(0,1fr))}
.pm-tile{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);
  overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;min-width:0}
.pm-tile:hover{transform:translateY(-5px);border-color:transparent;box-shadow:0 34px 70px -34px rgba(9,10,12,.45)}
.pm-tile-vis{position:relative;aspect-ratio:4/3;background:#E9E3D9;overflow:hidden}
.pm-tile-vis img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.pm-tile:hover .pm-tile-vis img{transform:scale(1.04)}
.pm-tile-vis::after{content:"";position:absolute;right:-14%;top:-16%;width:44%;aspect-ratio:1;border-radius:50%;filter:blur(18px);opacity:.6;mix-blend-mode:multiply;
  background:radial-gradient(circle,var(--sa,var(--spray-pink)) 0%,transparent 66%);pointer-events:none}
.pm-tile-vis.is-burst{background:var(--bone);display:grid;place-items:center}
.pm-tile-vis.is-burst::before{content:"";position:absolute;width:52%;aspect-ratio:1;border-radius:50%;filter:blur(22px);opacity:.9;
  background:radial-gradient(circle,var(--sa) 0%,color-mix(in srgb,var(--sb) 70%,transparent) 44%,transparent 72%)}
.pm-tile-vis.is-burst svg{position:relative;width:26%;height:auto;fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.pm-tile-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:end;padding:16px 18px 18px}
.pm-tile h3{font-size:clamp(20px,1.6vw,24px);letter-spacing:-.03em;line-height:1.05}
.pm-tile p{font-size:14.5px;color:var(--muted);margin-top:4px}
.pm-tile .chip{position:absolute;top:14px;left:14px;z-index:2}
.pm-tile .go{grid-column:2;grid-row:1/3;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .25s,border-color .25s}
.pm-tile .go .arrow{width:20px;stroke:var(--ink)}
.pm-tile:hover .go{background:var(--ink);border-color:var(--ink)}
.pm-tile:hover .go .arrow{stroke:var(--paper);transform:translateX(3px)}
.pm-tile-link{position:absolute;inset:0;z-index:3;border-radius:var(--r-lg)}
.pm-tile-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.pm-tile.is-off .pm-tile-vis{filter:saturate(.6)}
.pm-tile.is-off h3{color:var(--dim)}
@media (max-width:1100px){.pm-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pm-tiles{grid-template-columns:1fr;gap:18px}.pm-tile-vis{aspect-ratio:16/10}}

/* shop readout — one quiet row of facts, the live truth ---------------------- */
.pm .readout{margin-top:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.pm .readout>div{background:var(--paper);padding:14px 16px}
.pm .readout dd{font-size:17px}
.pm .families{margin-top:12px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.pm .store-note{font-size:14px;color:var(--muted);margin-top:14px}
@media (max-width:640px){.pm .readout{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* showcase shop and detail: the campaign card language, no overlays ---------- */
.h14 .ed-layout{display:grid;grid-template-areas:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,26px) clamp(12px,1.6vw,22px)}
.h14 .ed-layout .pc{grid-area:auto}
.h14 .ed-layout .pc .stage-obj{aspect-ratio:1;min-height:0;border-radius:var(--r-md);box-shadow:0 18px 40px -26px rgba(9,10,12,.35)}
.h14 .ed-layout .pc .pc-over,.h14 .ed-layout .badge,.h14 .ed-layout .stage-chips,.h14 .ed-layout .sig-dim,.h14 .ed-layout .grain,.h14 .ed-layout .stage-obj::before,.h14 .ed-layout .stage-obj::after,.h14 .ed-layout .ghost-ar{display:none}
.h14 .ed-layout .pc-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:14px 2px 2px}
.h14 .ed-layout .pc-body h3{font-size:clamp(17px,1.3vw,20px)}
.h14 .ed-layout .pc-body p{font-size:13.5px}
.h14 .ed-layout .pc-body .price{font-size:clamp(16px,1.2vw,19px)}
.h14 .ed-layout .pc-cue{top:12px;right:12px;left:auto;bottom:auto}
.h14 .sh-shop-head{align-items:flex-end}
.h14 .filters button{height:34px;font-size:13.5px}
@media (max-width:900px){.h14 .ed-layout{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.h14 .ed-layout{grid-template-columns:1fr;gap:24px}.h14 .ed-layout .pc-body h3{font-size:22px}}
.h14 .pd-meta{display:none}
.h14 .pd h1{font-size:clamp(34px,3.6vw,52px);letter-spacing:-.04em;line-height:.95}
.h14 .pd-stage-wrap .stage-obj{border-radius:var(--r-lg);box-shadow:0 30px 70px -36px rgba(9,10,12,.4)}

/* upload: the stage is the hero, the form is quiet -------------------------- */
.pm .up-h1{font-size:clamp(46px,6vw,92px);text-transform:uppercase;letter-spacing:-.05em;line-height:.9}
.pm .up-h1 em{color:var(--acid,#E8FF28)}
.pm .up-stage{border-radius:var(--r-lg);box-shadow:0 30px 70px -40px rgba(9,10,12,.4)}
.pm .up-facts{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
.pm .up-facts div{padding:6px 0}
.pm .up-facts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pm .up-facts dd{font-size:14.5px;color:var(--dim)}

/* design & print gate: a studio doorway, not a login ------------------------ */
.pm .cfg-gate{min-height:calc(100dvh - var(--navh));display:grid;place-items:stretch;align-items:center;position:relative;overflow:hidden;padding:clamp(24px,4vw,56px) 0}
.pm .cfg-gate-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;justify-items:stretch;text-align:left}
.pm .gate-vis .ga{min-height:340px}
.pm .cfg-gate h1{font-size:clamp(46px,6vw,92px);text-transform:uppercase;letter-spacing:-.05em;line-height:.9;margin:14px 0 0}
.pm .cfg-gate h1 em{font-style:normal;color:var(--acid,#E8FF28)}
.pm .cfg-gate h1::after{content:"";display:block;width:34%;height:6px;margin-top:16px;border-radius:3px;background:linear-gradient(90deg,var(--spray-pink),var(--spray-violet) 50%,var(--spray-cyan))}
.pm .cfg-gate .lede{margin:16px 0 0;max-width:30ch}
.pm .gate-words{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.pm .gate-words li{display:flex;align-items:center;gap:8px}
.pm .gate-words li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sa,var(--acid))}
.pm .cfg-gate-form{display:flex;gap:10px;margin-top:24px;max-width:420px}
.pm .cfg-gate-form input{flex:1;height:52px;border-radius:999px;border:1px solid var(--line);padding:0 18px;font-size:15px;background:var(--paper)}
.pm .cfg-gate-form .btn{height:52px;border-radius:999px;padding-inline:26px}
.pm .gate-vis{position:relative;display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:12px;grid-template-areas:"a b" "a c"}
.pm .gate-vis figure{margin:0;border-radius:var(--r-md);overflow:hidden;background:#E9E3D9;position:relative;min-height:0}
.pm .gate-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pm .gate-vis .ga{grid-area:a;aspect-ratio:auto;min-height:100%}.pm .gate-vis .gb{grid-area:b;aspect-ratio:4/3}.pm .gate-vis .gc{grid-area:c;aspect-ratio:4/3}
.pm .gate-vis .mark{color:var(--paper);filter:drop-shadow(0 2px 6px rgba(9,10,12,.5))}
.pm .gate-vis .gm-word{left:8%;top:8%;width:42%;transform:rotate(-6deg)}
.pm .gate-b1{position:absolute;width:40vw;max-width:600px;aspect-ratio:1;left:-16vw;top:-18vw;opacity:.3}
.pm .gate-b2{position:absolute;width:30vw;max-width:460px;aspect-ratio:1;right:-10vw;bottom:-16vw;opacity:.25}
@media (max-width:960px){.pm .cfg-gate-in{grid-template-columns:1fr}.pm .gate-vis{grid-template-columns:1fr 1fr;grid-template-areas:"a a" "b c"}.pm .gate-vis .ga{aspect-ratio:16/10}}

/* about: quieter type, same components --------------------------------------- */
.pm .notyet{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.pm .sec-head-solo h2{font-size:clamp(30px,3.4vw,46px);letter-spacing:-.04em}

/* footers everywhere: one row ------------------------------------------------- */
.foot-line{padding-block:clamp(26px,3vw,40px) 22px}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:18px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:15px;font-weight:500}
.foot-links a:hover{text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.pm-tile:hover,.pm-tile:hover .pm-tile-vis img{transform:none}}

.h14 .ed-layout .stage-seg{display:none}

/* product detail (H15): a campaign and a studio, not a form ------------------- */
.h14 .pd{grid-template-columns:minmax(0,1.75fr) minmax(320px,1fr);gap:clamp(24px,3.6vw,64px)}
.h14 .pd-stage-wrap .stage-obj{aspect-ratio:1/1}
.h14 .pd-stage-wrap .stage-obj.stage-paper{background:#E9E3D9}
.h14 .pd-stage-tools{margin-top:12px}
.h14 .pd-side{gap:16px}
.h14 .pd-side .lede{font-size:16px;margin-top:6px}
.h14 .pd-price{padding-block:0}
.h14 .pd-price .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.h14 .pd-opts{gap:14px;border-top:1px solid var(--line);padding-top:16px}
.h14 .pd-opt{gap:8px}
.h14 .pd-actions{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 30%);padding-top:10px;margin-top:4px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.h14 .pd-actions .btn{flex:1;justify-content:center}
.h14 .pd-below{margin-top:clamp(40px,5vw,80px)}
@media (max-width:900px){
  .h14 .pd{grid-template-columns:1fr;gap:16px}
  .h14 .pd-stage-wrap{position:static;margin-inline:calc(-1 * var(--pad) + 8px)}
  .h14 .pd-stage-wrap .stage-obj{aspect-ratio:1/1;border-radius:var(--r-md)}
  .h14 .pd-side h1{font-size:clamp(30px,8.4vw,40px)}
  .h14 .pd-actions{position:sticky;bottom:0;z-index:5;padding:10px 0 12px}
}

/* upload & print (H15): drop → see → confirm → choose → send ------------------ */
.pm .up-dec{grid-template-columns:auto minmax(0,1fr) minmax(0,1.4fr);gap:18px 26px}
.pm .up-dec .up-field:nth-child(4){display:none}                 /* size moved under More options */
.pm .up-more{margin-top:14px}
.pm .up-contact{margin-top:18px}
.pm .up-submit{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:22px}
.pm .step-later{opacity:1}
.pm .up-stage[data-state="idle"] ~ .step-later,.pm .up-stage[data-state="idle"] ~ .up-more,.pm .up-stage[data-state="idle"] ~ .up-facts{display:none}
/* aspect-ratio:auto — a min-height transfers through a 4/3 ratio into a 698px-wide stage on a 390 phone */
.pm .up-stage[data-state="idle"]{aspect-ratio:auto;height:min(62vh,640px);max-height:none}
.pm .up-stage[data-state="idle"] .drop-title{font-size:clamp(26px,3vw,40px)}
/* Print with KAWEN: the design replaces the drop zone */
.pm .up-community{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:18px}
.pm .up-community img{width:96px;height:96px;object-fit:cover;border-radius:var(--r-md)}
.pm .up-community h2{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.03em}
.pm .up-community p{font-size:14px;color:var(--muted);margin-top:2px}
.pm .up-community .chip{margin-top:8px}
@media (max-width:640px){.pm .up-community{grid-template-columns:1fr}.pm .up-community img{width:100%;height:auto;aspect-ratio:16/9}}

/* the sticky action bar and the review chip must not collide on phones */
@media (max-width:900px){.h14 .review-chip{bottom:86px}}