/* Source: concretta-mobile-product-detail-v429.css */
/* CONCRETTA V429 — product/model detail responsive safety layer.
   Scope: cpd289/cpd291 model-detail pages only. Desktop >=1181px remains untouched.
   Extends the V425 index/V426 inner-page mobile safety model for iPhone, Android/Samsung,
   portrait/landscape tablets and short landscape phone viewports. */

body.cpd289-page{
  overflow-x:hidden;
}
body.cpd289-page *,
body.cpd289-page *::before,
body.cpd289-page *::after{
  box-sizing:border-box;
}
body.cpd289-page :where(img,video,iframe,svg){
  max-width:100%;
}
body.cpd289-page :where(.cpd289-shell,.cpd289-intro-grid,.cpd289-copy,.cpd289-actions,.cpd289-gallery-grid,.cpd289-spec-cards,.cpd289-tech,.cpd289-tech-table,.cpd291-model-grid,.beton197-wrap,.beton197-product-rail,.beton198-help){
  min-width:0;
}

/* Tablet portrait / compact tablet */
@media (min-width:701px) and (max-width:991px){
  body.cpd289-page{overflow-x:clip;}
  body.cpd289-page .cpd289-shell{width:calc(100% - 56px);max-width:1180px;}
  body.cpd289-page .cpd289-intro{padding:62px 0 48px;}
  body.cpd289-page .cpd289-intro-grid{grid-template-columns:1fr;gap:26px;}
  body.cpd289-page .cpd289-copy{max-width:760px;}
  body.cpd289-page .cpd289-gallery-grid,
  body.cpd289-page .cpd291-model-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.cpd289-page .cpd289-spec-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.cpd289-page .cpd289-tech{grid-template-columns:1fr;gap:26px;}
  body.cpd289-page .cpd289-note{grid-template-columns:minmax(0,1fr) auto;gap:24px;}
  body.cpd289-page .cpd291-lightbox{
    width:calc(100% - 40px);
    height:min(760px,calc(100svh - 40px));
  }
}

/* Phones and large phones: iPhone + Android/Samsung */
@media (max-width:700px){
  body.cpd289-page{overflow-x:hidden!important;}
  body.cpd289-page .cpd289-shell{width:calc(100% - 32px);max-width:none;}
  body.cpd289-page .cpd289-intro{padding:48px 0 36px;}
  body.cpd289-page .cpd289-intro-grid{grid-template-columns:1fr;gap:22px;}
  body.cpd289-page .cpd289-intro h2{
    max-width:100%;
    font-size:clamp(27px,8vw,32px);
    line-height:1.08;
    overflow-wrap:anywhere;
  }
  body.cpd289-page .cpd289-copy p{font-size:14px;line-height:1.7;}
  body.cpd289-page .cpd289-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
    width:100%;
  }
  body.cpd289-page .cpd289-actions .cpd289-btn,
  body.cpd289-page .cpd289-actions .cpd291-btn{
    width:100%;
    min-width:0;
    justify-content:center;
    text-align:center;
  }
  body.cpd289-page .cpd289-section-head{grid-template-columns:1fr;gap:9px;padding:20px 0;}
  body.cpd289-page .cpd289-section-head h2{font-size:clamp(21px,6vw,25px);overflow-wrap:anywhere;}
  body.cpd289-page .cpd289-feature{border-radius:14px;}
  body.cpd289-page .cpd289-feature img{aspect-ratio:4/3;}
  body.cpd289-page .cpd289-gallery-grid,
  body.cpd289-page .cpd291-model-grid{grid-template-columns:1fr;gap:12px;}
  body.cpd289-page .cpd289-gallery-grid img,
  body.cpd289-page .cpd291-model-media img{aspect-ratio:4/3;}
  body.cpd289-page .cpd291-model-card figcaption{min-height:54px;padding:0 14px;gap:12px;}
  body.cpd289-page .cpd291-model-card figcaption strong{font-size:14px;}
  body.cpd289-page .cpd289-spec-cards{grid-template-columns:1fr;}
  body.cpd289-page .cpd289-spec-card{padding:20px 18px;}
  body.cpd289-page .cpd289-tech{grid-template-columns:1fr;gap:22px;margin-top:30px;padding-top:30px;}
  body.cpd289-page .cpd289-tech-table{min-width:0;}
  body.cpd289-page .cpd289-tech-row{
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px 12px;
    padding:12px 0;
  }
  body.cpd289-page .cpd289-tech-row span,
  body.cpd289-page .cpd289-tech-row strong{min-width:0;overflow-wrap:anywhere;}
  body.cpd289-page .cpd289-tech-row span:nth-child(2){grid-column:1;}
  body.cpd289-page .cpd289-tech-row strong{grid-column:2;grid-row:1/3;align-self:center;max-width:42vw;text-align:right;}
  body.cpd289-page .cpd289-note{
    margin-bottom:60px;
    padding:24px 20px;
    grid-template-columns:1fr;
    gap:20px;
    border-radius:14px;
  }
  body.cpd289-page .cpd289-note h2{font-size:23px;overflow-wrap:anywhere;}
  body.cpd289-page .cpd289-note .cpd289-btn,
  body.cpd289-page .cpd289-note .cpd291-btn{width:100%;justify-content:center;}

  /* Product-family rail used below model details */
  body.cpd289-page.ct-cowall-beton-product-page .beton197-controls{min-width:0;}
  body.cpd289-page.ct-cowall-beton-product-page .beton197-tabs{
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  body.cpd289-page.ct-cowall-beton-product-page .beton197-tabs::-webkit-scrollbar{display:none;}
  body.cpd289-page.ct-cowall-beton-product-page .beton197-tab{min-width:142px;}
  body.cpd289-page.ct-cowall-beton-product-page .beton197-panel-head{
    align-items:flex-start;
    flex-wrap:wrap;
    gap:10px 16px;
  }
  body.cpd289-page.ct-cowall-beton-product-page .beton197-panel-head h3{font-size:21px;overflow-wrap:anywhere;}
  body.cpd289-page.ct-cowall-beton-product-page .beton197-panel-head small,
  body.cpd289-page.ct-cowall-beton-product-page .beton197-panel-head>a{margin-left:0;white-space:normal;}
  body.cpd289-page.ct-cowall-beton-product-page .beton197-product-rail{
    grid-auto-columns:minmax(190px,78vw);
    max-width:100%;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  body.cpd289-page.ct-cowall-beton-product-page .beton197-note{
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
  }
  body.cpd289-page.ct-cowall-beton-product-page .beton197-note a{white-space:normal;}
  body.cpd289-page.ct-cowall-beton-product-page .beton198-help{grid-template-columns:1fr;gap:14px;padding:18px 16px;}
  body.cpd289-page.ct-cowall-beton-product-page .beton198-help-action{width:100%;white-space:normal;}

  /* Dialog/lightbox: safe under browser chrome + notch/home indicator */
  body.cpd289-page .cpd291-lightbox{
    width:calc(100% - 20px);
    max-width:none;
    height:calc(100svh - 20px);
    max-height:calc(100dvh - 20px);
    border-radius:12px;
  }
  body.cpd289-page .cpd291-lightbox-media{
    inset:max(52px,calc(38px + env(safe-area-inset-top))) 46px max(76px,calc(60px + env(safe-area-inset-bottom)));
  }
  body.cpd289-page .cpd291-lightbox-close{
    top:max(10px,env(safe-area-inset-top));
    right:max(10px,env(safe-area-inset-right));
  }
  body.cpd289-page .cpd291-lightbox-prev{left:max(8px,env(safe-area-inset-left));}
  body.cpd289-page .cpd291-lightbox-next{right:max(8px,env(safe-area-inset-right));}
  body.cpd289-page .cpd291-lightbox-meta{
    left:max(48px,calc(38px + env(safe-area-inset-left)));
    right:max(48px,calc(38px + env(safe-area-inset-right)));
    bottom:max(14px,env(safe-area-inset-bottom));
    min-width:0;
  }
  body.cpd289-page .cpd291-lightbox-meta strong{min-width:0;overflow-wrap:anywhere;}
  body.cpd289-page :where(input,select,textarea){font-size:16px;max-width:100%;}
}

/* Very narrow phones */
@media (max-width:380px){
  body.cpd289-page .cpd289-shell{width:calc(100% - 26px);}
  body.cpd289-page .cpd289-tech-row strong{max-width:40vw;}
  body.cpd289-page .cpd291-lightbox-media{left:40px;right:40px;}
  body.cpd289-page .cpd291-lightbox-meta{left:42px;right:42px;}
}

/* iPhone Safari viewport bars */
@supports (-webkit-touch-callout:none){
  @media (max-width:700px){
    body.cpd289-page .cpd291-lightbox{height:calc(100svh - 20px);}
  }
}

/* Phone landscape / short viewport: keep content usable rather than portrait-tall. */
@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
  body.cpd289-page .ct281-hero-grid{
    min-height:0!important;
    grid-template-columns:minmax(0,1fr) minmax(180px,.6fr)!important;
    gap:24px!important;
    padding-top:max(76px,calc(60px + env(safe-area-inset-top)))!important;
    padding-bottom:max(24px,calc(18px + env(safe-area-inset-bottom)))!important;
  }
  body.cpd289-page .ct281-hero h1{font-size:clamp(29px,5vw,38px)!important;}
  body.cpd289-page .ct281-hero-lead{margin-top:12px;font-size:13px;line-height:1.48;}
  body.cpd289-page .ct281-hero-art{min-height:80px;}
  body.cpd289-page .ct281-hero-mark{padding-top:12px;}
  body.cpd289-page .cpd289-intro{padding:34px 0 28px;}
  body.cpd289-page .cpd289-actions{display:flex;flex-wrap:wrap;}
  body.cpd289-page .cpd289-actions .cpd289-btn,
  body.cpd289-page .cpd289-actions .cpd291-btn{width:auto;min-width:150px;}
  body.cpd289-page .cpd291-lightbox{
    width:calc(100% - 16px);
    height:calc(100svh - 12px);
  }
  body.cpd289-page .cpd291-lightbox-media{
    inset:max(38px,calc(28px + env(safe-area-inset-top))) 62px max(46px,calc(34px + env(safe-area-inset-bottom)));
  }
  body.cpd289-page .cpd291-lightbox-meta{
    left:max(62px,calc(52px + env(safe-area-inset-left)));
    right:max(62px,calc(52px + env(safe-area-inset-right)));
    bottom:max(7px,env(safe-area-inset-bottom));
    padding-top:7px;
  }
  body.cpd289-page .cpd291-lightbox-meta strong{font-size:11px;}
  body.cpd289-page .cpd291-lightbox-cta{min-height:28px;padding:0 8px;font-size:10px;}
}

/* Touch landscape tablets: preserve desktop composition with safe gutters. */
@media (min-width:992px) and (max-width:1180px) and (hover:none) and (pointer:coarse){
  body.cpd289-page{overflow-x:clip;}
  body.cpd289-page .cpd289-shell{width:calc(100% - 64px);}
  body.cpd289-page .cpd291-lightbox{width:calc(100% - 48px);height:min(780px,calc(100svh - 48px));}
}

