/* 6.1.9: loaded after the design system and homepage component styles.
 * Keep these rules scoped; desktop and commerce templates retain their layout.
 */
.yp-hero-mobile-copy { display:none; }

@media (max-width:768px) {
  body.home .yp-hero { padding:10px 12px; }
  body.home .yp-hero-card {
    display:flex;
    flex-direction:column;
    height:auto;
    aspect-ratio:auto;
    isolation:isolate;
    background:#fbf5ec;
    border-radius:18px;
  }
  body.home .yp-hero-card > picture {
    position:relative;
    inset:auto;
    order:2;
    flex:none;
    aspect-ratio:1 / 1;
    overflow:hidden;
    display:block;
    width:100%;
    z-index:0;
    pointer-events:none;
  }
  body.home .yp-hero-bg {
    position:static;
    display:block;
    width:100%;
    height:100%;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center bottom;
    border-radius:0;
  }
  body.home .yp-hero-text {
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    max-width:none;
    margin:0;
    order:1;
    flex:none;
    padding:22px 18px 16px;
    box-sizing:border-box;
    text-align:left;
  }
  body.home .yp-hero-kicker,
  body.home .yp-hero-desktop-copy,
  body.home .yp-hero-desc,
  body.home .yp-hero-tagline { display:none; }
  body.home .yp-hero-title {
    order:1;
    margin:0 0 12px;
    font-size:clamp(26px,7.5vw,34px);
    line-height:1.12;
    letter-spacing:-.035em;
  }
  body.home .yp-hero-mobile-copy {
    display:block;
    order:2;
    margin:0 0 16px;
    color:#34435a;
    font-size:15px;
    font-weight:400;
    line-height:1.5;
  }
  body.home .yp-hero-actions {
    order:3;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:0 0 18px;
  }
  body.home .yp-hero-actions .yp-btn-lg {
    min-width:0;
    min-height:46px;
    padding:10px 6px;
    font-size:13px;
    line-height:1.3;
    white-space:normal;
    text-align:center;
  }
  body.home .yp-hero-features {
    order:4;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin:0;
  }
  body.home .yp-hero-features li { align-items:center; gap:6px; text-align:center; }
  body.home .yp-hero-feature-icon { width:30px; height:30px; }
  body.home .yp-hero-feature-icon svg { width:17px; height:17px; }
  body.home .yp-hero-features span:last-child { font-size:10px; line-height:1.3; font-weight:700; }

  body.home .yp-container { width:calc(100% - 28px) !important; }

  /* Two readable columns for all four sourcing-agent advantages. */
  body.home .yp-why-agent .yp-proof-grid {
    /* Legacy mobile rules use !important for these shared components. */
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }
  body.home .yp-why-agent .yp-proof-card {
    min-width:0;
    min-height:0;
    padding:14px 12px 16px !important;
    overflow-wrap:anywhere;
  }
  body.home .yp-why-agent .yp-proof-card > .yp-proof-icon.yp-image-icon {
    width:100%;
    height:90px;
    min-height:0;
    margin:0 0 12px;
  }
  body.home .yp-why-agent .yp-proof-icon.yp-image-icon img {
    width:130px;
    max-width:100%;
    height:auto;
    max-height:100%;
    object-fit:contain;
  }
  body.home .yp-why-agent .yp-proof-card > span:not(.yp-proof-icon) { margin-bottom:8px; }
  body.home .yp-why-agent .yp-proof-card h3 { margin:0 0 8px; font-size:15px; line-height:1.35; }
  body.home .yp-why-agent .yp-proof-card p { margin:0; font-size:13px; line-height:1.55; }

  /* First Order Advantage is a separate component, also two by two. */
  body.home .yp-first-order-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  body.home .yp-first-order-card {
    min-width:0;
    min-height:0;
    padding:14px 12px 16px;
    overflow-wrap:anywhere;
  }
  body.home .yp-home-first-order .yp-first-order-card > .yp-first-order-icon.yp-image-icon {
    width:100%; height:90px; min-height:0; margin:0 0 12px;
  }
  body.home .yp-home-first-order .yp-first-order-icon.yp-image-icon img {
    width:130px; max-width:100%; height:auto; max-height:100%; object-fit:contain;
  }
  body.home .yp-first-order-number { margin:0 0 8px; font-size:11px; }
  body.home .yp-first-order-card h3 { margin:0 0 8px; font-size:15px; line-height:1.35; }
  body.home .yp-first-order-card p { margin:0; font-size:13px; line-height:1.55; }

  /* These component defaults previously appeared after their media queries. */
  body.home .yp-home-trust-head { margin-bottom:22px; text-align:left; }
  body.home .yp-home-trust-head h2,
  body.home .yp-home-order-visual-head h2 { font-size:28px; }
  body.home .yp-home-trust-head p:last-child,
  body.home .yp-home-order-visual-head p:last-child { margin-inline:0; font-size:14px; }
  body.home .yp-home-trust-photos { grid-template-columns:minmax(0,1fr); gap:14px; }
  body.home .yp-home-trust-photo-media { aspect-ratio:4/3; }
  body.home .yp-home-trust-photo figcaption { padding:14px; }
  body.home .yp-home-trust-photo figcaption span { font-size:13px; }
  body.home .yp-home-trust-capabilities {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:14px;
  }
  body.home .yp-home-trust-capability { display:block; min-height:0; padding:14px 12px; overflow-wrap:anywhere; }
  body.home .yp-home-trust-capability > div { min-width:0; }
  body.home .yp-home-trust-icon { width:34px; height:34px; margin-bottom:10px; }
  body.home .yp-home-trust-capability h3 { font-size:15px; line-height:1.35; }
  body.home .yp-home-trust-capability p { font-size:13px; line-height:1.55; }
  body.home .yp-home-trust-more { margin-top:18px; text-align:left; }
  body.home .yp-home-order-visual-head { text-align:left; margin-bottom:24px; }
  body.home .yp-home-order-visual { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 12px; }
  body.home .yp-home-order-visual-step:not(:last-child)::after { display:none; }
  body.home .yp-home-order-visual-step h3 { margin-top:12px; font-size:15px; line-height:1.35; }
  body.home .yp-home-order-visual-step p { font-size:13px; line-height:1.5; }
  body.home .yp-home-order-visual-step { overflow-wrap:anywhere; }

  /* Shared mobile footer: brand and contact span both navigation columns. */
  .yp-footer { padding:32px 0 20px !important; }
  .yp-footer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:24px 18px !important; }
  .yp-footer-grid > div { min-width:0; }
  .yp-footer-brand,
  .yp-footer-contact { grid-column:1 / -1; }
  .yp-footer-logo { max-width:100%; padding:6px 9px; box-sizing:border-box; }
  .yp-footer-logo img { max-width:100% !important; width:auto !important; height:36px !important; object-fit:contain; }
  .yp-footer-brand p { margin:12px 0 0; font-size:13px; line-height:1.6; }
  .yp-footer h4 { margin:0 0 10px; font-size:15px; }
  .yp-footer-menu { margin:0; padding:0; }
  .yp-footer-menu li { margin:0; }
  .yp-footer-menu a { display:flex; align-items:center; min-height:44px; padding:7px 0; box-sizing:border-box; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
  .yp-footer-contact p { margin:0 0 8px; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
  .yp-footer-bottom { display:block; margin-top:24px; padding-top:16px; }
}