/**
 * DECOVINK Custom Apparel.
 *
 * Leans on the theme's tokens (--dv-*) so apparel inherits the site's type and
 * spacing, with its own components on top. Every grid uses minmax(0, 1fr) or an
 * explicit min, because a single-column auto grid sizes to max-content and
 * blew out the 320px viewport in Phase F.1.
 */

.dva-hero-figure { margin: 0; }
.dva-hero-figure .dva-hero__img {
  display: block; width: 100%; height: auto;
  /* The library holds both portrait and landscape apparel shots, so the hero
     slot crops to a consistent band rather than letting a tall image stretch
     the section. */
  max-height: 420px; object-fit: cover; object-position: center;
  border-radius: 14px; box-shadow: 0 18px 44px rgba(22,22,22,.16);
}

/* ---------------------------------------------------------- who we serve */

.dva-segments { margin-top: 1.5rem; }

.dva-segments__lead {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
}

.dva-seg { min-width: 0; }

.dva-seg--lead {
  display: flex; flex-direction: column;
  border: 1px solid #E30613; border-radius: 16px; background: #fff;
  padding: 1.6rem 1.5rem;
  box-shadow: 0 12px 30px rgba(227,6,19,.09);
}

.dva-seg__flag {
  margin: 0 0 .55rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: #E30613;
}

.dva-seg__title { margin: 0 0 .6rem; font-size: 1.28rem; line-height: 1.25; color: #161616; }
.dva-seg__desc  { margin: 0 0 1.15rem; font-size: .95rem; line-height: 1.6; color: #3d3d3d; }
.dva-seg__cta   { margin: auto 0 0; }

.dva-segments__rest {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .85rem; margin-top: .85rem;
}

.dva-seg--min {
  display: block; text-decoration: none;
  border: 1px solid #e4e4e4; border-radius: 12px; background: #fafafa;
  padding: 1.1rem 1.15rem;
  transition: border-color .16s ease, background-color .16s ease;
}
.dva-seg--min:hover { border-color: #161616; background: #fff; }
.dva-seg--min .dva-seg__title { font-size: 1.02rem; margin-bottom: .35rem; }
.dva-seg--min .dva-seg__desc  { font-size: .86rem; margin: 0; color: #6a6a6a; }

/* -------------------------------------------------------------- the roles */

.dva-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem; margin-top: 1.4rem;
}

.dva-role {
  min-width: 0; border-left: 3px solid #E30613; padding: .2rem 0 .2rem 1rem;
}
.dva-role__title { margin: 0 0 .35rem; font-size: 1.04rem; color: #161616; }
.dva-role__desc  { margin: 0; font-size: .9rem; line-height: 1.55; color: #3d3d3d; }

/* --------------------------------------------------------------- families */

.dva-families {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem; margin-top: 1.4rem;
}

.dva-family {
  min-width: 0; border: 1px solid #e4e4e4; border-radius: 12px;
  background: #fff; padding: 1.2rem 1.25rem;
}
.dva-family__title { margin: 0 0 .7rem; font-size: 1.02rem; color: #161616; }
.dva-family__list  { margin: 0; padding: 0; list-style: none; }
.dva-family__list li {
  font-size: .89rem; line-height: 1.5; color: #3d3d3d; padding: .17rem 0 .17rem .95rem; position: relative;
}
.dva-family__list li::before {
  content: ""; position: absolute; left: 0; top: .62rem;
  width: 5px; height: 5px; border-radius: 50%; background: #E30613;
}
.dva-family__desc { margin: 0; font-size: .87rem; line-height: 1.6; color: #6a6a6a; }

.dva-note {
  margin-top: 1.25rem; font-size: .86rem; line-height: 1.6; color: #6a6a6a;
}

/* ------------------------------------------------------------- decoration */

.dva-decor { margin-top: 1.4rem; }
.dva-decor__group + .dva-decor__group { margin-top: 1.75rem; }

.dva-decor__flag {
  margin: 0 0 .7rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.dva-decor__flag--yes { color: #E30613; }
.dva-decor__flag--ask { color: #6a6a6a; }

.dva-decor__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}

.dva-decor__card {
  min-width: 0; border: 1px solid #e4e4e4; border-radius: 12px;
  background: #fff; padding: 1.25rem 1.3rem;
}
.dva-decor__card--ask { background: #fafafa; border-style: dashed; }
.dva-decor__title { margin: 0 0 .5rem; font-size: 1.06rem; color: #161616; }
.dva-decor__desc  { margin: 0; font-size: .9rem; line-height: 1.6; color: #3d3d3d; }
.dva-decor__link  { margin: .8rem 0 0; font-size: .88rem; }

/* ------------------------------------------------------------------ steps */

.dva-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem; margin: 1.4rem 0 0; padding: 0; list-style: none; counter-reset: none;
}

.dva-stepcard {
  min-width: 0; border: 1px solid #e4e4e4; border-radius: 12px;
  background: #fff; padding: 1.3rem 1.25rem;
}
.dva-stepcard__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: #E30613; color: #fff; font-weight: 700; font-size: .9rem;
  margin-bottom: .7rem;
}
.dva-stepcard__title { margin: 0 0 .4rem; font-size: 1.02rem; color: #161616; }
.dva-stepcard__desc  { margin: 0; font-size: .89rem; line-height: 1.55; color: #3d3d3d; }

/* ------------------------------------------------------ not a storefront */

.dva-soon {
  margin-top: 1.5rem; border: 1px dashed #c9c9c9; border-radius: 14px;
  background: #fafafa; padding: 1.5rem;
}
.dva-soon__badge {
  margin: 0 0 .7rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: #6a6a6a;
}
.dva-soon__body p { margin: 0 0 .7rem; font-size: .93rem; line-height: 1.65; color: #3d3d3d; }
.dva-soon__cta { margin: 1.1rem 0 0; }

/* -------------------------------------------------------------------- CTA */

.dva-cta { text-align: center; }
.dva-cta__title { margin: 0 0 .5rem; }
.dva-cta__sub {
  margin: 0 auto 1.35rem; max-width: 44rem;
  font-size: 1rem; line-height: 1.65; color: #3d3d3d;
}
.dva-cta__btns { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin: 0; }

/* -------------------------------------------------------------------- FAQ */

.dva-faq { margin-top: 1.4rem; border-top: 1px solid #e4e4e4; }
.dva-faq__item { border-bottom: 1px solid #e4e4e4; }
.dva-faq__q {
  display: flex; align-items: flex-start; gap: .7rem; cursor: pointer;
  padding: 1rem .25rem; font-weight: 600; font-size: .98rem; color: #161616;
  list-style: none;
}
.dva-faq__q::-webkit-details-marker { display: none; }
.dva-faq__q::after {
  content: "+"; margin-left: auto; font-weight: 400; font-size: 1.3rem;
  line-height: 1; color: #E30613; flex: 0 0 auto;
}
.dva-faq__item[open] .dva-faq__q::after { content: "\2212"; }
.dva-faq__a { padding: 0 .25rem 1.1rem; }
.dva-faq__a p { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.7; color: #3d3d3d; }
.dva-faq__a p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- quote form */

.dva-quote { margin-top: 1.5rem; }

.dva-notice--closed {
  border: 1px solid #e4e4e4; border-radius: 12px; background: #fafafa;
  padding: 1.1rem 1.2rem; font-size: .93rem; color: #3d3d3d;
}

.dva-form { max-width: 54rem; }

/* The honeypot must be unreachable but not display:none, which some bots
   detect and skip. Off-screen keeps it in the DOM and out of the way. */
.dva-hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.dva-step {
  /* fieldset UA quirk: browsers apply min-width: min-content to fieldset, so
     it refuses to shrink below its widest child and overflowed 320px by 24px.
     An explicit min-width: 0 is the only way to release it. */
  min-width: 0;
  border: 1px solid #e4e4e4; border-radius: 14px; background: #fff;
  padding: 1.35rem 1.4rem; margin: 0 0 1rem;
}
.dva-step legend {
  display: flex; align-items: center; gap: .6rem;
  padding: 0 .5rem; font-size: 1.05rem; font-weight: 700; color: #161616;
}
.dva-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; font-weight: 700;
  flex: 0 0 auto;
}

.dva-hint { margin: 0 0 .9rem; font-size: .87rem; line-height: 1.55; color: #6a6a6a; }

.dva-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .9rem 1rem;
}

.dva-field { margin: 0; min-width: 0; }
.dva-field label { display: block; margin-bottom: .32rem; font-size: .85rem; font-weight: 600; color: #161616; }
.dva-req { color: #E30613; }

.dva-field input[type="text"],
.dva-field input[type="email"],
.dva-field input[type="tel"],
.dva-field input[type="date"],
.dva-field select,
.dva-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;
}
.dva-field textarea { min-height: 120px; resize: vertical; }

.dva-field input:focus-visible,
.dva-field select:focus-visible,
.dva-field textarea:focus-visible {
  outline: 2px solid #E30613; outline-offset: 1px; border-color: #E30613;
}

.dva-field input[aria-invalid="true"],
.dva-field select[aria-invalid="true"] { border-color: #E30613; background: #fff6f6; }

.dva-checks, .dva-radios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: .5rem;
}

.dva-check {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid #e4e4e4; border-radius: 10px; background: #fff;
  padding: .7rem .8rem; font-size: .92rem; color: #161616;
  cursor: pointer; min-width: 0;
}
.dva-check:hover { border-color: #161616; }
.dva-check input[type="checkbox"],
.dva-check input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; accent-color: #E30613; margin: 0; }
.dva-check > span { min-width: 0; line-height: 1.4; }
.dva-check input:focus-visible { outline: 2px solid #E30613; outline-offset: 2px; }

.dva-qty {
  flex: 0 0 4.5rem; width: 4.5rem; margin-left: auto;
  min-height: 34px; padding: .25rem .4rem; text-align: center;
  border: 1px solid #cfcfcf; border-radius: 6px; font: inherit; font-size: .88rem;
}

.dva-file { display: inline-flex; align-items: center; }
.dva-file { display: block; min-width: 0; }
/* A native file input carries a wide intrinsic min-width; without these it
   is what forces the fieldset open on a narrow screen. */
.dva-file input[type="file"] {
  font: inherit; font-size: .9rem;
  display: block; width: 100%; max-width: 100%; min-width: 0;
}
.dva-filelist { margin: .7rem 0 0; padding: 0; list-style: none; }
.dva-filelist li {
  font-size: .86rem; color: #3d3d3d; padding: .25rem 0;
  overflow-wrap: anywhere;
}

.dva-submit { margin-top: 1.4rem; }
.dva-error {
  margin: .8rem 0 0; font-size: .9rem; font-weight: 600; color: #E30613;
}
.dva-fineprint { margin: .9rem 0 0; font-size: .83rem; line-height: 1.6; color: #6a6a6a; }

.dva-form.is-sending .dva-submit button { opacity: .6; pointer-events: none; }

.dva-done {
  border: 1px solid #E30613; border-radius: 14px; background: #fff;
  padding: 1.6rem 1.5rem;
}
.dva-done__title { margin: 0 0 .5rem; font-size: 1.3rem; color: #161616; }
.dva-done__ref { margin: 0 0 .8rem; font-size: 1rem; color: #3d3d3d; }
.dva-done__ref strong {
  display: inline-block; margin-left: .4rem; padding: .15rem .5rem;
  border-radius: 6px; background: #161616; color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em;
}

@media (max-width: 480px) {
  .dva-step { padding: 1.1rem .95rem; }
  .dva-seg--lead { padding: 1.3rem 1.15rem; }
  .dva-check { font-size: .88rem; }
}

/* Angled team hero image ------------------------------------------------- */
/* Pre-cut to 4:5 (helmets to puck). On wide screens the frame is capped so the
   hero stays compact, the image crops to the faces, and the left edge is cut
   on a diagonal as in the approved mockup. Below 1024px the hero stacks, the
   picture follows the text, and a 4:3 window keeps it from running a whole
   phone screen tall. */
.dva-hero-figure.dva-hero--angled { margin: 0; max-width: 640px; }
.dva-hero-figure.dva-hero--angled .dva-hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: none;
  object-fit: cover;
  object-position: var(--dva-focus, 50% 28%);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(22, 22, 22, .16);
}
@media (min-width: 1024px) {
  .dva-hero-figure.dva-hero--angled { filter: drop-shadow(0 18px 30px rgba(22, 22, 22, .18)); }
  .dva-hero-figure.dva-hero--angled .dva-hero__img {
    aspect-ratio: 4 / 5;
    max-height: 500px;
    object-position: var(--dva-focus, 50% 30%);
    box-shadow: none;
    border-radius: 0 16px 16px 0;
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  }
}