/* LAVI Mobile Compact Interface v1.5
   Objective: preserve the desktop visual rhythm on small screens while keeping
   touch targets usable and showing materially more content in each viewport. */
@media (max-width:700px){
  html{font-size:12px}
  body{font-size:12px;line-height:1.68}
  .container{width:calc(100% - 16px)}

  /* Compact desktop-like header */
  .site-header{position:sticky;top:0}
  .header-row{height:54px;gap:7px;padding:0}
  .brand{margin-left:0;flex:0 0 auto}
  .brand img{width:82px}
  .nav-toggle{display:none!important}
  .main-nav{
    position:static!important;display:flex!important;flex:1 1 auto;min-width:0;
    flex-direction:row!important;align-items:center!important;gap:12px!important;
    padding:0!important;border:0!important;background:transparent!important;
    overflow-x:auto;overscroll-behavior-inline:contain;white-space:nowrap;
    font-size:9px;scrollbar-width:none
  }
  .main-nav::-webkit-scrollbar{display:none}
  .main-nav a{padding:4px 0!important;flex:0 0 auto}
  .mobile-nav-actions{display:none!important}
  .header-actions{margin:0 0 0 auto;gap:4px;flex:0 0 auto}
  .header-call,.header-catalog{width:30px!important;height:30px!important;padding:0!important}
  .header-call svg,.header-catalog svg{width:15px!important;height:15px!important}
  .header-actions .header-cta{display:inline-flex!important;min-height:30px;padding:0 8px;font-size:8.5px;white-space:nowrap}

  /* Global density */
  .button{min-height:38px;padding:0 14px;font-size:11px}
  .button-small{min-height:30px;padding:0 10px;font-size:9px}
  .section{padding:36px 0}
  .section-tight{padding:20px 0}
  .section-head{margin-bottom:22px;gap:14px}
  .section-head h2,.story-grid h2,.split-callout h2,.cta-box h2,.roadmap h2{font-size:25px;line-height:1.42}
  .section-head>p{font-size:11px;line-height:1.7}
  .eyebrow{font-size:8px;margin-bottom:7px;letter-spacing:.13em}
  .page-hero,.page-hero.compact{padding:42px 0 30px}
  .page-hero h1{font-size:28px;line-height:1.42;margin-bottom:12px}
  .page-hero p{font-size:12px;line-height:1.75;margin-bottom:0}

  /* Home hero retains a two-column, catalogue-like composition */
  .hero-slider,.hero-slide{min-height:auto}
  .hero-slide{padding:34px 0 48px}
  .hero-slide .hero-grid,.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.03fr);gap:14px;align-items:center}
  .hero h1{font-size:26px;line-height:1.45;margin-bottom:10px}
  .hero-copy>p{font-size:11.5px;line-height:1.75;margin:0}
  .hero-actions{gap:6px;margin-top:14px}
  .hero-actions .button{width:auto;min-height:34px;padding:0 10px;font-size:9px}
  .hero-meta{gap:6px;margin-top:14px;font-size:8px;line-height:1.5}
  .hero-meta span+span:before{margin-left:6px}
  .hero-visual{height:260px}
  .hero-note{left:10px;bottom:9px;font-size:7px}
  .hero-controls{bottom:9px;gap:6px}
  .hero-arrow{width:27px;height:27px;font-size:12px}
  .hero-dot{width:6px;height:6px}.hero-dot.active{width:18px}

  /* Product/category listing: two cards per row */
  .category-grid,.products-grid,.listing-grid,.category-grid-dynamic{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .category-card{grid-template-rows:150px auto}
  .category-card>div:last-child{padding:13px}
  .category-card h3{font-size:16px;margin:4px 0}
  .category-card p{font-size:9.5px;line-height:1.65;margin-bottom:8px}
  .category-card span,.category-card strong,.text-link{font-size:8.5px}
  .product-visual{height:175px}
  .product-info{padding:12px}
  .product-info>div{display:flex;gap:6px}
  .product-info h2,.product-info h3{font-size:15px;line-height:1.45}
  .product-info span{font-size:8px}
  .product-info p{font-size:9.5px;line-height:1.7;margin:7px 0 9px}

  /* Single product page: image and information remain side-by-side */
  .product-detail.section{padding:28px 0 36px}
  .product-detail-grid{grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:14px;align-items:start}
  .product-stage{height:285px;min-width:0}
  .product-stage>span{right:8px;top:8px;padding:3px 6px;font-size:8px}
  .product-stage small{left:8px;bottom:8px;font-size:6.5px;letter-spacing:.1em}
  .product-copy{min-width:0}
  .product-copy h1{font-size:25px;line-height:1.42;margin:0 0 8px}
  .product-copy .lead{font-size:11.5px;line-height:1.72;margin:0 0 8px}
  .product-copy>p{font-size:9.5px;line-height:1.72;margin:0 0 8px}
  .specs{margin:12px 0}
  .specs div{grid-template-columns:66px 1fr;gap:7px;padding:7px 0;font-size:8.8px;line-height:1.6}
  .hero-actions{margin-top:12px}
  .product-copy .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .product-copy .hero-actions .button{width:100%;min-height:34px;padding:0 7px;font-size:8.5px}

  /* Feature/process rows stay visible as compact horizontal cards */
  .feature-row,.process-grid,.values-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .feature-row article,.process-grid article,.values-grid article{padding:14px 10px;border-left:1px solid var(--lavi-line,#ddd);border-bottom:0}
  .feature-row article:last-child{border-left:0}
  .feature-row h2,.process-grid h2,.values-grid h2{font-size:12px;margin:4px 0 2px}
  .feature-row p,.process-grid p,.values-grid p{font-size:8.5px;line-height:1.65}
  .feature-row span,.process-grid span,.values-grid span{font-size:8px}

  /* Configurator heading mirrors the compact desktop screenshot */
  .door-configurator-section{padding:36px 0}
  .configurator-heading{display:flex!important;align-items:flex-end!important;justify-content:space-between;gap:18px;margin-bottom:20px}
  .configurator-heading h2{font-size:25px}
  .configurator-heading>p{max-width:46%;font-size:9.5px;line-height:1.7;margin:0!important}
  .door-configurator{gap:12px}
  .configurator-step,.configurator-preview-card,.configurator-palette-card,.configuration-result{padding:12px}
  .step-title{gap:9px;margin-bottom:12px}
  .step-title>span{width:28px;height:28px;flex-basis:28px;font-size:8px}
  .step-title h3{font-size:15px;line-height:1.4;margin:0}
  .step-title p{font-size:8.5px;line-height:1.55}

  /* 5 patterns in a 3 + 2 grid rather than oversized scrolling cards */
  .pattern-options{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible;padding:0}
  .pattern-option{min-width:0;min-height:102px;padding:9px 7px;flex:auto}
  .pattern-mini{width:34px;height:45px;border-width:2px;gap:1px;padding:1px}
  .pattern-option b{font-size:9px;line-height:1.45;margin-top:6px}
  .pattern-option small{font-size:7px;line-height:1.45;margin-top:2px}

  .configurator-workspace{grid-template-columns:1fr;gap:12px}
  .wardrobe-plan-wrap{padding:5px 22px 34px 3px}
  .wardrobe-plan{height:315px;border-width:4px;padding:3px;gap:3px}
  .config-door{gap:3px}
  .config-door>small{bottom:-25px;font-size:8px}
  .config-panel{padding:2px}
  .config-panel.active{outline-width:2px;outline-offset:-4px;box-shadow:inset 0 0 0 5px var(--lavi-burgundy,#701d20)}
  .config-panel span{font-size:7px;padding:1px 3px}
  .config-panel b{font-size:6.5px;padding:1px 3px}
  .wardrobe-dimension{font-size:7px}
  .wardrobe-height{bottom:35px;width:18px}
  .wardrobe-height span{padding:0 3px}
  .wardrobe-width{right:25px;left:3px;height:16px}
  .wardrobe-width span{top:5px;padding:0 4px}
  .active-panel-status{grid-template-columns:auto 1fr auto 1fr;gap:5px 7px;padding:8px 0;margin-top:3px}
  .active-panel-status span{font-size:7.5px}.active-panel-status b{font-size:8.5px}
  .plan-tools{flex-direction:row;align-items:center;margin-top:8px;gap:8px}
  .text-tool{font-size:8px}

  /* Five swatches per row like the desktop-density reference */
  .door-color-palette{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .door-color{padding:4px}
  .door-color>span{margin-bottom:3px}
  .door-color b{font-size:7.5px}.door-color small{font-size:6.5px}
  .palette-note{font-size:8px;line-height:1.6;margin-top:10px;padding:8px 9px}

  /* Keep result data compact instead of stacking each value */
  .configuration-result{padding:13px}
  .configuration-summary{margin-bottom:14px}
  .summary-head{grid-template-columns:1.25fr .65fr 1fr}
  .summary-head>div{padding:8px;border-left:1px solid var(--lavi-line,#ddd);border-bottom:0}
  .summary-head span,.summary-head small{font-size:7px}
  .summary-head b{font-size:9px;margin:1px 0}
  .summary-doors{grid-template-columns:repeat(var(--door-count,2),minmax(0,1fr))!important}
  .summary-doors article{padding:8px;border-left:1px solid var(--lavi-line,#ddd);border-bottom:0}
  .summary-doors h4{font-size:9px;margin-bottom:4px}
  .summary-doors article>div{grid-template-columns:16px 1fr auto;gap:4px;padding:4px 0}
  .summary-doors i{width:14px;height:14px}
  .summary-doors span,.summary-doors b,.summary-doors small{font-size:6.8px}
  .configuration-form .form-row,.form-row{grid-template-columns:1fr 1fr;gap:8px}
  .configuration-form label,.inquiry-form label{font-size:9px;margin-bottom:9px}
  .configuration-form input,.configuration-form textarea,.inquiry-form input,.inquiry-form select,.inquiry-form textarea{padding:8px 9px;margin-top:4px;font-size:9.5px}
  .configuration-submit{min-height:36px;font-size:9px}

  /* Other pages and footer */
  .tabs{gap:5px;margin-bottom:18px;overflow-x:auto;white-space:nowrap}
  .tabs a{padding:7px 10px;font-size:9px}
  .contact-grid,.story-grid,.roadmap{grid-template-columns:.85fr 1.15fr;gap:14px}
  .contact-panel,.inquiry-form{padding:16px}
  .contact-panel h2{font-size:20px}.contact-panel dd{font-size:11px}.contact-panel dt,.contact-panel>p{font-size:8px}
  .story-grid p{font-size:11px}
  .cta-box{padding:22px 18px;gap:14px}
  .site-footer{padding:32px 0 14px}
  .footer-grid{grid-template-columns:1.2fr .8fr .8fr;gap:14px}
  .footer-grid section:first-child{grid-column:auto}
  .footer-logo{width:90px;margin-bottom:5px}
  .footer-grid h2{font-size:10px}.footer-grid p,.footer-grid a,.footer-grid span{font-size:8px;line-height:1.6}
  .footer-bottom{display:flex;margin-top:20px;padding-top:10px;font-size:7.5px}
}

/* Extra narrow screens: preserve density, but prevent unreadable collisions. */
@media (max-width:350px){
  .header-actions .header-cta{display:none!important}
  .main-nav{gap:9px;font-size:8px}
  .brand img{width:74px}
  .product-detail-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:9px}
  .product-stage{height:250px}
  .product-copy h1{font-size:21px}
  .pattern-option{min-height:96px;padding:7px 5px}
  .wardrobe-plan{height:285px}
  .door-color-palette{grid-template-columns:repeat(4,minmax(0,1fr))}
}