/* Wholesale landing page. Loads after home.css, whose hero, trust bar, bento, lineup grid, in-every-box, tested card and CTA it reuses. */

/* hero: longer headline, copy on the left half */
.wh-hero .hero-copy{width:min(50%,660px)}
.wh-hero h1{font-size:clamp(48px,5.4vw,82px);line-height:1}

/* lineup without prices or buttons */
.card.plain{padding-bottom:26px}
.card.plain .mgs{margin:8px 0 0;color:var(--soft);font-size:15px}

/* three ways to label it */
.wh-labels{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.wh-label{background:var(--card);border-radius:var(--r);padding:16px 16px 28px;min-width:0}
.wh-label-img{position:relative;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:#ecebe8}
.wh-art{position:absolute;left:55.3%;top:26.7%;width:10%;height:34.7%;border:2px dashed var(--accent);border-radius:8px;font-size:0;color:transparent;background:rgb(255 255 255 / .35)}
.wh-art::after{content:"Your artwork here";position:absolute;left:118%;top:50%;transform:translateY(-50%);white-space:nowrap;font:500 12.5px/1 var(--font);color:#fff;background:var(--accent);padding:7px 11px;border-radius:99px}
.wh-label-img img{width:100%;height:100%;object-fit:cover}
.wh-pill{position:absolute;top:14px;left:14px;background:var(--accent);color:#fff;font-size:13px;font-weight:500;padding:6px 12px;border-radius:99px}
.wh-label h3{font-weight:400;font-size:27px;letter-spacing:-.025em;margin:22px 12px 6px}
.wh-label p{margin:0 12px;color:var(--muted);font-size:15.5px;line-height:1.5}

/* pricing ladder: five tiles that climb like a bar chart, the last one navy */
.ladder{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:end}
.ladder li{display:flex;flex-direction:column;justify-content:flex-end;border-radius:var(--r);padding:24px 24px 26px;min-width:0;background:var(--card);min-height:170px}
.ladder li:nth-child(2){min-height:215px;background:#efeeeb}
.ladder li:nth-child(3){min-height:260px;background:#e7e6e2}
.ladder li:nth-child(4){min-height:305px;background:#dcdad5}
.ladder li:nth-child(5){min-height:350px;background:var(--navy);color:#fff;box-shadow:0 26px 60px rgb(17 31 51 / .25)}
.ladder small{display:block;margin-bottom:auto;font:500 12.5px var(--monof);color:var(--accent)}
.ladder b{display:block;font-weight:400;font-size:clamp(30px,3vw,44px);letter-spacing:-.035em;line-height:1;margin-top:20px}
.ladder span{display:block;margin-top:8px;color:var(--muted);font-size:15px}
.ladder li:nth-child(5) span{color:#aeb8c8}
.ladder-note{margin:22px auto 0;text-align:center;color:var(--muted);font-size:15px;max-width:620px}

/* ordering steps band: no photo */
.wh-steps .band3{margin-top:44px}

/* inquiry form */
.wh-form{max-width:860px;margin:44px auto 0}
.wh-form .dc-wh-form,.wh-form .dc-wh-done{margin-top:0}
.wh-form .dc-wh-form{padding:40px}

@media (max-width:1080px){
  .wh-hero .hero-copy{width:min(58%,560px)}
  .wh-labels{grid-template-columns:1fr 1fr}
  .wh-labels>:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 9px)}
  .ladder{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ladder li:nth-child(1){min-height:150px}
  .ladder li:nth-child(2){min-height:170px}
  .ladder li:nth-child(3){min-height:190px}
  .ladder li:nth-child(4){min-height:210px}
  .ladder li:nth-child(5){min-height:230px}
  .ladder li:nth-child(4){grid-column:1/span 2}
  .ladder li:nth-child(5){grid-column:3}
}
@media (max-width:900px){
  .wh-hero .hero-copy{width:auto}
}
@media (max-width:640px){
  .wh-hero h1{font-size:42px}
  .card.plain{padding-bottom:18px}
  .card.plain .mgs{font-size:13px;margin-top:4px}
  .wh-labels{margin-top:36px;grid-template-columns:1fr;gap:12px}
  .wh-labels>:last-child{grid-column:auto;width:auto}
  .wh-label{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:16px;align-items:start;padding:12px}
  .wh-label-img{grid-row:1/3;border-radius:14px}
  .wh-pill{top:8px;left:8px;font-size:11px;padding:4px 8px}
  .wh-label h3{font-size:22px;margin:10px 0 4px}
  .wh-label p{margin:0;font-size:14.5px}
  .ladder{margin-top:36px;grid-template-columns:1fr 1fr;gap:10px}
  .ladder li{padding:18px 18px 20px}
  .ladder li:nth-child(n){min-height:130px;grid-column:auto}
  .ladder li:nth-child(3),.ladder li:nth-child(4){min-height:150px}
  .ladder li:nth-child(5){grid-column:1/-1;min-height:150px}
  .ladder b{font-size:30px;margin-top:14px}
  .ladder span{font-size:13.5px}
  .wh-form{margin-top:30px}
  .wh-form .dc-wh-form{padding:22px 18px}
}

/* keep the headline clear of the box stack */
@media (min-width:1081px){.wh-hero .hero-copy{width:min(46%,640px)}.wh-hero .hero h1,.wh-hero h1{font-size:clamp(48px,5.6vw,84px)}}

/* phone: the "Your artwork here" callout sits under the dashed box, inside the tile */
@media (max-width:760px){
  .wh-art::after{left:50%;top:auto;bottom:-34px;transform:translateX(-50%);font-size:11px;padding:6px 9px}
  .wh-art{top:22%}
}