/* Small mobile */
@media (max-width:359px) {
  .app-cctp-shell { --app-cctp-content-padding:12px; --app-cctp-menu-visible-rail:46px; }
  .app-cctp-header-grid { padding-inline:0; }
  .app-cctp-header-icon { height:46px; padding:7px 5px; }
  .app-cctp-header-icon-visual,.app-cctp-header-icon-image { width:32px; height:32px; }
  .app-cctp-home-screen { background-position:center 31%; }
  .app-cctp-panel-title { font-size:16px; }
  .app-cctp-bottom-logo img { width:min(235px,72vw); }
}
/* Standard mobile */
@media (min-width:360px) and (max-width:389px) {
  .app-cctp-shell { --app-cctp-content-padding:14px; --app-cctp-menu-visible-rail:48px; }
  .app-cctp-header-icon { padding-inline:6px; }
  .app-cctp-header-icon-visual,.app-cctp-header-icon-image { width:33px; height:33px; }
  .app-cctp-home-screen { background-position:center 33%; }
  .app-cctp-bottom-logo img { width:min(250px,72vw); }
}
/* Medium mobile */
@media (min-width:390px) and (max-width:411px) {
  .app-cctp-shell { --app-cctp-content-padding:16px; --app-cctp-menu-visible-rail:50px; }
  .app-cctp-home-screen { background-position:center 34%; }
  .app-cctp-bottom-logo img { width:min(260px,70vw); }
}
/* Large mobile */
@media (min-width:412px) and (max-width:430px) {
  .app-cctp-shell { --app-cctp-content-padding:18px; --app-cctp-menu-visible-rail:52px; }
  .app-cctp-header-grid { padding-inline:4px; }
  .app-cctp-home-screen { background-position:center 35%; }
  .app-cctp-bottom-logo img { width:min(270px,68vw); }
}
/* Large phones / small tablets */
@media (min-width:431px) and (max-width:767px) {
  .app-cctp-shell { --app-cctp-content-padding:22px; --app-cctp-menu-visible-rail:58px; }
  .app-cctp-header-grid { padding-inline:8px; }
  .app-cctp-header-icon-visual,.app-cctp-header-icon-image { width:36px; height:36px; }
  .app-cctp-home-screen { background-position:center 38%; }
  .app-cctp-panel-content { max-width:680px; margin-inline:auto; width:100%; }
  .app-cctp-bottom-logo img { width:280px; }
}
/* iPad / tablet portrait */
@media (min-width:768px) and (max-width:1023px) {
  .app-cctp-shell { --app-cctp-content-padding:28px; --app-cctp-menu-visible-rail:76px; }
  .app-cctp-header-grid { max-width:760px; margin-inline:auto; }
  .app-cctp-home-screen { background-position:center 42%; }
  .app-cctp-panel[data-app-cctp-panel-mode="menu"] { max-width:520px; }
  .app-cctp-shell[data-app-cctp-menu-open="true"] .app-cctp-home-screen { transform:translate3d(min(520px,calc(100% - var(--app-cctp-menu-visible-rail))),0,0); }
  .app-cctp-panel-content { max-width:720px; margin-inline:auto; width:100%; }
  .app-cctp-bottom-logo img { width:300px; }
}
/* Tablet landscape / small desktop */
@media (min-width:1024px) and (max-width:1279px) {
  .app-cctp-shell { --app-cctp-content-padding:32px; --app-cctp-menu-visible-rail:90px; }
  .app-cctp-header-grid { max-width:820px; margin-inline:auto; }
  .app-cctp-home-screen { background-position:center 44%; }
  .app-cctp-panel[data-app-cctp-panel-mode="menu"] { width:480px; }
  .app-cctp-shell[data-app-cctp-menu-open="true"] .app-cctp-home-screen { transform:translate3d(480px,0,0); }
  .app-cctp-panel-content { max-width:800px; margin-inline:auto; width:100%; }
  .app-cctp-bottom-logo img { width:310px; }
}
/* Desktop */
@media (min-width:1280px) {
  .app-cctp-shell { --app-cctp-content-padding:36px; --app-cctp-menu-visible-rail:100px; }
  .app-cctp-header-grid { max-width:860px; margin-inline:auto; }
  .app-cctp-home-screen { background-position:center 46%; }
  .app-cctp-panel[data-app-cctp-panel-mode="menu"] { width:500px; }
  .app-cctp-shell[data-app-cctp-menu-open="true"] .app-cctp-home-screen { transform:translate3d(500px,0,0); }
  .app-cctp-panel-content { max-width:860px; margin-inline:auto; width:100%; }
  .app-cctp-bottom-logo img { width:320px; }
}

/* Home category row: phones up to 390px sit 20px higher; icon size remains fixed. */
@media (max-width:390px) {
  .app-cctp-home-category-row { top:30px; }
}