/* CASESTUDIO V333 — preserve the V328 490px composition down to 250px. */
@media (min-width: 250px) and (max-width: 510px) {
  html, body { max-width: 100%; }
  body { overflow-x: hidden; }
  header.topbar,
  main.main-layout {
    width: 490px !important;
    max-width: none !important;
    transform-origin: top left;
  }
  header.topbar { margin-left: 0 !important; margin-right: 0 !important; }
  main.main-layout { margin-left: 0 !important; margin-right: 0 !important; }
}


/* V337: stabilize purchase-mode controls. Position and dimensions belong to the
   shared group; selected/hover/focus states may change appearance only. */
@media (min-width: 250px) and (max-width: 510px) {
  main.main-layout .purchase-type {
    position: relative !important;
    min-width: 0 !important;
  }
  main.main-layout .purchase-type .purchase-options {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 3px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important;
    translate: 0 -747px !important;
    transform: none !important;
    z-index: 367 !important;
    overflow: visible !important;
  }
  main.main-layout .purchase-type .purchase-options > button.purchase-option {
    display: flex !important;
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    inset: auto !important;
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    height: 27px !important; min-height: 27px !important; max-height: 27px !important;
    margin: 0 !important; padding: 2px 1px !important;
    box-sizing: border-box !important;
    flex: none !important;
    align-items: center !important; justify-content: center !important;
    overflow: hidden !important;
    white-space: normal !important; overflow-wrap: anywhere !important;
    line-height: 1.05 !important;
    translate: none !important; transform: none !important; rotate: none !important;
    transition-property: color, background-color, border-color, box-shadow !important;
    z-index: 368 !important;
  }
  main.main-layout .purchase-type .purchase-options > button.purchase-option > strong,
  main.main-layout .purchase-type .purchase-options > button.purchase-option > span {
    display: block !important;
    min-width: 0 !important; max-width: 100% !important;
    margin: 0 !important; padding: 0 !important;
    font-size: clamp(7px, 1.9vw, 9px) !important;
    line-height: 1.05 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
    transform: none !important; translate: none !important;
  }
  main.main-layout .purchase-type .purchase-options > button.purchase-option:hover,
  main.main-layout .purchase-type .purchase-options > button.purchase-option:active,
  main.main-layout .purchase-type .purchase-options > button.purchase-option:focus,
  main.main-layout .purchase-type .purchase-options > button.purchase-option:focus-visible,
  main.main-layout .purchase-type .purchase-options > button.purchase-option.active {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    width: 100% !important;
    height: 27px !important; min-height: 27px !important; max-height: 27px !important;
    translate: none !important; transform: none !important; rotate: none !important;
    scale: 1 !important;
  }
}


/* V338: prevent selection/click layout shifts in the purchase-mode control group.
   The group is intentionally translated to its designed mobile position; keep that
   translation on the group only and prevent focus/active state or scroll anchoring
   from changing its geometry. */
@media (min-width: 250px) and (max-width: 510px) {
  html body main.main-layout > section.preview-section .purchase-type,
  html body main.main-layout > section.preview-section .purchase-type .purchase-options {
    overflow-anchor: none !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
  }
  html body main.main-layout > section.preview-section .purchase-type .purchase-options {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    width: 100% !important;
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !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:focus-visible,
  html body main.main-layout > section.preview-section .purchase-type .purchase-options > button.purchase-option.active {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
    margin: 0 !important;
    padding: 2px 1px !important;
    border-width: 1px !important;
    position: relative !important;
    inset: auto !important;
    translate: none !important;
    transform: none !important;
    rotate: none !important;
    scale: 1 !important;
    animation: none !important;
    transition: color .14s ease, background-color .14s ease, border-color .14s ease, box-shadow .14s ease !important;
  }
}

/* V341: stronger narrow-screen vertical correction.
   The entire main layout is zoomed by viewportWidth/490, so the CSS-pixel offset
   must be larger at narrow widths. Keep the correction isolated to 250–360px. */
@media (min-width: 250px) and (max-width: 360px) {
  html body main.main-layout > section.preview-section .purchase-type .purchase-options {
    translate: 0 calc(-785px + 4vw) !important;
  }
}


/* V342: inset the purchase buttons slightly so all three stay inside their
   surrounding purchase-type container. Keep the existing group position and
   button dimensions; only reduce the group's width and center it. */
@media (min-width: 250px) and (max-width: 510px) {
  html body main.main-layout > section.preview-section .purchase-type .purchase-options {
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
    box-sizing: border-box !important;
  }
}