/*
 * BESTWOO mobile batch 10
 * Project case detail pages only.
 * All rules are protected by mobile media queries; PC styles are untouched.
 */

@media (max-width: 820px) {
  .BESTWOO-case-main {
    overflow-x: clip;
  }

  .BESTWOO-case-main .BESTWOO-container {
    width: min(100% - 32px, 1180px);
  }

  /* Hero */
  .BESTWOO-case-main .BESTWOO-case-hero {
    min-height: 0 !important;
    background-position: 58% center !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(5, 18, 17, .38) 0%,
      rgba(5, 18, 17, .72) 54%,
      rgba(5, 18, 17, .94) 100%
    ) !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-inner {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: stretch !important;
    padding: 34px 0 30px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-copy,
  .BESTWOO-case-main .BESTWOO-case-hero-summary {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .BESTWOO-case-main .BESTWOO-case-breadcrumb {
    flex-wrap: nowrap !important;
    gap: 7px !important;
    margin-bottom: 12px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-width: none !important;
    white-space: nowrap !important;
  }

  .BESTWOO-case-main .BESTWOO-case-breadcrumb::-webkit-scrollbar {
    display: none !important;
  }

  .BESTWOO-case-main .BESTWOO-case-breadcrumb em {
    max-width: 58vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .BESTWOO-case-main .BESTWOO-case-tag {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 38px !important;
    padding: 8px 13px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-copy h1 {
    max-width: 720px !important;
    margin: 15px 0 13px !important;
    font-size: clamp(34px, 8.5vw, 52px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.038em !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-copy > p {
    max-width: 720px !important;
    font-size: 15px !important;
    line-height: 1.72 !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 21px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-actions .BESTWOO-btn,
  .BESTWOO-case-main .BESTWOO-case-ghost-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 10px 13px !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-points {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-points > div {
    min-width: 0 !important;
    padding: 15px !important;
    border-radius: 16px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-points strong {
    margin-bottom: 6px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-points span {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-summary {
    align-self: stretch !important;
    padding: 20px !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 50px rgba(8, 19, 17, .16) !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-summary h2 {
    margin-bottom: 14px !important;
    font-size: 24px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-summary ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-summary li {
    display: block !important;
    min-width: 0 !important;
    padding: 12px !important;
    border: 1px solid #eadfce !important;
    border-radius: 14px !important;
    background: #fffaf4 !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-summary li span,
  .BESTWOO-case-main .BESTWOO-case-hero-summary li strong {
    display: block !important;
    min-width: 0 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-summary li span {
    margin-bottom: 5px !important;
    font-size: 12px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-summary li strong {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  /* Common sections */
  .BESTWOO-case-main .BESTWOO-case-section {
    padding: 56px 0 !important;
  }

  .BESTWOO-case-main .BESTWOO-case-section-head {
    margin-bottom: 22px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-section-head > span {
    margin-bottom: 9px !important;
    font-size: 11px !important;
    letter-spacing: .14em !important;
  }

  .BESTWOO-case-main .BESTWOO-case-section-head h2 {
    margin-bottom: 11px !important;
    font-size: clamp(28px, 6.5vw, 40px) !important;
    line-height: 1.14 !important;
    letter-spacing: -.03em !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  .BESTWOO-case-main .BESTWOO-case-section-head p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  /* Suitable scenarios */
  .BESTWOO-case-main .BESTWOO-case-fit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-fit-grid article {
    min-height: 0 !important;
    padding: 20px !important;
    border-radius: 20px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-fit-grid h3 {
    margin: 14px 0 9px !important;
    font-size: 21px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-fit-grid p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  /* Specs */
  .BESTWOO-case-main .BESTWOO-case-spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-spec-card {
    min-height: 0 !important;
    padding: 20px !important;
    border-radius: 20px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-spec-card h3 {
    margin-bottom: 11px !important;
    font-size: 21px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-spec-card p,
  .BESTWOO-case-main .BESTWOO-case-spec-card li {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  .BESTWOO-case-main .BESTWOO-case-spec-card dl {
    gap: 0 !important;
  }

  .BESTWOO-case-main .BESTWOO-case-spec-card dl > div {
    grid-template-columns: minmax(84px, .38fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 11px 0 !important;
  }

  .BESTWOO-case-main .BESTWOO-case-spec-card dt,
  .BESTWOO-case-main .BESTWOO-case-spec-card dd {
    overflow-wrap: anywhere !important;
  }

  /* Project visuals */
  .BESTWOO-case-main .BESTWOO-case-visual-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "main main"
      "carda cardb"
      "cardc cardd" !important;
    grid-template-rows: 300px 210px 210px !important;
    grid-auto-rows: 210px !important;
    gap: 12px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-visual-grid > article {
    min-height: 0 !important;
    border-radius: 20px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-visual-main {
    min-height: 300px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-visual-grid span {
    left: 13px !important;
    bottom: 13px !important;
    max-width: calc(100% - 26px) !important;
    padding: 7px 10px !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }

  /* Workflow */
  .BESTWOO-case-main .BESTWOO-case-solution-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-solution-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-solution-list article {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 16px !important;
    border-radius: 17px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-solution-list b {
    width: 44px !important;
    height: 44px !important;
    font-size: 13px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-solution-list h3 {
    font-size: 18px !important;
    overflow-wrap: anywhere !important;
  }

  .BESTWOO-case-main .BESTWOO-case-solution-list p {
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  /* Quotation checklist */
  .BESTWOO-case-main .BESTWOO-case-checklist-panel {
    grid-template-columns: minmax(0, 1fr) minmax(250px, .72fr) !important;
    gap: 12px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-checklist-main,
  .BESTWOO-case-main .BESTWOO-case-checklist-side {
    min-width: 0 !important;
    padding: 20px !important;
    border-radius: 20px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-checklist-main h3,
  .BESTWOO-case-main .BESTWOO-case-checklist-side h3 {
    margin-bottom: 13px !important;
    font-size: 21px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-checklist-main ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-checklist-main li {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 13px 12px 13px 34px !important;
    font-size: 14px !important;
    overflow-wrap: anywhere !important;
  }

  .BESTWOO-case-main .BESTWOO-case-checklist-side p {
    font-size: 14px !important;
    line-height: 1.68 !important;
  }

  .BESTWOO-case-main .BESTWOO-case-checklist-side .BESTWOO-btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Next step */
  .BESTWOO-case-main .BESTWOO-case-next-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-next-grid a {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 19px !important;
    border-radius: 19px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-next-grid span {
    margin-bottom: 12px !important;
    font-size: 10px !important;
    letter-spacing: .1em !important;
  }

  .BESTWOO-case-main .BESTWOO-case-next-grid h3 {
    margin-bottom: 9px !important;
    font-size: 20px !important;
    overflow-wrap: anywhere !important;
  }

  .BESTWOO-case-main .BESTWOO-case-next-grid p {
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  /* Final CTA */
  .BESTWOO-case-main .BESTWOO-case-quote {
    padding: 58px 0 !important;
  }

  .BESTWOO-case-main .BESTWOO-case-quote-box {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 20px !important;
    align-items: center !important;
    padding: 27px !important;
    border-radius: 24px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-quote-box h2 {
    margin: 10px 0 !important;
    font-size: clamp(27px, 6vw, 38px) !important;
    overflow-wrap: anywhere !important;
  }

  .BESTWOO-case-main .BESTWOO-case-quote-box p {
    font-size: 14px !important;
    line-height: 1.68 !important;
  }

  .BESTWOO-case-main .BESTWOO-case-quote-box .BESTWOO-btn {
    min-width: 180px !important;
    margin: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* English wrapping protection */
  html:lang(en) .BESTWOO-case-main h1,
  html:lang(en) .BESTWOO-case-main h2,
  html:lang(en) .BESTWOO-case-main h3,
  html:lang(en) .BESTWOO-case-main p,
  html:lang(en) .BESTWOO-case-main strong,
  html:lang(en) .BESTWOO-case-main a,
  html:lang(en) .BESTWOO-case-main li,
  html:lang(en) .BESTWOO-case-main dt,
  html:lang(en) .BESTWOO-case-main dd,
  html:lang(en) .BESTWOO-case-main span {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }
}

@media (max-width: 599px) {
  .BESTWOO-case-main .BESTWOO-container {
    width: min(100% - 24px, 1180px);
  }

  .BESTWOO-case-main .BESTWOO-case-hero {
    background-position: 62% center !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-inner {
    padding: 27px 0 24px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-breadcrumb {
    font-size: 12px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-copy h1 {
    font-size: clamp(31px, 10vw, 42px) !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-actions {
    grid-template-columns: 1fr !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-points {
    display: flex !important;
    gap: 10px !important;
    margin-right: -12px !important;
    padding-right: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-width: none !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-points::-webkit-scrollbar {
    display: none !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-points > div {
    flex: 0 0 min(78vw, 290px) !important;
    scroll-snap-align: start !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-summary {
    padding: 17px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-summary ul {
    grid-template-columns: 1fr !important;
  }

  .BESTWOO-case-main .BESTWOO-case-section {
    padding: 48px 0 !important;
  }

  .BESTWOO-case-main .BESTWOO-case-fit-grid {
    display: flex !important;
    gap: 10px !important;
    margin-right: -12px !important;
    padding-right: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-width: none !important;
  }

  .BESTWOO-case-main .BESTWOO-case-fit-grid::-webkit-scrollbar {
    display: none !important;
  }

  .BESTWOO-case-main .BESTWOO-case-fit-grid article {
    flex: 0 0 min(84vw, 315px) !important;
    scroll-snap-align: start !important;
  }

  .BESTWOO-case-main .BESTWOO-case-spec-grid,
  .BESTWOO-case-main .BESTWOO-case-solution-list,
  .BESTWOO-case-main .BESTWOO-case-checklist-panel {
    grid-template-columns: 1fr !important;
  }

  .BESTWOO-case-main .BESTWOO-case-spec-card {
    padding: 18px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-spec-card dl > div {
    grid-template-columns: 92px minmax(0, 1fr) !important;
  }

  .BESTWOO-case-main .BESTWOO-case-visual-grid {
    display: flex !important;
    gap: 10px !important;
    margin-right: -12px !important;
    padding-right: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-width: none !important;
  }

  .BESTWOO-case-main .BESTWOO-case-visual-grid::-webkit-scrollbar {
    display: none !important;
  }

  .BESTWOO-case-main .BESTWOO-case-visual-grid > article,
  .BESTWOO-case-main .BESTWOO-case-visual-main {
    flex: 0 0 min(88vw, 360px) !important;
    width: auto !important;
    min-height: 250px !important;
    height: 250px !important;
    scroll-snap-align: start !important;
  }

  .BESTWOO-case-main .BESTWOO-case-solution-list {
    display: flex !important;
    gap: 10px !important;
    margin-right: -12px !important;
    padding-right: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-width: none !important;
  }

  .BESTWOO-case-main .BESTWOO-case-solution-list::-webkit-scrollbar {
    display: none !important;
  }

  .BESTWOO-case-main .BESTWOO-case-solution-list article {
    flex: 0 0 min(86vw, 330px) !important;
    scroll-snap-align: start !important;
  }

  .BESTWOO-case-main .BESTWOO-case-checklist-main ul {
    grid-template-columns: 1fr !important;
  }

  .BESTWOO-case-main .BESTWOO-case-next-grid {
    display: flex !important;
    gap: 10px !important;
    margin-right: -12px !important;
    padding-right: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-width: none !important;
  }

  .BESTWOO-case-main .BESTWOO-case-next-grid::-webkit-scrollbar {
    display: none !important;
  }

  .BESTWOO-case-main .BESTWOO-case-next-grid a {
    flex: 0 0 min(84vw, 315px) !important;
    scroll-snap-align: start !important;
  }

  .BESTWOO-case-main .BESTWOO-case-quote {
    padding: 48px 0 !important;
  }

  .BESTWOO-case-main .BESTWOO-case-quote-box {
    grid-template-columns: 1fr !important;
    padding: 22px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-quote-box .BESTWOO-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 419px) {
  .BESTWOO-case-main .BESTWOO-case-tag {
    font-size: 12px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-section-head h2 {
    font-size: 28px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-summary h2,
  .BESTWOO-case-main .BESTWOO-case-fit-grid h3,
  .BESTWOO-case-main .BESTWOO-case-spec-card h3,
  .BESTWOO-case-main .BESTWOO-case-checklist-main h3,
  .BESTWOO-case-main .BESTWOO-case-checklist-side h3 {
    font-size: 20px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-spec-card dl > div {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }

  .BESTWOO-case-main .BESTWOO-case-visual-grid > article,
  .BESTWOO-case-main .BESTWOO-case-visual-main {
    flex-basis: 86vw !important;
    height: 232px !important;
    min-height: 232px !important;
  }
}

@media (max-width: 360px) {
  .BESTWOO-case-main .BESTWOO-container {
    width: min(100% - 20px, 1180px);
  }

  .BESTWOO-case-main .BESTWOO-case-hero-copy h1 {
    font-size: 29px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-summary,
  .BESTWOO-case-main .BESTWOO-case-fit-grid article,
  .BESTWOO-case-main .BESTWOO-case-spec-card,
  .BESTWOO-case-main .BESTWOO-case-checklist-main,
  .BESTWOO-case-main .BESTWOO-case-checklist-side,
  .BESTWOO-case-main .BESTWOO-case-next-grid a,
  .BESTWOO-case-main .BESTWOO-case-quote-box {
    border-radius: 17px !important;
  }

  .BESTWOO-case-main .BESTWOO-case-hero-points > div,
  .BESTWOO-case-main .BESTWOO-case-fit-grid article,
  .BESTWOO-case-main .BESTWOO-case-solution-list article,
  .BESTWOO-case-main .BESTWOO-case-next-grid a {
    flex-basis: 88vw !important;
  }
}