/* ===== It's Your Design — Place Your Order page ===== */
.of-wrap{max-width:760px;margin:0 auto;padding:28px 18px 70px}
.of-intro{text-align:center;margin-bottom:24px}
.of-intro h1{font-size:clamp(1.7rem,4vw,2.4rem);color:var(--ink)}
.of-intro p{color:var(--ink-soft);max-width:42em;margin:.6em auto 0}
.of-chat-link{font-weight:700}
.of-chat-link a{color:var(--coral-dark)}

.of-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px 24px;margin-bottom:18px}
.of-h{font-family:'Baloo 2',cursive;color:var(--teal-deep);font-size:1.2rem;margin-bottom:.7em}
.of-items-title{font-family:'Baloo 2',cursive;color:var(--ink);font-size:1.35rem;margin:24px 4px 12px}

.of-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.of-field{display:flex;flex-direction:column;margin-bottom:13px}
.of-field label{font-weight:700;font-size:.86rem;margin-bottom:5px;color:var(--ink)}
.of-field input,.of-field select,.of-field textarea{
  font-family:'Nunito';font-size:1rem;padding:.66em .85em;border:2px solid #e3eef0;
  border-radius:var(--radius-sm);background:#fafdfd;transition:border .2s;resize:vertical;width:100%}
.of-field input:focus,.of-field select:focus,.of-field textarea:focus{outline:none;border-color:var(--teal)}
.of-field input[type=file]{padding:.5em;background:#fff;border-style:dashed;cursor:pointer}

.item-card{border:2px solid var(--teal-soft);position:relative}
.item-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.item-title{font-family:'Baloo 2',cursive;color:var(--teal-deep);font-size:1.1rem}
.item-num{color:var(--coral)}
.item-remove{border:none;background:#ffe3ee;color:var(--coral-dark);width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:.95rem;font-weight:700;flex-shrink:0}
.item-remove:hover{background:#ffd0e2}
.item-card:first-of-type .item-remove{display:none}

.of-add{display:block;width:100%;margin:2px 0 22px;border-style:dashed}

/* apparel size/color/qty rows */
.variant-label{display:block;font-weight:700;font-size:.86rem;margin:6px 0 6px;color:var(--ink)}
.variant-head,.variant-row{display:grid;grid-template-columns:1.1fr 1fr .55fr 1.3fr 34px;gap:8px;align-items:center}
.variant-head{margin-bottom:5px}
.variant-head span{font-size:.74rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);font-weight:700}
.variant-row{margin-bottom:8px}
.variant-row select,.variant-row input{font-family:'Nunito';font-size:.95rem;padding:.55em .6em;border:2px solid #e3eef0;border-radius:10px;background:#fafdfd;width:100%}
.variant-row select:focus,.variant-row input:focus{outline:none;border-color:var(--teal)}
.v-remove{border:none;background:#ffe3ee;color:var(--coral-dark);width:34px;height:34px;border-radius:9px;cursor:pointer;font-weight:700}
.v-remove:hover{background:#ffd0e2}
.add-variant{border:none;background:var(--teal-soft);color:var(--teal-deep);font-family:'Nunito';font-weight:700;border-radius:10px;padding:.5em 1em;cursor:pointer;margin-top:2px}
.add-variant:hover{background:#d3f4f6}
.fixed-size{background:var(--teal-soft2);border-radius:10px;padding:8px 12px;font-weight:700;color:var(--teal-deep);font-size:.9rem;margin-bottom:12px}
.item-hint{background:#fff8e1;border:1px solid #ffe9a8;border-radius:10px;padding:10px 14px;font-size:.86rem;color:#7a5d00;line-height:1.5;margin-bottom:14px}
.item-hint strong{color:#5c4600}
@media(max-width:640px){
  .variant-head{display:none}
  .variant-row{grid-template-columns:1fr 1fr}
  .variant-row .v-place{grid-column:1 / -1}
}

.of-submit-card{text-align:center}
.of-submit-card .cf-wrap{display:flex;justify-content:center;margin-bottom:14px}
.of-submit-card .cf-wrap:empty,.of-submit-card .cf-wrap #cf-turnstile:empty{min-height:0}

@media(max-width:640px){
  .of-row{grid-template-columns:1fr}
}