/* Final visual QA corrections
   Keeps the TypeScale / Material 3 hierarchy and the Atlassian 8 px rhythm,
   while removing the last sub-12 px readable labels found during responsive testing. */

/* Product cards use the same title/body steps on every viewport. */
#collection .product-card h3,
#collection .product-card:nth-child(n) h3 {
  min-height: 3rem !important;
   /* 20 px */
  line-height: 1.2 !important;   /* 24 px */
}
#collection .product-card-copy p,
#collection .product-card:nth-child(n) .product-card-copy p {
   /* 14 px */
  line-height: 1.5 !important;
}

/* Footer previously resolved to 11.52 px on narrow screens. */
footer p,
footer p span {
   /* 12 px minimum readable size */
  line-height: 1.5 !important;
}

/* Selection dialog: readable secondary copy at all breakpoints. */
.inquiry-dialog .choice-copy small,
.inquiry-dialog .service-copy small,
.inquiry-dialog .service-label,
.inquiry-dialog .service-tags i,
.inquiry-dialog .service-visual-caption,
.inquiry-dialog .choice-actions p,
.inquiry-dialog .selected-order-type span,
.inquiry-dialog .selected-order button {
  
  line-height: 1.5 !important;
}

/* Configurator labels, metadata and live price captions. */
.inquiry-dialog .configurator-eyebrow,
.inquiry-dialog .configurator-note,
.inquiry-dialog .configurator-fields-heading > span,
.inquiry-dialog .config-field-top > span:first-child,
.inquiry-dialog .config-field-label small,
.inquiry-dialog .option-meta,
.inquiry-dialog .option-price,
.inquiry-dialog .configurator-price small,
.inquiry-dialog .submit-price small,
.inquiry-dialog .phone-brand,
.inquiry-dialog .phone-model {
  
  line-height: 1.5 !important;
}

/* Detailed specifications remain compact, but never become microtext. */
.inquiry-dialog .spec-heading-row span,
.inquiry-dialog .spec-heading-row b,
.inquiry-dialog .spec-measure-note,
.inquiry-dialog .spec-grid p,
.inquiry-dialog .spec-facts span,
.inquiry-dialog .phone-spec-models p,
.inquiry-dialog .table-scroll th,
.inquiry-dialog .table-scroll td {
  
  line-height: 1.5 !important;
}

/* Required-field chips in both the configurator and contact form. */
.inquiry-dialog .modern-field > span small,
.inquiry-dialog .modern-field-label small,
.inquiry-dialog .upload-copy small {
  
  line-height: 1.5 !important;
}

@media (max-width: 44rem) {
  /* Preserve the fixed card geometry after moving the title to the 20 px step. */
  #collection .product-card h3,
  #collection .product-card:nth-child(n) h3 {
    min-height: 3rem !important;
  }

  /* Give enlarged metadata enough room without crowding selection controls. */
  .inquiry-dialog .modern-option {
    row-gap: .35rem !important;
  }
  .inquiry-dialog .option-copy {
    gap: .2rem !important;
  }
}


/* US launch QA additions */
.form-consent{display:flex;gap:12px;align-items:flex-start;margin:4px 0 20px;color:var(--text-soft,#b9b2c8);font-size:14px;line-height:1.5;cursor:pointer}.form-consent input{width:18px;height:18px;margin-top:2px;accent-color:#a98aff;flex:0 0 auto}.form-consent small{color:#a98aff;text-transform:uppercase;letter-spacing:.06em;font-size:10px}.button:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #c6b2ff;outline-offset:3px}.form-success.is-error{color:#ffb4b4}.form-success.is-success{color:#a9f4c4}@media(max-width:640px){.form-consent{font-size:13px}}

/* The hidden attribute must win over legacy layout rules that use display: ... !important. */
[hidden]{display:none!important}

/* Mobile dialog: keep the sticky progress control legible instead of letting
   section headings show through underneath it while the dialog scrolls. */
@media (max-width:760px){
  .order-progress,
  .order-progress.order-progress-form{
    top:0!important;
    min-height:66px!important;
    margin:0 -16px!important;
    padding:12px 64px 12px 16px!important;
    background:rgba(8,7,12,.96)!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    box-shadow:0 12px 30px rgba(0,0,0,.24)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }
  .order-progress ol{max-width:260px!important;margin:0 auto!important}
}

.noscript-notice{position:relative;z-index:200;padding:12px 18px;background:#2a183a;color:#f5efff;text-align:center;font-size:14px;line-height:1.5}
.noscript-notice a{color:#d9c9ff}
.footer-links{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.footer-links a{color:inherit;text-decoration:none}
.footer-links a:hover,.footer-links a:focus-visible{color:#d6c8ff}

/* Mobile progress layout fix: remove the opaque sticky strip and keep the
   compact progress capsule in normal document flow so it cannot cover the
   heading below it. */
@media (max-width:760px){
  .order-progress,
  .order-progress.order-progress-form{
    position:relative!important;
    top:auto!important;
    z-index:3!important;
    min-height:0!important;
    margin:0!important;
    padding:8px 48px 12px 0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .order-progress ol{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:4px!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:3px!important;
  }
  .order-progress li{
    min-width:0!important;
    min-height:36px!important;
    padding:4px 5px!important;
    gap:4px!important;
    justify-content:center!important;
    font-size:11px!important;
  }
  .order-progress li i{
    width:24px!important;
    height:24px!important;
    flex:0 0 24px!important;
    font-size:10px!important;
  }
  .order-progress li span{
    display:block!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .order-progress + .dialog-copy,
  .order-progress + .compact-dialog-copy{
    margin-top:0!important;
  }
}

@media (max-width:390px){
  .order-progress,
  .order-progress.order-progress-form{
    padding-right:44px!important;
  }
  .order-progress li{
    gap:0!important;
    padding-inline:3px!important;
  }
  .order-progress li span{display:none!important}
  .order-progress li i{
    width:28px!important;
    height:28px!important;
    flex-basis:28px!important;
    font-size:11px!important;
  }
}

/* Mobile order intro typography: create a cleaner two-line title and remove
   the oversized hero-card height on narrow screens. */
@media (max-width:760px){
  .order-step .dialog-copy,
  .order-step .order-choice-heading{
    min-height:0!important;
    padding:22px 16px 20px!important;
  }
  #choiceTitle{
    width:100%!important;
    max-width:100%!important;
    margin-top:10px!important;
    font-size:34px!important;
    line-height:.98!important;
    letter-spacing:-.035em!important;
    text-wrap:balance;
  }
  #choiceTitle br{display:none!important}
  #choiceTitle em{
    display:block!important;
    margin-top:.08em!important;
  }
  .order-step .dialog-copy .kicker{
    margin-bottom:0!important;
    font-size:12px!important;
    line-height:1.35!important;
  }
  .order-step .dialog-copy>p:last-child{
    max-width:34rem!important;
    margin-top:16px!important;
    font-size:15px!important;
    line-height:1.55!important;
  }
}

@media (max-width:390px){
  #choiceTitle{
    font-size:31px!important;
    line-height:1!important;
  }
}


/* Final mobile order-heading and brand-logo corrections. */
.brand-symbol img[src*="mireora-mark.svg"]{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
}

@media (max-width:760px){
  /* Keep every order heading in normal flow and prevent inherited fixed heights. */
  .inquiry-dialog .dialog-copy,
  .inquiry-dialog .compact-dialog-copy,
  .inquiry-dialog .order-choice-heading,
  .inquiry-dialog .configurator-intro,
  .inquiry-dialog .configurator-fields-heading,
  .inquiry-dialog .form-section-head,
  .inquiry-dialog .choice-section-heading{
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
  }

  .inquiry-dialog .order-step .dialog-copy h2,
  .inquiry-dialog #choiceTitle{
    width:100%!important;
    max-width:13ch!important;
    margin:8px 0 0!important;
    font-size:34px!important;
    line-height:1.04!important;
    letter-spacing:-.032em!important;
    text-wrap:balance!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  .inquiry-dialog #choiceTitle br{display:none!important}
  .inquiry-dialog #choiceTitle em{
    display:block!important;
    margin-top:.06em!important;
    line-height:1.05!important;
  }

  .inquiry-dialog .choice-section{
    margin-top:36px!important;
  }
  .inquiry-dialog .choice-section-heading{
    display:block!important;
    margin-bottom:16px!important;
    padding-bottom:12px!important;
  }
  .inquiry-dialog .choice-section-heading h3{
    max-width:100%!important;
    margin:0!important;
    font-size:24px!important;
    line-height:1.18!important;
    letter-spacing:-.02em!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  .inquiry-dialog .configurator-intro{
    justify-content:flex-start!important;
    padding:22px 18px!important;
  }
  .inquiry-dialog .configurator-intro h3{
    max-width:100%!important;
    margin:8px 0 0!important;
    font-size:30px!important;
    line-height:1.08!important;
    letter-spacing:-.028em!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    text-wrap:balance!important;
  }
  .inquiry-dialog .configurator-summary{
    margin-top:14px!important;
    font-size:15px!important;
    line-height:1.5!important;
  }

  .inquiry-dialog .configurator-fields-heading,
  .inquiry-dialog .form-section-head{
    grid-template-columns:36px minmax(0,1fr)!important;
    align-items:start!important;
    gap:12px!important;
    margin-top:24px!important;
    padding:20px 0 14px!important;
  }
  .inquiry-dialog .form-step-number,
  .inquiry-dialog .configurator-fields-heading > span{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    font-size:12px!important;
  }
  .inquiry-dialog .configurator-fields-heading > div,
  .inquiry-dialog .form-section-head > div{
    min-width:0!important;
  }
  .inquiry-dialog .configurator-fields-heading small,
  .inquiry-dialog .form-section-head small{
    margin:0 0 3px!important;
    font-size:12px!important;
    line-height:1.35!important;
    white-space:normal!important;
  }
  .inquiry-dialog .configurator-fields-heading h4,
  .inquiry-dialog .form-section-head h3{
    max-width:100%!important;
    margin:0!important;
    font-size:22px!important;
    line-height:1.18!important;
    letter-spacing:-.018em!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }

  .inquiry-dialog .config-field-top,
  .inquiry-dialog .field-heading{
    align-items:flex-start!important;
    gap:10px!important;
  }
  .inquiry-dialog .config-field h5,
  .inquiry-dialog .field-heading h4,
  .inquiry-dialog .field-heading h5{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    line-height:1.25!important;
  }
}

@media (max-width:390px){
  .inquiry-dialog .order-step .dialog-copy h2,
  .inquiry-dialog #choiceTitle{
    font-size:30px!important;
    max-width:12ch!important;
  }
  .inquiry-dialog .configurator-intro h3{font-size:27px!important}
  .inquiry-dialog .choice-section-heading h3{font-size:22px!important}
  .inquiry-dialog .configurator-fields-heading h4,
  .inquiry-dialog .form-section-head h3{font-size:20px!important}
}

/* Brand mark: use the original logo without a badge/container. */
.brand-symbol{
  width:38px!important;
  height:38px!important;
  aspect-ratio:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.brand-symbol img[src*="mireora-mark.svg"]{
  width:32px!important;
  height:32px!important;
  object-fit:contain!important;
}
footer .brand-symbol{
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}
@media (max-width:760px){
  .brand-symbol{width:34px!important;height:34px!important}
  .brand-symbol img[src*="mireora-mark.svg"]{width:29px!important;height:29px!important}
}

/* Mobile form reliability fixes — photo picker, color swatches, final price panel */
@media (max-width: 760px) {
  .upload-card {
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .upload-card input[type="file"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 5 !important;
    font-size: 100px !important;
  }

  .upload-card > *:not(input[type="file"]) {
    pointer-events: none !important;
  }

  .modern-options.is-colors {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  .modern-options.is-colors .color-option {
    width: 100% !important;
    min-width: 0 !important;
    height: 72px !important;
    min-height: 72px !important;
    margin: 0 !important;
    place-self: stretch !important;
  }

  .submit-panel,
  .submit-panel-copy {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .submit-panel-copy {
    width: 100% !important;
  }

  .submit-panel-copy strong,
  .submit-panel-copy span {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}

@media (max-width: 390px) {
  .modern-options.is-colors {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile final CTA typography balance */
@media (max-width: 760px) {
  .final-cta {
    min-height: 0 !important;
    padding-top: 52px !important;
    padding-bottom: 56px !important;
  }

  .final-cta .kicker {
    margin-bottom: 22px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    letter-spacing: .08em !important;
  }

  .final-cta h2 {
    max-width: 9.5ch !important;
    margin: 0 auto 34px !important;
    font-size: clamp(52px, 13vw, 72px) !important;
    line-height: .95 !important;
    letter-spacing: -.035em !important;
    text-wrap: balance !important;
  }

  .final-cta h2 em {
    display: inline !important;
  }
}

@media (max-width: 380px) {
  .final-cta h2 {
    max-width: 10ch !important;
    font-size: 48px !important;
    line-height: .98 !important;
  }
}

/* Mobile typography correction — visibly smaller, balanced headings */
@media (max-width: 760px) {
  .hero {
    padding-top: 96px !important;
  }

  .hero h1 {
    max-width: 8.5ch !important;
    margin-top: 18px !important;
    font-size: clamp(44px, 12vw, 56px) !important;
    line-height: .96 !important;
    letter-spacing: -.035em !important;
    text-wrap: balance !important;
  }

  .hero-text {
    max-width: 31ch !important;
    margin-top: 24px !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
  }

  .final-cta {
    min-height: 560px !important;
    padding: 56px 24px !important;
    justify-content: center !important;
  }

  .final-cta .kicker {
    margin-bottom: 24px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  .final-cta h2 {
    max-width: 10ch !important;
    margin: 0 auto 36px !important;
    font-size: clamp(44px, 11.5vw, 54px) !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
    text-wrap: balance !important;
  }

  .final-cta .button {
    width: min(100%, 360px) !important;
  }
}

@media (max-width: 390px) {
  .hero h1 {
    font-size: 42px !important;
    max-width: 8.2ch !important;
  }

  .hero-text {
    font-size: 16px !important;
  }

  .final-cta {
    min-height: 520px !important;
    padding-inline: 20px !important;
  }

  .final-cta h2 {
    max-width: 9.5ch !important;
    font-size: 42px !important;
    line-height: 1 !important;
  }
}

/* =========================================================
   MOBILE TYPOGRAPHY AUDIT — global scale correction
   Keeps every landing and order-flow heading within a compact
   mobile hierarchy instead of fixing isolated sections only.
   ========================================================= */
@media (max-width: 760px) {
  .hero h1,
  .final-cta h2 {
    font-size: clamp(38px, 10.5vw, 44px) !important;
    line-height: 1 !important;
    letter-spacing: -.03em !important;
    max-width: 10.5ch !important;
  }

  .collection .section-intro h2,
  .design-copy h2,
  .process .section-intro h2,
  .studio-copy h2 {
    font-size: clamp(34px, 9.2vw, 40px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.028em !important;
    max-width: 12ch !important;
  }

  .dialog-copy h2,
  .inquiry-dialog .dialog-copy h2 {
    font-size: 30px !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
  }

  .choice-section-heading h3,
  .configurator-head h3,
  .configurator-intro h3,
  .form-section-head h3,
  .inquiry-dialog .configurator-intro h3,
  .inquiry-dialog .choice-section-heading h3,
  .inquiry-dialog .form-section-head h3 {
    font-size: 24px !important;
    line-height: 1.16 !important;
  }

  .service-copy > strong,
  .choice-copy strong,
  #collection .product-card h3,
  .process-card h3 {
    font-size: 20px !important;
    line-height: 1.22 !important;
  }

  .hero-text,
  .section-intro > p,
  .design-copy > p:not(.kicker),
  .studio-copy > p:last-child,
  .final-cta p {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .hero,
  .final-cta {
    min-height: 0 !important;
  }
}

@media (max-width: 390px) {
  .hero h1,
  .final-cta h2 {
    font-size: 36px !important;
    max-width: 10.5ch !important;
  }

  .collection .section-intro h2,
  .design-copy h2,
  .process .section-intro h2,
  .studio-copy h2 {
    font-size: 32px !important;
  }

  .dialog-copy h2,
  .inquiry-dialog .dialog-copy h2 {
    font-size: 28px !important;
  }
}