.mobile-section-toggle,.mobile-back-to-view {
  display:none
}

@media(max-width:760px) {
  .workspace {
    min-width:0
  }
  .workspace>.sidebar {
    margin-top:16px;
    border:1px solid #e8eae4;
    border-radius:8px
  }
  .sidebar .side-scroll {
    padding:14px
  }
  .sidebar .side-scroll>h1,.sidebar .side-scroll>.intro,.sidebar .side-scroll>.eyebrow {
    display:none
  }
  .sidebar .section-block {
    display:block;
    padding:0;
    border-top:1px solid #e8eae4
  }
  .sidebar .section-block:first-of-type {
    border-top:0
  }
  .mobile-section-toggle {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:52px;
    padding:12px 0;
    border:0;
    background:transparent;
    color:#293628;
    font:700 15px 'DM Sans',sans-serif;
    text-align:left;
    cursor:pointer
  }
  .mobile-section-toggle::after {
    content:'+';
    font-size:22px;
    font-weight:400
  }
  .mobile-section-toggle[aria-expanded=true]::after {
    content:'−'
  }
  .mobile-section-panel {
    padding:2px 0 16px
  }
  .mobile-section-panel[hidden] {
    display:none
  }
  .mobile-section-panel>.section-heading {
    display:none
  }
  .mobile-back-to-view {
    display:block;
    width:100%;
    min-height:44px;
    margin-top:12px;
    border:1px solid #dec46b;
    border-radius:6px;
    background:#fff7dc;
    color:#473a0c;
    font:700 14px 'DM Sans',sans-serif
  }
  .viewer {
    height:420px;
    min-height:350px;
    max-height:none;
    scroll-margin-top:66px
  }
  .viewer .view-controls {
    left:12px;
    right:12px;
    top:66px;
    display:block
  }
  .viewer .view-cube {
    display:none
  }
  .viewer .quick-views {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:3px;
    padding:3px;
    width:100%;
    min-width:0
  }
  .viewer .quick-views button {
    width:100%;
    min-width:0;
    min-height:44px;
    padding:6px 2px;
    font-size:12px
  }
  .viewer .scene-label {
    right:12px
  }
  .viewer .corner-note {
    top:122px;
    left:12px;
    right:12px;
    font-size:10px
  }
  .viewer .zoom-controls {
    right:12px;
    bottom:48px;
    display:flex;
    flex-direction:row;
    gap:4px;
    background:transparent
  }
  .viewer .zoom-controls button {
    width:44px;
    height:44px;
    background:#fff;
    border:1px solid #dfe4db;
    border-radius:6px;
    font-size:22px
  }
  .viewer .zoom-controls>span {
    display:none
  }
  .viewer .drag-hint {
    left:12px;
    right:12px;
    bottom:10px;
    font-size:0
  }
  .viewer .drag-hint::after {
    content:'Arrastrá para girar · usá + y − para acercar';
    font-size:10px
  }
  .workspace>.live-card {
    position:static;
    width:100%;
    max-width:none;
    margin:10px 0 0;
    padding:12px;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    box-shadow:none;
    backdrop-filter:none
  }
  .workspace>.live-card .live-dimensions,.workspace>.live-card.has-slope .live-dimensions {
    grid-column:1/-1
  }
  .workspace>.live-card .live-slope-summary {
    grid-column:1/-1;
    grid-row:auto
  }
  .workspace>.live-card .live-dimensions strong {
    font-size:18px
  }
  .workspace>.live-card .live-dimensions small {
    font-size:9px
  }
  .workspace>.live-card .live-card-top,.workspace>.live-card .live-card-bottom {
    font-size:10px
  }
  .sidebar input[type=number],.sidebar select {
    font-size:16px;
    min-height:44px
  }
  .sidebar .range {
    height:32px
  }

  .shopping-actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px
  }
  .shopping-actions button,.card-copy-actions button {
    min-height:44px;
    font-size:13px
  }
  .shopping-actions .whatsapp-button {
    flex-basis:100%;
    order:2
  }
  .help-button {
    min-height:44px
  }
  .mobile-section-toggle:focus-visible,.mobile-back-to-view:focus-visible {
    outline:2px solid #b88a00;
    outline-offset:3px
  }
}

@media(max-width:760px) and (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}

/* These additions apply only to the phone layout. */
.mobile-navigation {
  display:none
}

@media(min-width:761px) {
  .mobile-section-panel {
    display:contents
  }
}

@media(max-width:760px) {
  body {
    padding-bottom:calc(76px + env(safe-area-inset-bottom))
  }
  .app-shell,.workspace,.sidebar,.materials-left-stack {
    min-width:0
  }
  .topbar {
    padding:0 12px
  }
  .topbar .help-button {
    font-size:12px;
    gap:6px
  }
  .workspace-bar {
    align-items:flex-start;
    padding:12px 0;
    gap:10px
  }
  .workspace-bar .project-status {
    width:100%
  }
  .workspace-bar .bar-actions {
    width:100%;
    justify-content:stretch
  }
  .workspace-bar .bar-actions button {
    flex:1;
    min-height:44px;
    font-size:12px
  }
  .viewer {
    height:clamp(380px,62svh,520px);
    min-height:380px
  }
  #scene {
    touch-action:none
  }
  .viewer .zoom-controls {
    width:auto;
    border:0;
    overflow:visible
  }
  .viewer .corner-note {
    line-height:1.4;
    align-items:flex-start
  }
  .workspace>.sidebar,#shopping {
    scroll-margin-top:72px
  }
  .preset-grid {
    gap:8px
  }
  .preset-card {
    min-width:0;
    min-height:148px;
    padding:10px 4px
  }
  .preset-card>span {
    font-size:13px
  }
  .preset-card small {
    font-size:10px
  }
  .sidebar .number-wrap {
    width:96px
  }
  .sidebar .measure-row label {
    font-size:14px
  }
  .sidebar .measure-row label span {
    font-size:11px
  }
  .sidebar .rafter-toggle-row {
    padding:12px;
    gap:12px
  }
  .sidebar .rafter-toggle-row>div {
    min-width:0
  }
  .sidebar .switch {
    flex-shrink:0
  }
  .sidebar .rafter-direction-control label {
    font-size:14px
  }
  .sidebar .spacing-note {
    font-size:12px
  }
  .sidebar .base-option {
    min-height:68px
  }
  .materials-grid {
    gap:14px
  }
  .materials-left-stack {
    gap:14px
  }
  .material-row .item-name {
    font-size:14px;
    line-height:1.45;
    overflow-wrap:anywhere
  }
  .material-row .item-name small {
    font-size:12px;
    line-height:1.5
  }
  .material-row .item-qty {
    font-size:14px
  }
  .material-row .item-qty small {
    font-size:12px
  }
  .material-row.has-product-image {
    grid-template-columns:54px minmax(0,1fr);
    padding:14px 0;
    gap:6px 12px
  }
  .material-product-image {
    width:54px;
    height:54px
  }
  .material-foot {
    height:auto;
    min-height:34px;
    line-height:1.5
  }
  .material-subtitle h4 {
    font-size:13px
  }
  .shopping-head h2 {
    flex-wrap:wrap;
    gap:8px
  }
  .shopping-head p {
    font-size:13px
  }
  .shopping-note {
    flex-wrap:wrap;
    font-size:12px
  }
  .shopping-note>span:nth-child(2) {
    flex:1;
    min-width:0
  }
  .shopping-note button {
    margin-left:22px;
    min-height:44px;
    font-size:12px
  }
  #kitRecommendation .kit-preview .kit-product-image {
    max-height:360px
  }
  #kitRecommendation .kit-links a {
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center
  }
  #kitImageDialog {
    max-height:calc(100dvh - 24px);
    overscroll-behavior:contain
  }
  #kitImageClose,.dialog-close {
    min-width:44px;
    min-height:44px
  }
  #kitImageDescription {
    min-width:0;
    overflow-wrap:anywhere
  }
  footer {
    flex-direction:column;
    gap:8px;
    font-size:10px
  }
  .toast {
    bottom:calc(84px + env(safe-area-inset-bottom));
    max-width:calc(100vw - 24px);
    width:max-content;
    box-sizing:border-box;
    font-size:13px
  }
  .mobile-navigation {
    position:fixed;
    z-index:15;
    left:0;
    right:0;
    bottom:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    background:#fff;
    border-top:1px solid #e3e8de;
    box-shadow:0 -3px 16px #2633260a
  }
  .mobile-navigation button {
    min-height:44px;
    border:1px solid #e3e8de;
    border-radius:7px;
    background:#fff;
    color:#293628;
    font:600 12px 'DM Sans',sans-serif
  }
  .mobile-navigation button:nth-child(2) {
    background:#fcc006;
    border-color:#fcc006
  }
  .mobile-navigation button:focus-visible {
    outline:2px solid #b88a00;
    outline-offset:2px
  }
}

@media(max-width:480px) {
  .materials-left-stack>.combined-hardware-card {
    grid-template-columns:minmax(0,1fr)
  }
  .combined-hardware-card>.material-subsection+.material-subsection {
    border-left:0;
    border-top:1px solid #edf0eb
  }
}

.mobile-view-info {
  display:none
}

@media(max-width:760px) {
  .mobile-navigation button:nth-child(2) {
    background:#fff;
    border-color:#e3e8de
  }
  .mobile-navigation button[aria-current="location"] {
    background:#fcc006;
    border-color:#fcc006;
    color:#172019
  }
  .mobile-section-heading {
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0
  }
  .mobile-section-value {
    font:400 12px/1.4 'DM Sans',sans-serif;
    color:#626d5e
  }
  .mobile-section-toggle[aria-expanded="true"] .mobile-section-value {
    display:none
  }
  .viewer .scene-label {
    top:12px;
    right:58px
  }
  .viewer .scene-label small {
    display:none
  }
  .viewer .view-controls {
    top:50px
  }
  .viewer .corner-note {
    display:none
  }
  .mobile-view-info {
    position:absolute;
    top:4px;
    right:8px;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid #dfe4db;
    border-radius:50%;
    background:#fff;
    color:#52604c;
    font:700 16px Georgia,serif;
    cursor:pointer
  }
  .mobile-view-info:focus-visible {
    outline:2px solid #b88a00;
    outline-offset:2px
  }
  .materials-grid>#kitRecommendation {
    width:100%;
    box-sizing:border-box
  }
}

/* The page scrolls until the visitor chooses to rotate the model. */
@media (max-width: 760px) {
  #viewer, #viewer #scene { touch-action: pan-y pinch-zoom; }
  #viewer.is-interacting, #viewer.is-interacting #scene { touch-action: none; }
  #viewer .drag-hint { display: none; }
  .scene-interaction-button {
    position: absolute; display: block; left: 12px; bottom: 12px; z-index: 2;
    max-width: calc(100% - 24px); min-height: 44px; padding: 9px 12px;
    border: 1px solid #d9c47e; border-radius: 6px; background: #fff9e6; color: #473a0c;
    font: 600 12px 'DM Sans',sans-serif; cursor: pointer;
  }
  .scene-interaction-button[aria-pressed="true"] { background: #fcc006; }

  .design-notice { bottom: calc(80px + env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 8px; }
  .design-notice > span { flex: 1 1 100%; }
  .design-notice button:last-child { margin-left: auto; }
  .kit-order-summary ul, #kitRecommendation .kit-order-summary p { font-size: 13px; }
}
@media (max-width: 760px) {
  .viewer .mobile-orbit-hint { display: none; }
  .viewer.is-interacting .mobile-orbit-hint {
    display: block;
    position: absolute;
    left: 12px;
    right: 112px;
    bottom: 64px;
    font: 500 11px/1.4 'DM Sans', sans-serif;
    color: #52604c;
    pointer-events: none;
  }
}
@media (min-width: 761px) {
  .mobile-orbit-hint { display: none; }
}

/* Keep orbit and zoom actions aligned on the same baseline. */
@media (max-width: 760px) {
  .viewer .zoom-controls { bottom: 12px; }
  .viewer .zoom-controls button, .scene-interaction-button {
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
  }
}