/* Portrait kiosk layout: designed for 2160x3840 and scaled Windows displays.
   It is enabled only when app.js detects the kiosk viewport or with ?totem=1. */
html.totem-mode,
html.totem-mode body { max-width: 100%; overflow-x: hidden; }
html.totem-mode .app-shell { grid-template-columns: clamp(180px, 15vw, 300px) minmax(0, 1fr); }
html.totem-mode .sidebar { padding: clamp(26px, 2.2vw, 48px) clamp(16px, 1.5vw, 30px); }
html.totem-mode .sidebar .brand-logo { width: 100%; max-width: 230px; }
html.totem-mode .sidebar nav { margin-top: clamp(38px, 4vh, 90px); gap: 12px; }
html.totem-mode .nav-btn,
html.totem-mode .admin-link { font-size: clamp(17px, 1.35vw, 27px); padding: clamp(14px, 1.2vw, 24px); }

html.totem-mode .main { padding: clamp(22px, 2vw, 44px); min-width: 0; overflow-x: hidden; }
html.totem-mode .topbar { margin-bottom: 18px; }
html.totem-mode .hero { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px; margin-bottom: 12px; }
html.totem-mode .hero h1 { font-size: clamp(30px, 3vw, 56px); margin: 0; }
html.totem-mode .hero p { display: none; }
html.totem-mode .steps { min-width: min(44vw, 720px); grid-template-columns:repeat(3,minmax(120px,1fr)); gap: 8px; }
html.totem-mode .step { padding: 10px 14px; }
html.totem-mode .step b { margin-bottom: 5px; font-size: 22px; }

html.totem-mode .section-head { margin: 18px 0 12px; }
html.totem-mode .section-head h2 { font-size: clamp(27px, 2.4vw, 46px); }
html.totem-mode .design-wizard { margin-bottom: 14px; }
html.totem-mode .wizard-card { padding: clamp(14px,1.1vw,22px); }
html.totem-mode .wizard-products { grid-template-columns: repeat(4,minmax(0,1fr)); }
html.totem-mode .wizard-head p { font-size: clamp(12px,.9vw,16px); }
html.totem-mode .wizard-actions .btn { padding: clamp(12px,.9vw,18px); }

/* One touch-friendly row prevents the catalogue from pushing the editor down. */
html.totem-mode .products {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 3px 14px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  max-width: 100%;
  min-width: 0;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
html.totem-mode .product {
  flex: 0 0 clamp(230px, 21vw, 390px);
  scroll-snap-align: start;
}
html.totem-mode .product img { aspect-ratio: 1.7; max-height: 260px; }
html.totem-mode .product-body { padding: clamp(12px, 1vw, 19px); }
html.totem-mode .product-title { font-size: clamp(16px, 1.15vw, 23px); }
html.totem-mode .product small { font-size: clamp(12px, .85vw, 17px); margin-top: 5px; }

html.totem-mode .shop-top { padding: 12px clamp(18px,2.4vw,42px); }
html.totem-mode .shop-top .brand-logo { width: clamp(130px,9vw,190px); }
html.totem-mode .shop-main { padding-top: 12px; }
html.totem-mode .shop-hero { margin-bottom: 10px; }
html.totem-mode .shop-hero h1 { font-size: clamp(32px,3vw,58px); }
html.totem-mode .shop-hero p { display:none; }
html.totem-mode .shop-main>.shop-sticky { padding: 8px 10px; margin-bottom: 14px; }
html.totem-mode .shop-filter-title { margin-bottom: 5px; font-size: 8px; }
html.totem-mode .shop-category-slider { grid-template-columns: 56px minmax(0,1fr) 56px; gap: 10px; }
html.totem-mode .shop-slider-arrow { width: 56px; height: 48px; font-size: 42px; border-radius: 16px; }
html.totem-mode .shop-category-pagination { margin: 3px 0 4px; font-size: 13px; }
html.totem-mode .shop-categories button,
html.totem-mode .shop-subcategories button { padding: 7px 12px; }
html.totem-mode .shop-categories button,
html.totem-mode .shop-subcategories button { flex-basis: calc((100% - 16px) / 3); }
html.totem-mode .shop-search input { padding: 8px 13px; }
html.totem-mode .shop-product-body { padding: 12px; gap: 6px; }
html.totem-mode .shop-product h3 { font-size: clamp(18px,1.35vw,24px); min-height: 58px; -webkit-line-clamp: 2; }
html.totem-mode .shop-product p { min-height: 30px; font-size: clamp(12px,.9vw,15px); }
html.totem-mode .shop-product label { font-size: 8px; }
html.totem-mode .shop-product select { min-height: 34px; padding: 7px 8px; font-size: clamp(11px,.85vw,14px); }
html.totem-mode .shop-price { font-size: clamp(16px,1.05vw,20px); }
html.totem-mode .shop-product .btn { padding: 9px 10px; font-size: clamp(12px,.9vw,15px); }

html.totem-mode .studio { margin-top: 18px; padding: clamp(18px, 1.5vw, 30px); }
html.totem-mode .studio-grid {
  grid-template-columns: minmax(350px, 34%) minmax(0, 1fr);
  gap: clamp(18px, 2vw, 38px);
  align-items: start;
  min-width: 0;
}
html.totem-mode .controls { min-width: 0; }
html.totem-mode .controls h3 { font-size: clamp(30px, 2.5vw, 48px); }
html.totem-mode .field { margin: clamp(12px, 1.2vh, 20px) 0; }
html.totem-mode .field label,
html.totem-mode .customer-head label { font-size: clamp(11px, .8vw, 16px); }
html.totem-mode .field input,
html.totem-mode .field select,
html.totem-mode .btn { font-size: clamp(15px, 1.1vw, 22px); padding: clamp(13px, 1.1vw, 22px); }
html.totem-mode .mask-tools,
html.totem-mode .customer-box { padding: clamp(14px, 1.2vw, 24px); }

/* The photograph is always beside the mask controls while the user edits. */
html.totem-mode .canvas-wrap {
  position: sticky;
  top: 24px;
  min-height: 72vh;
  height: 82vh;
  align-self: start;
  place-items: center;
}
html.totem-mode .canvas-wrap canvas,
html.totem-mode .mask-canvas { max-width:100%; max-height:calc(82vh - 20px); }
html.totem-mode .mask-canvas { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
html.totem-mode .render-column.render-complete .canvas-wrap { min-height:420px; height:58vh; }
html.totem-mode .render-column.render-complete .canvas-wrap canvas, html.totem-mode .render-column.render-complete .mask-canvas { max-height:calc(58vh - 20px); }

/* Typical 200% Windows scaling on the same 4K portrait panel. */
@media (orientation: portrait) and (min-width: 900px) and (max-width: 1300px) {
  html.totem-mode .hero { grid-template-columns: 1fr; }
  html.totem-mode .steps { min-width: 0; }
  html.totem-mode .product { flex-basis: 250px; }
  html.totem-mode .studio-grid { grid-template-columns: minmax(340px, 40%) minmax(0, 1fr); }
  html.totem-mode .canvas-wrap { min-height: 65vh; height: 76vh; }
  html.totem-mode .canvas-wrap canvas,
  html.totem-mode .mask-canvas { max-height: calc(76vh - 20px); }
}

/* Non-kiosk portrait tablets still get only a safe, light adjustment. */
@media (orientation: portrait) and (min-width: 900px) and (max-width: 1300px) {
  .hero { grid-template-columns: 1fr; }
  .steps { min-width: 0; }
  .product { flex-basis: 250px; }
}