/* CASESTUDIO V372 — faithful mobile profile conversion from the user's editor JSON.
   Reference artwork: 481 CSS-px viewport. The older V333 zoom mechanism scales
   the 490px canvas uniformly at 250..510px (rather than competing vw sizing).
   Only mobile selectors below; the exported desktop profile stays unchanged.
   POSITIONING CONVERSION: user-authored viewport translations were converted to
   local flow order / anchors; that keeps the composition consistent when win
   messages, account state, or theme changes occur. */
@media (max-width:700px) {
  html body main.main-layout > section.preview-section {
    display:flex !important; flex-direction:column !important;
    position:relative !important; min-width:0 !important;
  }
  /* Source mobile layout: city/POS, purchase buttons, model title, preview. */
  html body main.main-layout > section.preview-section > .purchase-location-container-v355 { order:0 !important; }
  html body main.main-layout > section.preview-section > .purchase-type { order:1 !important; }
  html body main.main-layout > section.preview-section > .preview-header { order:2 !important; }
  html body main.main-layout > section.preview-section > .preview-stage { order:3 !important; }
  html body main.main-layout > section.preview-section > .dice-area { order:4 !important; }
  html body main.main-layout > section.preview-section > .nav-hint { order:5 !important; }
  html body main.main-layout > section.preview-section > .rotation-help { order:6 !important; }
  html body main.main-layout > section.preview-section > .rotation-control { order:7 !important; }
  html body main.main-layout > section.preview-section > .selected-info { order:8 !important; }
  html body main.main-layout > section.preview-section > .quantity-section { order:9 !important; }
  html body main.main-layout > section.preview-section > .packaging-section { order:10 !important; }
  html body main.main-layout > section.preview-section > #order-button { order:11 !important; }
  html body main.main-layout > section.preview-section > #open-support-chat { order:12 !important; }
  /* 481px export: 470px city selector, top slightly raised, stays inside page. */
  html body main.main-layout > section.preview-section > .purchase-location-container-v355 {
    width:calc(100% - 12px) !important; max-width:470px !important;
    margin:-4px auto 8px !important; translate:none !important; transform:none !important;
    position:relative !important; z-index:466 !important;
  }
  html body main.main-layout > section.preview-section > .purchase-type {
    position:relative !important; width:100% !important; box-sizing:border-box !important;
    margin:0 auto 8px !important; padding:0 6px !important; top:auto !important;
    translate:none !important; transform:none !important; z-index:35 !important;
  }
  html body main.main-layout > section.preview-section > .purchase-type > h2 { display:none !important; }
  /* Overrides the earlier -747px translate in V333/V328. The group now sits in
     the intended row, ABOVE the phone stage, without relying on prior heights. */
  html body main.main-layout > section.preview-section > .purchase-type > .purchase-options,
  html body main.main-layout > section.preview-section > .purchase-type .purchase-options {
    display:grid !important; position:relative !important; inset:auto !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    box-sizing:border-box !important; width:100% !important; max-width:100% !important;
    height:29px !important; min-height:29px !important; max-height:29px !important;
    margin:0 auto !important; padding:0 !important; gap:4px !important;
    translate:none !important; transform:none !important; top:auto !important;
    z-index:36 !important;
  }
  html body main.main-layout > section.preview-section > .purchase-type .purchase-options > button.purchase-option,
  html body main.main-layout > section.preview-section > .purchase-type .purchase-options > button.purchase-option:hover,
  html body main.main-layout > section.preview-section > .purchase-type .purchase-options > button.purchase-option:active,
  html body main.main-layout > section.preview-section > .purchase-type .purchase-options > button.purchase-option:focus,
  html body main.main-layout > section.preview-section > .purchase-type .purchase-options > button.purchase-option.active {
    box-sizing:border-box !important; position:relative !important; inset:auto !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    width:100% !important; height:29px !important; min-height:29px !important;
    max-height:29px !important; padding:2px !important; margin:0 !important;
    translate:none !important; transform:none !important; rotate:none !important; scale:1 !important;
    overflow:hidden !important; z-index:auto !important;
  }
  html body main.main-layout > section.preview-section > .purchase-type .purchase-options .purchase-option strong {
    display:block !important; max-width:100% !important; font-size:10px !important;
    line-height:1.15 !important; white-space:nowrap !important;
  }
  /* Header exports: 480 x 28, vertical 21px title, 277 x 18 device pill. */
  html body main.main-layout > section.preview-section > .preview-header {
    display:block !important; box-sizing:border-box !important;
    position:relative !important; width:100% !important; max-width:480px !important;
    min-width:0 !important; height:28px !important; min-height:28px !important;
    max-height:28px !important; margin:0 auto !important; padding:0 !important;
    translate:none !important; transform:none !important; z-index:6 !important;
  }
  html body main.main-layout > section.preview-section > .preview-header > h1,
  html body main.main-layout > section.preview-section > .preview-header h1 {
    position:absolute !important; display:block !important; flex:none !important;
    left:28px !important; right:auto !important; top:56px !important;
    width:23px !important; min-width:23px !important; max-width:23px !important;
    height:max-content !important; padding:0 !important; margin:0 !important;
    writing-mode:vertical-rl !important; text-orientation:mixed !important;
    rotate:180deg !important; translate:none !important; transform:none !important;
    font-size:21px !important; line-height:1.25 !important; white-space:nowrap !important;
    z-index:60 !important;
  }
  html body main.main-layout > section.preview-section > .preview-header #device-name-display {
    display:block !important; position:absolute !important; flex:none !important;
    top:39px !important; left:50% !important; right:auto !important;
    width:min(277px,64%) !important; min-width:0 !important; max-width:277px !important;
    height:18px !important; min-height:18px !important; max-height:18px !important;
    padding:0 !important; margin:0 !important; box-sizing:border-box !important;
    translate:none !important; transform:translateX(-50%) !important;
    font-size:12px !important; line-height:18px !important; white-space:nowrap !important;
    text-align:center !important; z-index:11 !important;
  }
  html body main.main-layout > section.preview-section > .preview-stage {
    display:grid !important; box-sizing:border-box !important;
    grid-template-columns:54px minmax(0,1fr) 54px !important;
    grid-template-rows:auto auto !important; gap:3px !important;
    width:100% !important; max-width:100% !important; min-width:0 !important;
    margin:0 auto 7px !important; padding:5px 4px 53px !important;
    position:relative !important; translate:none !important; transform:none !important;
    z-index:1 !important; overflow:visible !important;
  }
  html body main.main-layout > section.preview-section > .preview-stage > .sticker-nav {
    grid-column:1 !important; grid-row:1 !important;
  }
  html body main.main-layout > section.preview-section > .preview-stage > .phone-area {
    grid-column:2 !important; grid-row:1 !important; min-width:0 !important; width:100% !important;
  }
  html body main.main-layout > section.preview-section > .preview-stage > .case-nav {
    grid-column:3 !important; grid-row:1 !important;
  }
  html body main.main-layout > section.preview-section > .preview-stage > .preview-nav,
  html body main.main-layout > section.preview-section > .preview-stage > .preview-nav:hover,
  html body main.main-layout > section.preview-section > .preview-stage > .preview-nav:focus-within {
    box-sizing:border-box !important; width:54px !important; min-width:54px !important;
    max-width:54px !important; translate:none !important; transform:none !important;
  }
  html body main.main-layout > section.preview-section > .preview-stage .phone {
    width:min(100%,315px) !important; max-width:100% !important;
    margin:0 auto !important; aspect-ratio:524/824 !important;
  }
  html body main.main-layout > section.preview-section > .preview-stage #case-canvas {
    display:block !important; width:100% !important; height:auto !important;
    margin-top:0 !important; aspect-ratio:524/824 !important;
  }
  /* Exported price pills: sticker left and case right visually (RTL stage). */
  html body main.main-layout > section.preview-section > .preview-stage > .sticker-preview-price {
    left:5px !important; right:auto !important; bottom:5px !important;
    max-width:calc(50% - 7px) !important;
  }
  html body main.main-layout > section.preview-section > .preview-stage > .case-preview-price {
    right:5px !important; left:auto !important; bottom:5px !important;
    max-width:calc(50% - 7px) !important;
  }
  /* Anchored sticker-size switch: remains near left side of the phone, not a
     large negative translation from whichever product pill happened to shift. */
  html body main.main-layout > section.preview-section > .preview-stage #preview-sticker-price-card > #sticker-size-toggle {
    position:fixed; /* temporarily normalized below to absolute against the price card */
    position:absolute !important; left:16px !important; right:auto !important;
    bottom:70px !important; top:auto !important; margin:0 !important;
    translate:none !important; transform:none !important; z-index:65 !important;
  }
  html body main.main-layout > section.preview-section > .dice-area {
    display:block !important; position:relative !important;
    width:calc(100% - 12px) !important; margin:0 auto 8px !important;
    translate:none !important; transform:none !important;
  }
  html body main.main-layout > section.preview-section > .dice-area #random-combo-button {
    width:100% !important; max-width:100% !important;
    min-height:42px !important; height:42px !important;
    margin:0 !important; padding-inline:6px !important;
    translate:none !important; transform:none !important;
  }
  /* No post-win push: message occupies zero layout height on every theme. */
  html body main.main-layout > section.preview-section > .dice-area #dice-win-message,
  html body main.main-layout > section.preview-section > .dice-area #dice-win-message.show {
    position:absolute !important; left:8px !important; right:8px !important;
    bottom:calc(100% + 4px) !important; top:auto !important;
    width:auto !important; max-width:none !important; height:auto !important;
    max-height:88px !important; margin:0 !important; padding:5px 8px !important;
    box-sizing:border-box !important; z-index:30 !important;
    transform:none !important; translate:none !important;
    text-align:center !important; overflow:auto !important;
  }
  html body main.main-layout > section.preview-section > .nav-hint,
  html body main.main-layout > section.preview-section > .rotation-help {
    box-sizing:border-box !important; position:relative !important;
    margin:0 auto !important; translate:none !important; transform:none !important;
    text-align:center !important; line-height:1.4 !important;
  }
  html body main.main-layout > section.preview-section > .rotation-help { font-size:11px !important; }
  html body main.main-layout > section.preview-section > .selected-info {
    box-sizing:border-box !important; width:100% !important; max-width:100% !important;
    margin:8px 0 10px !important; padding-inline:10px !important;
    translate:none !important; transform:none !important;
  }
  html body main.main-layout > section.preview-section > .selected-info > .selected-row.total-row {
    box-sizing:border-box !important; width:100% !important; max-width:100% !important;
    margin-inline:auto !important; translate:none !important; border-radius:15px !important;
  }
  /* Exported welcome 454 x 44, 31px rounding. Roles remain in normal flow. */
  html body #member-welcome:not(.hidden) {
    width:calc(100% - 26px) !important; max-width:454px !important;
    box-sizing:border-box !important; height:44px !important; min-height:44px !important;
    max-height:44px !important; margin:6px auto 5px !important;
    padding:2px 8px !important; gap:5px !important;
    border-radius:31px !important; display:flex !important; align-items:center !important;
    flex-wrap:nowrap !important; transform:none !important; translate:none !important;
  }
  html body #member-welcome .member-welcome-avatar {
    width:38px !important; height:38px !important; min-width:38px !important;
    max-width:38px !important; flex:0 0 38px !important;
    translate:none !important; transform:none !important;
  }
  html body #member-welcome .member-welcome-copy {flex:1 1 auto !important;min-width:0 !important;}
  html body #member-welcome-name,
  html body #member-welcome .member-welcome-copy > span {
    translate:none !important; transform:none !important; overflow:hidden !important;
    white-space:nowrap !important; text-overflow:ellipsis !important;
  }
  html body #member-welcome .member-welcome-actions {
    width:auto !important; min-width:0 !important; flex:0 0 auto !important;
    display:flex !important; justify-content:flex-end !important; margin:0 !important;
  }
  html body #member-orders-button { border-radius:18px !important; translate:none !important;
    transform:none !important; font-size:12px !important; min-height:32px !important; }
  /* Editor-specific selected properties not positional. */
  html body #case-prev, html body #case-next,
  html body #sticker-prev, html body #sticker-next { border-radius:17px !important; }
  html body .sticker-nav .nav-filter-trigger {border-radius:21px !important;}
  html body .case-nav .nav-filter-trigger {border-radius:29px !important;}
  html body #merchant-store-button {border-radius:23px !important;}
  html body #theme-toggle {width:40px !important; min-width:40px !important;
    max-width:40px !important; height:40px !important; min-height:40px !important;
    max-height:40px !important;}
  html body #cart-button {width:39px !important; min-width:39px !important; max-width:39px !important;}
  html body #csde-reopen { translate:3px 0 !important; }
  html body #add-sticker-layer {translate:-1px 0 !important;}
  html body .sticker-layer-item > .sticker-layer-number {translate:-1px 0 !important;}
  html body .sticker-layer-item > .sticker-layer-remove {translate:4px 0 !important;}
  html body #account-modal .modal-close {translate:12px 18px !important;}
  html body #account-modal .profile-subform .profile-button-soft > span {
    width:31px !important; height:16px !important; translate:-7px -2px !important;
  }
  /* Keep all positions static through theme swap; only color/paint animates. */
  html body .header-actions, html body .preview-header,
  html body .preview-stage, html body .preview-nav,
  html body .purchase-options, html body #member-welcome,
  html body #merchant-store-button {
    transition-property:background-color,color,border-color,box-shadow,opacity !important;
  }
}
/* Between 511 and 700 there is no legacy zoom: narrower typography is not
   artificially downscaled, and the preview fills its containing column. */
@media (min-width:511px) and (max-width:700px) {
  html body main.main-layout > section.preview-section > .preview-stage .phone {
    width:min(100%,375px) !important;
  }
  html body main.main-layout > section.preview-section > .preview-header > h1 {left:clamp(20px,5vw,34px) !important;}
}
/* Modal, purchase summaries and rails must remain reachable on small devices. */
@media (max-width:380px) {
  html body main.main-layout > section.preview-section > .preview-stage {
    grid-template-columns:50px minmax(0,1fr) 50px !important;
  }
  html body main.main-layout > section.preview-section > .preview-stage > .preview-nav {
    width:50px !important; min-width:50px !important; max-width:50px !important;
  }
}

@media (max-width:700px) {
:is(main.main-layout > section.preview-section:nth-of-type(2) > div.selected-info:nth-of-type(9)):is(main.main-layout > section.preview-section:nth-of-type(2) > div.selected-info:nth-of-type(9)){margin-top:8px !important; translate:none !important;}
}

@media (max-width:700px) {
:is(main.main-layout > section.preview-section:nth-of-type(2) > div.preview-header:nth-of-type(2) > h1):is(main.main-layout > section.preview-section:nth-of-type(2) > div.preview-header:nth-of-type(2) > h1){width:23px !important; translate:none !important; rotate:180deg !important; position:absolute !important; left:28px !important; top:56px !important; writing-mode:vertical-rl !important; white-space:nowrap !important;}
}

@media (max-width:700px) {
:is(main.main-layout > section.preview-section:nth-of-type(2) > div.preview-header:nth-of-type(2)):is(main.main-layout > section.preview-section:nth-of-type(2) > div.preview-header:nth-of-type(2)){width:100% !important; height:28px !important; translate:none !important;}
}

@media (max-width:700px) {
:is(main.main-layout > section.preview-section:nth-of-type(2) > div.preview-stage:nth-of-type(4)):is(main.main-layout > section.preview-section:nth-of-type(2) > div.preview-stage:nth-of-type(4)){margin-top:0 !important; translate:none !important; z-index:1 !important;}
}

@media (max-width:700px) {
:is(main.main-layout > section.preview-section:nth-of-type(2) > div.purchase-type:nth-of-type(3) > div.purchase-options):is(main.main-layout > section.preview-section:nth-of-type(2) > div.purchase-type:nth-of-type(3) > div.purchase-options){translate:none !important; top:auto !important; margin:0 auto !important;}
}
/* V372 late precedence over V328 double-ID rule, which otherwise keeps the
   old 348px-wide model pill and shifts it 78px below the intended anchor. */
@media (max-width:700px) {
  :is(#device-name-display):is(#device-name-display) {
    display:block !important; position:absolute !important; z-index:61 !important;
    top:39px !important; left:50% !important; right:auto !important; bottom:auto !important;
    width:277px !important; max-width:64% !important; min-width:0 !important;
    height:18px !important; min-height:18px !important; max-height:18px !important;
    padding:0 !important; margin:0 !important; margin-top:0 !important;
    translate:none !important; transform:translateX(-50%) !important;
    font-size:12px !important; line-height:18px !important;
    white-space:nowrap !important; text-align:center !important;
  }
  /* Same merchant placement as editor screenshot: shown beside orders in the
     welcome row; anchor to header, not to page height or an unrelated widget. */
  html body header.topbar .header-actions #merchant-store-button:not(.hidden) {
    position:absolute !important; top:calc(100% + 15px) !important;
    left:36px !important; right:auto !important; bottom:auto !important;
    width:74px !important; min-width:74px !important; max-width:74px !important;
    height:33px !important; min-height:33px !important; max-height:33px !important;
    padding:0 5px !important; margin:0 !important;
    border-radius:23px !important; translate:none !important; transform:none !important;
    z-index:120 !important;
  }
}
/* Last-mile alignment with the supplied 481px screenshot. The 28px header
   artwork overlays the top of the stage: it must not create 28px of empty
   space between purchase tabs and the phone preview. */
@media (max-width:700px) {
  html body main.main-layout > section.preview-section > .preview-header {
    height:0 !important; min-height:0 !important; max-height:0 !important;
    overflow:visible !important; margin:0 auto !important;
  }
  html body main.main-layout > section.preview-section > .preview-header h1 {
    top:28px !important;
  }
  html body main.main-layout > section.preview-section > .preview-header #device-name-display,
  :is(#device-name-display):is(#device-name-display) {top:9px !important;}
  html body main.main-layout > section.preview-section > .preview-stage {
    padding-bottom:81px !important;
  }
  html body header.topbar > .header-title {
    position:absolute !important; top:26px !important; left:50% !important;
    right:auto !important; bottom:auto !important;
    width:max-content !important; max-width:70% !important; height:auto !important;
    margin:0 !important; padding:0 !important; font-size:10px !important;
    line-height:1.2 !important; white-space:nowrap !important;
    text-align:center !important; translate:none !important;
    transform:translateX(-50%) !important;
  }
  html body header.topbar .header-actions #merchant-store-button:not(.hidden) {
    left:80px !important;
  }
}
@media (max-width:700px) {
  :is(main.main-layout > section.preview-section:nth-of-type(2) > div.preview-header:nth-of-type(2)):is(main.main-layout > section.preview-section:nth-of-type(2) > div.preview-header:nth-of-type(2)) {
    height:0 !important; min-height:0 !important; max-height:0 !important;
  }
  :is(main.main-layout > section.preview-section:nth-of-type(2) > div.preview-header:nth-of-type(2) > h1):is(main.main-layout > section.preview-section:nth-of-type(2) > div.preview-header:nth-of-type(2) > h1) {
    top:28px !important;
  }
  :is(header.topbar > div.header-title:nth-of-type(2)):is(header.topbar > div.header-title:nth-of-type(2)) {
    translate:none !important; margin-top:0 !important; width:max-content !important;
    height:auto !important;
  }
}
/* Root cause of dark/light layout drift: legacy light-theme stylesheet added
   5px padding to preview-section only in light mode. The mobile center column
   must have identical content box sizing in both themes. */
@media (max-width:700px) {
  html body main.main-layout > section.preview-section,
  html[data-theme="light"] body main.main-layout > section.preview-section,
  body[data-theme="light"] main.main-layout > section.preview-section,
  html[data-theme="dark"] body main.main-layout > section.preview-section,
  body[data-theme="dark"] main.main-layout > section.preview-section {
    padding:0 !important;
  }
}