/**
 * DECOVINK Embroidery. Uses the theme tokens; every grid uses minmax(0, ...)
 * or min(100%, ...) so nothing sizes to max-content on a 320px screen, and
 * fieldsets carry min-width: 0 (the UA min-content quirk found in Phase H).
 */

/* Hero / page visuals ------------------------------------------------------ */
.dve-figure { margin: 0; }
.dve-figure .dve-img {
  display: block; width: 100%; height: auto;
  border-radius: 14px; box-shadow: 0 18px 44px rgba(22,22,22,.16);
}
@media (min-width: 1024px) { .dve-figure .dve-img { max-height: 520px; object-fit: cover; object-position: var(--dve-focus, 50% 40%); } }
.dve-figure--tile {
  background: #f4f4f4; border-radius: 16px; padding: clamp(16px, 4vw, 36px);
  display: flex; align-items: center; justify-content: center;
}
.dve-figure--tile .dve-img { box-shadow: none; border-radius: 0; max-height: 420px; width: auto; max-width: 100%; object-fit: contain; }

/* Family cards ------------------------------------------------------------- */
.dve-cards {
  display: grid; gap: 14px; margin-top: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
}
.dve-card {
  display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: #161616;
  border: 1px solid #e4e4e4; border-radius: 14px; background: #fff; overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.dve-card:hover, .dve-card:focus-visible { border-color: #161616; box-shadow: 0 10px 24px rgba(22,22,22,.08); }
.dve-card__media {
  display: flex; align-items: center; justify-content: center;
  height: 150px; padding: 14px; background: #f4f4f4;
}
.dve-card__media .dve-img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
.dve-card__svg { width: 120px; height: 80px; }
.dve-card__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 18px; }
.dve-card__title { font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.dve-card__desc { font-size: .88rem; line-height: 1.5; color: #57514F; }

/* Placement guide ---------------------------------------------------------- */
.dve-place {
  display: grid; gap: 16px; margin-top: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.dve-place__panel { margin: 0; min-width: 0; border: 1px solid #e4e4e4; border-radius: 14px; background: #fff; padding: 16px; }
.dve-place__panel svg { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto 12px; }
.dve-ink { fill: #f1f1f1; stroke: #161616; stroke-width: 3; stroke-linejoin: round; }
.dve-zone { fill: none; stroke: #E30613; stroke-width: 2; stroke-dasharray: 5 4; }
.dve-cap-btn { fill: #161616; }
.dve-mark circle { fill: #E30613; }
.dve-mark text { fill: #fff; font: 700 11px/1 system-ui, sans-serif; text-anchor: middle; }
.dve-place__panel figcaption strong { display: block; font-size: .95rem; margin-bottom: 8px; color: #161616; }
.dve-place__list { margin: 0; padding: 0; list-style: none; }
.dve-place__list li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: .9rem; color: #3d3d3d; }
.dve-place__n {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: #E30613; color: #fff; font-size: .72rem; font-weight: 700;
}
.dve-note { margin-top: 1.1rem; font-size: .88rem; line-height: 1.6; color: #57514F; max-width: 74ch; }

/* Steps -------------------------------------------------------------------- */
.dve-steps {
  display: grid; gap: 12px; margin: 1.4rem 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
}
.dve-steps__item { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 1px solid #e4e4e4; border-radius: 12px; background: #fff; padding: 16px; }
.dve-steps__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: #E30613; color: #fff; font-weight: 700; font-size: .85rem;
}
.dve-steps__title { font-weight: 700; font-size: .98rem; color: #161616; }
.dve-steps__desc { font-size: .87rem; line-height: 1.5; color: #57514F; }

/* Who we work with --------------------------------------------------------- */
.dve-who { display: flex; flex-wrap: wrap; gap: 8px; margin: 1rem 0 0; padding: 0; list-style: none; }
.dve-who li { min-width: 0; }
.dve-who li, .dve-who a {
  display: inline-block; padding: 8px 14px; border: 1px solid #e4e4e4; border-radius: 999px;
  font-size: .88rem; color: #161616; text-decoration: none; background: #fff;
}
.dve-who li:has(a) { padding: 0; border: 0; }
.dve-who a:hover { border-color: #161616; }

/* Can we embroider your item? --------------------------------------------- */
.dve-check-cta {
  display: grid; gap: 16px; align-items: center;
  border: 2px solid #E30613; border-radius: 16px; background: #fff; padding: clamp(18px, 4vw, 32px);
}
@media (min-width: 768px) { .dve-check-cta { grid-template-columns: minmax(0, 1fr) auto; } }
.dve-check-cta__title { margin: 0 0 6px; }
.dve-check-cta p { margin: 0; color: #3d3d3d; line-height: 1.6; }
.dve-check-cta__btn { margin: 0; }

/* FAQ ---------------------------------------------------------------------- */
.dve-faq { margin-top: 1.4rem; border-top: 1px solid #e4e4e4; }
.dve-faq__item { border-bottom: 1px solid #e4e4e4; }
.dve-faq__q { display: flex; gap: .7rem; cursor: pointer; padding: 1rem .25rem; font-weight: 600; color: #161616; list-style: none; }
.dve-faq__q::-webkit-details-marker { display: none; }
.dve-faq__q::after { content: "+"; margin-left: auto; color: #E30613; font-size: 1.3rem; line-height: 1; }
.dve-faq__item[open] .dve-faq__q::after { content: "\2212"; }
.dve-faq__a p { margin: 0 .25rem 1.1rem; font-size: .93rem; line-height: 1.7; color: #3d3d3d; max-width: 74ch; }

/* CTA ---------------------------------------------------------------------- */
.dve-cta { text-align: center; }
.dve-cta__title { margin: 0 0 .5rem; }
.dve-cta__sub { margin: 0 auto 1.3rem; max-width: 44rem; color: #3d3d3d; line-height: 1.65; }
.dve-cta__btns { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin: 0; }

/* Quote form --------------------------------------------------------------- */
.dve-notice { border: 1px solid #e4e4e4; border-radius: 12px; background: #fafafa; padding: 1rem 1.2rem; }
.dve-form { max-width: 54rem; }
.dve-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.dve-step { min-width: 0; border: 1px solid #e4e4e4; border-radius: 14px; background: #fff; padding: 1.3rem 1.35rem; margin: 0 0 1rem; }
.dve-step legend { display: flex; align-items: center; gap: .6rem; padding: 0 .5rem; font-size: 1.05rem; font-weight: 700; color: #161616; }
.dve-step__n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #161616; color: #fff; font-size: .82rem; flex: 0 0 auto; }
.dve-hint { margin: 0 0 .9rem; font-size: .87rem; line-height: 1.55; color: #57514F; }
.dve-step .dve-hint:last-child { margin: .8rem 0 0; }
.dve-grid { display: grid; gap: .9rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.dve-grid--tight { margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.dve-field { margin: 0; min-width: 0; }
.dve-field label { display: block; margin-bottom: .32rem; font-size: .85rem; font-weight: 600; color: #161616; }
.dve-req { color: #E30613; }
.dve-field input[type="text"], .dve-field input[type="email"], .dve-field input[type="tel"], .dve-field input[type="date"], .dve-field select, .dve-field textarea {
  width: 100%; max-width: 100%; box-sizing: border-box; min-height: 46px; padding: .55rem .7rem;
  border: 1px solid #cfcfcf; border-radius: 8px; font: inherit; font-size: 1rem; color: #161616; background: #fff;
}
.dve-field textarea { min-height: 120px; resize: vertical; }
.dve-field input:focus-visible, .dve-field select:focus-visible, .dve-field textarea:focus-visible { outline: 2px solid #E30613; outline-offset: 1px; border-color: #E30613; }
.dve-field [aria-invalid="true"] { border-color: #E30613; background: #fff6f6; }
.dve-checks, .dve-radios { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.dve-check { display: flex; align-items: center; gap: .6rem; min-width: 0; border: 1px solid #e4e4e4; border-radius: 10px; background: #fff; padding: .65rem .75rem; font-size: .92rem; color: #161616; cursor: pointer; }
.dve-check:hover { border-color: #161616; }
.dve-check input[type="checkbox"], .dve-check input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: #E30613; }
.dve-check > span { min-width: 0; line-height: 1.35; }
.dve-qty { flex: 0 0 4.2rem; width: 4.2rem; margin-left: auto; min-height: 34px; padding: .25rem .4rem; text-align: center; border: 1px solid #cfcfcf; border-radius: 6px; font: inherit; font-size: .88rem; }
.dve-file { display: block; min-width: 0; }
.dve-file input[type="file"] { display: block; width: 100%; max-width: 100%; min-width: 0; font: inherit; font-size: .9rem; }
.dve-filelist { margin: .7rem 0 0; padding: 0; list-style: none; }
.dve-filelist li { font-size: .86rem; color: #3d3d3d; padding: .25rem 0; overflow-wrap: anywhere; }
.dve-submit { margin-top: 1.4rem; }
.dve-error { margin: .8rem 0 0; font-weight: 600; color: #E30613; }
.dve-fineprint { margin: .9rem 0 0; font-size: .83rem; line-height: 1.6; color: #57514F; }
.dve-form.is-sending .dve-submit button { opacity: .6; pointer-events: none; }
.dve-done { border: 1px solid #E30613; border-radius: 14px; background: #fff; padding: 1.5rem; }
.dve-done__ref strong { display: inline-block; margin-left: .4rem; padding: .15rem .5rem; border-radius: 6px; background: #161616; color: #fff; font-family: ui-monospace, Menlo, monospace; letter-spacing: .04em; }
@media (max-width: 480px) { .dve-step { padding: 1.05rem .9rem; } }

/* Seven steps: one row on wide screens, 4 + 3 on tablets, so no lone pair. */
@media (min-width: 640px) and (max-width: 1099px) { .dve-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .dve-steps { grid-template-columns: repeat(7, minmax(0, 1fr)); } .dve-steps__item { padding: 14px; } }

/* Long CTA labels ("Request an outerwear embroidery quote") wrap on phones
   instead of pushing the page sideways. This file loads on Embroidery pages only. */
@media (max-width: 640px) {
  /* Doubled class: the theme's .dv-btn { white-space: nowrap } loads later. */
  .dv-btn.dv-btn { white-space: normal; text-wrap: wrap; max-width: 100%; text-align: center; line-height: 1.25; padding-block: 12px; height: auto; min-height: 48px; }
  .dv-btn-wrap .dv-btn, .dve-cta__btns .dv-btn, .dve-check-cta__btn .dv-btn { width: 100%; justify-content: center; }
}

/* Six families: one row on desktop, 3 + 3 on tablets (5 cards: 3 + 2). */
@media (min-width: 640px) and (max-width: 1099px) { .dve-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .dve-cards { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); } }

/* Patch shape examples ----------------------------------------------------- */
.dve-shapes {
  display: grid; gap: 12px; margin: 1.4rem 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
}
.dve-shapes__item {
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0;
  border: 1px solid #e4e4e4; border-radius: 14px; background: #fff; padding: 14px 10px;
  font-size: .9rem; font-weight: 600; color: #161616;
}
.dve-shapes__media { display: flex; align-items: center; justify-content: center; width: 100%; height: 120px; }
.dve-shapes__item svg { width: 100%; max-width: 96px; height: auto; }
.dve-shapes__img { width: auto; height: auto; max-width: min(100%, 120px); max-height: 120px; object-fit: contain; }
.dve-patch__base { fill: #161616; }
.dve-patch__edge { fill: none; stroke: #E30613; stroke-width: 4; stroke-dasharray: 3 2.5; }
.dve-patch__mark { fill: #E30613; }
/* Seven shapes: one row on desktop, 4 + 3 on tablets, pairs on phones. */
@media (min-width: 900px) { .dve-shapes { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (min-width: 480px) and (max-width: 899px) { .dve-shapes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) { .dve-shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Patch details in the quote form ------------------------------------------ */
.dve-step--patch { border-color: #E30613; }
.dve-step--patch[hidden] { display: none; }
.dve-sublabel { margin: 14px 0 6px; font-weight: 600; font-size: .92rem; color: #161616; }
.dve-field--narrow { max-width: 20rem; }